HTML 5 Audio Tag Mehrere Dateien

Question

Ich versuche, zwei Dateien in einem HTML 5 Audio Tag zu haben, die nacheinander abgespielt werden. Der Code, den ich bisher habe, ist:

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

</audio> 

Die Frage, die ich im Moment habe, ist, dass nur die erste Datei wird spielen und am Ende ist es wie keine zweite Datei ist. Sobald das erste Lied endet, tut es nichts anderes.

Gibt es eine Möglichkeit, die zweite Spur automatisch zu spielen, wenn die erste endet? Ich brauche es in HTML zu sein, wie es für eine mobile Website ist so ein Code nicht auf einigen Geräten arbeiten können

Answer 1

In Javascript können Sie es wie folgt tun (das ist nur für den Einstieg ist):

audio = new Audio("start url"); 

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

, wenn Sie möchten, können Sie auch den gleichen Spieler (jquery) verwenden:

var audio = $("#player"); 

Answer 2

einige Javascript Sie

hier einen Trick tun kann, ist ein sample, eine andere 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

mehrere Quellen zu Tag hinzufügen, auf diese Weise nicht funktioniert. . Sie können es verwenden, um die Quelle in mehreren Formaten zur Bereitstellung (einige Browser mp3 nicht unterstützen - also Firefox nicht unterstützt mp3, und Sie sollten ogg-Datei zur Verfügung stellen)

Probe:

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

Ihr Fall ist anders. Sie versuchen, eine Wiedergabeliste zu erstellen. Sie können eine Wiedergabeliste selbst machen:

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

http://jonhall.info/how_to/create_a_playlist_for_html5_audio

oder einfach Dritten Plugins wie:

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

JPlayer Verwendung würden zu dem Browser Kompatibilitätsproblem lösen. Wenn Sie beispielsweise nur das MP3-Format bereitstellen, wird die Flash-Version angezeigt, wenn der Benutzer mit Firefox surft.

Answer 4

Code erhalten von here. Danke an jonhall.info und Thirumalai Murugan, die Verbindung herzustellen.

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>