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

Question

我已经在这个论坛上四处看了几天，但找不到任何适合我的确切情况的东西。我知道一些 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++;
}

这是我的 js 文件：

var count = 0;

$('.song').each(function() {
  var filename = 'songs/' + $(this).data('filename');
  var audioElement = document.createElement('audio');

  audioElement.setAttribute('src', filename);

  $('.play' + count).click(function(){
    audioElement.play();
    // I need to put something here to make all the other songs pause/reset //
  });

  $('.stop' + count).click(function(){
    audioElement.pause();
    audioElement.currentTime = 0;
  });

  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;
  }
} 

Answer 1

也许有点晚，但迟到总比没有好。

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

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

我会做什么：

1. 遍历“.song”元素，为每个元素创建一个音频标签 他们。

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

3. 存储创建的音频元素的引用。

4. 当用户按下播放元素时，停止播放其余歌曲 遍历音频引用的数组。

希望对你有帮助。

$(function() {
  var folder = "http://www.mashuptown.com/files/",
    audioTags = [];

  function stop(audioTag) {
    audioTag.pause();
    audioTag.currentTime = 0;
  }

  function stopAll() {
    audioTags.forEach(function(audioTag) {
      stop(audioTag);
    });
  }

  function addListeners(audioTag, $song) {
    $('.play', $song).click(function() {
      stopAll();
      audioTag.play();
    });

    $('.stop', $song).click(function() {
      stop(audioTag);
    });
  }

  function getAudioTag(src) {
    var audioTag = document.createElement('audio');
    audioTag.setAttribute('src', src);
    return audioTag;
  }

  $(".song").each(function() {
    var audioTag = getAudioTag(folder + $(this).data('filename')),
      $song = $(this);

    addListeners(audioTag, $song);
    audioTags.push(audioTag);
    $song.append(audioTag);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <ul>
    <li data-filename="dj_morgoth_never_gonna_give_your_teen_spirit_up.mp3" class="song">
      <button class="play">Play</button>
      <button class="stop">Stop</button>teen spirit
    </li>
    <li data-filename="dj_morgoth_never_gonna_give_your_teen_spirit_up.mp3" class="song">
      <button class="play">Play</button>
      <button class="stop">Stop</button>teen spirit 2
    </li>
  </ul>
</div>