HTML 5 Znacznik audio wiele plików

Question

Próbuję mieć dwa pliki w jednym znaczniku audio HTML 5, który odtwarzany jest jeden po drugim. Kod mam tak daleko jest:

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

</audio> 

Problem mam w tej chwili jest to, że tylko pierwszy plik będzie grać i koniec, to jest jak nie ma drugiego pliku. Jak tylko skończy się pierwsza piosenka, nie robi nic innego.

Czy istnieje sposób na automatyczne uruchomienie drugiego utworu po zakończeniu pierwszego? Muszę go mieć w HTML, jak to jest na stronie mobilnej więc niektóre kod może nie działać na niektórych urządzeniach

Answer 1

W JavaScript można zrobić to tak (jest to po prostu Ci zacząć):

audio = new Audio("start url"); 

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

jeśli chcesz, możesz też użyć tego samego gracza (jQuery):

var audio = $("#player"); 

Answer 2

z niektórych javascript można zrobić trick

Oto sample kolejna 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

Dodawanie wielu źródeł do tagu nie działa w ten sposób. . Można go używać do przekazywania źródło w wielu formatach (niektóre przeglądarki nie obsługują mp3 - czyli Firefox nie obsługuje mp3 i ogg należy podać plik)

Próbka:

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

Twoja sprawa jest inny. Próbujesz utworzyć playlistę. Można utworzyć listę odtwarzania przez siebie:

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

http://jonhall.info/how_to/create_a_playlist_for_html5_audio

lub po prostu korzystać z wtyczek innych firm, takich jak:

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

Korzystanie JPlayer rozwiązałoby problem ze zgodnością przeglądarki zbyt. Na przykład, jeśli po prostu podasz format .mp3, przełączy się on na wersję flash, gdy użytkownik przegląda Firefoksa.

Answer 4

Kod z here. Dzięki jonhall.info i Thirumalai murugan, aby podać 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>