audio标签+JS实现音乐播放和暂停的功能

Posted 2021-01-02 巨大怪物出现!!!

此处以点击音乐图片sndctrl实现功能举例：

html部分：

<div class="sndctrl">
　　<img class="homeLoadingImg" data-src="images/a01.png"><i></i>
　　<audio id="audio" src="media/music.mp3" autoplay></audio>
</div>

JS部分：

/*
函数名称：music()
功 能：播放背景音乐
*/
function music() {
　　var audio=document.getElementById("audio");
　　var sndplay=false;
　　$("html,body").one("touchstart",function(){
　　　　sndplay=true;
　　　　audio.play();
　　});
　　audio.addEventListener("ended",function(e){
　　　　sndplay=true;
　　　　audio.play();
　　},false);
　　$(".sndctrl").click(function(){
　　if(sndplay){
　　　　audio.pause();
　　　　$(this).find("i").show();
　　　}else{
　　　　audio.play();
　　　　$(this).find("i").hide();
　　}
　　　　sndplay=!sndplay;
　　});
};

最后记得在自己代码合适位置调用music()