关于微信H5页面开发中音乐不自动播放的解决方法

　　我想应该有很多人在做H5场景应用、H5微刊、H5微杂志的时候加入背景音乐吧（客户需求），相信很多人一定碰过不能自动播放的时候，即使是相同的iPhone 5s也有不播放的时候，很蛋疼吧！？

之前我的解决方案：

<audio id="bgm" src="media/bgm.mp3" autoplay="autoplay" loop="" style="display: none; width: 0; height: 0;"></audio><script type="text/javascript">
//方法一
var firstTouch = true;
$("body").bind("touchstart",function(e) {if ( firstTouch ) {firstTouch = false;document.getElementById('bgm').play();}else{return;}
});
//方法二
$("body").one("touchstart",function() {     document.getElementById('bgm').play();
});
</script>

　　原理就是若遇到禁止自动播放的手机，用户第一次触摸屏幕的时候就执行播放事件，我试过很多什么window.onload = function(){}，预加载图片后回调执行播放事件，插件jquery.imgpreload.min.js 图片加载完毕回调都然并卵......没有办法的办法只能用上面方法。

我最近在瞎逛前端BLOG淘淘经验偶遇这个解决方案，至于哪个网站我忘记了，但是我做了摘录：

原理就是通过new一张图片，监听一张图片的onload事件，结束后回调执行音频播放audio.play()即可，原理估计是动了dom结构，相当于执行了一次交互。

PS：

1. 音乐不宜过长，30s为佳，而且音乐要加上渐现渐隐效果，方便循环播放；
2. 音乐体积要小，音质和流量，在手机上还是优先考虑流量吧。

一般背景音乐体积可以接受的范围是200K以下，若太大，可以使用格式工厂等软件，降低它的比特率和声道来改变体积。

转载于:https://www.cnblogs.com/viphchok/articles/5315031.html

关于微信H5页面开发中音乐不自动播放的解决方法相关推荐

C#开发微信门户及应用(44)--微信H5页面开发的经验总结
在我们开发微信页面的时候,需要大量用到了各种呈现的效果,一般可以使用Boostrap的效果来设计不同的页面,不过微信团队也提供很多这方面的资源,包括JSSDK的接口,以及Weui的页面样式和相关功能页 ...
Word 2019中公式不能自动斜体的解决方法
Word 2019中公式不能自动斜体的解决方法问题描述解决方案 (1)最佳方法:使用宏 (2)在输入数学公式时切换到ENG英语(美国) 美式键盘. (3)输入公式后手动点击两次公式设计菜单中的&q ...
python构建智能机器人系列博文---借助于python实现QQ，微信消息的自动发送，音乐的自动播放
目录一.写在前面: 二.系统实现: 三.总结反思: Author:qyan.li Date:2022.6.3 Topic:借助于python自动化技术实现指定音乐的播放和QQ,微信消息发送一.写在 ...
php 开发微信h5,微信h5页面开发遇到那些坑
一.首先是ios对时间date()的支持不一样: var date =new Date("2016-05-31 00:00:00"); 这种写法在安卓和pc上都不正常的,唯独在io ...
android音乐播放器底部,android音乐播放器开发中所遇到的bug及解决方法
这几天在写一个android版的音乐播放器,在开发过程中遇到了一些小问题小bug,最后经过一番调试与查找终于发现问题所在.现在将开发中的问题与解决方法分享给大家... 一,音乐播放器的界面我采用的 ...
微信H5视频全屏/不全屏/自动播放等相关问题解决
转载内容. 做过微信H5视频的大胸弟们肯定受到过成吨的伤害甚至多到怀疑人生的地步,自动全屏,不能全屏,不能自动播放,Android,IOS,巴拉巴拉--多到令人发指!今天整理了一下相关的解决办法,以上 ...
微信公众号开发时返回中文数据为问号解决方法
最近在入门微信公众号开发时,发现从微信服务器获取的数据返回到前端时,中文都会变成 ?.百度后,发现很多解决方法都没什么作用,但还是找到了两个可以解决的办法. 一.使用HttpServletRespon ...
Microsoft Office Word 2010-2016中公式不能自动斜体的解决方法
转自该博客: https://www.cnblogs.com/1024th/p/10990607.html 并补充修改原文没有的 Microsoft Office遇到自定义宏要求数字签名的问题. 归纳 ...
企业微信H5页面title返回上一页不更新解决
由于微信浏览器只在页面首次加载时初始化了标题title,之后就没有再监听 window.title的change事件.所以这里修改了title后,立即创建一个请求,加载一个空的iframe,由于加载后 ...

关于微信H5页面开发中音乐不自动播放的解决方法

关于微信H5页面开发中音乐不自动播放的解决方法相关推荐

最新文章

热门文章