Music playlist with Pause and play

Asked

Viewed 1,094 times

1

Hello, I need to make a music playlist with Html5 in my researches I found many playlist, but, none of them have pause in the playlist itself. For example, I found this link http://jonhall.info/examples/html5_audio_playlist_example.html, and you can notice that you can play the songs but you can’t pause the music on the playlist itself. How do I put a play and pause button on each track of music and when I click the next one to stop playing?

html5 list

  • But what is the question?

  • @Renan already asked the question

  • I think it will help you: [http://www.codebasehero.com/2011/07/html5-music-player-updated/] or [http://mediaelementjs.com/] or [http://www.shoutmeloud.com/best-html5-audio-players.html]

1 answer

2

Pretty quiet to do with JS. Here has the complete list of attributes and methods for audio and video elements.

HTML

<button type="button" id="play">Play</button>

JS

var player = document.getElementById('player'); // tag audio
var button = document.getElementById('play'); // botão play/pause

function play() {
    player.play();
    button.textContent = "Pause";
}

function pause() {
    player.pause();
    button.textContent = "Play";
}

button.addEventListener('click', function(){
    if (player.paused) {
        play();
    } else {
        pause();
    }
});

And in the roles that change the music, just call play() and pause(). (Obviously this is a simple example, in pure JS, can be adapted to your project).

  • thanks I’ll try

Browser other questions tagged html5 list

You are not signed in. Login or sign up in order to post.