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

最新推荐文章于 2023-05-04 14:48:39 发布
最新推荐文章于 2023-05-04 14:48:39 发布
阅读量2.1k 收藏 2
点赞数
分类专栏： javascript 文章标签： javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/V199311/article/details/112800147
版权
  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，可以参考之前的文章...
html添加背景音乐自动循环播放,html在谷歌浏览器的背景音乐怎么做才能自动循环播放...
weixin_35732273的博客
06-21 4370
1.在chrome 浏览器中输入：chrome://flags，搜索“Autoplay policy”，默认为“Default”，修改为 “No user gesture is required” 就可以了；此方法仅限谷歌浏览器，而且比较笨拙，但是问题可以解决；2.在使用video标签的过程中，设置静音播放，问题也可以得到解决，但是对于有播放声音要求的同学来说，问题还是得不到解决，代码如下：3.回...
＜audio＞播放音频Chrome浏览器禁止自动播放问题 play() failed because the user didn‘t interact with the document first
qq_39417037的博客
04-25 4389
2018年一月份开始 Chrome浏览器不会再自动播放音频文件用户必须对网页进行主动触发后才可自动播放 <audioid="audio"autoplay="autoplay"> <sourcesrc="test.ogg"/> </audio> //////////////////////////////////////////////////// <audioid="audio"preload="auto"> ...
html5判定音频状态,javascript – 如何检查HTML5音频是否达到不同的错误
weixin_35943736的博客
05-31 560
具体来说,如果其中一个音频请求失败和缓冲停止,是否有一种方法来检测该状态？是的,几乎没有办法做到这一点！但是,如果要捕获错误类型,可以将错误事件侦听器附加到源：$('audio').addEventListener('error', function failed(e) {// audio playback failed - show a message saying why// to get t...
关于h5中背景音乐的自动播放
weixin_30784141的博客
10-13 1509
音乐的自动播放属性，这里也介绍一下： <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 ...
H5背景音乐播放暂停加图标自动旋转功能，支持微信内自动播放代码实例
12-16
在本文中，我们将深入探讨如何在HTML5（H5）页面中实现背景音乐播放与暂停功能，同时结合图标状态显示和微信内的自动播放特性。这个功能对于创建互动性更强的网页体验至关重要，尤其是在社交媒体平台如微信中。 ...
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 解决苹果手机不能自动播放音乐问题的相关资料,需要的朋友可以参考下
解决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 1986
国内搜索引擎没有查到对应的资料，或者就是资料有问题，不能实现页面加载后自动播放关闭，页面有很多首歌曲，如果全部自动播放就会乱套，因此查询了mozilla官方开发文档。因此我们更改为官方提示的问题解决。
h5的video视频在Chrome和ie上，视频无法自动播放，或者自动播放没声音，可以用以下代码做一下逻辑处理(获取当前浏览器做一下逻辑处理)
essnbb的博客
09-08 1969
像h5的video视频在Chrome和ie上，视频无法自动播放，或者自动播放没声音，可以用以下代码做一下逻辑处理
audio 静音标签
CF_KaiFa_999Bug的博客
02-15 715
<!-- 静音标签 muted="muted"--> <div id="backgroundAudio" style="display:none;"> <audio id="bgAudio" muted="muted" style="volume: 1" controls preload="auto" autoplay="autoplay"></audio> </div> ...
解决谷歌浏览器无法自动播放HTML文件的声音和视频问题的方法
weixin_44566194的博客
03-15 6632
解决谷歌浏览器无法自动播放视频和声音的方法
HTML 中添加视频
qq_34870529的博客
11-21 1351
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
解决新版Chrome拦截自动播放（Google浏览器不支持audio自动播放问题）
weixin_46995731的博客
01-14 1万+
Google浏览器不支持audio自动播放 声音无法自动播放这个在IOS/Android上面一直是个惯例，桌面版的Safari在2017年的11版本也宣布禁掉带有声音的多媒体自动播放功能，紧接着在2018年4月份发布的Chrome 66也正式关掉了声音自动播放，也就是说 在桌面版浏览器也将失效。 设置谷歌浏览器属性 在这里可以设置某一个网址自动播放声音，不过需要引导用户进来设置chrome://settings/content 通过上述操作跳转到当前页面,点击声音设置 勾选可以播放声音,并添加上自己发布
音频视频自动播放解决方案
2201_76108770的博客
02-11 1599
那么我们可以换个方向，不去仅仅依赖autoplay，而是使用play方法进行播放，play方法执行时会返回一个promise，可以根据promise来判断当前的播放是成功了还是失败了，并且在失败后做出相应的解决方法。这个问题当时困扰了我许久，一路解决的过程也是十分坎坷，所以我决定将解决方案记录下来，下面是我在解决问题的过程中找到的一些资料以及解决问题的方案。当MEI排名足够高时，即可自动播放。由此，Chrome计算出的媒体参与度得分在定期播放媒体的网站上足够高时，允许在桌面上自动播放媒体播放。
css音乐播放器自动播放
最新发布
06-12
在CSS中，无法直接实现自动播放音乐的功能。这是因为CSS只能控制网页的样式和布局，而无法操作网页中的音频或视频等媒体资源。 要实现自动播放音乐的功能，需要借助JavaScript来控制音频的播放。可以使用HTML5的`<audio>`标签来加载音乐文件，然后通过JavaScript来控制音频的播放和暂停。 以下是一个简单的示例代码，实现了页面加载后自动播放音乐的功能： ```html <audio id="myAudio" src="mymusic.mp3" autoplay></audio> ``` ```javascript window.onload = function() { var audio = document.getElementById("myAudio"); audio.play(); } ``` 其中`<audio>`标签中的`autoplay`属性表示自动播放音乐，JavaScript代码中的`audio.play()`方法则控制音频的播放。请注意，自动播放音乐可能会受到浏览器的限制，例如需要用户授权或在静音模式下无法播放等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值