解决HTML5中的audio在手机端和微信端的不能自动播放问题


Posted in HTML / CSS onNovember 04, 2019

再做H5页面的时候,发现audio在手机端和微信端添加了autoplay以后还是不可以自动播放,这是因为手机端为了节约流浪所设置的

通常解决方法是给一个交互事件:

标签:

<audio loop src="/photo/aa.mp3" id="audio" autoplay preload="auto">

该浏览器不支持audio属性</audio>

解决方法:

//--创建页面监听,等待微信端页面加载完毕 触发音频播放
document.addEventListener('DOMContentLoaded', function () {
    function audioAutoPlay() {
        var audio = document.getElementById('audio');
            audio.play();
        document.addEventListener("WeixinJSBridgeReady", function () {
            audio.play();
        }, false);
    }
    audioAutoPlay();
});
//--创建触摸监听,当浏览器打开页面时,触摸屏幕触发事件,进行音频播放
document.addEventListener('touchstart', function () {
    function audioAutoPlay() {
        var audio = document.getElementById('audio');
            audio.play();
    }
    audioAutoPlay();
});

还有一种针对苹果的手机微信端的解决方法

第一步:引入js文件

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

第二步:配置文件

<script>
        function autoPlayVideo(){
            wx.config({
                debug:false,
                appId:"",
                timestamp:1,
                nonceStr:"",
                signature:"",
                jsApiList:[]
            });
            wx.ready(function(){
                var autoplayVideo=document.getElementById("audio");
                autoplayVideo.play()
            })
        };
        autoPlayVideo();
</script>

这样在网络稳定的情况下是可以自动播放的。

总结

以上所述是小编给大家介绍的解决HTML5中的audio在手机端和微信端的不能自动播放问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

HTML / CSS 相关文章推荐
CSS3中的Transition过度与Animation动画属性使用要点
May 20 HTML / CSS
animation和transition的区别
Oct 12 HTML / CSS
html5 canvas 画图教程案例分析
Nov 23 HTML / CSS
纯HTML5+CSS3制作生日蛋糕(代码易懂)
Nov 16 HTML / CSS
基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码
Dec 20 HTML / CSS
详解Html5页面实现下载文件(apk、txt等)的三种方式
Oct 22 HTML / CSS
关于iframe跨域使用postMessage的实现
Oct 29 HTML / CSS
Html5监听手机摇一摇事件的实现
Nov 07 HTML / CSS
html5实现滑块功能之type=&quot;range&quot;属性
Feb 18 HTML / CSS
html5 datalist 选中option选项后的触发事件
Mar 05 HTML / CSS
Html5 new XMLHttpRequest()监听附件上传进度
Jan 14 HTML / CSS
使用CSS实现小三角边框原理解析
Nov 07 HTML / CSS
详解使用postMessage解决iframe跨域通信问题
Nov 01 #HTML / CSS
跨域修改iframe页面内容详解
Oct 31 #HTML / CSS
html如何对span设置宽度
Oct 30 #HTML / CSS
关于iframe跨域使用postMessage的实现
Oct 29 #HTML / CSS
使用canvas生成含有微信头像的邀请海报没有微信头像问题
Oct 29 #HTML / CSS
Html5与App的通讯方式详解
Oct 24 #HTML / CSS
html+js 实现markdown编辑器效果
Oct 23 #HTML / CSS
You might like
推荐Discuz!5的PHP代码高亮显示与实现可运行代码
2007/03/15 PHP
批量修改RAR文件注释的php代码
2010/11/20 PHP
Mysql的Root密码忘记,查看或修改的解决方法(图文介绍)
2013/06/14 PHP
php实现邮件发送并带有附件
2014/01/24 PHP
PHP htmlspecialchars()函数用法与实例讲解
2019/03/08 PHP
用CSS+JS实现的进度条效果效果
2007/06/05 Javascript
dotopAlert 提示用户需安装播放器的代码
2012/09/17 Javascript
jQuery弹出层始终垂直居中相对于屏幕或当前窗口
2013/04/01 Javascript
JS对文本框值的判断示例
2014/03/10 Javascript
jquery图形密码实现方法
2015/03/11 Javascript
javascript实现随机读取数组的方法
2015/08/03 Javascript
mvvm双向绑定机制的原理和实现代码(推荐)
2016/06/07 Javascript
用nodejs搭建websocket服务器
2017/01/23 NodeJs
nodejs密码加密中生成随机数的实例代码
2017/07/17 NodeJs
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
2018/02/21 Javascript
解决vue项目使用font-awesome,build后路径的问题
2018/09/01 Javascript
详解Vue实战指南之依赖注入(provide/inject)
2018/11/13 Javascript
JavaScript实现背景自动切换小案例
2019/09/27 Javascript
简单谈谈Python中的元祖(Tuple)和字典(Dict)
2017/04/21 Python
浅谈Python中的私有变量
2018/02/28 Python
python+opencv实现霍夫变换检测直线
2020/10/23 Python
利用python在大量数据文件下删除某一行的例子
2019/08/21 Python
Python爬虫爬取杭州24时温度并展示操作示例
2020/03/27 Python
Pyecharts地图显示不完成问题解决方案
2020/05/11 Python
MCAKE蛋糕官方网站:一直都是巴黎的味道
2018/02/06 全球购物
美国滑雪板和装备购物网站:Skis.com
2018/12/20 全球购物
mysql的最长数据库名,表名,字段名可以是多长
2014/04/21 面试题
销售经理工作职责范文
2013/12/03 职场文书
酒店保洁员岗位职责
2015/02/26 职场文书
2015年采购部工作总结
2015/04/23 职场文书
大学生学生会工作总结2015
2015/05/26 职场文书
新闻稿怎么写
2015/07/18 职场文书
JVM入门之类加载与字节码技术(类加载与类的加载器)
2021/06/15 Java/Android
Python NumPy灰度图像的压缩原理讲解
2021/08/04 Python
MySQL中一条SQL查询语句是如何执行的
2022/04/08 MySQL
使用Python解决图表与画布的间距问题
2022/04/11 Python