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 相关文章推荐
IE中createElement需要注意的一个问题
Jul 13 Javascript
jQuery操作表格(table)的常用方法、技巧汇总
Apr 12 Javascript
JavaScript计时器示例分析
Feb 05 Javascript
jQuery的事件委托实例分析
Jul 15 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
Dec 02 Javascript
基于Turn.js 实现翻书效果实例解析
Jun 20 Javascript
Bootstrap源码解读按钮(5)
Dec 23 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
JS实现获取word文档内容并输出显示到html页面示例
Jun 23 Javascript
通过封装scroll.js 获取滚动条的值
Jul 13 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
Nov 02 Javascript
vue2和vue3的v-if与v-for优先级对比学习
Oct 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 静态化实现代码
2009/03/20 PHP
解析yahoo邮件用phpmailer发送的实例
2013/06/24 PHP
php检测文本的编码
2015/07/26 PHP
执行iframe中的javascript方法
2008/10/07 Javascript
Javascript 解疑
2009/11/11 Javascript
入门基础学习 ExtJS笔记(一)
2010/11/11 Javascript
jQuery JSON实现无刷新三级联动实例探讨
2013/05/28 Javascript
js实现对table动态添加、删除和更新的方法
2015/02/10 Javascript
基于JavaScript实现弹出框效果
2016/02/19 Javascript
基于jquery实现智能提示控件intellSeach.js
2016/03/17 Javascript
全面解析Bootstrap中nav、collapse的使用方法
2016/05/22 Javascript
jq stop()和:is(:animated)的用法及区别(详解)
2017/02/12 Javascript
详解VUE的状态控制与延时加载刷新
2017/03/27 Javascript
详解Angular.js数据绑定时自动转义html标签及内容
2017/03/30 Javascript
jquery点击回车键实现登录效果并默认焦点的方法
2018/03/09 jQuery
JS中双击和单击事件冲突的解决方法
2018/04/09 Javascript
用Cordova打包Vue项目的方法步骤
2019/02/02 Javascript
少女风vue组件库的制作全过程
2019/05/15 Javascript
Layui数据表格 前后端json数据接收的方法
2019/09/19 Javascript
[42:36]DOTA2上海特级锦标赛B组败者赛 VG VS Spirit第二局
2016/02/26 DOTA
python strip()函数 介绍
2013/05/24 Python
pyqt4教程之messagebox使用示例分享
2014/03/07 Python
python正则表达式之作业计算器
2016/03/18 Python
快速排序的四种python实现(推荐)
2019/04/03 Python
pandas通过字典生成dataframe的方法步骤
2019/07/23 Python
Canvas 帧动画吃苹果小游戏
2020/08/05 HTML / CSS
英国顶级家庭折扣店:The Works
2017/09/06 全球购物
中专生学习生活的自我评价分享
2013/10/27 职场文书
业绩倒数第一的检讨书
2014/09/24 职场文书
乡镇务虚会发言材料
2014/10/20 职场文书
碧霞祠导游词
2015/02/09 职场文书
酒店员工管理制度
2015/08/05 职场文书
2015元旦感言
2015/12/09 职场文书
只需要12页,掌握撰写一流商业计划书的技巧
2019/05/07 职场文书
SpringBoot集成Redis,并自定义对象序列化操作
2021/06/22 Java/Android
Python实现老照片修复之上色小技巧
2021/10/16 Python