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 相关文章推荐
JavaScript Eval 函数使用
Mar 23 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
Apr 11 Javascript
原生js和jquery实现图片轮播特效
Apr 23 Javascript
jquery延迟对象解析
Oct 26 Javascript
JS实现超简单的汉字转拼音功能示例
Dec 22 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
Sep 19 Javascript
javascrit中undefined和null的区别详解
Apr 07 Javascript
node.js使用http模块创建服务器和客户端完整示例
Feb 10 Javascript
一篇文章带你从零快速上手Rollup
Sep 07 Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
Nov 16 Javascript
如何在vue中使用kindeditor富文本编辑器
Dec 19 Vue.js
JS实现简单九宫格抽奖
Jun 28 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中字符查找函数strpos、strrchr与strpbrk用法
2014/11/18 PHP
PHP实现数据分页显示的简单实例
2016/05/26 PHP
PHP中检索字符串的方法分析【strstr与substr_count方法】
2017/02/17 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
PHP连接MySQL数据库三种实现方法
2020/12/10 PHP
取键盘键位ASCII码的网页
2007/07/30 Javascript
jQuery ui 1.7更新小结
2009/08/15 Javascript
Javascript中的var_dump函数实现代码
2009/09/07 Javascript
使用js获取QueryString的方法小结
2010/02/28 Javascript
JavaScript异步调用定时方法并停止该方法实现代码
2012/03/16 Javascript
E3 tree 1.6在Firefox下显示问题的修复方法
2013/01/30 Javascript
改变文件域的样式实现思路同时兼容ie、firefox
2013/10/23 Javascript
关于Javascript 对象(object)的prototype
2014/05/09 Javascript
PageSwitch插件实现100种不同图片切换效果
2015/07/28 Javascript
AngularJS内建服务$location及其功能详解
2016/07/01 Javascript
在vue中v-bind使用三目运算符绑定class的实例
2018/09/29 Javascript
Vue列表渲染的示例代码
2018/11/01 Javascript
vue+element tabs选项卡分页效果
2020/06/29 Javascript
[22:20]初生之犊-TI4第5名LGD战队纪录片
2014/08/13 DOTA
在Python中使用全局日志时需要注意的问题
2015/05/06 Python
改进Django中的表单的简单方法
2015/07/17 Python
Python字符串拼接、截取及替换方法总结分析
2016/04/13 Python
使用paramiko远程执行命令、下发文件的实例
2017/10/01 Python
Python3 操作符重载方法示例
2017/11/23 Python
python openpyxl使用方法详解
2019/07/18 Python
CSS3盒子模型详解
2013/04/24 HTML / CSS
HTML5 声明兼容IE的写法
2011/05/16 HTML / CSS
英国领先的办公用品供应商:Viking
2016/08/01 全球购物
美国酒店控股公司:Choice Hotels
2018/06/15 全球购物
美国女士时尚珠宝及配饰购物网站:Icing
2018/07/02 全球购物
servlet面试题
2012/08/20 面试题
优秀经理事迹材料
2014/02/01 职场文书
乡镇计划生育工作汇报
2014/10/28 职场文书
2014年销售经理工作总结
2014/12/01 职场文书
2015年母亲节活动策划方案
2015/05/04 职场文书
PyTorch中permute的使用方法
2022/04/26 Python