Multi-track HTML5 audio player
HTML
<a href="#" id="play" class="player-control">Play</a>
<a href="#" id="pause" class="player-control">Pause</a>
<a href="#" id="next" class="player-control">Next</a>
<a href="#" id="prev" class="player-control">Prev</a>
JavaScript
var tracklist = [
{
src: 'https://cdn.alquran.cloud/media/audio/ayah/fr.leclerc/1'},
{
src: 'https://cdn.alquran.cloud/media/audio/ayah/fr.leclerc/2'}
];
var player = false;
var track = 1;
var lastTrack = -1;
var play = function() {
if (lastTrack != track) {
player.src = tracklist[track - 1].src;
}
lastTrack = track;
if (player.paused) {
player.play();
}
};
$(document).ready(function() {
player = document.createElement('audio');
$('a.player-control').click(function(event) {
event.preventDefault();
});
$('#play').click(function() {
play();
});
$('#pause').click(function() {
if (!player.paused) {
player.pause();
}
});
$('#next').click(function() {
track++;
if (track > tracklist.length) {
track = 1;
}
play();
});
$('#prev').click(function() {
track--;
if (track < 1) {
track = tracklist.length;
}
play();
});
});