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

posted @   美滋滋的胖虎  阅读(2473)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示