首页 > Web开发 > 详细

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

时间:2018-08-30 21:22:33      阅读:357      评论:0      收藏:0      [点我收藏+]

此处以点击音乐图片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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!