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
By adding more "<audio>" tags you can add more audio players in the browser using HTML5...
The HTML <audio> element is used to play an audio file on a web page.
Since the release of HTML5, audios can be added to webpages using the “audio” tag. Previously, audios could be only played on web pages using web plugins like Flash. The “audio” tag is an inline element that is used to embed sound files into a web page.
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");
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With