原生JS实现音乐播放器
网络编程 2021-07-04 14:07www.168986.cn编程入门
这篇文章主要为大家详细介绍了原生JS音乐播放器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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-: 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-: 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;
: -8%;
}
.volPro {
width: 100%;
height: 5px;
margin-: 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;
: 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;
: 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;
: 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-: 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-: 5px;
border-radius: 5px;
}
.proColor {
height: 7px;
width: 30%;
background: #fff;
pointer-events: none;
}
.ctrls {
text-align: center;
margin-: 20px;
margin-left: 30px;
margin-right: 30px;
}
.btn {
position: absolute;
: 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;
: 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 mi = parseInt(music.currentTime / 60);
let sec = music.currentTime - mi 60;
if (sec < 10) {
cTime.innerHTML = "0" + mi + ":" + "0" + parseInt(sec);
} else {
cTime.innerHTML = "0" + mi + ":" + 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 mi = parseInt(music.currentTime / 60); //parseInt()解析一个字符串，并返回一个整数
let sec = music.currentTime - mi 60;
if (sec < 10) {
cTime.innerHTML = "0" + mi + ":" + "0" + parseInt(sec);
} else {
cTime.innerHTML = "0" + mi + ":" + 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);
});
}
最终效果展示
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。
上一篇：原生js实现九宫格拖拽换位
下一篇：通过滑动翻页效果实现和移动端click事件问题
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程：电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示：编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程