Question

我正在尝试制作它，以便当您单击单独的元素时，它将暂停从其他元素播放的当前歌曲。另外，我以前做过，因此当您在播放音频后单击同一元素时，它将暂停音频，但是当您单击具有相同功能的其他元素时，它将中断。

var paused = true;
var song;
var songPlaying;

function playSong(x) {
     song = x;

     if(songPlaying != song){
         document.getElementById(songPlaying).pause();
     }

     if(paused == true){
         document.getElementById(song).play();
         paused = false;
         songPlaying = song;
     } else {
         document.getElementById(song).pause();
         paused = true;
     }
 }

反正我可以解决这个问题吗？我需要为每首歌曲都设置不同的功能吗？

编辑1：这里也是我正在使用的部分的HTML my，每个音频文件都有一个ID，该ID在onclick内部函数中称为参数

<div class="album">
    <img src="assets/BattalionsOfFear.png" onclick="playSong('bofSong')">
    <h1>Battalions of Fear</h1>
    <p>Released in 1988</p>
</div>

<div class="album">
    <img src="assets/FollowTheBlind.png" onclick="playSong('bfsSong')">
    <h1>Follow the Blind</h1>
    <p>Released in 1989</p>
</div>

<!--- Audio -->
<audio id="bofSong">
    <source src="assets/BattalionsOfFear.mp3">
</audio>

<audio id="bfsSong">
    <source src="assets/BanishFromSanctuary.mp3">
</audio>

编辑2：尝试Laif的解决方案我尝试将'song'类添加到HTML img元素中，并使用'song1'类将其链接到我的音频元素，但它仍然无法正常工作。我上的课错了吗？还是我把它们放下的方式？

<div class="album">
    <img src="assets/BattalionsOfFear.png" class="song song1">
    <h1>Battalions of Fear</h1>
    <p>Released in 1988</p>
</div>

<audio id="bofSong" class="song1">
    <source src="assets/BattalionsOfFear.mp3">
</audio>

Answer 1

每首歌曲应共享同一班级，以便您可以执行以下操作：

<html>
    <div class="song"></div>
    <div class="song"></div>
</html>

var songs = document.querySelectorAll(".song");

function playSong(e) {
  songs.forEach(el => {
    el.style.play();
  });
  e.currentTarget.pause();
};

songs.forEach(el => {
  el.addEventListener("click", playSong);
});

启动其他JavaScript时暂停另一首歌曲

1 个答案: