<!DOCTYPE html>
<html lang="en">
<div class="alert text-center" role="alert">
<i class="fas fa-volume-mute pause-btn" id="volume-toggler"></i>
<span id="song">DaBaby - BOP</span>
<i class="fas fa-forward forward"></i>
</div>
<audio id=”audio” preload=auto>
<source src=”” type=”audio/mp3”> Your browser does not support the audio element.
</audio>
let song = document.getElementById(‘audio’);
let title = document.getElementById(‘song’);
let numberOfSong = 0;
let playlist = [ [‘path-to-mp3’, ‘artist info’], [‘path-to-mp3’, ‘artist-info’]];
function play(){
song.play();
}
$('.pause-btn').click(() => {
play();
})
$(‘.pause-btn’).click(() => {
let pauseOrPlay = $(‘.pause-btn’);
if(pauseOrPlay.hasClass(‘fas fa-volume-up’) || pauseOrPlay.hasClass(‘fa-volume-up fas’) {
//do something
}
})
$(‘.pause-btn’).click(() => {
let pauseOrPlay = $(‘.pause-btn’);
if(pauseOrPlay.hasClass(‘fas fa-volume-mute’) || pauseOrPlay.hasClass(‘fa-volume-mute fas’) {
if(song.duration > 0){
playCurrentSong();
} else {
next();
}
}
})
$(‘.pause-btn’).click(() => {
let pauseOrPlay = $(‘.pause-btn’);
if (pauseOrPlay.hasClass(‘fas fa-volume-mute’) || pauseOrPlay.hasClass(‘fa-volume-mute fas’)) {
$(‘.pause-btn’).toggleClass(‘fas fa-volume-up fas fa-volume-mute’);
if (song.duration > 0) {
playCurrentSong();
} else {
next();
}
} else if (pauseOrPlay.hasClass(‘fas fa-volume-up’) || pauseOrPlay.hasClass(‘fa-volume-up fas’)) {
$(‘.pause-btn’).toggleClass(‘fas fa-volume-up fas fa-volume-mute’);
pauseSong();
}
});
$(‘.forward’).click(() => {
next();
});
function next() {
if (numberOfSong === playlist.length) {
numberOfSong = 0;
}
song.src = playlist[numberOfSong][0];
title.innerHTML = playlist[numberOfSong][1];
numberOfSong++;
song.load();
song.play();
}
function pauseSong() {
song.pause();
}
function playCurrentSong() {
song.play();
}
<div class=”progress”>
<div class=”progress-bar” role=”progressbar” aria-valuenow=”30" aria-valuemin=”0" aria-valuemax=”100"></div>
</div>
song.addEventListener(‘timeupdate’, onLoadProgress);
function onLoadProgress(){
var progress = parseInt(((song.currentTime / song.duration) * 100), 10);
var progressToString = ‘’ + progress + ‘%’;
$(‘.progress-bar’).attr(‘aria-valuenow’, progressToString);
$(‘.progress-bar’).css(‘width’, progressToString);
}
</body>
</html>
