Question

我有一个需要播放少量声音的网络应用。该应用程序主要用于移动设备。我正在为我需要的每个声音创建一个<audio>元素，并使用javascript触发每个声音的play()方法。我希望将一个音频元素中的所有声音都放在一起，每个音频元素都是不同的来源，这些声音沿着以下几行：

<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更改源代码并等待新源加载;声音需要加载页面。
是否有类似于我上面写的解决方案，或者我应该为不同的声音添加不同的音频元素？
作为第二个问题，我是通过定义多个音频元素来打击性能吗？

Answer 1

你应该使用不同的音频元素。音频元素中的源标记是由于浏览器和系统兼容性而产生的。它会自动选择浏览器和系统提供的格式（ogg，mpeg，avi或wmv）。

对于你的第二个问题......你没有受到性能影响，因为只会加载音频元素中所有音源的一个来源。

Answer 2

我投了麦克风因为这是一个很好的答案！这是我如何做他建议的例子。

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);

单个HTML5音频元素的多个声音

2 个答案: