連續播放聲音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/