autio的自动播放问题

最近做年会相关内容，背景音乐插入了，电脑上没问题，移动版就出事了，下面做一下记录

 <audio src="" autoplay="autoplay" loop="loop" id="audio" preload="auto"></audio>

在 JS中

var flag=0; //为了保证只有第一次 触发事件的时候 进行 播放 后面 将方法制空

var audio=document.getElementById('audio');
$('html').on('touchstart',function(){
   if(!flag){
      audio.load();   //IOS 9 必须load一下
      audio.play();   //IOS 7/8 直接使用
      flag=1;
   }
});

 

http://www.cnblogs.com/aaronjs/p/4812119.html

暂停/播放音乐的js

var myAudio = document.getElementById('audio');
    function playPause(){
        if(myAudio.paused){
            myAudio.play();
        }else{
            myAudio.pause();
        }
    }

在audio标签里引入了autoplay属性；经过测试发现Android上可以自动播放，ios上无法自动播放。

<audio src="Cure.m4a" autoplay="autoplay" loop="loop" id="audio" preload="auto"></audio>

在js文件中执行audio.play();

经过测试发现Android上可以自动播放，ios上无法自动播放。

 myAudio.play();

 

解决办法

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);