关于IOS微信端ajax回调无法自动播放audio的解决方法

关于IOS微信端ajax回调无法自动播放audio的解决方法

首先呢我先介绍一下，我是PHPer但是公司没有前端，所以前端也是我来负责，但博主前端是个渣渣小白啊。。。公司需要做一个外卖系统，里面有个功能是有订单的时候就自动语音提醒，类似美团饿了么那种。很简单，直接用ajax和audio标签就能实现。

<audio id="music"  preload="auto" src="mp3.mp3"></audio> 
<script>
	$(function(){
		var music = document.getElementById('music');
		$.post("ajaxUrl", function(data){
				if(data == 'success') {
					music.play();
				}
		});
	})
</script>

简单粗暴，但是问题来了，用手机打开的时候发现并没有声音！一开始以为是代码问题，就改了一遍，但是在手机端还是不行。就去找了百度爸爸，发现了一个问题，IOS是不允许audio自动播放的，那且不是实现不了这个功能？但是我记得很多网页都有自动播放的功能啊，我觉得这个问题一定能解决的。所以又找了百度爸爸，百度上面有很多方案，这里我总结一下。

第一种：利用监听WeixinJSBridgeReady接口来实现自动播放

document.addEventListener("WeixinJSBridgeReady", function () { 
	music.play(); 
 }, false); 

亲测没效果

第二种：利用wx.ready()接口来触发自动播放

wx.ready(function(){
	music.play();
});

这种方法可以实现自动播放，但是问题来了，我把它放进ajax里面之后就不出效果了。很头疼，怎么回事呢，心态有点小崩。

抽支烟，想一下，发现一个问题，竟然wx.ready能够实现自动播放，那为什么放到ajax里面就不能播放了呢。然后我做了一个测试，外面放了wx.ready，在ajax里面直接放了music.play()，再做个定时器，代码如下

$(function(){
		var music = document.getElementById('music');
		wx.ready(function(){
			music.play();
		});
		setInterval(function(){
			$.post("ajaxUrl", function(data){
					if(data == 'success') {
						music.play();
					}
			}, 7000);
		});
	})

神奇的事情发生了，只要一进去就能播放声音，然后就连续播放，但还有一个问题就是没有新订单的时候还是会自动播放一次。总结出一个结论就是：在IOS上面，audio只要能被触发播放一次，那么它接下来就能被ajax回调连续触发。
最后一个问题就比较容易解决了，只要第一次播放的是空audio，等ajax回调之后再赋一个src属性那么久可以了。

完整代码

<audio id="music"  preload="auto"></audio> 
<script>
	$(function(){
		var music = document.getElementById('music');
		wx.ready(function(){
			music.play();
		});
		setInterval(function(){
			$.post("ajaxUrl", function(data){
					if(data == 'success') {
						music.setAttribute("src","mp3.mp3");
						music.play();
					}
			}, 7000);
		});
	})
</script>

搞定！如果对你有帮助的话可以给个赞或者收藏么，第一次发帖，有什么地方不对或者有疑问的评论一下哈，么么~