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> 标记，而是将源分配给<audio> 标记的src 属性。有用。作为回报，您必须手动检查浏览器类型以选择要加载的音频格式。