多個聲音與單個HTML5音頻元素

我有一個網絡應用程序，需要播放一些聲音。該應用主要用於移動設備。現在，我爲每個我需要的聲音創建一個<audio>元素，並使用javascript觸發每個聲音的play()方法。我寧願把所有的聲音在一個音頻元素，每一個都是不同的源，沿着線的東西：多個聲音與單個HTML5音頻元素

<audio controls="controls" preload="auto" id="audioPlayer"> 
    <source src="click1.ogg" type="audio/ogg" /> 
    <source src="click2.ogg" type="audio/ogg" /> 
</audio>

，並通過調用類似.play("click1.ogg")觸發每個源。

我不能用javascript更改源代碼，並等待新源加載;聲音需要加載頁面。
有沒有類似於我上面寫的解決方案，或者我應該堅持不同的音頻元素爲不同的聲音？
作爲第二個問題，我是否通過定義多個音頻元素來實現性能提升？

來源

2012-02-04 joelmdev

您應該使用不同的音頻元素。音頻元素中的源標籤是由於瀏覽器和系統兼容性而製作的。它會自動選擇瀏覽器和系統提供的格式（ogg，mpeg，avi或wmv）。

對於第二個問題...您沒有進行性能測試，因爲音頻元素中只有一個源會被加載。

來源

2012-02-04 19:27:03 noob

我投了話筒，因爲這是一個很好的答案！這是我如何做他建議的一個例子。

http://jsfiddle.net/earlonrails/tTF89/6/

HTML

<audio controls="controls" width="300px" id="audioPlayer"> 
    <!-- load broken audio --> 
    <source type="audio/mpeg" src="http://www.google.com/4/0/4" /> 
</audio>

的JavaScript

var urlOne = 'http://www.tonycuffe.com/mp3/tail%20toddle.mp3', 
    urlTwo = 'http://freeplaymusic.com/search/download_file.php?id=4&dur=0&type=mp3'; 

function attrs(element, attributes) { 
    for (var prop in attributes) { 
     element.setAttribute(prop, attributes[prop]); 
    } 
} 

function reloadAudioTag(path, player, holder) { 
    if (player) player.parentNode.removeChild(player); 

    var player = document.createElement('audio'), 
     source = document.createElement('source'); 

    source.type = "audio/mpeg" 
    attrs(player, { 
     "width": "300px", 
      "controls": "controls", 
      "autoplay": "autoplay", 
      "id": 'audioPlayer' 
    }); 
    player.appendChild(source); 
    if (holder) { 
     holder.insertBefore(player, holder.childNodes[0]); 
    } else { 
     document.body.appendChild(player); 
    } 
    source.src = path; 
    player.load(); 
    return player; 
} 

console.log("called!"); 
reloadAudioTag(urlOne, document.getElementById("audioPlayer")); 
console.log("Still going!"); 
setTimeout(function() { 
    reloadAudioTag(urlTwo, document.getElementById("audioPlayer")); 
    console.log("Finished!"); 
}, 5000);

來源

2013-05-13 23:59:42 earlonrails

多個聲音與單個HTML5音頻元素

回答

相關問題