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 array 数组详解
Mar 22 Javascript
JavaScript中“基本类型”之争小结
Jan 03 Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
Sep 11 Javascript
document.documentElement和document.body区别介绍
Sep 16 Javascript
jquery实现手风琴效果实例代码
Nov 15 Javascript
js实现仿微博滚动显示信息的效果
Dec 21 Javascript
基于Javascript实现返回顶部按钮
Feb 29 Javascript
基于node.js制作简单爬虫教程
Jun 29 Javascript
浅析vue中常见循环遍历指令的使用 v-for
Apr 18 Javascript
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
May 28 Javascript
如何在js代码中消灭for循环实例详解
Jul 29 Javascript
Vue 实现前端权限控制的示例代码
Jul 09 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实现遍历目录并删除指定文件中指定内容
2015/01/21 PHP
PHP积分兑换接口实例
2015/02/09 PHP
分享3个php获取日历的函数
2015/09/25 PHP
Linux php 中文乱码的快速解决方法
2016/05/13 PHP
yii2.0框架实现上传excel文件后导入到数据库的方法示例
2020/04/13 PHP
使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇
2010/05/07 Javascript
javascript通过class来获取元素实现代码
2013/02/20 Javascript
用jQuery实现优酷首页轮播图
2017/01/09 Javascript
Zepto实现密码的隐藏/显示
2017/04/07 Javascript
解决vue 更改计算属性后select选中值不更改的问题
2018/03/02 Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
2018/08/24 Javascript
Vue项目数据动态过滤实践及实现思路
2018/09/11 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
2019/06/17 Javascript
使用vue for时为什么要key【推荐】
2019/07/11 Javascript
Vue-CLI 项目在pycharm中配置方法
2019/08/30 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
2019/10/30 Javascript
[15:35]教你分分钟做大人:天怒法师
2014/10/30 DOTA
使用wxPython获取系统剪贴板中的数据的教程
2015/05/06 Python
Python fileinput模块使用实例
2015/06/03 Python
使用Python搭建虚拟环境的配置方法
2018/02/28 Python
django表单实现下拉框的示例讲解
2018/05/29 Python
不到40行代码用Python实现一个简单的推荐系统
2019/05/10 Python
用openCV和Python 实现图片对比,并标识出不同点的方式
2019/12/19 Python
Pytorch之保存读取模型实例
2019/12/30 Python
关于jupyter打开之后不能直接跳转到浏览器的解决方式
2020/04/13 Python
美国名表在线商城:Ashford(支持中文)
2019/09/24 全球购物
阿联酋彩妆品牌:OUD MILANO
2019/10/06 全球购物
亚洲领先的旅游体验市场:Voyagin
2019/11/23 全球购物
值传递还是引用传递
2015/02/08 面试题
自动化系在校本科生求职信
2013/10/23 职场文书
应聘教师推荐信
2013/10/31 职场文书
党支部书记先进事迹
2014/01/17 职场文书
眼镜促销方案
2014/03/15 职场文书
计算机毕业生自荐信
2014/06/12 职场文书
车辆年审委托书范本
2014/09/18 职场文书
Moment的feature导致线上bug解决分析
2022/09/23 Javascript