CODEWITHSUNDEEP
htmlhtml5-audioplaylist
Marian
Marian

Reputation: 191

How can you create an auto playlist with the HTML5 Audio tag?

How can you create an auto playlist with the audio tag from HTML5?

What I'm trying to achieve is a player with only the play/pause button big 30x25 px, the player autoplays when the page loads and when the song ends it'll play the next song automatically. Trying to have 3-4 songs in a playlist.

Upvotes: 2

Views: 7936

Answers (2)

Sk93
Sk93

Reputation: 3718

I'm using similar code to the following on my site to play a continuous playlist of audio on my site: 

<script type="text/javascript">
        var nextVideo = "/Link/To/Next/File.mp3";
        var audioPlayer = document.getElementById('audio_with_controls');
        audioPlayer.addEventListener('ended', PlayNext);

        function PlayNext() {
            audioPlayer.src = nextVideo;
            audioPlayer.play();
        }
</script>

It would be very easy for you to add an array of files that you could loop through (using arrays etc). You could also have the playlist displayed to the user, with each track being a clickable link that would call JS to change the player's "src" property.

Hope this helps!

Upvotes: 3

shanabus
shanabus

Reputation: 13115

Check out this post: using jquery + <audio> w/ php/mysql to loop playback times

var sfx = new Audio('sfx.wav');
var sounds = a.addTextTrack('metadata');

// add sounds we care about
sounds.addCue(new TextTrackCue('dog bark', 12.783, 13.612, '', '', '', true));
sounds.addCue(new TextTrackCue('kitten mew', 13.612, 15.091, '', '', '', true));

function playSound(id) {
  sfx.currentTime = sounds.getCueById(id).startTime;
  sfx.play();
}

I just updated this with a better example of using cues as specified here: http://dev.w3.org/html5/spec/Overview.html

Upvotes: 2

Related Questions