解决ios下的微信打开的页面背景音乐无法自动播放 - CSDN博客
解决ios下的微信打开的页面背景音乐无法自动播放
在做各种场景页面的时候，插入背景音乐是一个很普遍的需求。我们都知道，IOS下的safari是无法自动播放音乐的，以至一直以来造成一种错误的认识，iso是无法媒体资源的。直到微信火爆起来，我们发现IOS的微信里面打开的页面却可以实现自动播放。这种情况颠覆了我之前的认知。但是，但是。。。最近的项目，又发现了一个头疼的问题。部分的IOS微信，打开有自动播放背景音乐的页面没有声音！！最头疼的是同款机子，相同的IOS系统，相同的微信版本！！没错，前端就是要经常这么折腾的，同一个问题，你以为找到了最终的解决方案，但是各种浏览器更新快速，昨天没问题，也许今天就有问题了。还好，这个问题暂时找到原因了，详情请看下文。
先看下平时使用audio标签插入背景音乐的代码：
&audio&id=&Jaudio&&class=&media-audio&&src=&bg.mp3&&autoplay&preload&loop=&loop&&&/audio&&
正常来说，上面的写法在安卓和大部分IOS机子的微信是可以播放的（safari这里就忽略讨论），可以扫一扫demo测试下你的手机：
如果上面的，你的ios微信可以播放，说明你的是大部分正常的手机。如果不能播放，哈哈，你成为了少部分不能正常播放的幸运者。。。
那代码有办法解决这少部分用户呢？如何解决呢？
答案的关键就是微信的WeixinJSBridgeReady事件。这个是微信自带提供的事件，测试发现，上面说的少部分的机子微信只要做微信ready后执行播放，就可以用代码实现自动播放功能了！具体代码请看下面：
&audio&id=&Jaudio&&class=&media-audio&&src=&bg.mp3&&preload&loop=&loop&&&/audio&&
function&audioAutoPlay(id){
&&&&var&audio&=&document.getElementById(id);
&&&&audio.play();
&&&&document.addEventListener(&WeixinJSBridgeReady&,&function&()&{
&&&&&&&&&&&&audio.play();
&&&&},&false);
audioAutoPlay('Jaudio');
刚才如果你第一个demo不能播放的童鞋可以再扫一扫测试下（如果第一个demo已经测试正常的，这个肯定是正常的啦）
是不是听到声音了呢？！！解决方案就是这么简单。
总结下吧，关于音乐自动播放的问题，现在可以分为三种：
1-支持audio的autoplay，大部分安卓机子的自带浏览器和微信，大部分的IOS微信（无需特殊解决）
2-不支持audio的autoplay，部分的IOS微信（本文提供的解决方案）
3-不支持audio的autoplay，部分的安卓机子的自带浏览器（比如小米，开始模仿safari）和全部的ios safari（这种只能做用户触屏时就触发播放了）
那么针对已知的三种情况，关于自动播放背景音乐的问题，我们来总结一下综合解决方案代码吧：
&audio&id=&Jaudio&&class=&media-audio&&src=&bg.mp3&&preload&loop=&loop&&&/audio&&
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(&touchstart&,play,&false);
audioAutoPlay('Jaudio');
本文已收录于以下专栏：
相关文章推荐
转载地址:/topic/1165
在做爆米兔的时候，遇到上面的问题，各种尝试都没有结果。最后发现：
通过下面的方式可以解决，在iPh...
在写实时聊天的页面的时候，有一个需求是点击完第一条开始播放后，后面如果没有播放就需要连续的往后播。新的消息来了之后需要自动播放；
由于ios的安全机制问题。不允许audio和video自动播放，所以...
官方文档说safari上不支持自动播放。必须触摸一次。因此可以这样：
$('html').one('touchstart',function(){
audio.play();
在微信浏览器里面使用video标签，会自动变成全屏，改成下面就好了，起码可以在video标签之前加其他元素。
 video id=&videoID&
webkit-playsinline=&true&...
最近在论坛中看到了很多实用html5开发视频播放,音乐播放的功能，大部分都在寻找答案。因此我就在这里做一个demo，供大家相互学习。html5开发越来越流行了，而对于视频这一块也是必不可少的一部分。如...
iOS 为了节省用户流量，对于 audio 和 video标签的 preload 和 autopaly 标签 会自动拦截，除非用户手动点击 交互才会执行 。但是客户要求，加载的时候必须有背景音乐，怎么...
keymap对应名字
提示错误解决方案
Show Intention Actions
option + enter
alt + enter
【工匠若水 http://blog.csdn.net/yanbober 转载请注明出处。点我开始Android技术交流】1 背景在开始Gradle之前请务必保证自己已经初步了解了Groovy脚本，特别...
【工匠若水 http://blog.csdn.net/yanbober 转载请注明出处。点我开始Android技术交流】1 背景Groovy脚本基于Java且拓展了Java，所以从某种程度来说掌握Ja...
在做各种HTML5场景页面的时候，插入背景音乐是一个很普遍的需求。我们都知道，iOS下的safari是无法自动播放音乐的，以至一直以来形成了一种认知，iOS是无法自动播放媒体资源的。直到微...
他的最新文章
讲师：何宇健
讲师：董岩
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)3被浏览1093分享邀请回答0添加评论分享收藏感谢收起0添加评论分享收藏感谢收起解决ios下的微信页面背景音乐无法自动播放问题 - CSDN博客
解决ios下的微信页面背景音乐无法自动播放问题
在做各种HTML5场景页面的时候，插入背景音乐是一个很普遍的需求。我们都知道，iOS下的safari是无法自动播放音乐的，以至一直以来形成了一种认知，iOS是无法自动播放媒体资源的。直到微信火爆起来，发现iOS的微信里面打开的页面却可以实现自动播放。这种情况颠覆了之前的认知。但是，但是。。。最近的项目，又发现了一个头疼的问题。部分的iOS微信，打开有自动播放背景音乐的页面没有声音！最头疼的是这个问题出现做同款机子，相同的iOS系统，相同的微信版本！没错，前端就是要经常这么折腾的，同一个问题，你以为找到了最终的解决方案，但是各种浏览器更新快速，昨天没问题，也许今天就有问题了。还好，这个问题暂时找到原因和解决方案了，详情请看下文。
先看下平时使用audio标签插入背景音乐的代码：
&audio src=&bg.mp3& id=&Jaudio& class=&media-audio& autoplay preload loop=&loop&&&/audio&
那代码有办法解决这少部分用户呢？如何解决呢？
答案的关键就是微信的WeixinJSBridgeReady事件。这个是微信自带提供的事件，测试发现，上面说的少部分的机子微信只要做微信ready后执行播放，就可以用代码实现自动播放功能了！具体代码请看下面：
&audio src=&bg.mp3& id=&Jaudio& class=&media-audio& autoplay preload loop=&loop&&&/audio&function audioAutoPlay(id){
var audio = document.getElementById(id);
audio.play();
document.addEventListener(&WeixinJSBridgeReady&, function () {
audio.play();
}, false);
document.addEventListener('YixinJSBridgeReady', function() {
audio.play();
}, false);
audioAutoPlay('Jaudio');
是不是听到声音了呢？！！解决方案就是这么简单。
总结下吧，关于音乐自动播放的问题，现在可以分为三种：
1-支持audio的autoplay，大部分安卓机子的自带浏览器和微信，大部分的IOS微信（无需特殊解决）
2-不支持audio的autoplay，部分的IOS微信（本文提供的解决方案）
3-不支持audio的autoplay，部分的安卓机子的自带浏览器（比如小米，开始模仿safari）和全部的ios safari（这种只能做用户触屏时就触发播放了）
那么针对已知的三种情况，关于自动播放背景音乐的问题，我们来总结一下综合解决方案代码吧：
&audio src=&bg.mp3& id=&Jaudio& class=&media-audio& autoplay preload loop=&loop&&&/audio&function audioAutoPlay(id){
var audio = document.getElementById(id),
play = function(){
audio.play();
document.removeEventListener(&touchstart&,play, false);
audio.play();
document.addEventListener(&WeixinJSBridgeReady&, function () {
}, false);
document.addEventListener('YixinJSBridgeReady', function() {
}, false);
document.addEventListener(&touchstart&,play, false);
audioAutoPlay('Jaudio');
本文已收录于以下专栏：
相关文章推荐
解决微信H5背景音乐不自动播放问题document.addEventListener('DOMContentLoaded',function (){
function audioAutoPla...
IOS Safari 的Audio支持Audio标签为html5中新增的标签，各种浏览器的支持情况大概如下：
但这边要注意的是移动平台并不能很好的兼容autoplay属性以及preloa...
最近接触一个移动短项目，做摇一摇的功能，然后摇的时候要有声音，摇中奖的时候也有声音，问题来了，iOS 5 不能用代码去触发播放声音，其实 Android 4.0+ 也有一样的问题，因为目前只折腾了 i...
/help/web/2221.shtml
作者:本站编辑 发布时间: 来源:本站原创 点击数:9756
ios 为了节省用户流量，对于 audio 和 video标签的 preload 和 autopaly 标签会自动拦截，除非用户手动点击交互才会执行 。
对于背景音乐，又必须加载的时候就要执行，解...
ios 为了节省用户流量，对于 audio 和 video标签的 preload 和 autopaly 标签 会自动拦截，
除非用户手动点击 交互才会执行 。
但是对于背景音乐，又必须加载的时...
iOS 为了节省用户流量，对于 audio 和 video标签的 preload 和 autopaly 标签 会自动拦截，除非用户手动点击 交互才会执行 。但是客户要求，加载的时候必须有背景音乐，怎么...
html5标签audio的autoplay属性可以设置在页面打开后自动播放。这个属性本来挺好的。但是最近做了一个项目却发现在iphone上无法自动播放。
各种查阅资料后发现原来iphone公司是考虑...
最近在论坛中看到了很多实用html5开发视频播放,音乐播放的功能，大部分都在寻找答案。因此我就在这里做一个demo，供大家相互学习。html5开发越来越流行了，而对于视频这一块也是必不可少的一部分。如...
在IOS中第一次调用play方法播放音频会被阻止，必须得等用户有交互动作，比如touchstart，click后才能正常调用，所以可以在摇一摇之前提醒用户点击一下开始游戏的按钮或者给用户一个弹窗，用户...
他的最新文章
讲师：何宇健
讲师：董岩
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)