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（）吗？

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

2 个答案: