Javascript 在一个 Div 中播放所有音频元素

Question

我正在使用 bootstrap3_player 在我的站点上实现音频播放器。它运行良好，但缺少“播放所有歌曲”的功能——我必须单击每首歌曲才能播放。我将歌曲整理成专辑。单击专辑会打开一个折叠窗口，其中会显示各个歌曲。这是相册 div 的样子。

<div class="collapse" id="album2">
  <audio controls="" data-info-att="Candy">
    <source src="albums/tulip16/Candy.mp3" type="audio/mpeg">
    <a href="albums/tulip16/Candy.mp3">Candy</a> 
    An html5-capable browser is required to play this audio.
  </audio> 
  <audio controls="" data-info-att="My Red Corvette">
    <source src="albums/tulip16/My_Red_Corvette.mp3" type="audio/mpeg"> 
    <a href="albums/tulip16/My_Red_Corvette.mp3">My Red Corvette</a>
    An html5-capable browser is required to play this audio.
  </audio> 
  <audio controls="" data-info-att="Winkie Don't Go">
    <source src="albums/tulip16/Winkie_Don't_Go.mp3" type="audio/mpeg"> 
    <a href="albums/tulip16/Winkie_Don't_Go.mp3">Winkie Don't Go</a> 
    An html5-capable browser is required to play this audio.    
  </audio> 
  <audio controls="" data-info-att="Rain Stop Comin Down">
    <source src="albums/tulip16/Rain_Stop_Comin_Down.mp3" type="audio/mpeg"> 
    <a href="albums/tulip16/Rain_Stop_Comin_Down.mp3">Rain Stop Comin Down</a>
    An html5-capable browser is required to play this audio.
  </audio> 
  <audio controls="" data-info-att="Tulip">
    <source src="albums/tulip16/Tulip.mp3" type="audio/mpeg"> 
    <a href="albums/tulip16/Tulip.mp3">Tulip</a> 
    An html5-capable browser is required to play this audio.    
  </audio> 
  <audio controls="" data-info-att="Independence Game">
    <source src="albums/tulip16/Independence_Game.mp3" type="audio/mpeg"> 
    <a href="albums/tulip16/Independence_Game.mp3">
    Independence Game</a> An html5-capable browser is required to play this audio.
  </audio> 
  <audio controls="" data-info-att="Horoscope"><source src="albums/tulip16/Horoscope.mp3" type="audio/mpeg"> 
    <a href="albums/tulip16/Horoscope.mp3">Horoscope</a>
     An html5-capable browser is required to play this audio.
  </audio> 
  <audio controls="" data-info-att="Sometimes I Cry"><source src="albums/tulip16/Sometimes_I_Cry.mp3" type="audio/mpeg"> 
    <a href="albums/tulip16/Sometimes_I_Cry.mp3">Sometimes I Cry</a> 
    An html5-capable browser is required to play this audio.
  </audio> 
  <audio controls="" data-info-att="I Don't Know (Why She Did That to You)">
    <source src="albums/tulip16/I_Don't_Know_(Why_She_Did_That_To_You).mp3" type="audio/mpeg"> 
    <a href="albums/tulip16/I_Don't_Know_(Why_She_Did_That_To_You).mp3">I Don't Know (Why She Did That to You)</a> 
    An html5-capable browser is required to play this audio.
  </audio> 
  <audio controls="" data-info-att="Show Me Tonight">
    <source src="albums/tulip16/Show_Me_Tonight.mp3" type="audio/mpeg"> 
    <a href="albums/tulip16/Show_Me_Tonight.mp3">Show Me Tonight</a> 
    An html5-capable browser is required to play this audio.
  </audio> 
  <audio controls="" data-info-att="Slums of San Marino">
    <source src="albums/tulip16/Slums_of_San_Marino.mp3" type="audio/mpeg"> 
    <a href="albums/tulip16/Slums_of_San_Marino.mp3">Slums of San Marino</a> 
    An html5-capable browser is required to play this audio.
  </audio>
</div>

这是 bootstrap3_player js 的链接。 https://github.com/iainhouston/bootstrap3_player/blob/master/js/bootstrap3_player.js 有人可以告诉我如何将“播放所有歌曲”功能添加到 bootstrap3_palyer.js 或者我如何创建一个单独的 HTML5 网络音频功能，让我可以播放 div 中的所有歌曲。谢谢！

Answer 1

您可以选择感兴趣的

<audio>

中的所有

<div>

元素，然后在它们上循环调用

.play()

对每个元素。这会错误地同时播放所有音频文件，但您可以使用

onended

事件等待每次播放完成，然后再继续下一个。

这是题外话，但我建议将所有数据保存在一个数组中，然后遍历它以生成元素。这使代码更加DRY.

这里有一个最小的例子/概念验证，你可以适应你看起来相对复杂的代码库：

const srcs = [
  "https://upload.wikimedia.org/wikipedia/commons/2/2e/En-us-Wikipedia.ogg",
  "https://upload.wikimedia.org/wikipedia/commons/a/a1/De-Johann_Sebastian_Bach.ogg",
  "https://upload.wikimedia.org/wikipedia/commons/9/90/De-Wolfgang_Amadeus_Mozart.ogg",
  "https://upload.wikimedia.org/wikipedia/commons/8/8e/Drums.ogg",
];

for (const src of srcs) {
  const audio = document.createElement("audio");
  document.querySelector("#sounds").append(audio);
  audio.controls = "controls";
  audio.src = src;
}

document
  .querySelector("#play-all")
  .addEventListener("click", async e => {
    const sounds = document.querySelectorAll("#sounds audio");
    
    for (const sound of sounds) {
      const ended = new Promise(resolve =>
        sound.addEventListener("ended", resolve, {once: true})
      );
      sound.play();
      await ended;
    }
  })
;

<button id="play-all">Play all</button>
<div id="sounds"></div>

通过一些额外的簿记，修改它应该很容易，例如让用户切换自动播放。您可以向每个音频元素添加一个永久的

onended

侦听器，该侦听器检查标志以确定是否触发下一个同级音频元素的播放（如果存在），然后按钮翻转标志并对当前正在播放的音频元素进行操作（对于例如，暂停它）。