jquery - 使用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 变量适当的值，参见 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);