HTML 5 Audio Tag Multiple Files

Question

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

Answer 1

Adding multiple sources to tag doesn't work this way. You can use it to providing the source in multiple formats.(some browsers don't support mp3 - i.e. Firefox doesn't support mp3 and you should provide ogg file)

Sample:

<audio>
   <source src="" id="oggSource" type="audio/ogg" />
   <source src="" id="mp3Source" type="audio/mpeg" />
   Your browser does not support the audio element.
</audio>

Your case is different. You are trying to make a playlist. You can make a playlist by yourself:

http://www.lastrose.com/html5-audio-video-playlist/

http://jonhall.info/how_to/create_a_playlist_for_html5_audio

OR simply use third party plugins like:

http://www.jplayer.org/latest/demo-02-jPlayerPlaylist/

Using jPlayer would solve the browser compatibility issue too. For instance if you just provide .mp3 format, it will switch to flash version when user is browsing with Firefox.