js+audio实现音乐播放器


Posted in Javascript onSeptember 13, 2020

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

<!DOCTYPE html>
<html>

 <head>
 <meta charset="UTF-8">
 <title>音乐播放器</title>
 <link rel="shortcut icon" type="image/x-icon" href="img/an.ico" />
 <link rel="stylesheet" type="text/css" href="css/music_Play.css" />
 </head>

 <body>
 <div class="music_bg">
 <div class="music_cont">
 <audio id="audio1" src=""></audio>
 <div class="music_ctrl">
  <div class="music_btn">
  <div class="btn prev">
  <img id="prev" src="img/prev.png" />
  </div>
  <div class="btn play">
  <img id="play" src="img/pause.png" />
  </div>
  <div class="btn next">
  <img id="next" src="img/next.png" />
  </div>
  </div>
  <div class="music_name" id="music_name"></div>
 </div>
 <div class="music_line">
  <div class="line1" id="line1"></div>
  <div class="line2" id="line2"></div>
 </div>
 </div>
 </div>
 </body>
 <script src="js/audio_play.js" type="text/javascript" charset="utf-8"></script>
</html>
* {
 margin: 0;
 padding: 0;
 -moz-user-select: none;
 -webkit-user-select: none;
 -ms-user-select: none;
}


body {
 overflow-x: hidden;
}

.music_bg {
 width: 100%;
 height: 666px;
 position: absolute;
 background-image: url(../img/bj.jpg);
 background-position: center;
 background-size: cover;
 background-repeat: no-repeat;
}

.music_cont {
 width: 300px;
 height: 300px;
 position: absolute;
 top: 50%;
 left: 50%;
 margin: -150px 0 0 -150px;
 background-color: #000;
 border-radius: 10px;
 box-shadow: #000000 5px 5px 30px 5px
}

.music_line {
 width: 300px;
 height: 20px;
 overflow: hidden;
 position: absolute;
 top: 30%;
}

.line1 {
 width: 0%;
 height: 60%;
 float: left;
 margin-top: 1%;
 margin-right: -2px;
 background-color: rgba(255, 255, 255, 0.9);
}

.line2 {
 background-image: url(../img/point.png);
 height: 100%;
 background-repeat: no-repeat;
 width: 10px;
 background-position: center;
 float: left;
 cursor: pointer;
 margin-left: -4px;
 margin-right: -4px;
}

.music_ctrl {
 width: 300px;
 height: 200px;
 position: absolute;
 bottom: 0;
 background-color: #8c3232;
}

.music_btn {
 width: 300px;
 height: 100px;
 position: relative;
}

.btn {
 width: 33.33%;
 float: left;
 height: 40px;
 margin-top: 50px;
}

.prev img {
 float: right;
 margin: 10px 0px;
 cursor: pointer;
}

.play img {
 margin: 2px 35px;
 cursor: pointer;
}

.next img {
 float: left;
 margin: 10px 0px;
 cursor: pointer;
}

.music_name {
 width: 300px;
 height: 100px;
 position: relative;
 text-align: center;
 line-height: 100px;
 color: #fff;
 font-size: 18px;
}
// 定义索引和定时器
var index = 0,
 timer = null;
// 获取到要操作的对象
var prev = document.getElementById("prev");
var play = document.getElementById("play");
var next = document.getElementById("next");
var audio1 = document.getElementById("audio1");
var music_name = document.getElementById("music_name");
var line1 = document.getElementById("line1");
var line2 = document.getElementById("line2");
// 定义数组存音频相关资料
var music_src = ["1.mp3", "2.mp3", "3.mp3", "4.mp3"];
var music_title = ["白举纲-绅士(live)", "魔鬼中的天使", "下个路口见", "大鱼"];
// 进行初始化音频
audio1.src = "audio/" + music_src[index];
music_name.innerText = music_title[index];
// 按钮是点击事件
play.onclick = function() {
 move1(); // 播放或暂停
};
prev.onclick = function() {
 prev1(); // 上一曲,播放
 move1();
}
next.onclick = function() {
 next1(); // 下一曲,播放
 move1();
 }

 // 下一曲的函数
var next1 = function() { // 索引+1,初始化改变后的音乐播放界面
 if (index == music_src.length - 1) {
  index = 0;
 } else {
  index++;
 }
 audio1.src = "audio/" + music_src[index];
 music_name.innerText = music_title[index];
 }
 // 上一曲的函数
var prev1 = function() { // 索引-1,初始化改变后的音乐播放界面
 if (index == 0) {
  index = music_src.length - 1;
 } else {
  index--;
 }
 audio1.src = "audio/" + music_src[index];
 music_name.innerText = music_title[index];
 }
 // 暂停与播放的函数
var move1 = function() {
 // 判断现在是不是在播放
 if (audio1.paused) { // 没有,播放音乐,改变按钮样式,改变进度条
  audio1.play();
  play.src = "img/play.png";
  timer = setInterval(function() { // 每500毫秒执行一次
  var drtTime = audio1.duration; // 得到音频总时间(如果不放在定时器中会出现下一曲,暂停播放,进度条来回跳动)
  var curTime = audio1.currentTime; // 获取音频当前播放时间
  line1.style.width = (curTime / drtTime) * 100 + "%"; // 计算出进度条的长度
  if (drtTime==curTime) {
   next.onclick();
  }
  console.log(drtTime,curTime);
  }, 500);
 } else { // 播放,关闭音乐,关闭按钮图标
  audio1.pause();
  play.src = "img/pause.png";
  clearInterval(timer);
 }
 }
 // 拖动进度条改变播放进度
var flag = false; // 标记
var mx = null; // 距离
line2.onmousedown = function(event) {
 // 改变状态
 flag = true;
 // 按下鼠标获取距离
 mx = event.pageX - line2.offsetLeft;
 clearInterval(timer);
}
document.body.onmousemove = function(event) {
 // 当状态为true时可以获取
 if (flag) {
  // 滑块的位置=当前鼠标位置-距离
  var x1 = event.pageX - mx;
  // 进度条当前长度=滑块位置-进度条的开始坐标值
  var x2 = x1 - line1.offsetLeft;
  // 用进度条当前长度/进度条总长度得到一个小数
  var x3 = x2 / 295;
  // 取到小数点后3位
  var x4 = x3.toFixed(3);
  if (x4 >= 0 && x4 < 1) {
  // 当百分比在0--1之间时才改变进度条长度
  line1.style.width = x4 * 100 + "%";
  }else if (x4 == 1) {
  next.onclick();
  }
 }
 }
 // 放开鼠标时,状态改变,当前播放时间改变,启动定时器继续工作
document.body.onmouseup = function(event) {
 flag = false; // 状态改变
 var x5 = parseInt(line1.style.width) / 100; // 得到当前进度条的百分比
 var drtTime = audio1.duration; // 得到音频总时间
 audio1.currentTime = (drtTime * x5).toFixed(0); // 改变当前播放时间
 timer = setInterval(function() { // 定时器重启成功
 var curTime = audio1.currentTime;
 line1.style.width = (curTime / drtTime) * 100 + "%";
 }, 500);
}

相关图片

js+audio实现音乐播放器

js+audio实现音乐播放器
js+audio实现音乐播放器
js+audio实现音乐播放器
js+audio实现音乐播放器
js+audio实现音乐播放器

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

Javascript 相关文章推荐
js实现连个数字相加而不是拼接的方法
Feb 23 Javascript
jquery实现当滑动到一定位置时固定效果
Jun 17 Javascript
简介BootStrap model弹出框的使用
Apr 27 Javascript
基于Bootstrap3表格插件和分页插件实例详解
May 17 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
Oct 11 Javascript
Java  Spring 事务回滚详解
Oct 17 Javascript
Vue+axios 实现http拦截及路由拦截实例
Apr 25 Javascript
jQuery EasyUI tree增加搜索功能的实现方法
Apr 27 jQuery
easyui下拉框动态级联加载的示例代码
Nov 29 Javascript
JavaScript基于数组实现的栈与队列操作示例
Dec 22 Javascript
vue的for循环使用方法
Feb 12 Javascript
解决layer弹出层自适应页面大小的问题
Sep 16 Javascript
js+canvas实现刮刮奖功能
Sep 13 #Javascript
js+css3实现简单时钟特效
Sep 13 #Javascript
jquery实现简易验证插件封装
Sep 13 #jQuery
利用H5api实现时钟的绘制(javascript)
Sep 13 #Javascript
浅谈javascript事件环微任务和宏任务队列原理
Sep 12 #Javascript
返回上一个url并刷新界面的js代码
Sep 12 #Javascript
Vue和React有哪些区别
Sep 12 #Javascript
You might like
php session_start()出错原因分析及解决方法
2013/10/28 PHP
php自定义加密与解密程序实例
2014/12/31 PHP
JQERY limittext 插件0.2版(长内容限制显示)
2010/08/27 Javascript
JavaScript作用域链示例分享
2014/05/27 Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
2015/10/16 Javascript
jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
2015/12/03 Javascript
jQuery实例—选项卡的简单实现(js源码和jQuery)
2016/06/14 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
2016/11/05 Javascript
jQuery层级选择器_动力节点节点Java学院整理
2017/07/04 jQuery
解决JQuery全选/反选第二次失效的问题
2017/10/11 jQuery
利用VS Code开发你的第一个AngularJS 2应用程序
2017/12/15 Javascript
微信小程序修改swiper默认指示器样式的实例代码
2018/07/18 Javascript
新手必须知的Node.js 4个JavaScript基本概念
2018/09/16 Javascript
Vue.js组件高级特性实例详解
2018/12/24 Javascript
vue.js中ref及$refs的使用方法解析
2019/10/08 Javascript
python爬虫入门教程之糗百图片爬虫代码分享
2014/09/02 Python
详细解析Python中的变量的数据类型
2015/05/13 Python
python对象及面向对象技术详解
2016/07/19 Python
Python 变量的创建过程详解
2019/09/02 Python
在Django中实现添加user到group并查看
2019/11/18 Python
win10下python2和python3共存问题解决方法
2019/12/23 Python
Python统计时间内的并发数代码实例
2019/12/28 Python
Python实现不规则图形填充的思路
2020/02/02 Python
如何基于matlab相机标定导出xml文件
2020/11/02 Python
python+opencv实现车道线检测
2021/02/19 Python
车库门开启器、遥控器和零件:Chamberlain
2019/04/09 全球购物
高中毕业生自我鉴定例文
2013/12/29 职场文书
求职信的最佳写作思路
2014/02/01 职场文书
认识深刻的检讨书
2014/02/16 职场文书
平面设计专业大学生职业规划书
2014/03/12 职场文书
经济管理毕业生求职信
2014/03/15 职场文书
建筑结构施工求职信
2014/07/11 职场文书
营销总经理岗位职责范本
2014/09/02 职场文书
化验员岗位职责
2015/02/14 职场文书
十个Python自动化常用操作,即拿即用
2021/05/10 Python
Vue的过滤器你真了解吗
2022/02/24 Vue.js