在 HTML 中播放其他音频时如何停止音频

在 HTML 中，我们可以使用 <audio> 标签来播放音频。但如果我们想在播放当前音频的同时，停止其他正在播放的音频，应该怎么做呢？

1. 使用 JavaScript

我们可以通过 JavaScript 控制音频的播放和停止。关键是需要知道如何获取当前正在播放的音频。以下是一个示例代码，可以在播放新音频前停止所有其他的音频：

// 获取所有的 <audio> 标签
const audios = document.getElementsByTagName("audio");

// 遍历所有的 <audio> 标签
for (let i = 0; i < audios.length; i++) {
  const audio = audios[i];

  // 如果当前的 <audio> 标签正在播放，停止它
  if (!audio.paused) {
    audio.pause();
    audio.currentTime = 0;
  }
}

// 播放新的音频
const newAudio = document.getElementById("new-audio");
newAudio.play();

2. 使用第三方库

除了手动编写 JavaScript 后，我们也可以使用一些第三方库来简化代码，例如 Howler.js。以下是一个使用 Howler.js 的示例代码：

// 创建一个新的音频实例
const newAudio = new Howl({
  src: ["audio.mp3"]
});

// 停止所有的其他 Howl 实例
Howler.stop();

// 播放新的音频
newAudio.play();

总结

使用 JavaScript 或第三方库可以方便地控制在 HTML 中播放音频时停止其他正在播放的音频。如果需要停止所有的音频，可以使用 document.getElementsByTagName("audio") 或类似的 API 来获取所有的 <audio> 标签。