HTML5 jQuery cambiar la fuente de audio de forma dinámica

Question

Tengo un elemento de audio con una fuente predeterminada. Quiero ser capaz de cambiar dinámicamente la fuente de audio usando jQuery. Mi código a continuación cambia la fuente, pero siempre reproduce el audio predeterminado. Cualquier ayuda sería muy apreciada. Gracias.

<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

En lugar de utilizar <source> etiqueta, asigne a la fuente src atributo de la etiqueta <audio>. Funciona. A cambio, debe verificar manualmente el tipo de navegador para elegir entre formatos de audio para cargar.

Answer 2

que haría:

<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(); 
});