Question

我已经在这个论坛上看了几天，但找不到适合我的确切情况的任何内容。我知道一些javascript / jquery，但我不会称自己擅长这种语言......

我有一个列表，其中包含从数据库中动态提取的mp3文件，我不希望它能够同时播放多首歌曲。问题是，我不知道如何编写代码以及＃34;停止所有其他歌曲，除了连接到此播放按钮的那些歌曲时按下＆＃34;。太令人沮丧..

我的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();

然后我读了一些关于在播放连接到播放按钮的音频之前停止所有音频的内容。但我不知道如何收集＆＃34;所有这些都让我可以一次停止（暂停和重置）。

我试过这个，但是这需要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

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

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

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

我会做什么：

迭代“.song”元素，为每个元素创建一个音频标签他们。
将侦听器添加到其中包含的按钮（不需要对于索引，您可以将“.song”元素作为参数传递给表明元素的搜索在“.song”内元件）。
存储创建的音频元素的引用。
当用户按下播放元素时，请停止其余歌曲迭代音频参考数组。

希望它有所帮助。

$(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>

停止所有音频，但选择一个（动态创建的音频元素）

1 个答案: