html - Javascripthtml5 play multiple audio files or overlap audio - Stack Overflow

admin管理员组

文章数量:1296921

Let me start by saying I am trying to play a mp3 file whenever the player collides with a wall, simple enough and done. But I wish to have another sound file play when the player hits another wall. I have tried using both <audio> tag in the html file, than playing it in Javascript:

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

Still the same issue, only one sound can be played, the next sound won't play untill the first one is finished. Even when using multiple <audio> tags and multiple sounds. Next I have tried using codes similar too:

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

Than playing it with: sound.play(); But still the same issue: I can't play sound2.play(); or sound3.play(); before the first sound has finished. Any answers/ suggestions are much appreciated. If there isn't a way to do this on every browser maybe some tips on how too stop all the sounds in order to play a new sound would be nice. Though I would much rather go with the original question.

Let me start by saying I am trying to play a mp3 file whenever the player collides with a wall, simple enough and done. But I wish to have another sound file play when the player hits another wall. I have tried using both <audio> tag in the html file, than playing it in Javascript:

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

Still the same issue, only one sound can be played, the next sound won't play untill the first one is finished. Even when using multiple <audio> tags and multiple sounds. Next I have tried using codes similar too:

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

Than playing it with: sound.play(); But still the same issue: I can't play sound2.play(); or sound3.play(); before the first sound has finished. Any answers/ suggestions are much appreciated. If there isn't a way to do this on every browser maybe some tips on how too stop all the sounds in order to play a new sound would be nice. Though I would much rather go with the original question.

• javascript
• html
• audio
• html5-audio
• dom-events

Share Improve this question Follow edited Aug 24, 2019 at 18:46 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Aug 2, 2013 at 11:22 user2582299user2582299 31522 gold badges66 silver badges1515 bronze badges 2

• Did you manage to work this out perhaps? I have similar issues with sounds in browser still … If you have please consider answering my question here stackoverflow./questions/23006776/… – trainoasis Commented Apr 15, 2014 at 11:20
• See my question and answer here: stackoverflow./questions/16360874/… stackoverflow./questions/23006776/… – trainoasis Commented May 7, 2014 at 7:40

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

I found a pretty neat solution that utilizes pure JavaScript.

In my HTML File, I put two audio elements and a play audio buttons in the same 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>

In my JS file (you could use a script tag too), I put this code, which plays both of the files. Make sure that your audio src tags point to the right place!

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

本文标签： htmlJavascripthtml5 play multiple audio files or overlap audioStack Overflow