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

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

document.querySelector（`.button`）。addEventListener（`click`，event=>{
让icon=document.querySelector（`.button i`）；
让声音=document.querySelector（`.sound`）；
icon.classList.toggle（`fa pause`）；
icon.classList.toggle（`faplay`）；
if（icon.classList.contains（`fa pause`））{
声音。播放（）；
} 
否则{
声音。暂停（）；
}
});

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

我建议您使用您的另一个建议，即在按钮上使用ID和数据属性，该属性引用音频目标的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>

document.addEventListener（'click'，event=>{
//如果目标不是.audio按钮，则不执行任何操作
如果（！event.target.classList.contains（'audio-button'））
返回false；
//如果目标是.audio按钮
let button=event.target；
让audioTarget=button.getAttribute（'data-audio-target'）；//获取要启动的音频元素的ID
让声音=document.getElementById（audioTarget）；
button.classList.toggle（`fapause`）；
button.classList.toggle（`faplay`）；
if（button.classList.contains（`fa pause`））{
声音。播放（）；
} 
否则{
声音。暂停（）；
}
});

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

我建议您使用您的另一个建议，即在按钮上使用ID和数据属性，该属性引用音频目标的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>

document.addEventListener（'click'，event=>{
//如果目标不是.audio按钮，则不执行任何操作
如果（！event.target.classList.contains（'audio-button'））
返回false；
//如果目标是.audio按钮
let button=event.target；
让audioTarget=button.getAttribute（'data-audio-target'）；//获取要启动的音频元素的ID
让声音=document.getElementById（audioTarget）；
button.classList.toggle（`fapause`）；
button.classList.toggle（`faplay`）；
if（button.classList.contains（`fa pause`））{
声音。播放（）；
} 
否则{
声音。暂停（）；
}
});

移除

并将

包裹在

标签周围。这听起来很奇怪，但是像

或

这样的交互元素更容易与像

这样的阶段化元素挂钩。细节在演示中进行了注释

顺便说一句，在播放视频或音频以及有关承诺的内容时，您可能会遇到错误。我已经为该错误添加了修复程序，您可能需要在页面上有音频/视频时使用它。这不是一个bug，它是一个功能删除

并将

包裹在

标记周围。这听起来很奇怪，但是像

或

这样的交互元素更容易与像

这样的阶段化元素挂钩。细节在演示中进行了注释

---

顺便说一句，在播放视频或音频以及有关承诺的内容时，您可能会遇到错误。我已经为该错误添加了修复程序，您可能需要在页面上有音频/视频时使用它。这不是一个bug，这是一个我不熟悉的使用数据属性的特性，所以我在尝试让它工作时有些迷失。请问我如何使用按钮上的数据属性来引用音频目标的ID。当然，数据属性基本上是自定义标记，可以放置在html元素上，用于存储额外信息。我已经更新了代码，以使用您的示例的更多内容将其置于上下文中。谢谢。这看起来很棒，但是图标没有为我出现。我认为这可能是因为元素中没有添加class=“fa-fa-play”，但当我添加它时，播放器停止工作？？我试图最小化示例中的代码，以强调数据-*属性的使用。类需要位于充当按钮的元素上，而不是音频元素。我更新了这个示例，以展示实现这些类的方法。这与您最初的示例非常相似。我不熟悉如何使用数据属性，因此在尝试使其正常工作时有些不知所措。请问我如何使用按钮上的数据属性来引用音频目标的ID。当然，数据属性基本上是自定义标记，可以放置在html元素上，用于存储额外信息。我已经更新了代码，以使用您的示例的更多内容将其置于上下文中。谢谢。这看起来很棒，但是图标没有为我出现。我认为这可能是因为元素中没有添加class=“fa-fa-play”，但当我添加它时，播放器停止工作？？我试图最小化示例中的代码，以强调数据-*属性的使用。类需要位于充当按钮的元素上，而不是音频元素。我更新了这个示例，以展示实现这些类的方法。这与您最初的示例非常相似。