Воспроизведение звуков последовательно HTML5

Question

В HTML5 есть ли простой способ сгруппировать аудиоклипы? Я надеюсь сыграть 3 чрезвычайно коротких mp3s последовательно, но, к сожалению, это ключ к тому, что между ними нет отставания. Мне также нужно иметь одну кнопку воспроизведения для всех них. Благодаря тому, кто знает,

N

Answer 1

Вы не можете сделать это полностью с HTML5, вам нужно будет добавить JQuery или какой-либо другой Java-библиотеки, чтобы помочь вам сделать это. Недавно я создал мобильное веб-приложение, которое использовало в качестве отправной точки this учебник. Вы можете посмотреть пример 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/