最近做年会相关内容,背景音乐插入了,电脑上没问题,移动版就出事了,下面做一下记录
<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;
}
});
暂停/播放音乐的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);