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

Question

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
```
跟踪其播放/暂停状态。如果您在外部状态下跟踪它，如果您的变量和音频元素的状态不同步，则会增加进一步的复杂性和错误空间。
避免将
```
<script>
```
放入
```
<div>
```
中。在所有 HTML 标签都关闭之后，
```
<script>
```
通常是
```
<body>
```
或
```
<head>
```
的子级（在本例中可能是
```
<body>
```
）。
```
onclick
```
通常是不好的做法。 HTML 应该是结构性的，而不是行为性的。同样，
```
style="width: 40%;cursor:pointer"
```
应移至外部样式表并应用于类。
```
.children[0];
```
是选择轨道中音频元素的一种脆弱方法。如果您最终重新排列 div 中的元素，则此代码很容易被破坏。
```
document.querySelector("#BSong audio")
```
对于重构来说更加精确和稳健，尽管使用类而不是 id 可以更轻松地实现动态性，因此您不必手动输入每个轨道。
CSS 类通常是 kebab-case，所以
```
hover_pic
```
将是
```
hover-pic
```
。

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

问题描述投票：0回答：2

2个回答

最新问题

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

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2