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()


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM