HTML5 jQuery動態地更改音頻源

Question

我有一個帶有默認源的音頻元素。我希望能夠使用jQuery動態更改音頻源。我的下面的代碼改變了源代碼，但總是播放默認音頻。任何幫助將非常感激。謝謝。

<audio id="audio_player"> 
    <source id="audio_player_ogv" src="test.ogv" type="audio/ogg" /> 
    <source id="audio_player_mp3" src="test.mp3" type="audio/mpeg" /> 
</audio> 
<a class="change_audio" rel="new_test" href="javascript:;">Change Audio</a> 

$('.change_audio').click(function() { 
    var new_audio = $(this).attr('rel'); 
    $('#audio_player_ogv').attr('src',new_audio+'.ogv').detach().appendTo($('#audio_player')); 
    $('#audio_player_mp3').attr('src',new_audio+'.mp3').detach().appendTo($('#audio_player')); 
    var aud = $('#audio_player').get(0); 
    aud.play(); 
}); 

Answer 1

代替使用<source>標籤，分配源<audio>標籤的src屬性。有用。作爲回報，您必須手動檢查瀏覽器類型以選擇要加載的音頻格式。

Answer 2

我會做：

<div id="divAudio_Player"> 
    <audio id="audio_player"> 
     <source id="audio_player_ogv" src="test.ogv" type="audio/ogg" /> 
     <source id="audio_player_mp3" src="test.mp3" type="audio/mpeg" /> 
    </audio> 
</div> 
<a class="change_audio" rel="new_test" href="javascript:;">Change Audio</a> 

$('.change_audio').click(function() { 
    var new_audio = $(this).attr('rel'); 

    var source = '<audio id="audio_player">'; 
    source += '<source id="audio_player_ogv" src="' + new_audio + '.ogv" type="audio/ogg" />'; 
    source += '<source id="audio_player_ogv" src="' + new_audio + '.mp3" type="audio/mpeg" />'; 
    source += '</audio>'; 

    $('#divAudio_Player').html(source); 

    var aud = $('#audio_player').get(0); 
    aud.play(); 
});