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

Я бы сделал:

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

Answer 2

Вместо использования тега <source> назначьте источник для атрибута src тега <audio>. Оно работает. В свою очередь, вы должны вручную проверить тип браузера, чтобы выбрать между аудио форматами для загрузки.