JavaScript + HTML5 : Audio will only play once under certain circumstances

Question

我有时会遇到 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 文件的名称。

页面重新加载后，我就可以播放音频，但只能播放一次。第二次点击“播放”，根本没有任何反应。

但是，当我单击浏览器的重新加载按钮并再次加载页面时，一切正常。

对此有什么解释吗？

Answer 1

根据我自己的一些尝试和错误，我建议尝试在播放后将 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.
}