為什么自動播放不能使用 html5 音頻刷新頁面？

Question

我的頁面中有這樣的 html5 音頻

 <audio id="audioplayer" playsinline controls muted loop autoplay hidden>
            <source src="audio/muzyka_meed_loop.mp3" type="audio/mpeg">
            Your browser does not support the audio element.
  </audio>

在這里，我向音頻 src 添加了一個隨機數以防止緩存

<script>
    $(document).ready(function(){
        document.querySelector('#audioplayer source').setAttribute('src', 'audio/muzyka_meed_loop.mp3?rand=' + Math.random());

    })
</script>

但是現在當我刷新頁面時，音頻沒有播放，而音頻標簽上有自動播放

這是現場頁面：現場演示

我究竟做錯了什么？

Answer 1

刪除自動播放屬性：

 <audio id="audioplayer" src="audio/muzyka_meed_loop.mp3" type="audio/mpeg" loop="loop"> </audio>

JavaScript：

window.onload = function() {
    document.getElementById("audioplayer").play();
}

查詢：

$(document).ready(function() {
    $("#audioplayer").get(0).play();
});

Answer 2

我最近找到了解決方案。 您需要在 HTML 視頻元素的 onLoadedData 事件中調用 videoplayer.play() 方法。 這是 React 中的示例：

<video src={videoSource} ref={videoPlayer} onLoadedData={() => videoPlayer.current.play()}/>

我猜它也適用於音頻。