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

Posted 2023-02-25

【中文标题】JavaScript + HTML5：音频在某些情况下只会播放一次

【英文标题】：JavaScript + HTML5: Audio will only play once under certain circumstances

【发布时间】：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（带有 jQ​​uery）

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 文件的名称。

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

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

对此有什么解释吗？

【参考方案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.