关于h5中背景音乐的自动播放效果的实现

<audio id="music1" controls="controls" autoplay="autoplay" preload id="music1" hidden>

<source src="music/bgmusic.mp3" />

</audio>

<!--这里是音乐-->

<img id="btn" class="active" src="img/music.png" alt="" />

<!--这里是一个可以控制背景音乐播放暂停的开关-->

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

$("#btn").bind("touchstart", function bf() {

if(audio !== null) {

//检测播放是否已暂停.audio.paused 在播放器播放时返回false.

//alert(audio.paused);

if(audio.paused) {

audio.play(); //audio.play();// 这个就是播放

$("#btn").addClass("active")

} else {

audio.pause(); // 这个就是暂停

$("#btn").removeClass("active")

}

}

})

$("html").one('touchstart',function(){

audio.play();

})