js实现简单音乐播放器


Posted in Javascript onJune 30, 2020

本文实例为大家分享了js实现音乐播放器的具体代码,供大家参考,具体内容如下

效果图:

js实现简单音乐播放器

可播放暂停继续播放,进度条可拖动,时间展示,声音调节

完整代码(直接拿来用)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>audio功能开发</title>
 <style>
 * {
   margin:0;
   padding:0
 }
 .music-range {
   width:350px;
   height:10px;
   background:#2386e4;
   border-radius:5px;
   -webkit-appearance:none;
   margin:0 auto;
   cursor:pointer
 }
 .music-range::-webkit-slider-thumb {
   width:15px;
   height:15px;
   background:#fff;
   border:1px solid #f18900;
   cursor:pointer;
   border-radius:5px;
   -webkit-appearance:none
 }
 a {
   text-align:center
 }
 
 </style>
</head>
<body>
 <div class="music-all">
 <audio class='music-audio' controls>
  <source src="http://www.jq22.com/demo/jqueryaudio201903252328/jq22.mp3" type="audio/mpeg">
 </audio>
 <div>总时间 
  <span class='music-max'></span>
 </div>
 <div>时间 
  <span class='music-cur'></span>
 </div>
 <input class='music-range' type="range" min=0 max=100 value=0 />
 <div>音量<span class="music-voice">1</span></div>
 <button class='music-play'>播放</button>
 <button class='music-no'>停止</button>
 <button class="music-btnd">声小</button>
 <button class="music-btne">声大</button>
 <div class="music-animation"><span class="music-span"></span></div>
 
 <div class="music-list"></div>
 </div>
 <script src="js/jquery-1.10.2.js"></script>
 <script src="js/audio.js" type="text/javascript" charset="utf-8"></script>
 <script>
 var audios = document.getElementsByClassName("music-audio")[0];
var vol = audios.volume;
audios.controls = false;
$('.music-play').on('click', function () {
  audios.play();
  var duration = audios.duration;
  $('.music-max').html(timeleng(duration));
  $(".music-animation").addClass("play-an");
  $(".music-range").attr({
    'max': duration
  });
 
  function timer() {
    var t = parseInt(Math.round(audios.currentTime));
    $(".music-range").val(t);
    $('.music-cur').text(timeleng(t));
    t = parseInt(audios.currentTime);
    if (t < duration) {
      setTimeout(timer, 1000);
    } else {
      clearTimeout(timer);
    }
  }
  timer();
});
$('.music-no').on('click', function () {
  audios.pause();
  $(".music-animation").removeClass("play-an");
})
 
 
audios.onended = function () {
  $(".music-animation").removeClass("play-an")
};
$('.music-btnd').click(function () {
  vol = vol > 0 ? (vol * 10 - 1) / 10 : 0;
  audios.volume = vol;
  console.log(vol)
  $(".music-voice").html(vol)
})
$('.music-btne').click(function () {
  vol = vol < 1 ? (vol * 10 + 1) / 10 : 1;
  audios.volume = vol;
  console.log(vol)
  $(".music-voice").html(vol)
})
$(".music-range").on('change', function () {
  audios.currentTime = this.value;
  console.log(this.value)
  $(".music-range").val(this.value);
});
 
function timeleng(time) {
  var m = 0,
    s = 0,
    ms = '00',
    ss = '00';
  time = Math.floor(time % 3600);
  m = Math.floor(time / 60);
  s = Math.floor(time % 60);
  ss = s < 10 ? '0' + s : s + '';
  ms = m < 10 ? '0' + m : m + '';
  return ms + ":" + ss;
}
$(".music-qd").on("click", function () {
  var nameid = $(".input-text").val();
  console.log(nameid)
  $.ajax({
    type: "get",
    dataType: 'jsonp',
    success: function (d) {
      console.log(d)
    },
    error: function (d) {
      console.log(d);
    }
  });
})
 </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
农历与西历对照
Sep 06 Javascript
网页设计常用的一些技巧
Dec 22 Javascript
执行iframe中的javascript方法
Oct 07 Javascript
jQuery中Ajax的get、post等方法详解
Jan 20 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
Mar 24 Javascript
jQuery的css() 方法使用指南
May 03 Javascript
js实现移动端编辑添加地址【模仿京东】
Apr 28 Javascript
jQuery操作css样式
May 15 jQuery
JavaScript 中调用 Kotlin 方法实例详解
Jun 09 Javascript
vue下跨域设置的相关介绍
Aug 26 Javascript
基于vue1和vue2获取dom元素的方法
Mar 17 Javascript
vue下载excel的实现代码后台用post方法
May 10 Javascript
angular中的post请求处理示例详解
Jun 30 #Javascript
vue开发简单上传图片功能
Jun 30 #Javascript
jquery实现上传图片功能
Jun 29 #jQuery
vue实现图片上传到后台
Jun 29 #Javascript
JS判断数组四种实现方法详解
Jun 29 #Javascript
vue实现整屏滚动切换
Jun 29 #Javascript
vue实现页面切换滑动效果
Jun 29 #Javascript
You might like
解析php中获取系统信息的方法
2013/06/25 PHP
PHP mail()函数使用及配置方法
2014/01/14 PHP
php模拟post提交数据的方法
2015/02/12 PHP
PHP开启opcache提升代码性能
2015/04/26 PHP
如何用PHP来实现一个动态Web服务器
2015/07/29 PHP
PHP内存使用情况如何获取
2015/10/10 PHP
Yii框架用户登录session丢失问题解决方法
2017/01/07 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
Laravel开启跨域请求的方法
2019/10/13 PHP
基于PHP实现解密或加密Cloudflar邮箱保护
2020/06/24 PHP
判断iframe是否加载完成的完美方法
2010/01/07 Javascript
javascript 设为首页与加入收藏兼容多浏览器代码
2011/01/11 Javascript
在jQuery ajax中按钮button和submit的区别分析
2012/10/07 Javascript
extjs 04_grid 单击事件新发现
2012/11/27 Javascript
javascript重复绑定事件造成的后果说明
2013/03/02 Javascript
js控制的回到页面顶端goTop的代码实现
2013/03/20 Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
2015/09/11 Javascript
jquery对象和DOM对象的任意相互转换
2016/02/21 Javascript
JavaScript鼠标特效大全
2016/09/13 Javascript
JavaScript实现鼠标点击导航栏变色特效
2017/02/08 Javascript
angular6的table组件开发的实现示例
2018/12/26 Javascript
vue+koa2实现session、token登陆状态验证的示例
2019/08/30 Javascript
对Layer弹窗使用及返回数据接收的实例详解
2019/09/26 Javascript
Python的Django框架中TEMPLATES项的设置教程
2015/05/29 Python
Django将默认的SQLite更换为MySQL的实现
2019/11/18 Python
jupyter notebook的安装与使用详解
2020/05/18 Python
Python在centos7.6上安装python3.9的详细教程(默认python版本为2.7.5)
2020/10/15 Python
CSS3 伪类选择器 nth-child()说明
2010/07/10 HTML / CSS
html5在移动端的屏幕适应问题示例探讨
2014/06/15 HTML / CSS
学习党课思想汇报
2013/12/29 职场文书
写得不错的求职信范文
2014/07/11 职场文书
公务员政审材料范文
2014/12/23 职场文书
交通事故和解协议书
2015/01/27 职场文书
幼师自荐信范文
2015/03/06 职场文书
工作简报怎么写
2015/07/21 职场文书
windows11怎么查看wifi密码? win11查看wifi密码的技巧
2021/11/21 数码科技