HTML 5 Audio Tag Più file

Sto cercando di avere due file in un tag audio HTML 5 che si riproducano uno dopo l’altro. Il codice che ho finora è:

Il problema che sto avendo al momento è che solo il primo file verrà riprodotto e terminato, è come se non ci fosse un secondo file. Non appena finisce il primo brano, non fa altro.

C’è un modo per far suonare automaticamente la seconda traccia quando termina la prima? Ho bisogno che sia in HTML così come lo è per un sito mobile, quindi alcuni codici potrebbero non funzionare su alcuni dispositivi

In javascript puoi farlo in questo modo (questo è solo per iniziare):

 audio = new Audio("start url"); audio.addEventListener('ended',function(){ audio.src = "new url"; audio.pause(); audio.load(); audio.play(); });

se vuoi puoi anche usare lo stesso giocatore (jquery):

 var audio = $("#player");

L’aggiunta di più fonti al tag non funziona in questo modo. Puoi usarlo per fornire la fonte in più formati (alcuni browser non supportano mp3 – ad esempio Firefox non supporta mp3 e devi fornire il file ogg)

Campione:

Il tuo caso è diverso. Stai provando a creare una playlist. Puoi creare una playlist da solo:

http://www.lastrose.com/html5-audio-video-playlist/

http://jonhall.info/how_to/create_a_playlist_for_html5_audio

O semplicemente usa plugin di terze parti come:

http://www.jplayer.org/latest/demo-02-jPlayerPlaylist/

L’uso di jPlayer risolve anche il problema di compatibilità del browser. Ad esempio se fornisci semplicemente il formato .mp3, passerà alla versione flash quando l’utente naviga con Firefox.

Con qualche javascript puoi fare un trucco

Ecco un esempio , un altro

 jQuery(function($) { var supportsAudio = !!document.createElement('audio').canPlayType; if(supportsAudio) { var index = 0, playing = false; mediaPath = 'http://jonhall.info/how_to/assets/media/audio/', extension = '', tracks = [ {"track":1,"name":"Happy Birthday Variation: In the style of Beethoven","length":"00:55","file":"01_Happy_Birthday_Variation_In_The"}, {"track":2,"name":"Wedding March Variation 1","length":"00:37","file":"02_Wedding_March_1"}, {"track":3,"name":"Happy Birthday Variation: In the style of Tango","length":"01:05","file":"03_Happy_Birthday_Variation_In_The"}, {"track":4,"name":"Wedding March Variation 2","length":"00:40","file":"04_Wedding_March_2"}, {"track":5,"name":"Random Classical","length":"00:59","file":"05_AFI_com"} ], trackCount = tracks.length, npAction = $('#npAction'), npTitle = $('#npTitle'), audio = $('#audio1').bind('play', function() { playing = true; npAction.text('Now Playing:'); }).bind('pause', function() { playing = false; npAction.text('Paused:'); }).bind('ended', function() { npAction.text('Paused:'); if((index + 1) < trackCount) { index++; loadTrack(index); audio.play(); } else { audio.pause(); index = 0; loadTrack(index); } }).get(0), btnPrev = $('#btnPrev').click(function() { if((index - 1) > -1) { index--; loadTrack(index); if(playing) { audio.play(); } } else { audio.pause(); index = 0; loadTrack(index); } }), btnNext = $('#btnNext').click(function() { if((index + 1) < trackCount) { index++; loadTrack(index); if(playing) { audio.play(); } } else { audio.pause(); index = 0; loadTrack(index); } }), li = $('#plUL li').click(function() { var id = parseInt($(this).index()); if(id !== index) { playTrack(id); } }), loadTrack = function(id) { $('.plSel').removeClass('plSel'); $('#plUL li:eq(' + id + ')').addClass('plSel'); npTitle.text(tracks[id].name); index = id; audio.src = mediaPath + tracks[id].file + extension; }, playTrack = function(id) { loadTrack(id); audio.play(); }; extension = audio.canPlayType('audio/mpeg') ? '.mp3' : audio.canPlayType('audio/ogg') ? '.ogg' : ''; loadTrack(index); } $('#useLegend').click(function(e) { e.preventDefault(); $('#use').slideToggle(300, function() { $('#useSpanSpan').text(($('#use').css('display') == 'none' ? 'show' : 'hide')); }); }); });

       Paused:
 
 
    
     
 
   #
 Title
 Length
 
 
   1
 Happy Birthday Variation: In the style of Beethoven
 0:55
 
  2
 Wedding March Variation 1
 0:37
 
  3
 Happy Birthday Variation: In the style of Tango
 1:05
 
  4
 Wedding March Variation 2
 0:40
 
  5
 Random Classical
 0:59

Grazie a jonhall.info e Thirumalai murugan per fornire un esempio.

 jQuery(function($) { var supportsAudio = !!document.createElement('audio').canPlayType; if(supportsAudio) { var index = 0, playing = false, tracks = [ {"track":1,"name":"SoundHelix Song 1","length":"06:12","file":"https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"}, {"track":2,"name":"SoundHelix Song 3","length":"05:44","file":"https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3"}, {"track":3,"name":"SoundHelix Song 8","length":"05:25","file":"https://www.soundhelix.com/examples/mp3/SoundHelix-Song-8.mp3"} ], trackCount = tracks.length, npAction = $('#npAction'), npTitle = $('#npTitle'), audio = $('#audio1').bind('play', function() { playing = true; npAction.text('Now Playing:'); }).bind('pause', function() { playing = false; npAction.text('Paused:'); }).bind('ended', function() { npAction.text('Paused:'); if((index + 1) < trackCount) { index++; loadTrack(index); audio.play(); } else { audio.pause(); index = 0; loadTrack(index); } }).get(0), btnPrev = $('#btnPrev').click(function() { if((index - 1) > -1) { index--; loadTrack(index); if(playing) { audio.play(); } } else { audio.pause(); index = 0; loadTrack(index); } }), btnNext = $('#btnNext').click(function() { if((index + 1) < trackCount) { index++; loadTrack(index); if(playing) { audio.play(); } } else { audio.pause(); index = 0; loadTrack(index); } }), loadTrack = function(id) { $('.plSel').removeClass('plSel'); $('#plTrack>div:eq(' + id + ')').addClass('plSel'); npTitle.text(tracks[id].name); index = id; audio.src = tracks[id].file; }, displayTrack = function(){ var parent = $('#plTrack'); $.each(tracks, function(i, track) { $('
').addClass('row') .append($('
').addClass('col-sm').text(track.track)) .append($('
').addClass('col-sm').text(track.name)) .append($('
').addClass('col-sm').text(track.length)) .appendTo(parent); }); }, playTrack = function(id) { loadTrack(id); audio.play(); }; displayTrack(); loadTrack(index); } });

 #plTrack .plSel { font-weight: bold; } .header { color: #999; border-bottom: 1px solid #999; }

       Paused:
 
 
    
     
 
   #
 Title
 Length