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作为参数重新加载页面（通过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.
}

JavaScript + HTML5：音频在某些情况下只会播放一次

1 个答案: