Javascript/HTML5 如何播放多个音频文件或者让音频重叠？

Question

首先，我想说我正在尝试在玩家与墙碰撞时播放一个mp3文件，这很简单且已完成。但是我希望当玩家撞到另一面墙时播放另一个声音文件。 我尝试在HTML文件中使用<audio>标签，然后在Javascript中播放它：

var sound = document.getElementById("TheHtml5Tag");

问题依旧存在，只能播放一个音频文件，第二个音频文件要等到第一个音频文件播放完才能播放。即使使用多个 <audio> 标签和多个音频文件也是如此。

接下来，我尝试了类似以下的代码：

sound = new Audio('Wall_Hit_01.mp3'); 
sound.addEventListener('ended', function() {
    this.currentTime = 0;
}, false);

与 sound.play(); 不同的是：我无法在第一个声音播放完成之前播放 sound2.play(); 或者 sound3.play();。非常感谢任何答案/建议。如果没有办法在每个浏览器上都实现此目标，也许一些停止所有声音以便播放新声音的提示会很不错。虽然我更愿意回到最初的问题。

- user2582299

---

你最近解决了这个问题吗？我在浏览器中仍然遇到类似的声音问题...如果你解决了，请考虑在这里回答我的问题https://dev59.com/QX7aa4cB1Zd3GeqPsZ3W。 - trainoasis

请查看我的问题和答案：http://stackoverflow.com/questions/16360874/dynamically-created-html5-audio-is-not-playable-in-some-browsers/23511373#23511373https://dev59.com/QX7aa4cB1Zd3GeqPsZ3W - trainoasis

Answer 1

我找到了一个非常棒的解决方案，它利用纯JavaScript实现。

在我的HTML文件中，我将两个音频元素和一个播放音频按钮放在同一个div中。

<div id="audioplay">
<audio id='audio1' src="ex1.wav" type="audio/wav" preload="auto" autobuffer controls ></audio>
<audio id='audio2' src="ex2.wav" type="audio/wav" preload="auto" autobuffer controls></audio>
<button id='playaudio' onclick='playAudio()'>Play Audio</button>

在我的JS文件中（您也可以使用脚本标记），我放置了以下代码，用于播放这两个文件。确保您的音频src标记指向正确的位置！

function playAudio(){
    var audio1 = document.getElementById('audio1');
    var audio2 = document.getElementById('audio2');
    audio1.play();
    audio2.play();
}

- user5619242

Answer 2

"Howler.js为游戏提供了一个很好的库，可以触发跨浏览器的声音精灵，应该能解决问题！"

- jsantell

---

这是一个很好的声音库。 - VjyV