时间戳

首页 > 解决方案 > 'else' 不适用于 eventListener

javascript - 'else' 不适用于 eventListener

问题描述

该函数的第一部分似乎工作正常，当单击playsong1 时，代码执行。再次单击时，不会转到 } else { 之后的条件，而是再次触发相同的条件。（音轨从 00:00 开始重播）。我希望它像“播放/暂停”按钮一样工作。我究竟做错了什么？

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

标签： javascripthtmlcss

解决方案

您src在单击事件开始时设置 <audio> 元素。
这将强制音频自动暂停。

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">

推荐阅读