微信的audio无法自动播放的问题
一、问题
最近做了一个html5的项目,里面涉及到音乐播放,项目要求音乐进入页面就自动播放,于是我就想到了html5的audio标签,将mp3引入进去。
1.在audio标签里引入了autoplay属性;
经过测试发现Android上可以自动播放,ios上无法自动播放。
<audio id="audio" src="1.mp3" autoplay="autoplay"></audio>
2.在js文件中执行audio.play();
经过测试发现Android上可以自动播放,ios上无法自动播放。
var audio=document.querySelector("#audio");
audio.play();
二、原因
ios 为了节省用户流量,对于 audio 和 video标签的 preload 和 autopaly 标签 会自动拦截,
除非用户手动点击 交互才会执行 。
三、解决办法
前提:进入页面就自动播放
1.方法一
ps:此方法转载自(http://www.cnblogs.com/xiezhonglong/p/5780942.html)
//使用微信现在提供过的微信js-sdk 在ready中进行播放便可。 //首先引用js :
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> //然后写方法 : function autoPlayAudio1(){
wx.config({
// 配置信息, 即使不正确也能使用 wx.ready
debug: false,
appId: '',
timestamp: 1,
nonceStr: '',
signature: '',
jsApiList: []
});
wx.ready(function() {
document.getElementById('audio').play();
});
}
autoPlayAudio1();
2、方法二
var audio=document.querySelector("#audio");
document.addEventListener("WeixinJSBridgeReady",function(){
audio.play();
},false);
前提:异步操作的自动播放(比如页面2s之后自动播放音乐)
要实现异步操作下的自动播放,上边的第一种方法可以用,第二种方法已经不适用
1.方法一
//使用微信现在提供过的微信js-sdk 在ready中进行播放便可。 //首先引用js :
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> //然后写方法 : function autoPlayAudio1(){
wx.config({
// 配置信息, 即使不正确也能使用 wx.ready
debug: false,
appId: '',
timestamp: 1,
nonceStr: '',
signature: '',
jsApiList: []
});
wx.ready(function() {
document.getElementById('audio').play();
});
} setTimeout(autoPlayAudio1,2000);
2.方法二
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title> </head> <body>
<div id="div1" style="display: none;"></div>
<audio src="1.mp3" id="audio"></audio>
</body>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript">
setTimeout(function() {
wx.getNetworkType({
success: function(res) {
document.querySelector("#audio").play();
}
});
}, 2000);
</script>
</html>
3.方法三
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="div1" style="display: none;"></div>
<audio src="1.mp3" id="audio"></audio>
</body>
<script type="text/javascript">
setTimeout(function(){
//下面的'getNetworkType'并不是固定不变的,可以用'getLocation'等替代
WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
document.querySelector("#audio").play();
});
},2000);
</script>
</html>
4.方法四
该方法是用的HTML5的音频接口AudioContext来实现的,查看更多
PS:该方法暂停之后重新播放是从头开始,与audio标签不同
function MyAudio(url) {
window.AudioContext = window.AudioContext || window.webkitAudioContext;
this.audioContext = new AudioContext();
this.audioBuffer = null;
var xhr = new XMLHttpRequest();
xhr.open("get", url, true);
xhr.responseType = "arraybuffer";
var _this = this;
xhr.onload = function() {
_this.audioContext.decodeAudioData(xhr.response, function(buffer) {
_this.audioBuffer = buffer;
console.log(this.currentTime);
if(typeof callback == "function") {
callback.call(_this, buffer);
}
});
}
xhr.send();
}
//执行音乐播放
MyAudio.prototype.play = function() {
if(this.audioBuffer) {
this.source = this.audioContext.createBufferSource();
this.source.buffer = this.audioBuffer;
this.source.connect(this.audioContext.destination);
this.source.start(0); } }
//执行音乐停止
MyAudio.prototype.stop = function(buffer) {
if(this.source) {
this.source.stop(0);
}
} var audio = new MyAudio("./1.mp3");
setTimeout(function() {
audio.play();
});
四、总结
现在总结一下能够通用的方法(兼容ios和android)
; void function (win, doc, undefined) {
// 原理:模拟用户触发播放
Audio.prototype._play = Audio.prototype.play;
HTMLAudioElement.prototype._play = HTMLAudioElement.prototype.play; function wxPlayAudio(audio) {
WeixinJSBridge.invoke('getNetworkType', {}, function (e) {
audio._play();
});
} function play() {
var that = this;
that._play();
try {
wxPlayAudio(that);
return;
} catch (e) {
document.addEventListener("WeixinJSBridgeReady", function(){
that._play();
}, false);
}
} Audio.prototype.play = play;
HTMLAudioElement.prototype.play = play;
}(window, document);
以上是自己的一些心得,如果有不对的地方希望能多多指教
微信的audio无法自动播放的问题的更多相关文章
- html5 audio标签微信部分苹果手机不能自动播放音乐终极解决方案
html5 audio标签微信部分苹果手机不能自动播放音乐终极解决方案 大家都知道需要在点击时候后 播放 ps:如果点击ajax 回来播放也不行,必须点击立即播放 要背景自动播放只能采取下面方案< ...
- 摇一摇—微信7.0.8版本audio无法自动播放问题
近日有一个项目出现audio无法自动播放,查看原因才发现是微信版本更新为7.0.8版本,需要有交互行为,第一次播放需要用户手动点击一下,无法使用DOM中的play()进行直接播放操作,那怎么办呢? 通 ...
- iphone微信 h5页音乐自动播放
iphone微信 h5页音乐自动播放: // iphone自动播放 document.addEventListener("WeixinJSBridgeReady", functio ...
- html5 video微信浏览器视频不能自动播放
html5 video微信浏览器视频不能自动播放 一.微信浏览器(x5内核): 1.不能自动播放 2.全屏 3.最顶层(z层的最顶层) 二.ios系统解决方案:(无phone手机未测试) <au ...
- egret 篇——关于ios环境下微信浏览器的音频自动播放问题
前段时间公司突然想用egret(白鹭引擎)做一个金币游戏,大半个月边看文档边写吭哧吭哧也总算是弄完了.期间遇到一个问题,那就是ios环境下微信浏览器的音频自动播放问题. 个人感觉吧,egret自己封装 ...
- 100%解决ios上audio不能自动播放的问题
由于ios的安全机制问题,不允许audio和video自动播放,所以想要使audio标签自动播放那是实现不了的,即使给play()也是播放不了. 解决方法: 首先,创建audio标签:<audi ...
- 微信video和audio无法自动播放解决方案
//音频,写法一<audio src="music/bg.mp3" autoplay loop controls>你的浏览器还不支持哦</audio> // ...
- 微信h5,背景音乐自动播放
移动端默认是禁止背景音乐自动播放的,很多需求都需要在页面加载完成的情况下同时出现背景音乐. 既然是微信h5,那么wx.config肯定不陌生,废话不多,直接上代码: html: <audio s ...
- 解决ios下的微信页面背景音乐无法自动播放问题
在做各种html5场景页面的时候,插入背景音乐是一个很普遍的需求,我们都知道,ios下的safari是无法自动播放音乐的,以至于现在行程一种认知,ios是没有办法自动播放媒体资源的,这个认知其实是错误 ...
随机推荐
- [LeetCode] Find the Difference 寻找不同
Given two strings s and t which consist of only lowercase letters. String t is generated by random s ...
- [LeetCode] First Missing Positive 首个缺失的正数
Given an unsorted integer array, find the first missing positive integer. For example,Given [1,2,0] ...
- PyVISA介绍
针对测量仪器进行编程比较痛苦,存在各种各样的协议以及通过不同接口和总线(GPIB.USB.RS232).使用任何一种语言去编程,你必须找到支持仪器和对应总线的合适的库. 为了解决这种问题,VISA应运 ...
- Socket通信类
package com.imooc; import java.io.BufferedReader; import java.io.IOException; import java.io.InputSt ...
- IO操作工具类
package com.imooc.io; import java.io.BufferedInputStream; import java.io.BufferedOutputStream; impor ...
- 0104探究MySQL优化器对索引和JOIN顺序的选择
转自http://www.jb51.net/article/67007.htm,感谢博主 本文通过一个案例来看看MySQL优化器如何选择索引和JOIN顺序.表结构和数据准备参考本文最后部分" ...
- 递推 hdu 3411
http://blog.csdn.net/wust_xhj/article/details/47779539 怎么推可以看这里 f[0]=0 f[1]=1 [0,1]* | 0 q |(n-1)= ...
- Java学习笔记(三)
今天主要学习了ant ant概述 ant是一个将软件编译.测试.部署等步骤联系在一起加以自动化的一个工具,大多用于Java环境中的软件开发.在实际软件开发中,有很多地方可以用到ant 开发环境: Sy ...
- 由于服务器意外的断电,导致SQL SERVER服务器上数据库出现“置疑”而无法使用,
来自百度 1.停止数据库服务器,将数据库MDF文件和LDF文件复制备份一份2.启动数据库服务器,删除置疑的数据库3.仅用备份的数据库MDF文件附加数据库,sp_attach_db或者sp_attach ...
- Python进制转换
一 内置函数 bin().oct().hex()的返回值均为字符串,且分别带有0b.0o.0x前缀. 实例 统计二进制数里1的个数 def countBits(n): return bin(n).co ...