Music playlist with Pause and play

Question

Music playlist with Pause and play

Navigation

#1 by (2 votes)

1

Hello, I need to make a playlist of music with html5 in my searches I found many playlist, but none of them has pause in the playlist itself. For example, I found this link link, and you may notice that you can skip the songs but can not pause the song on own playlist. How do I put a play and pause button on each music track and when do I click on the next one to play?

html5 lista

asked by anonymous 16.02.2015 / 22:03

1 answer

How to add and remove items from a json easily? Add fadein effect to this jquery code

score 2 · Answer 1

Pretty cool to do with JS. Here has the full 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 functions that change the music, just call play() and pause() . (Obviously this is a simple example, in pure JS, and can be adapted to your project.)