HTML 5オーディオタグ複数のファイル

Question

1つのHTML 5オーディオタグに2つのファイルが1つずつ再生しようとしています。私が持っているコードは、これまでです：

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

</audio> 

私は、現時点では持っています問題は、最初のファイルのみが再生されるということで、最後何秒のファイルが存在しないように、それがあります。最初の曲が終了するとすぐに、それ以外は何もしません。

最初のトラックが終了したときに自動的に2番目のトラックを再生する方法はありますか？私はいくつかのコードは、あなたがここにトリック

を行うことができますjavascriptの一部では、いくつかのデバイス上で

Answer 1

JavaScriptでは、あなたは（これはあなたが始めるためにだけある）このようにそれを行うことができます。

audio = new Audio("start url"); 

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

あなたはまた、同じプレーヤー（jqueryの）を使用することができますしたい場合：

var audio = $("#player"); 

Answer 2

を動作しない場合があり、それはモバイルサイトのためであるとして、それはHTMLにあることが必要なのsample、別の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

タグに複数のソースを追加するには、このように動作しません。 。

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

あなたの場合： - あなたが複数の形式でソースを提供するために使用することができ

サンプル（一部のブラウザでは、mp3をサポートしていないつまりFirefoxがmp3をサポートしていないと、あなたはOGGファイルを提供する必要があります）異なります。あなたはプレイリストを作ろうとしています。

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

http://jonhall.info/how_to/create_a_playlist_for_html5_audio

を、または単にのようなサードパーティ製のプラグインを使用します：あなたは自分でプレイリストを作ることができますあまりにもブラウザの互換性の問題を解決するjPlayerを使用して

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

。たとえば、.mp3形式を指定するだけで、ユーザーがFirefoxでブラウズしているときにフラッシュバージョンに切り替わります。

Answer 4

コードはhereから取得します。 jonhall.infoとThirumalai muruganがリンクを提供してくれてありがとう。

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>