Search code examples
htmlaudiohtml5-audio

can't queue two audio tags

I am trying to play two sounds so the first one is played, then the second one.

I tried to search online, but it didn't help since the question isn't common and/or it is hard to phrase it both informative and short.

I did this, but of of course this didn't help and it played the two audio files at the same time.

<audio autoplay src="sound_1.mp3">
<audio autoplay src="sound_2.mp3">

Edit

It would be very useful if instead of making a queue, you silence the second audio until the first one is finished. But a normal queue works too.

Solution

  • There is an ended event, by using that you can play the next audio.

    const audio_1 = document.getElementById("audio1");
audio_1.play();
audio_1.onended = function() {
  const audio_2 = document.getElementById("audio2");
  audio_2.play();
};
    <audio id='audio1' src='sound1.mp3'>
<audio id='audio2' src='sound2.mp3'>