ios 移动端页面 audio无法暂停

Question

我有一个页面，ios手机在qq里面打开页面，音乐自动播放，但是点击暂停时音乐暂停不了（通过点击自定义按钮暂停）

<div class="music">

    <i class="music-icon"></i>

    <audio id="audio" src="bgmusic.mp3" loop="loop" autoplay="autoplay"></audio>

</div>

function MusicPlay(){

    var audio = document.getElementById('audio');

    var ico = $('.music i');

    if(audio.paused){

        audio.play();

        ico.addClass('torotate');

    }else{

        audio.pause();

        ico.removeClass('torotate');

    }

}

$('body').on('click',function(event){

    var playBtn = $('.music i');

    var music = document.getElementById('audio');

    var target = $( event.target );

    if( target.is( playBtn )){

        MusicPlay();

    }else{

        music.play();

        playBtn.addClass('torotate');

    }

});

后来又将click改成touchstart

$(document).on('touchstart', function(event) {

    var playBtn = $('.music i');

    var music = document.getElementById('audio');

    var target = $( event.target );

    if( target.is( playBtn )){

        MusicPlay();

    }else{

        music.play();

        playBtn.addClass('torotate');

    }

});

结果这下没有声音了