Ios mobile page audio cannot be paused

I have a page. The ios phone opens the page in qq, and the music plays automatically, but the music cannot be paused when you click pause (pause by clicking the custom button)

<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");
    }
});

then change click to 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");
    }
});

as a result, there is no sound now

Mar.22,2021

<!DOCTYPE html>
<html>
<body>


<audio id="myAudio" autoplay controls loop>
  <source src="/i/horse.ogg" type="audio/ogg">
  <source src="/i/horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>


<p id="demo">

<button onclick="myFunction()"></button> <script> function myFunction() { var audio = document.getElementById("myAudio"); if(audio.paused){ audio.play(); }else{ audio.pause(); } } </script> </body> </html>

this code is pasted here http://www.w3school.com.cn/ti..

Menu