天天看點

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;
   }
});      
autio的自動播放問題

暫停/播放音樂的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:此方法

//使用微信現在提供過的微信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();      
var audio=document.querySelector("#audio");
    document.addEventListener("WeixinJSBridgeReady",function(){
    audio.play();
    },false);