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

【问题标题】：JavaScript + HTML5: Audio will only play once under certain circumstancesJavaScript + HTML5：音频在某些情况下只会播放一次
【发布时间】：2014-12-09 09:46:45
【问题描述】：

我有时会遇到 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 请求，取回一个密钥，然后使用密钥作为参数重新加载页面（通过 JavaScript）。然后，此键将成为音频标签中加载的 wav 文件的名称。

页面重新加载后，我可以播放音频，但只能播放一次。第二次点击播放，什么都不做。

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

对此有什么解释吗？

【问题讨论】：

标签： javascript html audio html5-audio

【解决方案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.
}

【讨论】：