解决微信播放背景音乐

待完善中....

<script type="text/javascript"> var firstTouch = true; $('body').bind("touchstart",function(e){ if ( firstTouch ) { firstTouch = false; document.getElementById('bgm').play(); }else{ return; } });
</script>

1) 原理就是若遇到禁止自动播放的手机，用户第一次触摸屏幕的时候就执行播放事件.

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

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

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

//微信自有事件，我理解想要调用微信方法，必须要注册这个方法之后才可以调用微信功能
document.addEventListener("WeixinJSBridgeReady",function() {//获取网络状态window["WeixinJSBridge"].invoke('getNetworkType',{},function(e) {//音频播放document.getElementById("sound").play();document.getElementById("sound").pause();//视频播放document.getElementById("video").play();document.getElementById("video").pause();});
},false);//下面代码等同于上面代码。
function onBridgeReady(){WeixinJSBridge.call('hideOptionMenu');
}if (typeof WeixinJSBridge == "undefined"){if( document.addEventListener ){document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);}else if (document.attachEvent){document.attachEvent('WeixinJSBridgeReady', onBridgeReady); document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);}
}else{onBridgeReady();
}

官方连接：http://qydev.weixin.qq.com/wiki/index.php?title=WeixinJS%E6%8E%A5%E5%8F%A3&oldid=287

转载于:https://www.cnblogs.com/izengbin/p/6847655.html

解决微信播放背景音乐相关推荐

白鹭引擎解决微信小游戏切换背景音乐无法播放的问题。
白鹭引擎版本:5.2.8 描述:白鹭引擎解决微信小游戏切换背景音乐无法播放的问题. main.ts文件中找到如下函数,增加上您的音频对象. egret.lifecycle.onResume = () ...
微信播放在服务器视频无法播放音乐,【bug解决】ios微信浏览器中背景音乐无法播放...
我记得之前在一次项目中,出现过浏览报错: 所以在这次H5的制作中,我使用了iframe来加载音频文件,使用这种方式后,电脑端是没有问题的,但是当上传至服务器上在手机上浏览时,会出现点击音乐旋转按钮无法 ...
解决ios下的微信页面背景音乐无法自动播放问题
前言在做各种HTML5场景页面的时候,插入背景音乐是一个很普遍的需求.我们都知道,iOS下的safari是无法自动播放音乐的,以至一直以来形成了一种认知,iOS是无法自动播放媒体资源的.直到微信火爆 ...
解决H5项目微信浏览器安卓系统无法自动播放背景音乐的问题
背景制作的H5项目,使用vedio标签,利用wx.getNetworkType来自动播放背景音乐. 但是安卓的vedio自动播放被微信浏览器限制了. 解决方案采用web vedio api 细节解 ...
解决微信浏览器video标签自动播放视频失效
正常在浏览器好好的视频,在微信内置浏览器中点击播放全屏,样式也不一样,自动播放失效.罪魁祸首是微信把video标签都成微信规则的了.下面方式可以解决视频播放全屏以及不能自动播放的问题. <vid ...
html5手机不能自动播放音乐,H5案例---解决H5中背景音乐无法自动播放问题
该楼层疑似违规已被系统折叠隐藏此楼查看此楼四.完整代码您的浏览器不支持 audio标签. // 音乐播放 function autoPlayMusic() { // 自动播放音乐效果,解决浏览器 ...
一种解决h5页面背景音乐不能自动播放的方案
一种解决h5页面背景音乐不能自动播放的方案场景:微信.浏览器.App 普通解决方案:采用audio标签的autoplay属性现象: 1.大部分IOS系统和少部分Android微信不支持自动播放解 ...
uniapp 判断页面是否是横竖屏,解决微信小程序video组件全屏播放视频遮盖自定义播放控件问题
如果res.deviceOrientation 等于landscape 的话是竖屏,portrait则是横屏.因为用户每旋转一次屏幕就会触发里面的onShow钩子,因此在页面显示或横竖屏变化都会触发这 ...
解决微信页面加载自动播放音乐
项目中突然用到了这个功能,于是记录了下来 html: <audio style="display:none; height: 0" id="bg-music&quo ...

解决微信播放背景音乐

解决微信播放背景音乐相关推荐

最新文章

热门文章