Javascript 停止除所选音频之外的所有音频（动态创建的音频元素）

我已经在这个论坛上浏览了几天了，但是找不到任何适合我具体情况的东西。我知道一些javascript/jquery，但我不认为自己擅长这种语言

我有一个从数据库动态获取mp3文件的列表，我不希望它能够同时播放多首歌曲。问题是，我不知道如何编写“当按下此播放按钮时，停止除连接到此播放按钮的歌曲外的所有其他歌曲”的代码。太令人沮丧了

我的php文件：

$result = mysqli_query($link, "SELECT * FROM songs");

$count = 0;
while($row = mysqli_fetch_array($result)) {
    $title = $row['title'];
    $filename = $row['filename'];

    echo '<li data-filename="' . $filename . '" class="song">
            <button class="play' . $count . '">Play</button>
            <button class="stop' . $count . '">Stop</button>'
            . $title .
         '</li>';

    $count++;
}

因为我真的不知道该怎么办，所以我尝试了很多方法，比如：

$(this).siblings().audioElement.pause();

audioElement.siblings().pause();

然后我读了一些关于在播放连接到播放按钮的音频之前停止所有音频的内容。但我不知道如何“收集”所有这些数据，以便我可以立即停止（暂停并重置）

我试过这个，但那需要html5标记，所以它不起作用

function stopAll() {
  var xGroup = document.querySelectorAll('audio');

  for (var i = 0; i < xGroup.length; i++) {
   xGroup[i].pause();
   xGroup[i].currentTime = 0;
  }
} 

函数stopAll（）{
var xGroup=document.querySelectorAll（'audio'）；
对于（变量i=0；i

可能有点晚，但迟做总比不做好

为了停止其余的音频元素，必须在数组中保留对它们的引用

这样，当用户在另一个音频标签上单击“播放”时，您可以停止所有这些操作

我要做的是：

迭代“.song”元素，为每个元素创建一个音频标记 他们

将侦听器添加到其中包含的按钮（无需 对于索引，可以将“.song”元素作为参数传递给 指示元素的搜索在“.song”中 元素）

存储创建的音频元素的引用

当用户按下播放元素时，停止其余歌曲 迭代音频引用数组

希望能有帮助

$（函数（）{
var文件夹=”http://www.mashuptown.com/files/",
音频标签=[]；
功能停止（音频标签）{
audioTag.pause（）；
audioTag.currentTime=0；
}
函数stopAll（）{
audioTags.forEach（函数（audioTag）{
停止（音频标签）；
});
}
函数addListeners（audioTag，$song）{
$（'.play'，$song）。单击（函数（）{
stopAll（）；
audioTag.play（）；
});
$（'.stop'，$song）。单击（函数（）{
停止（音频标签）；
});
}
函数getAudioTag（src）{
var audioTag=document.createElement（'audio'）；
setAttribute（'src'，src）；
返回音频标签；
}
$（“.song”）。每个（函数（）{
var audioTag=getAudioTag（文件夹+$（this）.data（'filename'）），
$song=$（本）；
addListeners（音频标签，$song）；
音频标签。推送（音频标签）；
$song.append（音频标签）；
});
});



玩
停止青少年精神


玩
停止青少年精神2


可能有点晚，但迟做总比不做好

为了停止其余的音频元素，必须在数组中保留对它们的引用

这样，当用户在另一个音频标签上单击“播放”时，您可以停止所有这些操作

我要做的是：

迭代“.song”元素，为每个元素创建一个音频标记
他们

将侦听器添加到其中包含的按钮（无需
对于索引，可以将“.song”元素作为参数传递给
指示元素的搜索在“.song”中
元素）

存储创建的音频元素的引用

当用户按下播放元素时，停止其余歌曲
迭代音频引用数组

希望能有帮助


$（函数（）{
var文件夹=”http://www.mashuptown.com/files/",
音频标签=[]；
功能停止（音频标签）{
audioTag.pause（）；
audioTag.currentTime=0；
}
函数stopAll（）{
audioTags.forEach（函数（audioTag）{
停止（音频标签）；
});
}
函数addListeners（audioTag，$song）{
$（'.play'，$song）。单击（函数（）{
stopAll（）；
audioTag.play（）；
});
$（'.stop'，$song）。单击（函数（）{
停止（音频标签）；
});
}
函数getAudioTag（src）{
var audioTag=document.createElement（'audio'）；
setAttribute（'src'，src）；
返回音频标签；
}
$（“.song”）。每个（函数（）{
var audioTag=getAudioTag（文件夹+$（this）.data（'filename'）），
$song=$（本）；
addListeners（音频标签，$song）；
音频标签。推送（音频标签）；
$song.append（音频标签）；
});
});



玩
停止青少年精神


玩
停止青少年精神2


我删除了我所有的代码，并开始使用
标签（一切正常），但很高兴终于有人回答了，这样我才能更好地理解事情的运作方式：）谢谢@acontell@Pixeldoris不客气：）如果你觉得它回答了问题，你可以将它标记为答案（或者你可以发布你的解决方案），以便其他人可以利用这个问题。谢谢我删除了我所有的代码，开始使用
标签来代替（一切正常），但很高兴有人终于回答了，这样我就可以更好地理解事情的工作原理了：）谢谢你@acontell@Pixeldoris不客气：）如果你觉得它回答了问题，你可以将它标记为答案（或者你可以发布你的解决方案），以便其他人可以利用这个问题。谢谢
function stopAll() {
  var xGroup = document.querySelectorAll('audio');

  for (var i = 0; i < xGroup.length; i++) {
   xGroup[i].pause();
   xGroup[i].currentTime = 0;
  }
}