分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 运营维护

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

发布时间:2023-09-06 02:12责任编辑:郭大石关键词:暂无标签

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

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved