今天做一个网页播放音频的测试,需要自动播放背景音乐,代码如下:
Your browser does not support the audio element.
可是我无论怎么设置,打开后界面都无法正常播放,都需要我手动点那个播放按钮才能播放,我需要的是自动播放啊。
难道是Chrome浏览器不支持自动播放了吗?可是当我在其他网站上找到了一个示例,运行示例的时候,它的自动播放却是没有任何问题的。
只要一点那个运行代码的按钮,就自动播放了,我的却不行,这是怎么回事呢?
自动播放不行,那我试下用JS定时控制播放器手动播放。
function toggleSound() {
var music = document.getElementById("myAudio");//获取ID
console.log(music);
console.log(music.paused);
if (music.paused) { //判读是否播放
music.paused = false;
music.play(); //没有就播放
}
}
setInterval("toggleSound()", 1);
通过输出日志发现了问题的关键点:
play() failed because the user didn't interact with the document first.
翻译过来,意思是用户还没有跟浏览器进行交互。然后我尝试在浏览器中随便点了一下,就自动播放了。
然后到网上核实了一下资料,确实是Chrome对此改变了规则:如果用户没有任何交互操作,那就不自动播放。这样改动的目的主要是防止扰民,想想夜深人静的时刻,随便打开一个网页,然后就自动播放一个声音,确实挺吓人的;还有如果同时打开了很多网页,每个网页都自动播放声音,会很乱,用户跟哪个页面交互了再播放哪个页面的声音,这样确实是提升了用户体验。
明白了道理,也就不纠结。想让它播放,就随便点下页面任何位置就可以了。
页面更新:2024-03-14
本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828
© CopyRight 2020-2024 All Rights Reserved. Powered By 71396.com 闽ICP备11008920号-4
闽公网安备35020302034903号