为什么自动播放在使用 html5 音频刷新页面时不起作用？答案

【问题标题】：why autoplay not working on page refresh using html5 audio?为什么自动播放在使用 html5 音频刷新页面时不起作用？
【发布时间】：2019-08-01 12:41:05
【问题描述】：

我的页面中有这样的 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>

这里我给audio src添加一个随机数来防止缓存

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

    })
</script>

但是现在当我刷新页面时，音频没有播放，而音频标签上有自动播放

这里是实时页面：live demo

我做错了什么？

【问题讨论】：

标签： javascript jquery html audio

【解决方案1】：

移除自动播放属性：

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

JavaScript：

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

jQuery:

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

【讨论】：

我正在检查我会告诉你的
Hii Vikas 我在这里尝试了你的解决方案是现场演示meed.audiencevideo.com，当我在不同的计算机上测试时仍然面临问题，我在 head 标签签出处添加了 window.onload。
@user9964622 不同的电脑是什么意思？它在某些计算机上运行，而不是在其他计算机上运行？
是的，在不同的浏览器中试试，例如opera或firefox

【解决方案2】：

我最近找到了解决方案。您需要在 HTML 视频元素的 onLoadedData 事件中调用 videoplayer.play() 方法。这是 React 中的示例：

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

我猜它也适用于音频。

【讨论】：