h5 ＜audio＞音乐自动播放，谷歌禁止音乐自动播放处理方法

最新推荐文章于 2023-06-13 15:34:12 发布
最新推荐文章于 2023-06-13 15:34:12 发布
阅读量2.1k 收藏 2
点赞数
分类专栏： javascript 文章标签： javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/V199311/article/details/112800147
版权
在谷歌浏览器中，由于用户行为限制，h5的audio标签默认禁止音乐自动播放。常见的解决方案是在audio标签上设置muted，但在某些情况下可能无效。本文介绍了一种粗暴但有效的方法，即通过添加蒙版，让用户点击蒙版来触发音乐播放。在移动端，特别是微信内部，需要额外的处理方式。同时，提供了一段HTML和JS代码示例，展示如何通过音乐图标控制播放和关闭音乐。
摘要由CSDN通过智能技术生成
  1. html代码
<a href="javascript:;" class="musicBtn functionBtn2 on" id="mc_play">音乐开
    <audio id="music" loop="loop" autoplay="autoplay" preload="auto" muted>
        <source src="/test/bgMp3.mp3" type="audio/mpeg">
    </audio>
</a>

效果图这样

最低0.47元/天 解锁文章
走在It前端的小菇凉
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
H5背景音乐解决方案
Joyce的前端日常
02-22 2万+
前言 背景音乐播放 1 自动播放 1 微信问题 2 Safari问题 3 解决方案代码 2 点击播放 离开页面关闭音乐 缓存状态 1 客户端存储数据方法 2 示例 完整解决方案代码 1. 前言 很多H5的项目会用到背景音乐，虽然是很小的一个模块，但是有不少的坑。本文总结了背景音乐的常用情况的解决方案。 在进行下面内容之前，如果你并不了解Audio，可以参考之前的文章...
H5背景音乐播放暂停加图标自动旋转功能，支持微信内自动播放代码实例
12-16
在本文中，我们将深入探讨如何在HTML5（H5）页面中实现背景音乐播放与暂停功能，同时结合图标状态显示和微信内的自动播放特性。这个功能对于创建互动性更强的网页体验至关重要，尤其是在社交媒体平台如微信中。 ...
audio h5自动播放
前端小白成长记
09-28 1090
audio h5自动播放
微信H5网页自动播放背景音乐
a_靖的博客
06-13 3124
微信网页自动播放音乐实现
解决iOS h5 audio自动播放（亲测有效）
编程架构三分天下：分层、分治、分时序。
04-08 7204
微信H5页面，实现audio自动播放： function initMusic() { var audio = document.createElement('audio'); audio.setAttribute('id', 'audio'); audio.setAttribute('autoplay', 'autoplay'); audio.setAttribut...
解决H5 audio自动播放无效问题（应用于一切环境的一切浏览器）
我乃技术小白，欢迎大神交流
04-01 3121
解决H5 audio自动播放无效问题（应用于一切环境的一切浏览器）
html添加背景音乐自动循环播放,html在谷歌浏览器的背景音乐怎么做才能自动循环播放...
weixin_35732273的博客
06-21 4378
1.在chrome 浏览器中输入：chrome://flags，搜索“Autoplay policy”，默认为“Default”，修改为 “No user gesture is required” 就可以了；此方法仅限谷歌浏览器，而且比较笨拙，但是问题可以解决；2.在使用video标签的过程中，设置静音播放，问题也可以得到解决，但是对于有播放声音要求的同学来说，问题还是得不到解决，代码如下：3.回...
iOS系统和微信中不支持audio自动播放问题的解决方法
08-29
在iOS系统和微信环境中，audio标签的自动播放功能受到严格的限制，这主要是为了优化用户体验，避免不必要的音频自动播放导致流量消耗或干扰用户。在本文中，我们将探讨如何解决这一问题，以便在iOS设备上的微信环境...
有关HTML5中背景音乐的自动播放功能
09-27
然后，我们可以使用jQuery来处理播放和暂停的逻辑： ```javascript var audio = document.getElementById('music1'); $("#btn").bind("touchstart", function bf() { if (audio !== null) { if (audio.paused) { ...
H5背景音乐自动播放问题
02-04
在处理H5背景音乐自动播放和暂停的过程中，开发者需要考虑到不同浏览器的兼容性和用户习惯，确保音乐的播放体验既符合预期又不引起用户反感。同时，文件列表中的"H5背景音乐播放和暂停"可能包含了具体的代码示例或者...
HTML5 解决苹果手机不能自动播放音乐问题
09-27
主要介绍了HTML5 解决苹果手机不能自动播放音乐问题的相关资料,需要的朋友可以参考下
＜audio＞播放音频Chrome浏览器禁止自动播放问题 play() failed because the user didn‘t interact with the document first
qq_39417037的博客
04-25 4404
2018年一月份开始 Chrome浏览器不会再自动播放音频文件用户必须对网页进行主动触发后才可自动播放 <audioid="audio"autoplay="autoplay"> <sourcesrc="test.ogg"/> </audio> //////////////////////////////////////////////////// <audioid="audio"preload="auto"> ...
html5判定音频状态,javascript – 如何检查HTML5音频是否达到不同的错误
weixin_35943736的博客
05-31 563
具体来说,如果其中一个音频请求失败和缓冲停止,是否有一种方法来检测该状态？是的,几乎没有办法做到这一点！但是,如果要捕获错误类型,可以将错误事件侦听器附加到源：$('audio').addEventListener('error', function failed(e) {// audio playback failed - show a message saying why// to get t...
关于h5中背景音乐的自动播放
weixin_30784141的博客
10-13 1516
音乐的自动播放属性，这里也介绍一下： <audio controls="controls" autoplay="autoplay"> <source src="song.ogg" type="audio/ogg" /> <source src="song.mp3" type="audio/mpeg" /> Your browser d...
谷歌浏览器audio标签自动播放音乐问题解决
热门推荐
a545132569的博客
10-10 7万+
前面一篇博客中有audio标签自动播放音乐的代码，可是后来再打开页面时音乐自动播放报错了； 看了网上的一些帖子才知道原来在4月份谷歌浏览器做了改革，不止谷歌， 其他浏览器好像也不支持自动播放了，现贴出解决方案： 1.在chrome 浏览器中输入：chrome://flags，搜索“Autoplay policy”，默认为“Default”， 修改为 “No user gesture is ...
解决google浏览器自动播放问题，亲测可用！！
java_mygod的博客
09-14 2万+
解决谷歌浏览器自动播放问题前言 前言 页面video视频属性设置了autoplay="true"后，用chrome浏览时发现竟然不会自动播放，原因是2018 年 4 月份发布的 chrome 66 也正式宣布关闭音频自动播放。 1：需求来源 为了满足客户需求（非一般客户,** 你个 **）在完美影响用户体验的情况下解决谷歌浏览器自动播放音频问题，下面是自己的一个demo ： // 以下就是自己的实现，（当然了跟广大网友的配合是分不开的，至于参考谁的我也记不得了，在这里谢过了） <audio src="
HTML audio video标签的autoplay自动播放关闭
xingdiango的博客
05-04 2016
国内搜索引擎没有查到对应的资料，或者就是资料有问题，不能实现页面加载后自动播放关闭，页面有很多首歌曲，如果全部自动播放就会乱套，因此查询了mozilla官方开发文档。因此我们更改为官方提示的问题解决。
h5的video视频在Chrome和ie上，视频无法自动播放，或者自动播放没声音，可以用以下代码做一下逻辑处理(获取当前浏览器做一下逻辑处理)
essnbb的博客
09-08 1995
像h5的video视频在Chrome和ie上，视频无法自动播放，或者自动播放没声音，可以用以下代码做一下逻辑处理
audio 静音标签
CF_KaiFa_999Bug的博客
02-15 719
<!-- 静音标签 muted="muted"--> <div id="backgroundAudio" style="display:none;"> <audio id="bgAudio" muted="muted" style="volume: 1" controls preload="auto" autoplay="autoplay"></audio> </div> ...
（1）<h1><h2><h3><h4><h5><h6>的作用
最新发布
03-09
<h1><h2><h3><h4><h5><h6>是HTML中的标题标签，用于定义网页中的标题和标题级别。它们的作用如下： 1. <h1>：定义最高级别的标题，通常用于页面的主要标题。 2. <h2>：定义次级标题，通常用于页面的子标题或者主要...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值