连续播放声音HTML5

Question

在HTML5中，是否有一种简单的方法将音频剪辑组合在一起？我希望能够连续播放3首非常短的mp3，但不幸的是，它们之间没有任何延迟是关键。我还需要为他们全部设置一个播放按钮。由于任何人谁知道，

ň

Answer 1

你不能用HTML5完全做到这一点，你将需要添加的jQuery或其他一些JavaScript库，帮助你做到这一点。我最近创建了一个使用this教程作为起点的移动Web应用程序。你可以看看一个例子here。基本上所有你需要做的就是修改HTML5音频播放器的默认功能，然后让它做你想做的事。

HTML：

<audio id="audio" preload="auto" tabindex="0" controls="" > 
    <source src="http://www.archive.org/download/bolero_69/Bolero.mp3"> 
    Your Fallback goes here 
</audio> 

<ul id="playlist"> 
     <li class="active"> 
      <a href="http://www.archive.org/download/bolero_69/Bolero.mp3"> 
       Ravel Bolero 
      </a> 
     </li> 
     <li> 
      <a href="http://www.archive.org/download/MoonlightSonata_755/Beethoven-MoonlightSonata.mp3"> 
       Moonlight Sonata - Beethoven 
      </a> 
     </li> 
     <li> 
      <a href="http://www.archive.org/download/CanonInD_261/CanoninD.mp3"> 
       Canon in D Pachabel 
      </a> 
     </li> 
     <li> 
      <a href="http://www.archive.org/download/PatrikbkarlChamberSymph/PatrikbkarlChamberSymph_vbr_mp3.zip"> 
       patrikbkarl chamber symph 
      </a> 
     </li> 
</ul> 

的jQuery：

var audio; 
var playlist; 
var tracks; 
var current; 

init(); 
function init(){ 
    current = 0; 
    audio = $('audio'); 
    playlist = $('#playlist'); 
    tracks = playlist.find('li a'); 
    len = tracks.length - 1; 
    audio[0].volume = .10; 
    playlist.find('a').click(function(e){ 
     e.preventDefault(); 
     link = $(this); 
     current = link.parent().index(); 
     run(link, audio[0]); 
    }); 
    audio[0].addEventListener('ended',function(e){ 
     current++; 
     if(current == len){ 
      current = 0; 
      link = playlist.find('a')[0]; 
     }else{ 
      link = playlist.find('a')[current];  
     } 
     run($(link),audio[0]); 
    }); 
} 
function run(link, player){ 
     player.src = link.attr('href'); 
     par = link.parent(); 
     par.addClass('active').siblings().removeClass('active'); 
     audio[0].load(); 
     audio[0].play(); 
} 

来源：http://blog.lastrose.com/html5-audio-video-playlist/