在做h5开发的时候需要插入背景音乐,使用 html 的 audio 标签 可以实现,但是在开发过程中发现iPhone手机打开h5页面时音乐并不会自动播放,而是要点一下屏幕才会自动播放,上网找了半天,各种踩坑,最終还是找到解决方案。
解决方案如下:
<div id="musicImg" class="music_img rotate"><img onclick="so_music()" src="/images/music.png" alt=""></div>
<audio src="song.mp3" autoplay="autoplay" id='song' loop="loop"></audio>
// 音乐自动播放
function audioAutoPlay(id){
var audio = document.getElementById(id);
play = function(){
audio.play();
document.removeEventListener("touchstart",play, false);
};
audio.play();
// 获取微信初始化完成
document.addEventListener("WeixinJSBridgeReady", function () {
play();
}, false);
// 易信
document.addEventListener('YixinJSBridgeReady', function() {
play();
}, false);
// 手机触碰屏幕
document.addEventListener("touchstart",play, false);
}
audioAutoPlay('song');
// 点击暂停音乐
function so_music(){
var audio = document.getElementById('song');
if(audio.paused){
audio.play();
musicImg.setAttribute('class','music_img rotate');
}else{
audio.pause();
musicImg.setAttribute('class','music_img');
}
}
文中如有错误,或者不完善的,可以多多交流。