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

时间:2017-09-09 05:03:29

标签: javascript jquery html html5 audio

我使用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 有人可以指出我如何添加“播放所有歌曲”#39; bootstrap3_palyer.js的功能或者我如何创建一个单独的HTML5网络音频功能,让我可以播​​放div中的所有歌曲。谢谢!

0 个答案:

没有答案