首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

原生JS实现音乐播放器

Posted in Javascript onJanuary 26, 2021

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

首先，使用HTML搭好我们的框架结构。这一步为了提高我们代码的可读性，多写注释。

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>原生JS音乐播放器</title>
 <link rel="stylesheet" href="css/public.css" >
 <link rel="stylesheet" href="css/css.css" >
 </head>
 <body>
 <!-- 音乐播放器 -->
 <div class="music">
 <!-- 歌曲信息 -->
 <div class="word">
 <div class="clears"></div>
 <!-- 歌曲封面 -->
 <div class="img">
 <img src="images/1.jpg" id="img" alt="" /></div>
 <!-- 歌曲封面 end -->
 </div>
 <!-- 歌曲信息 end -->
 <!-- 信息和音量 -->
 <div class="mtv">
 <!-- 文字信息 -->
 <div class="text">
 <h1 id="sName">歌曲名称</h1>
 <h2 id="singer">歌手</h2>
 </div>
 <!-- 文字信息 end -->
 <!-- 音量控制 -->
 <div class="vol01">
 <div class="volTop" id="volText">
 100%
 </div>
 <div class="volBottom">
 <div class="volPro" id="vol">
 <div class="volColor" id="volCol"></div>
 <div class="volBlock" id="volB"></div>
 </div>
 <div class="vImg">
 <img src="images/音量.png" alt="" />
 </div>
 </div>
 </div>
 <!-- 音量控制 end -->
 </div>
 <!-- 信息和音量 end -->
 <!-- 进度条 -->
 <div class="progress">
 <span class="cTime time" id="cTime">00:00</span> <!-- 当前时间 -->
 <span class="tTime time" id="tTime">00:00</span> <!-- 总的时间 -->
 <div class="clears"></div>
 <!-- 进度条小 -->
 <div class="proBar" id="songPro">
 <div class="proColor" id="proBar"></div>
 </div>
 <!-- 进度条小 end -->
 </div>
 <!-- 进度条 end -->
 <!-- 控制按钮 -->
 <div class="ctrls">
 <div class="btn">
 <img src="images/prev.png" class="prevBtn" id="prevBtn" alt="" />
 <img src="images/next.png" class="nextPrev" id="nextBtn" alt="" />
 </div>
 <button type="button" class="playBtn" id="playBtn"><img src="images/播放.png" alt="" /></button>
 </div>
 <!-- 控制按钮 end -->
 <audio src="#" id="music"></audio>
 </div>
 <!-- 音乐播放器 end -->
 <script src="js/js.js"></script>
 </body>
</html>

第二步，搭好框架后，就用CSS给他写上你喜欢的样式。注意这里我是将样式分为了公共样式和独立样式分开写的，提高代码可重复利用，当然你也可以使用SASS更方便，这里我只提供了独立样式，公共样式可以在网上自主寻找。

html {
 background: #92b991;
}

.music {
 width: 670px;
 height: 400px;
 background: url("../images/bg.jpg") no-repeat center;
 margin-left: auto;
 margin-right: auto;
 border: 1px #3d5e59 solid;
 margin-top: 150px;
 border-radius: 20px;
 box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
 position: relative;
}

.img {
 width: 200px;
 height: 200px;
 border: 2px #fff solid;
 overflow: hidden;
 border-radius: 100%;
 margin-top: 50px;
 margin-left: 35%;
}

.mtv {
 width: 670px;
 position: relative;
}

.text {
 color: #fff;
 margin-right: 30px;
 margin-left: 30px;
 margin-bottom: 10px;
}

.text>h1 {
 font-size: 24px;
 line-height: 30px;
 font-weight: normal;
}

.text>h2 {
 font-family: "Microsoft YaHei";
 font-size: 14px;
 font-weight: 300;
 line-height: 1.7;
}

.vol01 {
 position: absolute;
 height: 30px;
 width: 120px;
 right: 30px;
 top: -8%;
}

.volPro {
 width: 100%;
 height: 5px;
 margin-top: 44.5px;
 border: 1px #fff solid;
 border-radius: 5px;
}

.volColor {
 height: 5px;
 width: 100%;
 color: #fff;
 pointer-events: none;
}

.volBlock {
 pointer-events: none;
 position: absolute;
 top: 42px;
 width: 10px;
 height: 10px;
 border: 1px #fff solid;
 background: #f4f3f3;
 border-radius: 100%;
 left: 100%;
 margin-left: -5px;
}

.volTop {
 color: #fff;
 font-size: 10px;
 position: absolute;
 top: 25px;
 right: 0;
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}

.vImg {
 position: absolute;
 top: 38px;
 left: -26px;
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}

.time {
 font-family: "Microsoft YaHei";
 font-size: 10px;
 line-height: 1.5;
 color: #fff;
 margin-top: 25px;
}

.cTime {
 float: left;
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}

.tTime {
 float: right;
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}

.progress {
 margin-left: 30px;
 margin-right: 30px;
}

.proBar {
 width: 100%;
 height: 2px;
 overflow: hidden;
 background: #B292FF;
 margin-top: 5px;
 border-radius: 5px;
}

.proColor {
 height: 7px;
 width: 30%;
 background: #fff;
 pointer-events: none;
}

.ctrls {
 text-align: center;
 margin-top: 20px;
 margin-left: 30px;
 margin-right: 30px;
}

.btn {
 position: absolute;
 top: 50px;
}

.nextPrev {
 right: 0;
 margin-left: 200px;
 opacity: 0.1;
 transition: all 0.3s;
}

.nextPrev:hover {
 opacity: 0.5;
}

.prevBtn {
 left: 0;
 opacity: 0.1;
 transition: all 0.3s;
}

.prevBtn:hover {
 opacity: 0.5;
}

.playBtn {
 height: 200px;
 width: 200px;
 border-radius: 200px;
 opacity: 0.3;
 position: absolute;
 top: 52px;
 left: 250px;
 margin-left: -14px;
 transition: all 0.3s;
}


.playBtn:hover {
 opacity: 0.5;
 background: #46847b;
}

第三步，也是让音乐播放器具有灵魂的东西，使用JS添加功能。

1.获取ID（当然这里也可以获取类名或是元素，看你自己的习惯）。

let music = document.getElementById("music");
let playBtn = document.getElementById("playBtn");
let prevBtn = document.getElementById("prevBtn");
let nextBtn = document.getElementById("nextBtn");
let img = document.getElementById("img");
let sName = document.getElementById("sName");
let singer = document.getElementById("singer");
let tTime = document.getElementById("tTime");
let proBar = document.getElementById("proBar");
let cTime = document.getElementById("cTime");
let songPro = document.getElementById("songPro");
let vol = document.getElementById("vol");
let volCol = document.getElementById("volCol");
let volB = document.getElementById("volB");
let volText = document.getElementById("volText");

2.添加音乐播放功能。

导入音乐

let songs = [{
 mp3: "music/01.mp3",
 singer: "赵薇",
 name: "不能和你分手",
 img: "images/1.jpg"
 }, {
 mp3: "music/04.mp3",
 singer: "陈粒",
 name: "易燃易爆炸",
 img: "images/2.jpg"
 }, {
 mp3: "music/06.mp3",
 singer: "胡夏/郁可唯",
 name: "知否知否",
 img: "images/3.jpg"
 }];

音乐播放

let changeMusic = function(index) {
 music.src = songs[index].mp3;
 img.src = songs[index].img;
 sName.innerHTML = songs[index].name;
 singer.innerHTML = songs[index].singer;
 proBar.style.width = 0;
 };

 let index = 0;
 changeMusic(index);

音乐播放暂停

playBtn.addEventListener("click", function(event) {
 if (music.paused) {
 music.play();
 event.currentTarget.innerHTML = '<img src="images/暂停.png" alt=""/>';
 } else {
 music.pause();
 event.currentTarget.innerHTML = '<img src="images/播放.png" alt=""/>';
 }
 });

音乐切换

prevBtn.addEventListener("click", function(event) { //上一首
 index--;
 if (index <= -1) {
 index = songs.length - 1;
 }
 changeMusic(index);
 });

 nextBtn.addEventListener("click", function(event) { //下一首
 index++;
 if (index > songs.length - 1) {
 index = 0;
 }
 changeMusic(index);
 });
 
 music.addEventListener('ended',function () { //自动播放下一首
 index++;
 if (index > songs.length - 1) {
 index = 0;
 }
 changeMusic(index);
 })

3.添加进度条。

music.addEventListener("loadedmetadata", function(event) { //提示音频的元数据已加载
 tTime.innerHTML = parseInt(music.duration / 60) + ":" + parseInt(music.duration % 60);
 });
 
 music.addEventListener("timeupdate", function(event) { //监听音乐事实播放事件
 let jd = music.currentTime / music.duration;
 let bfb = jd * 100 + "%";
 proBar.style.width = bfb;
 if (music.currentTime < 10) {
 cTime.innerHTML = "0:0" + Math.floor(music.currentTime); 
 } else if (music.currentTime < 60) {
 cTime.innerHTML = "0:" + Math.floor(music.currentTime);
 } else {
 let minet = parseInt(music.currentTime / 60); 
 let sec = music.currentTime - minet * 60;
 if (sec < 10) {
 cTime.innerHTML = "0" + minet + ":" + "0" + parseInt(sec);
 } else {
 cTime.innerHTML = "0" + minet + ":" + parseInt(sec);
 }
 }
 });

小功能：点击进度条，音乐也跟着变化跳转到指定的时间。

songPro.addEventListener("click", function(event) {
 let x = event.offsetX;
 let bfb = x / 610 * 100;
 proBar.style.width = bfb + "%";
 music.currentTime = music.duration * bfb / 100;
 });

4.添加音量调节模块。

let getBfb = function(event) {
 let x = event.clientX; //返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标。
 let volX = vol.getBoundingClientRect().x;  //getBoundingClientRect()获取元素的宽高位置
 let disX = x - volX;
 disX = Math.max(0, disX); //返回最大数字
 disX = Math.min(120, disX); //返回最小数字
 return disX / 120;
 };

 let setVol = function(event) {
 let bfb = Math.floor(getBfb(event) * 10000) / 100;
 volCol.style.width = bfb + "%";
 volB.style.left = bfb + "%";
 volText.innerHTML = Math.floor(bfb) + "%";
 music.volume = bfb / 100;
 };

 vol.addEventListener("mousedown", function() {
 document.addEventListener("mousemove", setVol);
 });
 document.addEventListener("mouseup", function() {
 document.removeEventListener("mousemove", setVol);

 });

全部JS代码

这里我使用了{}作用域，让let 或 const声明的变量只在 let 或 const命令所在的代码块 {} 内有效，在 {} 之外不能访问（ECMAScript 6(简称ES6)中新增的）。

{
 let music = document.getElementById("music");
 let playBtn = document.getElementById("playBtn");
 let prevBtn = document.getElementById("prevBtn");
 let nextBtn = document.getElementById("nextBtn");
 let img = document.getElementById("img");
 let sName = document.getElementById("sName");
 let singer = document.getElementById("singer");
 let tTime = document.getElementById("tTime");
 let proBar = document.getElementById("proBar");
 let cTime = document.getElementById("cTime");
 let songPro = document.getElementById("songPro");
 let vol = document.getElementById("vol");
 let volCol = document.getElementById("volCol");
 let volB = document.getElementById("volB");
 let volText = document.getElementById("volText");

 let songs = [{
 mp3: "music/01.mp3",
 singer: "赵薇",
 name: "不能和你分手",
 img: "images/1.jpg"
 }, {
 mp3: "music/04.mp3",
 singer: "陈粒",
 name: "易燃易爆炸",
 img: "images/2.jpg"
 }, {
 mp3: "music/06.mp3",
 singer: "胡夏/谭维维",
 name: "知否知否",
 img: "images/3.jpg"
 }];

 let changeMusic = function(index) {
 music.src = songs[index].mp3;
 img.src = songs[index].img;
 sName.innerHTML = songs[index].name;
 singer.innerHTML = songs[index].singer;
 proBar.style.width = 0;
 };

 let index = 0;
 changeMusic(index);

 playBtn.addEventListener("click", function(event) {
 if (music.paused) {
 music.play();
 event.currentTarget.innerHTML = '<img src="images/暂停.png" alt=""/>';
 } else {
 music.pause();
 event.currentTarget.innerHTML = '<img src="images/播放.png" alt=""/>';
 }
 });

 prevBtn.addEventListener("click", function(event) { //上一首
 index--;
 if (index <= -1) {
 index = songs.length - 1;
 }
 changeMusic(index);
 });

 nextBtn.addEventListener("click", function(event) { //下一首
 index++;
 if (index > songs.length - 1) {
 index = 0;
 }
 changeMusic(index);
 });
 
 music.addEventListener('ended',function () { //自动播放下一首
 index++;
 if (index > songs.length - 1) {
 index = 0;
 }
 changeMusic(index);
 })

 music.addEventListener("loadedmetadata", function(event) { //提示音频的元数据已加载
 tTime.innerHTML = parseInt(music.duration / 60) + ":" + parseInt(music.duration % 60);
 });

 music.addEventListener("timeupdate", function(event) { //监听音乐事实播放事件
 let jd = music.currentTime / music.duration; //music.duration总时长 music.currentTime 当前时长
 let bfb = jd * 100 + "%";
 proBar.style.width = bfb;
 if (music.currentTime < 10) {
 cTime.innerHTML = "0:0" + Math.floor(music.currentTime); //Math.floor()向下取整
 } else if (music.currentTime < 60) {
 cTime.innerHTML = "0:" + Math.floor(music.currentTime);
 } else {
 let minet = parseInt(music.currentTime / 60); //parseInt()解析一个字符串，并返回一个整数
 let sec = music.currentTime - minet * 60;
 if (sec < 10) {
 cTime.innerHTML = "0" + minet + ":" + "0" + parseInt(sec);
 } else {
 cTime.innerHTML = "0" + minet + ":" + parseInt(sec);
 }
 }
 });

 songPro.addEventListener("click", function(event) {
 let x = event.offsetX;
 let bfb = x / 610 * 100;
 proBar.style.width = bfb + "%";
 music.currentTime = music.duration * bfb / 100;
 });

 let getBfb = function(event) {
 let x = event.clientX; //返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标。
 let volX = vol.getBoundingClientRect().x;  //getBoundingClientRect()获取元素的宽高位置
 let disX = x - volX;
 disX = Math.max(0, disX); //返回最大数字
 disX = Math.min(120, disX); //返回最小数字
 return disX / 120;
 };

 let setVol = function(event) {
 let bfb = Math.floor(getBfb(event) * 10000) / 100;
 volCol.style.width = bfb + "%";
 volB.style.left = bfb + "%";
 volText.innerHTML = Math.floor(bfb) + "%";
 music.volume = bfb / 100;
 };

 vol.addEventListener("mousedown", function() {
 document.addEventListener("mousemove", setVol);
 });
 document.addEventListener("mouseup", function() {
 document.removeEventListener("mousemove", setVol);

 });
}

最终效果展示：

原生JS实现音乐播放器

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

原生JS实现音乐播放器

- Author -

奶茶只要半糖

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Js判断CSS文件加载完毕的具体实现
Jan 17 Javascript
js利用prototype调用Array的slice方法示例
Jun 09 Javascript
javascript框架设计读书笔记之种子模块
Dec 02 Javascript
JS文字球状放大效果代码分享
Aug 19 Javascript
AngularJS 过滤器的简单实例
Jul 27 Javascript
深入理解Node.js的HTTP模块
Oct 12 Javascript
探讨AngularJs中ui.route的简单应用
Nov 16 Javascript
干货!教大家如何选择Vue和React
Mar 13 Javascript
js实现下拉框效果（select）
Mar 28 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
Sep 26 Javascript
JS 图片压缩原理与实现方法详解
Apr 29 Javascript
vue 使用async写数字动态加载效果案例
Jul 18 Javascript
通过滑动翻页效果实现和移动端click事件问题
Jan 26 #Javascript
全面解析js中的原型,原型对象,原型链
Jan 25 #Javascript
js中实现继承的五种方法
Jan 25 #Javascript
Vue中的nextTick作用和几个简单的使用场景
Jan 25 #Vue.js
Vue使用Ref跨层级获取组件的步骤
Jan 25 #Vue.js
javascript实现点击产生随机图形
Jan 25 #Javascript
如何在Vue项目中添加接口监听遮罩
Jan 25 #Vue.js
约旦购物网站(1) C++面试题(199) 哈萨克斯坦购物网站(2) 白俄罗斯购物网站(3) Android面试题(6) PHP面试题(54) 保加利亚购物网站(3) JAVA面试题(401) 冰岛购物网站(1) DB面试题(126)
You might like
PHP执行速率优化技巧小结
2008/03/15 PHP
PHP5.2中date()函数显示时间与北京时间相差8小时的解决办法
2009/05/28 PHP
如何使用php判断服务器是否是HTTPS连接
2013/07/05 PHP
PHP处理会话函数大总结
2015/08/05 PHP
使用Huagepage和PGO来提升PHP7的执行性能
2015/11/30 PHP
学习ExtJS fit布局使用说明
2009/10/08 Javascript
使用jQuery实现dropdownlist的联动效果(sharepoint 2007)
2011/03/30 Javascript
关于JavaScript对象的动态选择及遍历对象
2014/03/10 Javascript
Javascript中String的常用方法实例分析
2015/06/13 Javascript
jQuery实现径向动画菜单效果
2015/07/17 Javascript
Javascript函数式编程语言
2015/10/11 Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
2016/05/25 Javascript
Node.js的环境安装配置(使用nvm方式)
2016/10/11 Javascript
Bootstrap3 datetimepicker控件使用实例
2016/12/13 Javascript
Angular ng-repeat指令实例以及扩展部分
2016/12/26 Javascript
vue-cli webpack 引入jquery的方法
2018/01/10 jQuery
JavaScript实现淘宝京东6位数字支付密码效果
2018/08/18 Javascript
Typescript 中的 interface 和 type 到底有什么区别详解
2019/06/18 Javascript
解决layer.confirm快速点击会重复触发事件的问题
2019/09/23 Javascript
Angular封装表单控件及思想总结
2019/12/11 Javascript
node实现mock-plugin中间件的方法
2019/12/25 Javascript
JavaScript数组排序的六种常见算法总结
2020/08/18 Javascript
vue treeselect获取当前选中项的label实例
2020/08/31 Javascript
[01:28:31]《加油DOTA》真人秀 第五期
2014/09/01 DOTA
Python函数嵌套实例
2014/09/23 Python
Python中正则表达式详解
2017/05/17 Python
利用Python2下载单张图片与爬取网页图片实例代码
2017/12/25 Python
python3.7 利用函数os pandas利用excel对文件名进行归类
2019/09/29 Python
Python中__repr__和__str__区别详解
2019/11/07 Python
python3.8.3安装教程及环境配置的详细教程(64-bit)
2020/11/28 Python
HTML5里的placeholder属性使用实例和美化显示效果的方法
2014/04/23 HTML / CSS
简单英文演讲稿
2014/01/01 职场文书
公益活动邀请函
2014/02/05 职场文书
业务部门经理岗位职责
2014/02/23 职场文书
给下属加薪申请报告
2015/05/15 职场文书
会计工作自我鉴定范文
2019/06/21 职场文书