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