audio标签+JS实现音乐播放和暂停的功能
此处以点击音乐图片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()
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步