一键播放多个声音文件

Question

请问是否可以一键播放多个音频文件？从那里，我希望用户能够将每个音频文件静音，以便所有内容同时运行。

我在后端 Web 开发方面经验不多，所以如果能在正确的方向上推动一下，我们将不胜感激！

Answer 1

您只需单击一个按钮即可开始播放多个音频，只需对要开始的每个音频调用播放函数即可。

这个片段有几个音频元素。单击按钮时，它们各自调用了播放功能。

请注意，每一个都有控件属性，因此用户可以单独暂停它们。（由于每个音频都很短，因此每个演示都有循环）。

function playAll() {
  document.querySelector('.container').classList.add('playing');
  const audios = document.querySelectorAll('audio');
  audios.forEach(audio => {
    audio.play();
  });

}

.container {
  display: none;
}

.container.playing {
  display: block;
}

<button onclick="playAll();">Play them all</button>
<div class="container">
  <h2>Horse
  </h2> <audio src="https://www.w3schools.com/html/horse.mp3" controls loop></audio>
  <h2>Placeholder</h2> <audio src="https://ia903002.us.archive.org/18/items/placeholder/placeholder.mp3" controls loop></audio>
</div>

一键播放多个声音文件

Playing multiple sound files with one button

javascript

html

css

web