Search code examples
htmlhtml5-audio

HTML 5 Audio Tag Multiple Files


I am trying to have two files in one HTML 5 Audio Tag that play one after the other. The code I have so far is:

<audio id="ListenLive" controls autoplay>
<source src="advert.mp3" type="audio/mpeg">
<source src="stream.mp3" type="audio/mpeg">

</audio>

The issue I am having at the moment is that only the first file will play and end, it is like there is no second file. As soon as the first song ends it does nothing else.

Is there a way to get the second track to play automatically when the first one ends? I need it to be in HTML as it is for a mobile site so some code may not work on some devices


Solution

  • In javascript you can do it like this (this is just to get you started):

    audio = new Audio("start url");
    
      audio.addEventListener('ended',function(){
            audio.src = "new url";
            audio.pause();
            audio.load();
            audio.play();
        });
    

    if you want you can also use the same player(jquery):

    var audio = $("#player");