Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 559
Alex Avatar asked Aug 16 '13 13:08

Alex


People also ask

How do you add multiple songs in HTML?

By adding more "<audio>" tags you can add more audio players in the browser using HTML5...

What is the correct HTML5 element for playing audio files?

The HTML <audio> element is used to play an audio file on a web page.

Can I play audio in HTML5?

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.


1 Answers

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");
like image 198
Kimtho6 Avatar answered Sep 17 '22 10:09

Kimtho6