如何构建一个按钮来单击并播放/停止音频？

Question

我想构建一个播放音频的图像按钮。 我的版本可以工作，但当我想在一个网站上多次使用它时，它只播放一个 mp3，而不播放其他 mp3。

我的代码：

<audio loop="false" src="audio_01.mp3">&nbsp;</audio>

<p><img alt="" class="hover_pic" src="image.png" style="width: 40%;cursor:pointer" /></p>
<script>
  var aud = document.getElementById("ASong").children[0];
  var isPlaying = false;
  aud.pause();

  function playPause() {
    if (isPlaying) {
      aud.pause();
    } else {
      aud.play();
    }
    isPlaying = !isPlaying;
  }
</script></div>

那么

<div id="BSong" onclick="playPause()" type="button">
<audio loop="false" src="audio_02.mp3">&nbsp;</audio>

<p><img alt="" class="hover_pic" src="image.png" style="width: 40%;cursor:pointer" /></p>
<script>
  var aud = document.getElementById("BSong").children[0];
  var isPlaying = false;
  aud.pause();

  function playPause() {
    if (isPlaying) {
      aud.pause();
    } else {
      aud.play();
    }
    isPlaying = !isPlaying;
  }
</script></div>

您知道该按钮仅在网站上播放其中之一的问题是什么吗？

Answer 1

您多次使用相同的变量名称，例如 aud、isPlayig 等。

要解决此问题，您应该仅声明一次整个脚本并形成 onclick="playPause()" 发送您要播放的歌曲的 id 。

请注意是否已经有一些音乐正在播放。

Answer 2

很难说出当前的两个代码片段是如何相对彼此排列的，但是每次您想要添加另一个轨道时一遍又一遍地复制代码将是难以维护的。就目前情况而言，isPlaying 和 aud 的变量可能会相互覆盖，具体取决于它们的布局方式，即使它们位于不同的脚本中。在脚本顶部使用 const 或 let 代替 var 和 use strict; 可以帮助检测这些别名。

您可以在每个元素周围添加闭包以保持它们不同，但更好的方法是编写一个循环（也充当作用域闭包）并动态地将侦听器添加到每个元素。例如：

const trackEls = [...document.querySelectorAll(".track")];

for (const trackEl of trackEls) {
  const audioEl = trackEl.querySelector("audio");
  trackEl.addEventListener("click", () => {
    audioEl.paused ? audioEl.play() : audioEl.pause();
  });
}

<div class="tracks">
  <div type="button" class="track">
    <audio src="https://upload.wikimedia.org/wikipedia/commons/d/d8/Bourne_woods_2020-11-18_0732.mp3"></audio>
    <img alt="play track icon" src="https://picsum.photos/50/50" class="track-icon">
  </div>
  <div type="button" class="track">
    <audio src="https://upload.wikimedia.org/wikipedia/commons/e/ea/Rapid-Acoustic-Survey-for-Biodiversity-Appraisal-pone.0004065.s017.ogg"></audio>
    <img alt="play track icon" src="https://picsum.photos/50/50" class="track-icon">
  </div>
</div>

请注意，上面的代码允许同时播放多个音频文件。如果您想在单击新音频元素时停止所有其他音频元素并重置其时间，可以使用循环或额外变量来跟踪当前正在播放的曲目。例如：

const trackEls = [...document.querySelectorAll(".track")];
let currentTrack;

for (const trackEl of trackEls) {
  const audioEl = trackEl.querySelector("audio");
  trackEl.addEventListener("click", () => {
    if (audioEl !== currentTrack) {
      if (currentTrack) {
        currentTrack.pause();
        currentTrack.currentTime = 0;
      }

      currentTrack = audioEl;
    }

    audioEl.paused ? audioEl.play() : audioEl.pause();
  });  
}

<div class="tracks">
  <div type="button" class="track">
    <audio src="https://upload.wikimedia.org/wikipedia/commons/d/d8/Bourne_woods_2020-11-18_0732.mp3"></audio>
    <img alt="play track icon" src="https://picsum.photos/50/50" class="track-icon">
  </div>
  <div type="button" class="track">
    <audio src="https://upload.wikimedia.org/wikipedia/commons/e/ea/Rapid-Acoustic-Survey-for-Biodiversity-Appraisal-pone.0004065.s017.ogg"></audio>
    <img alt="play track icon" src="https://picsum.photos/50/50" class="track-icon">
  </div>
</div>

关于您的代码的一些注释：

• 不需要 isPlaying 变量，因为 audio 元素已经使用 audioElement.paused 跟踪其播放/暂停状态。如果您在外部状态下跟踪它，如果您的变量和音频元素的状态不同步，则会增加进一步的复杂性和错误空间。
• 避免将
• HTML 元素上的 onclick 通常是不好的做法。 HTML 应该是结构性的，而不是行为性的。同样，style="width: 40%;cursor:pointer" 应移动到外部样式表并应用于类。
• .children[0]; 是选择轨道中音频元素的一种脆弱方法。如果您最终重新排列 div 中的元素，则此代码很容易被破坏。 document.querySelector("#BSong audio") 的重构更加精确和稳健，尽管使用类而不是 id 可以更轻松地实现动态性，因此您不必手动输入每个曲目。
• CSS 类通常是短横线大小写，因此 hover_pic 将是 hover-pic。