一、问题

最近做了一个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无法自动播放的问题的更多相关文章

  1. html5 audio标签微信部分苹果手机不能自动播放音乐终极解决方案

    html5 audio标签微信部分苹果手机不能自动播放音乐终极解决方案 大家都知道需要在点击时候后 播放 ps:如果点击ajax 回来播放也不行,必须点击立即播放 要背景自动播放只能采取下面方案< ...

  2. 摇一摇—微信7.0.8版本audio无法自动播放问题

    近日有一个项目出现audio无法自动播放,查看原因才发现是微信版本更新为7.0.8版本,需要有交互行为,第一次播放需要用户手动点击一下,无法使用DOM中的play()进行直接播放操作,那怎么办呢? 通 ...

  3. iphone微信 h5页音乐自动播放

    iphone微信 h5页音乐自动播放: // iphone自动播放 document.addEventListener("WeixinJSBridgeReady", functio ...

  4. html5 video微信浏览器视频不能自动播放

    html5 video微信浏览器视频不能自动播放 一.微信浏览器(x5内核): 1.不能自动播放 2.全屏 3.最顶层(z层的最顶层) 二.ios系统解决方案:(无phone手机未测试) <au ...

  5. egret 篇——关于ios环境下微信浏览器的音频自动播放问题

    前段时间公司突然想用egret(白鹭引擎)做一个金币游戏,大半个月边看文档边写吭哧吭哧也总算是弄完了.期间遇到一个问题,那就是ios环境下微信浏览器的音频自动播放问题. 个人感觉吧,egret自己封装 ...

  6. 100%解决ios上audio不能自动播放的问题

    由于ios的安全机制问题,不允许audio和video自动播放,所以想要使audio标签自动播放那是实现不了的,即使给play()也是播放不了. 解决方法: 首先,创建audio标签:<audi ...

  7. 微信video和audio无法自动播放解决方案

    //音频,写法一<audio src="music/bg.mp3" autoplay loop controls>你的浏览器还不支持哦</audio> // ...

  8. 微信h5，背景音乐自动播放

    移动端默认是禁止背景音乐自动播放的,很多需求都需要在页面加载完成的情况下同时出现背景音乐. 既然是微信h5,那么wx.config肯定不陌生,废话不多,直接上代码: html: <audio s ...

  9. 解决ios下的微信页面背景音乐无法自动播放问题

    在做各种html5场景页面的时候,插入背景音乐是一个很普遍的需求,我们都知道,ios下的safari是无法自动播放音乐的,以至于现在行程一种认知,ios是没有办法自动播放媒体资源的,这个认知其实是错误 ...

随机推荐

  1. 【swift学习笔记】五.使用枚举优雅的管理Segue

    在做页面转跳的时候,我们要给Segue命名,如果Segue多了,管理他们就是一个恶梦.我们可以枚举更优雅的管理这些Segue. 1.我们先来建立一个protocol,他的功能就是让实现类实现一个Seg ...

  2. 创业日志N，一听到别人说创业我就怕

    最近总有些朋友想创业,咨询我的意见. 一般是在公司干腻了,有个想法,想出来试试水.还有是觉得自己的idea太棒了,想试试. 相同的是两者都有点怕.听说最近创业环境不好,没有投资!有个朋友推荐的创业者, ...

  3. Objective-c快速入门

    对象(Class)的声明和定义 和其他的语言不同,OC的对象创建分为两个部分.声明部分(@interface)和实现部分(@implementation),且它们都必须使用@end结束. 对象的声明( ...

  4. EventBus使用

    转自 http://blog.csdn.net/harvic880925/article/details/40660137

  5. 基于MemoryCache的缓存辅助类

    背景: 1. 什么是MemoryCache? memoryCache就是用电脑内存做缓存处理 2.使用范围? 可用于不常变的数据,进行保存在内存中,提高处理效率 代码: /// <summary ...

  6. 启动 Eclipse 弹出“Failed to load the JNI shared library jvm.dll”错误的解决方法

    原因1:给定目录下jvm.dll不存在. 对策:(1)重新安装jre或者jdk并配置好环境变量.(2)copy一个jvm.dll放在该目录下. 原因2:eclipse的版本与jre或者jdk版本不一致 ...

  7. Android源码——AsynTask

    AsyncTask<Params, Progress, Result>中三个参数为: Params         输入数据 Progress       过程数据 Result     ...

  8. javascript随机打乱数组

    var arr=[]; ;i<;i++){ arr[i]=i; } arr.sort(function(){ return 0.5 - Math.random() }) var str=arr. ...

  9. UTF-8编码的空格（194 160）问题

    前台的字符串传递到后台进行处理,发现了一个较诡异的问题:字符串中的一个空格(ASCII:32)被UTF-8编码之后变成了一个诡异的字符(ASCII:194 和 160的组合)!但在后台其表象还是空格. ...

  10. Java MD5机密算法的使用

    MD5 是常用的加密算法,是不可逆的.既只能加密,但不能解密. package cn.com.ctsi.csdp.base.util; import java.security.MessageDige ...