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

I've got a web app that needs to play a handful of sounds. The app is intended primarily for mobile devices. As it stands I'm creating an <audio> element for each sound I need and triggering the play() method of each with javascript. I'd prefer to have all the sounds in one audio element, each being a different source, something along the line of:

我有一个需要播放少量声音的网络应用程序。该应用程序主要用于移动设备。我正在为我需要的每个声音创建一个

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

and trigger each source by calling something like .play("click1.ogg").

I can't afford to change the source with javascript and wait for the new source to load; the sounds need to be loaded with the page.
Is there a solution similar to what I've written above or should I stick with different audio elements for different sounds?
As a secondary question, am I taking a performance hit by defining multiple audio elements?

并通过调用.play（“click1.ogg”）之类的东西来触发每个源。我无法用javascript更改源代码并等待新源加载;声音需要加载页面。是否有类似于我上面所写的解决方案，或者我应该为不同的声音坚持使用不同的音频元素？作为次要问题，我是通过定义多个音频元素来获得性能影响吗？

2 个解决方案

#1

You should use different audio elements. The source tags in the audio element are made because of browser and system compatibility. It will automatically select the format which is provided by browser and system (ogg, mpeg, avi or wmv).

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

To your second question... You aren't taking a performance hit because just one source of all sources in the audio element will be loaded.

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

#2

I up voted mic because it is a good answer! Here is an example of how I did what he suggested.

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

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

html

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

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

#1