Everything seems to be working fine until I click on playsong1. The code executes as expected for the first click, but when clicked again, instead of progressing to the conditions after the } else { statement, it re-triggers the same conditions (replaying the audio track from 00:00). I'm trying to make it function more like a 'play/pause' button. What am I missing here?
playsong1.addEventListener("click", function () {
song1.classList.add("song-boxes-active");
song4.classList.remove("song-boxes-active");
song2.classList.remove("song-boxes-active");
song5.classList.remove("song-boxes-active");
song3.classList.remove("song-boxes-active");
song6.classList.remove("song-boxes-active");
playsong1.innerHTML = "<i class='fa fa-pause-circle-o'></i>";
playsong4.innerHTML = "<i class='fa fa-play-circle-o'></i>";
playsong2.innerHTML = "<i class='fa fa-play-circle-o'></i>";
playsong5.innerHTML = "<i class='fa fa-play-circle-o'></i>";
playsong3.innerHTML = "<i class='fa fa-play-circle-o'></i>";
playsong6.innerHTML = "<i class='fa fa-play-circle-o'></i>";
if (playlist_index !== 0) {
audio.src = dir + playlist[0] + ext;
playlist_status.innerHTML = playlist[0];
playlist_index = 0;
playPause();
console.log('cond1');
} else if ((!audio.paused) && playlist_index === 0) {
playPause();
playsong1.innerHTML = "<i class='fa fa-play-circle-o'></i>";
playbtn.innerHTML = "<i class='fa fa-play'></i>";
console.log('cond2');
} else if((audio.paused) && playlist_index === 0) {
playsong1.innerHTML = "<i class='fa fa-pause-circle-o'></i>";
playPause();
console.log('cond3');
}
});
//original code posted
//playsong1.addEventListener("click", function () {
// audio.src = dir + playlist[0] + ext; playlist_status.innerHTML = //playlist[0];
//if (audio.paused) {
// song1.classList.add("song-boxes-active");
// song2.classList.remove("song-boxes-active");
// song3.classList.remove("song-boxes-active");
// playsong1.innerHTML = "<i class = 'fa fa-pause-circle-o'></i>";
// audio.play();
// } else {
// audio.pause();
// playsong1.innerHTML = "<i class = 'fa fa-play-circle-o'></i>";
// playbtn.innerHTML = "<i class = 'fa fa-play'></i>";
// document.getElementById("glow").classList.add("disable-animation");
// }
//});