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

安静的地方

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

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

代码弗兰克

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

我建议您与其他建议一起使用ID和按钮上的data-attribute属性，该属性引用音频目标的ID，以便它知道要绑定到哪个音频元素。这样的事情应该起作用：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。