एचटीएमएल 5 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(); 
});