Javascript 播放 Div 中的所有音频元素

Posted 2023-02-25

【中文标题】Javascript 播放 Div 中的所有音频元素

【英文标题】：Javascript Play All Audio Elements in a Div

【发布时间】：2017-09-09 05:03:28

【问题描述】：

我正在使用 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 中的所有歌曲。谢谢！

【参考方案1】：

您可以选择感兴趣的<div> 中的所有<audio> 元素，然后对它们循环调用每个元素上的.play()。这会错误地同时播放所有音频文件，但您可以使用onended 事件等待每次播放完成，然后再继续播放下一个。

这是一个旁白，但我建议将所有数据保存在一个数组中，然后循环遍历它以生成元素。这样可以使代码更多DRY。

这是一个最小的示例/概念验证，您可以适应您相对复杂的代码库：

const srcs = [
  "https://upload.wikimedia.org/wikipedia/commons/3/33/Annoyed.ogg",
  "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 侦听器，该侦听器检查一个标志以确定是否触发下一个兄弟音频元素的播放（如果存在），然后按钮翻转标志并对当前正在播放的任何音频元素进行操作（例如例如，暂停它）。