html音乐自动播放代码在谷歌中不行,关于谷歌浏览器不支持html5中audio的autoplay解决方法(js代码解决)...

本文探讨了在Chrome中禁用audio autoplay的原因,提出通过添加用户交互事件(如点击或鼠标移动)来绕过限制,实现音频自动播放的方法。作者提供了实际操作步骤和代码示例,适用于提高网页体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

当我们直接写autoplay时,在chrome中浏览器并没有自动播放音频;

c2dd9594bfb0ce9e4b0541e9da8fa8fc.png

如果直接通过js来调用audio的play()方法也不行;

70ff57e8ed3239a51871099635107908.png

控制台还会报错

8887d0e8771e5f26ab77fb9216bb1e56.png

大概意思:play()调用失败,因为用户没有与文档进行交互

经过网上的查找:原博客:https://blog.youkuaiyun.com/baiding1123/article/details/104945759

谷歌为优化用户体验关闭了audio中的autoplay方法(屏蔽广告和节省用户流量);

那么如何实现autoplay呢,既然报错说用户没有与文档交互,我们就设置一个事件使用户与文档交互就行了;如下给整个页面添加一个点击事件

5f6f2c84e0f127381f1aba877714eefe.png

此时,当用户点击页面后就会触发play();chrome也不会报错,并且开始播放音乐

5f1d171af809cd884e2b150653d506de.png

亲测把onclick事件换成onmousemove后(想优化用户体验),但还是需要点击页面才能触发play(),相当于把audio的点击播放绑定在整个window上面;

借鉴此博客的更改:https://blog.youkuaiyun.com/baiding1123/article/details/104945759

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值