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

转载于:https://www.cnblogs.com/Cloudloong/p/9562725.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值