the 'else' is not working on eventListener

Question

The first part of the function seems to be working fine, when playsong1 is clicked, code executes. When clicked again, instead of going to the conditions after the } else { it fires the same conditions again. (the audio track replays from 00:00). I want it to function like a 'play/pause' button. What am I doing wrong?

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");
// }
//});

From the looks of it, you're not properly setting `audio.paused` to `true` from `audio.pause()`. — selfagency, Jun 23 '21 at 02:45
Can you provide a codepen here? My guess is that you will have to take reference of audio.paused via a getter (for e.g. isAudioPaused()) so that the value is updated time every the event is triggered. If you just pass simply audio.paused like this, it will be read just one time when the listener is initiated. — Phạm Huy Phát, Jun 23 '21 at 02:56
Just to clarify, none of the code after the 'else' is executing, its just as if only the first part of the function is there. — Mo Howler, Jun 23 '21 at 03:50
@MoHowler this is because your audio always has its `.paused` property set to true, because you set its `src` right before (see my answer below). So since `.paused` is always `true`, the `else` branch is never taken. — Kaiido, Jun 23 '21 at 04:25
hey guys, I came up with a solution after some tinkering, thanks for the tips... Ill post the code up for interest's sake, feel free to toast or roast the code!! — Mo Howler, Jun 24 '21 at 01:49

score 3 · Answer 1 · answered Jun 23 '21 at 02:51

You are setting the src of the <audio> element at the beginning of the click event.
This will force the audio to pause automatically.

const audio = document.querySelector("audio");
const button = document.querySelector("button");

button.onclick = async (evt) => {
  await audio.play();
  console.log( "before", audio.paused ); // false
  audio.src = audio.src; // even if set to the same value
  console.log( "after", audio.paused ); // true
};

<button>click me</button>
<audio controls src="https://upload.wikimedia.org/wikipedia/en/transcoded/d/dc/Strawberry_Fields_Forever_%28Beatles_song_-_sample%29.ogg/Strawberry_Fields_Forever_%28Beatles_song_-_sample%29.ogg.mp3">

the 'else' is not working on eventListener

1 Answers1