此处以点击音乐图片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()
audio标签+JS实现音乐播放和暂停的功能
原文地址:https://www.cnblogs.com/Cloudloong/p/9562725.html