多个声音与单个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音频元素

回答

相关问题