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

Javascript/html5 play multiple audio files or overlap audio

本文关键字：音频 文件 重叠 html5 播放 Javascript      更新时间：2023-09-26

让我首先说，每当播放器撞到墙上时，我都会尝试播放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();。非常感谢您的回答/建议。如果没有办法在每个浏览器上都这样做，也许一些关于如何停止所有声音以播放新声音的提示会很好。尽管我更愿意回答最初的问题。

我发现了一个使用纯JavaScript的非常整洁的解决方案。

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

<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();
}
相关文章：