我尝试将自动播放功能添加到播放器,如w3school示例:https://www.w3schools.com/tags/att_audio_autoplay.asp

我所做的是将示例中的代码复制粘贴到索引文件in this server中,删除了ogg播放器,在与索引文件相同的位置添加了mp3文件,并确保mp3文件的名称与源文件中的名称匹配标签。

为了透明起见,这是代码:

 let x = document.getElementById("myAudio");
        var test_autoplay = document.getElementById("myAudio").autoplay;
        console.log('autoplaying:    ', test_autoplay);
<!DOCTYPE html>
    <html>
    <body>

    <h1>The audio autoplay attribute</h1>

    <p>Click on the play button to play a sound:</p>

    <audio id="myAudio" controls autoplay>
      <source src="elrio.mp3" type="audio/mpeg">
      Your browser does not support the audio element.
    </audio>

    </body>

    </html>


这应该是一件非常简单的事情。但是,在移动设备中它不起作用。我必须单击按钮才能播放音频。在台式机设备中,有时它会在页面加载后立即播放,有时则不会。

我检查了控制台错误,没有。网络标签也不显示任何错误。

我尝试使用javascript打印autoplay属性,如下所示:
<script>
    let x = document.getElementById("myAudio");
    var test_autoplay = document.getElementById("myAudio").autoplay;
    console.log('autoplaying:    ', test_autoplay);
</script>

每次加载页面时,test_autoplay的值都是true,即使它实际上没有在播放。

我已经阅读了Lawrence Cherone评论中的链接,并了解了为什么不鼓励使用autoplay属性。但是,在某些情况下(例如音乐播放网站),我认为应允许自动播放。此外,我会了解自动播放是否根本无法正常工作。我想弄清楚的是,我是如何从w3schools复制的这个简单页面中的,有时它起作用,有时却不起作用。

操作系统版本:Windows10。浏览器:Google Chrome,版本80.0.3987.132(官方内部版本)(64位)

最佳答案

这是一个棘手的问题。我能够重现您所看到的内容,但我想我已经知道了。

如果您允许网站播放音乐超过7秒钟,它将允许自动访问以下内容。如果停止播放,在7秒钟之前关闭或重新加载选项卡,则该站点将失去自动播放的功能,直到您再次播放音频超过7秒钟为止。

Chrome自动播放

此行为特定于Chrome(您提到您正在使用)。 Chrome浏览器会记录用户允许播放音频的网站。它将其存储在媒体参与度索引中。您可以在地址栏中输入chrome://media-engagement/来查看Chrome的提示。如果您允许网站播放音频超过7秒钟,则应该在此处看到它。有关Chrome的自动播放行为的更多信息为available here。媒体参与度索引为described here,尽管由于Chrome的更改,某些文档不再有效。

自动播放权限的JavaScript检查

此外,下面复制的您的JavaScript代码段似乎正在尝试检查autoplay是否已启用。

document.getElementById("myAudio").autoplay

实际上,这只会检查是否在HTML标记上设置了autoplay属性,而该属性将始终如此。

要测试是否允许自动播放,请使用以下代码段:
document
  .getElementById('myAudio')
  .play()
  .then(() => console.log('autoplay success!'))
  .catch(e => console.log(e))

相关资料

This answer描述了一种“欺骗” Chrome使其始终自动播放的方法,尽管我尚未亲自对此进行测试。

09-07 18:56
查看更多