javascript - 简单音频播放器的多个实例

Question

我一直在为一个简单的音频播放器使用此代码，但我注意到它只允许页面上的一个播放器(第二个按钮不起作用)。它确实使用类而不是 id，但可能使用 querySelector 是一个问题。理想情况下，我想在页面上有几个，所以想知道如何使用这种编码风格(即在没有 JQuery 的情况下使用 Font Awesome )来解决这个问题。

<audio src="http://bornemark.se/bb/mp3_demos/PoA_Sorlin_-_Stay_Up.mp3" class="sound" loop></audio>
<a href="#" class="button"><i class="fa fa-play" aria-hidden="true"></i></a> <br>

<audio src="http://bornemark.se/bb/mp3_demos/PoA_Sorlin_-_Stay_Up.mp3" class="sound" loop></audio>
<a href="#" class="button"><i class="fa fa-play" aria-hidden="true"></i></a>

    <script>
      document.querySelector(`.button`).addEventListener(`click`, event => {
      let icon = document.querySelector(`.button i`); 
      let sound = document.querySelector(`.sound`);

      icon.classList.toggle(`fa-pause`);
      icon.classList.toggle(`fa-play`);

       if (icon.classList.contains(`fa-pause`)) {
        sound.play();
        } 
      else {
        sound.pause();
      }
    });
    </script>

Answer 1

我认为主要问题在于 querySelector，因为这只会获得 .sound 的第一个实例。 querySelectorAll 将返回所有 .sound 元素的数组，但这也不起作用。它可能根本不会播放任何东西。

我建议您采用其他建议，即在引用音频目标 ID 的按钮上使用 ID 和 data- 属性，这样它就知道要绑定(bind)到哪个音频元素。像这样的东西应该工作:

<audio id="audio-1" src="address/of/file" loop></audio>
<i data-audio-target="audio-1" class="audio-button fa fa-play"></i><br/>

<audio id="audio-2" src="address/of/file" loop></audio>
<i data-audio-target="audio-2" class="audio-button fa fa-play"></i>

<script>
  document.addEventListener('click', event => {

    // Do nothing if the target was not an .audio-button
    if (!event.target.classList.contains('audio-button'))
      return false;

    // If the target was an .audio-button
    let button = event.target;
    let audioTarget = button.getAttribute('data-audio-target'); // Gets the ID of the audio element that you want to start
    let sound = document.getElementById(audioTarget);

    button.classList.toggle(`fa-pause`);
    button.classList.toggle(`fa-play`);

    if (button.classList.contains(`fa-pause`)) {
      sound.play();
    } 
    else {
      sound.pause();
    }
  });
</script>