我有时会遇到 HTML5 音频标签的问题。在某些情况下,加载的音频文件只会播放一次,然后就不会再播放。
HTML(Django 模板)
<audio id="audio" src="{% if key %}streams/{{key}}.wav{% else %}{% endif %}" controls>
<p>Your user agent does not support the HTML5 Audio element.</p>
</audio>
JavaScript(使用 jQuery)
function sendText() {
var textfield = $("#textfield"),
text = textfield.val();
$.ajax({
url: '/rec/',
type: "POST",
data: JSON.stringify({text: text}),
success: function(response) {
var baseUrl = window.location.href.split("?")[0];
$(location).attr('href', baseUrl + "?s=" + response.key);
},
complete: function() {},
error: function(xhr, textStatus, thrownError) {
console.log("error");
}
});
}
因此,我向服务器发送 Ajax 请求,取回 key ,然后使用该 key 作为参数重新加载页面(通过 JavaScript)。该键将成为音频标签中加载的 wav 文件的名称。
页面重新加载后,我就可以播放音频,但只能播放一次。第二次点击“播放”,根本没有任何反应。
但是,当我单击浏览器的重新加载按钮并再次加载页面时,一切正常。
对此有什么解释吗?
最佳答案
根据我自己的一些尝试和错误,我建议尝试在播放后将 currentTime 属性重置为 0,然后重试。
我发现了一些情况(你的情况可能就是其中之一),音频卡住并且结束并且不会自行重置。
我无法提供实际的“解释”...但如果它像我见过的那样 - 这可能是一个可行的解决方案。
<audio id="foo"><source url="myaudio.mp3"></audio>
...
var soundFoo = document.getElementById('foo');
soundFoo.play();
soundFoo.onended = function() {
soundFoo.currentTime = 0;
soundFoo.play(); // assuming you want it to repeat right away.
}
关于JavaScript + HTML5 : Audio will only play once under certain circumstances,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27375809/