解决iPhone手机音乐不能自动播放问题

在做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');
    }
}

 

文中如有错误，或者不完善的，可以多多交流。