使用jquery动态选择要加载到HTML5播放器中的音频文件

Question

我正试图通过jquery在模式中填充HTML5播放器。目标是根据你是被邀请到网站还是自己注册，播放两个MP3中的一个。我有一个存储src路径的隐藏字段，我希望我的jquery函数加载基于该src的音频文件。在页面加载时，音频文件没有加载到播放器中。不确定我遗漏了什么，如果有任何帮助，我们将不胜感激。

HTML

<asp:HiddenField ID="hidModalMsg" runat="server" />
/*Unrelated code*/
<div class="audio" runat="server">
   <audio id="modalPlayer" onload="('#modalPlayer').src='';" controls="controls">
        <p>Your browser does not support the audio element.</p>
   </audio>
</div>

标头中的Jquery

$(function () {
    var audPlayer = $('#modalPlayer');
    audPlayer.src = $('#<%= hidModalMsg.ClientID%>').val();
});

Answer 1

由于不同浏览器的音频源是不同的文件，因此直接更改音频src不起作用。它必须根据浏览器进行更改。

因此，根据浏览器设置具有适当值的src变量，请参阅http://www.w3schools.com/html/html5_audio.asp以获得文件支持。

 var src = ".." // assuming your src has audio file value
 var audio = document.getElementById('audio');
 audio.setAttribute("src", src);
 audio.load();

使用jQuery

 var src = $('#<%= hidModalMsg.ClientID%>').val();
 console.log(src);
 $('#audio_element').attr('src', src);

Answer 2

"当源元素已经插入视频或音频元素时，动态修改该元素及其属性将无效。要更改播放内容，可以直接在媒体元素上使用src属性，也可以在操作源元素后调用媒体元素上的load（）方法。"来源：http://www.w3.org/

编辑src后是否尝试过audPlayer.play（）？