解决移动端浏览器 HTML 音频不能自动播放的三种方法

由于Android，IOS移动端的浏览器以及微信自带的浏览器为了用户更好的体验，规定不自动播放音频视频，默认屏蔽了autoplay，如果要想达到自动播放效果，需要单独处理，方法有以下几种：

第一种：添加控制属性（controls）

原理：直接使用行内式添加controls属性，显示控制按钮，让用户手动触发音频播放

<audio autoplay="autopaly" loop="loop" controls="controls" id="audios"><source src="music/bg.mp3" type="audio/mp3" />
</audio>

第二种：创建页面监听（WeixinJSBridgeReady）

原理：对页面加载进行监听，等待微信客户端页面加载完毕后，自动触发音频播放

<audio autoplay="autopaly" loop="loop" id="audios"><source src="music/bg.mp3" type="audio/mp3" />
</audio><script>
// 将以下代码添加到js入口函数内即可
// 这里使用了微信自带的WeixinJSBridgeReady事件
document.addEventListener('WeixinJSBridgeReady', function() {document.getElementById('audios').play()
})</script>

第三种：创建触摸监听（touchstart）

原理：当浏览器打开页面时，通过触摸屏幕事件，来触发音频播放

<audio autoplay="autopaly" loop="loop" id="audios"><source src="music/bg.mp3" type="audio/mp3" />
</audio><script>
// 将以下代码添加到js入口函数内即可
document.addEventListener('touchstart', function() {document.getElementById('audios').play()
})</script>

第四种：综合以上自定义Func实现交互触发play()

不推荐此方法，上面三种方法足以解决日常问题

<audio src="bg.mp3" id="audios" autoplay preload loop="loop"></audio>
<script>
function audioAutoPlay(id){  var audio = document.getElementById(id),play = function(){  audio.play();  document.removeEventListener("touchstart",play, false);  };  audio.play();  document.addEventListener("WeixinJSBridgeReady", function () {  play();  }, false);  document.addEventListener('YixinJSBridgeReady', function() {  play();  }, false);  document.addEventListener("touchstart",play, false);
}
audioAutoPlay('audios');</script>

完结。。。。。。看完点个赞吧。。。。。。✌ ✌ ✌

解决移动端浏览器 HTML 音频不能自动播放的三种方法相关推荐

html手机不能自动播放音乐,解决移动端浏览器 HTML 音频不能自动播放的三种方法...
由于Android,IOS移动端的浏览器以及微信自带的浏览器为了用户更好的体验,规定不自动播放音频视频,默认屏蔽了autoplay,如果要想达到自动播放效果,需要单独处理,方法有以下几种: 第一种:添 ...
js中当等于最小值是让代码不执行_网页中JS函数自动执行常用三种方法
本文为大家分享了在网页中JS函数自动执行常用方法,供大家参考,具体内容如下一.JS方法 1.最简单的调用方式,直接写到html的body标签里面: 2.在JS语句调用: function myfun ...
Java程序初始化启动自动执行的三种方法
目录 @PostConstruct注解 CommandLineRunner接口 ApplicationRunner 接口 @Order注解设置启动顺序分享一下自己用过的java程序初始化启动自动执行 ...
mysql数据库最后一步卡住了_[数据库]解决MySQL安装到最后一步未响应的三种方法...
[数据库]解决MySQL安装到最后一步未响应的三种方法 0 2018-07-13 01:01:27 这种情况一般是你以前安装过MySQL数据库服务项被占用了. 解决方法: 方法一:安装MySQL的时候 ...
html网页自动运行函数,在网页中JS函数自动执行常用三种方法
在网页中JS函数自动执行常用三种方法在HTML中的Head区域中,有如下函数: functionn MyAutoRun() { //以下是您的函数的代码,请自行修改先! alert("函数 ...
在网页中JS函数自动执行常用三种方法
<SCRIPT LANGUAGE="JavaScript"> functionn MyAutoRun() { //以下是您的函数的代码,请自行修改先! al ...
sublime 设置自动更新_Win10关闭自动更新的三种方法
Win10怎么关闭自动更新呢?很多人都不知道,下面小编来告诉大家. 第一种方法我们右击电脑左下角的微软按钮,弹出的界面,我们点击运行: 弹出的运行中,我们输入services.msc,之后点击确定: ...
让Windows XP自动登录的三种方法
如果你给你的XP设置了密码,那么每次在进入XP桌面之前,都会出现一个用户登录界面,要求输入密码,这样加大了系统的安全性,也为多人共用一台电脑提供了方便,但如果只有你一个人使用,这样每次要输入密码,的确 ...
win10的更新怎么关闭计算机,如何彻底关掉win10自动更新_彻底关掉win10自动更新的三种方法...
win10专业版每隔一段时间就会进行更新补丁,这样会使系统更加稳定,偶尔更新一次大家都能够接受,如果天天都弹出自动更新的提醒确实让人困惑,那么有什么办法彻底关掉win10自动更新?电脑小白都不懂操作步 ...

解决移动端浏览器 HTML 音频不能自动播放的三种方法

第一种：添加控制属性（controls）

第二种：创建页面监听（WeixinJSBridgeReady）

第三种：创建触摸监听（touchstart）

第四种：综合以上自定义Func实现交互触发play()

完结。。。。。。看完点个赞吧。。。。。。✌ ✌ ✌

解决移动端浏览器 HTML 音频不能自动播放的三种方法相关推荐

最新文章

热门文章