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