HTML 5 Tag audio più file

Question

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

<audio id="ListenLive" controls autoplay> 
<source src="advert.mp3" type="audio/mpeg"> 
<source src="stream.mp3" type="audio/mpeg"> 

</audio> 

Il problema che sto avendo in questo momento è che solo il primo file giocherà e fine, è come non c'è 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 di essere in HTML come lo è per un sito mobile in modo un po 'di codice non può funzionare su alcuni dispositivi

Answer 1

in javascript si può fare 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 si vuole si può anche utilizzare lo stesso giocatore (jQuery):

var audio = $("#player"); 

Answer 2

Con alcuni javascript si può fare un trucco

Ecco un sample, un'altra one

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')); 
    }); 
    }); 
}); 

<link href="http://jonhall.info/examples/html5_audio_playlist_example.css" rel="stylesheet"/> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 


<div id="content" role="main"> 
    <div id="cwrap"> 
    <div id="nowPlay" class="is-audio"> 
     <h3 id="npAction">Paused:</h3> 
     <div id="npTitle"></div> 
    </div> 
    <div id="audiowrap"> 
     <div id="audio0"> 
     <audio id="audio1" controls="controls"> 
      Your browser does not support the HTML5 Audio Tag. 
     </audio> 
     </div> 
     <noscript>Your browser does not support JavaScript or JavaScript has been disabled. You will need to enable JavaScript for this page.</noscript> 
     <div id="extraControls" class="is-audio"> 
     <button id="btnPrev" class="ctrlbtn">|&lt;&lt; Prev Track</button> <button id="btnNext" class="ctrlbtn">Next Track &gt;&gt;|</button> 
     </div> 
    </div> 
    <div id="plwrap" class="is-audio"> 
     <div class="plHead"> 
     <div class="plHeadNum">#</div> 
     <div class="plHeadTitle">Title</div> 
     <div class="plHeadLength">Length</div> 
     </div> 
     <div class="clear"></div> 
     <ul id="plUL"> 
     <li class="plItem"> 
      <div class="plNum">1</div> 
      <div class="plTitle">Happy Birthday Variation: In the style of Beethoven</div> 
      <div class="plLength">0:55</div> 
     </li> 
     <li class="plItem"> 
      <div class="plNum">2</div> 
      <div class="plTitle">Wedding March Variation 1</div> 
      <div class="plLength">0:37</div> 
     </li> 
     <li class="plItem"> 
      <div class="plNum">3</div> 
      <div class="plTitle">Happy Birthday Variation: In the style of Tango</div> 
      <div class="plLength">1:05</div> 
     </li> 
     <li class="plItem"> 
      <div class="plNum">4</div> 
      <div class="plTitle">Wedding March Variation 2</div> 
      <div class="plLength">0:40</div> 
     </li> 
     <li class="plItem"> 
      <div class="plNum">5</div> 
      <div class="plTitle">Random Classical</div> 
      <div class="plLength">0:59</div> 
     </li> 
     </ul> 
    </div> 
    </div> 
</div> 

Answer 3

L'aggiunta di più fonti per tag non funziona in questo modo. . Si può utilizzare per fornire la fonte in più formati (alcuni browser non supportano mp3 - cioè Firefox non supporta mp3 e si dovrebbe fornire il file ogg)

Esempio:

<audio> 
    <source src="" id="oggSource" type="audio/ogg" /> 
    <source src="" id="mp3Source" type="audio/mpeg" /> 
    Your browser does not support the audio element. 
</audio> 

Il tuo caso è diverso. Stai provando a creare una playlist. È possibile creare una playlist da soli:

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

http://jonhall.info/how_to/create_a_playlist_for_html5_audio

o semplicemente utilizzare plugin di terze parti come:

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

Utilizzando JPlayer risolverebbe il problema di compatibilità del browser troppo. Ad esempio se fornisci semplicemente il formato .mp3, passerà alla versione flash quando l'utente naviga con Firefox.

Answer 4

Codice da here. Grazie a jonhall.info e Thirumalai murugan per fornire il link.

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')); 
 
    }); 
 
    }); 
 
});

<link href="http://jonhall.info/examples/html5_audio_playlist_example.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div id="content" role="main"> 
 
    <div id="cwrap"> 
 
    <div id="nowPlay" class="is-audio"> 
 
     <h3 id="npAction">Paused:</h3> 
 
     <div id="npTitle"></div> 
 
    </div> 
 
    <div id="audiowrap"> 
 
     <div id="audio0"> 
 
     <audio id="audio1" controls="controls"> 
 
      Your browser does not support the HTML5 Audio Tag. 
 
     </audio> 
 
     </div> 
 
     <noscript>Your browser does not support JavaScript or JavaScript has been disabled. You will need to enable JavaScript for this page.</noscript> 
 
     <div id="extraControls" class="is-audio"> 
 
     <button id="btnPrev" class="ctrlbtn">|&lt;&lt; Prev Track</button> <button id="btnNext" class="ctrlbtn">Next Track &gt;&gt;|</button> 
 
     </div> 
 
    </div> 
 
    <div id="plwrap" class="is-audio"> 
 
     <div class="plHead"> 
 
     <div class="plHeadNum">#</div> 
 
     <div class="plHeadTitle">Title</div> 
 
     <div class="plHeadLength">Length</div> 
 
     </div> 
 
     <div class="clear"></div> 
 
     <ul id="plUL"> 
 
     <li class="plItem"> 
 
      <div class="plNum">1</div> 
 
      <div class="plTitle">Happy Birthday Variation: In the style of Beethoven</div> 
 
      <div class="plLength">0:55</div> 
 
     </li> 
 
     <li class="plItem"> 
 
      <div class="plNum">2</div> 
 
      <div class="plTitle">Wedding March Variation 1</div> 
 
      <div class="plLength">0:37</div> 
 
     </li> 
 
     <li class="plItem"> 
 
      <div class="plNum">3</div> 
 
      <div class="plTitle">Happy Birthday Variation: In the style of Tango</div> 
 
      <div class="plLength">1:05</div> 
 
     </li> 
 
     <li class="plItem"> 
 
      <div class="plNum">4</div> 
 
      <div class="plTitle">Wedding March Variation 2</div> 
 
      <div class="plLength">0:40</div> 
 
     </li> 
 
     <li class="plItem"> 
 
      <div class="plNum">5</div> 
 
      <div class="plTitle">Random Classical</div> 
 
      <div class="plLength">0:59</div> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div>