使用jquery和HTML5音頻標記切換音頻來源

我只找到一個其他解決方案，但它不完整，所以我需要幫助。使用jquery和HTML5音頻標記切換音頻來源

我有音頻設置：

<audio id="player" controls="controls"> 
      <source id="ogg_src" src="lib/audio/barger01.ogg" type="audio/ogg" /> 
      <source id="mp3_src" src="lib/audio/barger01.mp3" type="audio/mp3" /> 
      Your browser does not support the audio element. 
    </audio>

我有一個鏈接動態生成的表更改曲目：

<div id="audio_list"> 
    <a href="#" class="track" data-location="http://www.newoggtrack.ogg">sample</a> 
</div>

我有這個jQuery的，我不知道該怎麼辦與改變軌道

$('.track').click(function(){ 

    load_track = $(this).attr('data-location');//gets me the url of the new track 

    change_track(load_track);// function to change the track of the loaded audio player without page refresh preferred... 

});

我發現這個功能，但我沒有用它正確的方式

function change_track(sourceUrl) { 

     audio.empty(); 
     $("#ogg_src").attr("src", sourceUrl).appendTo(audio); 
     /****************/ 
     audio[0].pause(); 
     audio[0].load();//suspends and restores all audio element 
     /****************/ 
    } 

audio = $("<audio>").attr("id", "player") 
         .attr("preload", "auto");

來源

2012-02-23 Daniel Hunter

你的問題是什麼？當您嘗試切換時會發生什麼？你有錯誤嗎？並且'function change（）'是直接複製和粘貼的代碼，還是僅僅是你已經提取的代碼片段？ – Ktash 2012-02-27 19:32:06

更改功能是我找到的東西，但它不起作用。它現在拋出錯誤 – 2012-02-27 20:53:00

然後發佈錯誤。如果他們不知道什麼是錯的，你希望人們如何幫助你？ – bububaba 2012-02-29 12:34:13

你變函數應該是這樣的：

function change(sourceUrl) { 
    var audio = $("#player");  
    $("#ogg_src").attr("src", sourceUrl); 
    /****************/ 
    audio[0].pause(); 
    audio[0].load();//suspends and restores all audio element 

    //audio[0].play(); changed based on Sprachprofi's comment below 
    audio[0].oncanplaythrough = audio[0].play(); 
    /****************/ 
}

的問題是audio.empty（）和音頻變種。您試圖追加一個空的音頻標籤，並沒有將音頻標籤寫回瀏覽器。

來源

2012-03-01 08:37:58

謝謝你的幫助。它清理了我做了什麼，並像魅力一樣工作。我希望我正確地授予賞金。 – 2012-03-06 21:16:05

解決了我的問題。似乎必須使用load（）方法，否則即使DOM已更新，HTML播放器也不會實際加載聲音。謝謝！ – Shahar 2012-12-19 22:48:09

audio = $（「＃player」） – 2013-12-04 23:53:07

您可能還想重命名該函數，因爲'change'已經是jQuery Universe中的一個函數。

來源

2012-03-05 17:23:55

使用jquery和HTML5音頻標記切換音頻來源

回答

相關問題