在瀏覽器中播放音頻的正確方法？

我在瀏覽器中創建了簡單的音頻播放器，但有一些麻煩。例如，我的html代碼中有20個音頻標籤。在瀏覽器中播放音頻的正確方法？

  <audio class="tr_audio"> 
       <source src="track1.mp3" type="audio/mpeg"> 
       <source src="ogg/track1.ogg" type="audio/ogg"> 
      </audio> 
     <audio class="tr_audio"> 
       <source src="track2.mp3" type="audio/mpeg"> 
       <source src="ogg/track2.ogg" type="audio/ogg"> 
      </audio> 
     <audio class="tr_audio"> 
       <source src="track3.mp3" type="audio/mpeg"> 
       <source src="ogg/track3.ogg" type="audio/ogg"> 
      </audio> 
      ... 
     <audio class="tr_audio"> 
       <source src="track20.mp3" type="audio/mpeg"> 
       <source src="ogg/track20.ogg" type="audio/ogg"> 
      </audio>

並且具有20個項目的列表。一個軌道的一個項目。我點擊事件播放它。麻煩的是，當頁面加載緩存中加載的所有20個曲目，對不對？有些曲目可能根本無法加載或部分加載。所以，嘗試播放這樣的曲目將會失敗。（例如track17沒有加載，如果我點擊item17歌曲將不會播放）。另外，我停止上一首歌曲這樣

$('.'+part+'_audio')[song_number].currentTime = 0; 
    $('.' part '_audio')[song_number].pause();

所以，如果上一曲目還沒有完全負載還是被部分加載，這串

`$('.'+part+'_audio')[song_number].currentTime = 0;`

將返回錯誤未被捕獲的錯誤：INVALID_STATE_ERR：DOM例外11. 所以我必須多次重新加載頁面 - 然後所有20首歌曲將加載到我的緩存中，並且播放將無誤地發生。但這是錯誤的。請告訴我是正確的。謝謝！

你可以在這裏看到我的播放器（不是廣告）：http://www.pompeya-for.me

我剛開始學習jQuery和實踐創造這個播放器 - 請不要用「印度守則」休克。

來源

2012-11-27 Stas Ushakov

'$（'。'part'_audio'）'？我假設你的意思是'$（'。'+ part +'_ audio'）'。請注意'+號。 –

是的，當然！ '+'符號因某些原因而消失。 –

我以前從來沒有內置的音樂播放器，但我會做這樣的：

開始通過像你這樣做，但只有第一個歌曲與所有的音頻格式：

<audio class="tr_audio"> 
    <source src="track1.mp3" type="audio/mpeg"> 
    <source src="ogg/track1.ogg" type="audio/ogg"> 
    ..... 
</audio>

您有播放列表導航，每個鏈接都會導向歌曲的網址。使用jQuery，您現在可以用點擊的歌曲來改變音頻src。您可以使用「canPlayType」來檢查要使用的文件格式。

<ul> 
    <li><a href="track2.mp3">Track 2</a></li>

jQuery的可能是這樣的：

$('ul > li > a').on('click', function (e) { 
    e.preventDefault(); 
    var src = $(this).attr('href'), 
     filetype = src.split('.').pop(), 
     player = $('audio'), 
     newSrc = $("<source>").attr("src", src); //Need to modify src with help off canPlayType 

    player.empty(); 
    player.append(newSrc); 

    player[0].load(); 
    player[0].play(); 
});

未經測試，但你的想法。您還應該將編解碼器屬性添加到我們的新源。

來源

2012-11-27 14:59:58 tbleckert

在瀏覽器中播放音頻的正確方法？

回答

相關問題