我尝试向播放器添加自动播放功能,如 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 评论中的链接,并了解为什么不鼓励使用自动播放属性。但是,在某些情况下(例如音乐播放网站),我认为应该允许自动播放。此外,如果自动播放根本不起作用,我会理解。我想弄清楚的是,在我从 w3schools 复制的这个简单页面中,有时它有效,有时无效。
操作系统版本:Windows 10。浏览器: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
事实上,这只检查
autoplay
属性是在 HTML 标记上设置的,它总是如此。要测试是否允许自动播放,请使用以下代码段:
document
.getElementById('myAudio')
.play()
.then(() => console.log('autoplay success!'))
.catch(e => console.log(e))
相关信息
This answer描述了一种“欺骗”Chrome 始终自动播放的方法,尽管我没有亲自测试过。
关于javascript - 音频元素中的自动播放属性偶尔工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60662188/