移动端页面添加网页自动播放音乐代码背景音乐代码

来源：蜘蛛抓取(WebSpider) 时间：2018-03-04 05:10 标签： h5页面音乐自动播放
30被浏览19,043分享邀请回答64 条评论分享收藏感谢收起$(document).one('WeixinJSBridgeReady', function () {
var audio = document.getElementById("audio");
audio.play(); //执行一次
audio.setAttribute('src', 'img/shake.mp3'); // 替换src
audio.load();
// 监听摇晃事件简化版
window.addEventListener('devicemotion', function () {
document.getElementById("audio").play(); // 成功播放
}, false);
具体代码地址： 3添加评论分享收藏感谢收起html5的audio标签无法再移动设备上自动播放
做了个微信应用，想加一个背景音乐，使用html5的audio标签在电脑浏览器上上可以自动播放，而在移动设备上无论是设置autoplay属性还是使用js调用play()方法，都不能自动播放，请问有何解决方案。这两个微信应用就可以播放背景音乐，但是在下不才，研究了半天也没发现他们是如何实现的，如何哪位大神能看懂麻烦告知小弟，感激不尽。。http://r.xiumi.us/stage/v3/29JL0/64658?from=singlemessage&isappinstalled=0#/0/0http://nb.sina.com.cn/zt/ssl342/oscars/index.html?isappinstalled=0&from=singlemessage&from=singlemessage&isappinstalled=0&from=wap
说说我自己的经验和理解：1、audio标签并不是在所有的手机上都不会自动播放的，部分手机会有这个问题。我之前见过一个和你的第一个链接很相似的效果，他们在里面的处理方式是设置自动播放属性，同时也监听触摸事件，因为是手机，所以人们会情不自禁的触摸屏幕，从而播放音乐，造成是自动播放的假象，提高了用户体验。这个也是我目前在使用的办法！2、第二个是，既然可以在触摸事件发生的时候控制音乐播放，那为什么不在一开始加载页面的时候就控制播放呢？当时我也应该想到了，但是不记得为什么没用...我的手机上是一直可以播放的，所以没办法帮你测试啦~希望楼主能自己尝试一下，告诉我一下结果，3Q~
你还没有登录，请先登录或注册慕课网帐号
你还没有登录，请先登录或注册慕课网帐号
你好，请问下方便加下QQ吗？
监听触摸事件 是怎么搞的，小弟不是太懂，可以指点指点吗
你还没有登录，请先登录或注册慕课网帐号
在移动端浏览器里则为0 = HAVE_NOTHING我想问下，你这个是怎么得出来的
你还没有登录，请先登录或注册慕课网帐号
25424人关注
12482人关注
Copyright (C) 2018 imooc.com All Rights Reserved | 京ICP备 号-11&&等HTML5网页背景音乐如何实现自动加载播放？网页背景音乐自动加载播放网页一点点加载后 有另外个音频A文件自动播放，如何自动识别并暂停背景音乐，先播放音频A，等A放完了，背景音乐再自动继续？求详细HTML和JS代码&3个牛币所有回答列表(2)等网页都加载完了开始播放A,然后设置一个等待时间，时间即为A的播放完的时间，时间一到再播放背景在body标签那里加个onload()，方法，然后调用自己写的JS代码去控制就OK了等等等等等等等等等等等等相关问答完等等完等等等完完等等最近浏览暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级扫描二维码关注最代码为好友"/>扫描二维码关注最代码为好友H5案例分享：解决H5中背景音乐无法自动播放问题_H5案例分享
H5案例分享：解决H5中背景音乐无法自动播放问题
解决H5中背景音乐无法自动播放问题
& &现在客户要求做H5场景应用、H5微刊、H5微杂志的时候加入背景音乐，这样能够很好地烘托气氛还能使整个案例生动不少，然并卵，由于市场上的手机型号过于繁杂，对于H5 API的支持十分地不统一，还有H5运行平台的不一致：有的在微信壳下，有的在浏览器里，有的在自己的APP里，等等因素造成在H5开发的过程中一不小心就掉进坑里了，今天小五就来讲一讲很多人在H5开发中遇到的背景音不能自动播放的问题。
& &现在IOS系统升级以后，禁止了Audio的Autoplay属性，原因如下：
In Safari on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and autoplay are disabled. No data is loaded until the user initiates it. This means the JavaScript play() and load() methods are also inactive until the user initiates playback, unless the play() or load() method is triggered by user action. In other words, a user-initiated Play button works, but an onLoad="play()" event does not.
This plays the movie:&input type="button" value="Play" onclick="document.myMovie.play()"&
This does nothing on iOS:
详情请查看
& &翻译过来后可以了解到：苹果为了用户着想，禁止了Autoplay和JS "onload" 加载播放，也就是说即使你在html文件里使用了preload和autoplay属性，在移动版 Safari 上，此属性会被忽视，并且不会加载视频流，甚至不会下载该视频流。除非用户物理点击一次屏幕，其实现在不能苹果手机，其他的安卓手机和部分App有时也存在背景音不能自动播放的问题。
三、背景音不能自动播放的场景及解决办法
1、大部分IOS系统和少部分Android系统的微信壳下不支持自动播放
& &解决方案：监听WeixinJSBridgeReady事件、DOMContentLoaded事件
& &微信的JS API建立在微信壳浏览器的内置JS对象WeixinJSBridge上，WeixinJSBridge并不是WebView一打开就有了，客户端需要初始化这个对象，当这个对象准备好的时候，客户端会抛出事件"WeixinJSBridgeReady"。
发现部分机型，监听DOMContentLoaded和load事件，在回调中也可以播放音乐；
所以，为了保险起见，可以同时监听两个事件，以增强其适用性。
代码如下：
& &解决方案：通过手势事件播放音乐
& &(1) 监听body的touchstart事件，回调中播放音乐；
& &缺点：第一次点击按钮元素可能不响应，部分元素的touch事件可能会阻止冒泡，需要在对应的地方调起播放音乐函数
var audio = document.getElementById('musicid');
function musicInBrowserHandler() {
audio.play();
document.body.removeEventListener('touchstart', musicInBrowserHandler);
document.body.addEventListener('touchstart', musicInBrowserHandler);
& &(2) 可以增加透明层，点击到透明层，播放音乐，关闭透明层；
& &缺点：第一次点击按钮元素可能不响应，而且有时候用户不会在打开页面短时间内点击，造成用户体验上的伤害。
部分App不支持webview音乐自动播放
& &解决方案：1.壳浏览器支持；2.通过手势事件播放音乐
& &缺点：有些壳浏览器可能没有音频自动播放的接口，或者用户不进行手势操作。
四、完整代码
& &苹果和部分安卓手机认为这种背景音自动播放，是不友好的行为，所以给禁了，其实小五也比较偏向于由用户选择是否播放音乐，毕竟流量还是很贵的，一个音频文件少则几十K，多则好几M，流量刷刷的没有了，然而大家还是在自动播放背景音上想尽办法，这对用户体验真的好吗？
& &那么对于选择自动播放音乐的客户，小五提出一些建议：
1.音乐不宜过长，30s为佳，而且音乐要加上渐现渐隐效果，方便循环播放；
2.音乐体积要小，音质和流量，在手机上还是优先考虑流量吧。
一般背景音乐体积可以接受的范围是200K以下，若太大，可以使用格式工厂等软件，降低它的比特率和声道来改变体积。
以上为“H5案例分享”团队原创文章，转载请注明出处！
分享到微信朋友圈x
打开微信，点击底部的“发现”，使用“扫一扫”即可将网页分享至朋友圈。
相关推荐：
微信扫一扫关注该公众号
微信极速登录/注册
Copyright (C)
Jiandou Technology Co.,Ltd. All Rights Reserved.
北京简豆科技有限公司版权所有 京ICP备号-1
对汉语支持不错，别对小五说英文
微信公众号
通过H5案例提交小助手(微信小程序)
微信扫描下方二维码进入,进行投稿
在电脑端，进入H5案例发布界面，自己编写
请pc端输入网址"h5-share.com"下载截图压缩包~
标签已提交成功小编正在审核请等待一下下啦
哎呀标签已存在换个新的呗~怎么自动播放背景音乐_百度宝宝知道

我要回帖

更多关于 h5页面音乐自动播放 的文章

 

随机推荐