首页
所有分类
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 相关文章推荐
在javascript将NodeList作为Array数组处理的方法
Jul 09 Javascript
jquery分页插件jpaginate在IE中不兼容问题
Apr 22 Javascript
js实现图片上传并正常显示
Dec 19 Javascript
jquery实现简单的遮罩层
Jan 08 Javascript
深入理解node exports和module.exports区别
Jun 01 Javascript
angularjs的select使用及默认选中设置
Apr 08 Javascript
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
Dec 09 Javascript
玩转Koa之koa-router原理解析
Dec 29 Javascript
微信小程序中如何计算距离某个节日还有多少天
Jul 15 Javascript
使用js实现一个简单的滚动条过程解析
Sep 10 Javascript
angula中使用iframe点击后不执行变更检测的问题
May 10 Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
Jul 24 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
ip2region(1) 反射(1) scrapy(1) HttpClient(1) BottomSheetDialog(1) RestTemplate(1) dataBinding(1) 注解(1) Quartz(1) Hive(5)
You might like
Linux下php5.4启动脚本
2014/08/03 PHP
JavaScript 封装Ajax传递的数据代码
2009/06/05 Javascript
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
2013/05/17 Javascript
Jquery遍历checkbox获取选中项value值的方法
2014/02/13 Javascript
extjs 时间范围选择自动判断的实现代码
2014/06/24 Javascript
Javascript 实现图片无缝滚动
2014/12/19 Javascript
七夕情人节丘比特射箭小游戏
2015/08/20 Javascript
JS与jQ读取xml文件的方法
2015/12/08 Javascript
不同js异步函数同步的实现方法
2016/05/28 Javascript
详解js中的apply与call的用法
2016/07/30 Javascript
JS实现间歇滚动的运动效果实例
2016/12/22 Javascript
Angular的自定义指令以及实例
2016/12/26 Javascript
jQuery zTree 异步加载添加子节点重复问题
2017/11/29 jQuery
vue中当图片地址无效的时候,显示默认图片的方法
2018/09/18 Javascript
打印出python 当前全局变量和入口参数的所有属性
2009/07/01 Python
对python判断是否回文数的实例详解
2019/02/08 Python
详解Django项目中模板标签及模板的继承与引用(网站中快速布置广告)
2019/03/27 Python
Python文件打开方式实例详解【a、a+、r+、w+区别】
2019/03/30 Python
PyQt5 如何让界面和逻辑分离的方法
2020/03/24 Python
django实现日志按日期分割
2020/05/21 Python
Keras 数据增强ImageDataGenerator多输入多输出实例
2020/07/03 Python
HTML5 video播放器全屏(fullScreen)方法实例
2015/04/24 HTML / CSS
canvas绘制视频封面的方法
2018/02/05 HTML / CSS
STUBHUB日本：购买和出售全球活动门票
2018/07/01 全球购物
Converse匡威法国官网：美国著名帆布鞋品牌
2018/12/05 全球购物
创意爱尔兰礼物：Creative Irish Gifts
2020/01/29 全球购物
2019年Java面试必问之经典试题
2012/09/12 面试题
What's the difference between an interface and abstract class? (接口与抽象类有什么区别)
2012/10/29 面试题
农林环境专业求职信
2014/03/13 职场文书
事业单位人员的自我评价范文
2014/09/21 职场文书
云南省召开党的群众路线教育实践活动总结会议新闻稿
2014/10/21 职场文书
合作与交流自我评价
2015/03/09 职场文书
单位证明范文
2015/06/18 职场文书
关于开学的感想
2015/08/10 职场文书
宣传部部长竞选稿
2015/11/21 职场文书
2016重阳节红领巾广播稿
2015/12/18 职场文书