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();。任何答案/建议都非常感谢。如果没有办法在每个浏览器上执行此操作，可能会有一些关于如何停止所有声音以播放新声音的提示将会很好。虽然我更愿意回答原来的问题。

Answer 1

Howler.js提供了一个很好的库，用于为游戏启动跨浏览器的声音精灵，应该这样做！

Answer 2

我发现了一个非常简洁的解决方案，它使用纯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</input>

在我的JS文件中（你也可以使用脚本标签），我把这个代码放在一起，它会播放这两个文件。确保您的音频src标签指向正确的位置！

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

希望这有帮助！

Javascript / html5播放多个音频文件或重叠音频

2 个答案: