原声html+css+js 实现简单的音乐播放器
注意：代码我放在了最后面
在写音乐播放器之前我们先了解一下 audio标签 他属于媒体标签一类。
audio标签
- audio标签可以实现在HTML页面中嵌入音频内容。
- audio标签的属性可以设置是否自动播放、预加载、以及循环播放等功能。
- audio标签提供了播放、暂停、和音量控制来控制音频。
- 注意： IE8 或更早版本的IE浏览器不支持 audio 标签。
- audio标签提供三种音频格式文件
- MP3：采用 mpeg 音频解码器。
- Ogg：采用 ogg 音频解码器。
- Wav：采用 wav 音频解码器。
- audio 标签支持一下属性
-
src ：指定播放文件的URL，可以通过
。 -
controls ： 激活各个浏览器提供的默认控制。
-
autoplay ：加载音频后自动播放。
-
loop ：设置该属性后，会循环播放音频。
-
preload ：缓存设置。
-
HTML5 针对媒体元素 新增的属性如下
- play() ：播放媒体文件。
- pause()：暂停播放。
- load()：加载媒体文件。
- canPlayType(type)：查看浏览器是否支持这种文件格式的媒体文件。
-
paused：视频处于暂停或者未播放状态时，这个值为 true。
-
ended：视频已经结束播放时，这个值为 true。
-
duration：返回媒体时长，以秒为单位。
-
currentTime：获取或设置媒体播放位置。
音乐播放器只要明白一个公式，写起来就很简单。我们先看一下这个公式。
公式：总时间 除以 当前运动时间 = 比例 用比例 乘以 总路程 在赋值给“ 点 ” 。
第一步，点击播放按钮让音乐播放 可以调用audio标签自带的属性 play()和pause()
// 播放歌曲
Bplay.onclick = function(){
if(onFout==true){
audiO.play(); //play() 可以使音乐播放
}else{
audiO.pause(); //pause() 可以使音乐暂停
}
}第二步，实现歌曲进度条 这就要用到我们上面的公式了。
调用audio标签自带的属性 currentTime(当前运动时间)；除以 duration(总时间) 乘以 总路程(就是你设置进度条的宽度)；~~（）这个方法是取整
//歌曲进度条
function ProgressTime(){
//公式：当前运动时间 除以 总时间 =比例； 然后比例*总路程 在赋值给那小点
let a = audiO.currentTime/audiO.duration;
Dian.style.marginLeft = ~~(a*ZongLuCheng.offsetWidth)+"px";
beijing.style.width = a*ZongLuCheng.offsetWidth+"px";
//把当前运动时间传给页面
let Odangqian = getTime(audiO.currentTime);
let Dqian = document.getElementById("Dqian");
Dqian.innerHTML = `${Odangqian[1]}:${Odangqian[2]}`
}第三步，拖拽进度条 使进度条同步
首先要先让进度条能拖拽 使用onmousedown鼠标按下、onmousemove鼠标移动、onmouseup鼠标抬起。
如何获取 “ 点 ” 走了多长距离 用 “ 点 ” 到前视口到的位置 减去 “ 点 ”的父级位置到视口的距离 然后再减去 “ 点 ”的宽度 除以 2 这里的（“ 点 ”的宽度 除以 2 意思是鼠标点击之后，鼠标在点的中间位置）。
这里我们就不能使用上面的公式了，要反向思考 。。。我反向思考九九八十一个小时后 得出公式
公式：当前运动时间 除以 总路程 = 比例 然后 比例 乘以 总时间。
currentTime(当前运动时间)；除以 总路程(就是你设置进度条的宽度)； 乘以 duration(总时间)
此时要注意offsetparent
//拖动进度条
tuodong();
function tuodong(){
Dian.onmousedown = function(ev){
document.onmousemove = function(ev){
//offsetParent 元素自身有fixed定位，父元素不存在定位，则offsetParent的结果为null（firefox中为：body，其他浏览器返回为null）
let x = ev.clientX;
let a = x-Dian.offsetParent.offsetLeft - Dian.offsetWidth / 2;
Dian.style.marginLeft = a+"px";
beijing.style.width = a+"px";
//以当前运动时间 除以 总路程 = 比例 比例*总时间 就求出了当时运动到哪里了
let n = parseInt(getComputedStyle(Dian).marginLeft)/ZongLuCheng.offsetWidth;
audiO.currentTime = n*audiO.duration;
ProgressTime();
}
document.onmouseup = function(ev){
this.onmousedown = null;
this.onmousemove = null;
}
}
}第四部， 音量，跟上面的进度条拖拽一模一样 只是内容换一下，音量也可以用刚才上面的公式 但是不完全一样 因为 进度条是左右拖动 ，而音量键是上下拖动，音量键最大值也就是1 最小值是0所以一开始是最大值 ，当他往下拖动就变成了 0.9 、0.6、 0.4 、直到0 就没声音了。
所以当套用之前的公式的时候，我们音量键往上拖动是负数 也就是越往上声音越小，明显逻辑不对，应该是越往上声音越大，所以我们在此处减1，变成负数 ，然后再用比例乘以-1 在变回正数
公式：（当前运动时间 除以 总路程）-1 (此时减1是为了变成负数) = 比例 然后 比例 乘以 -1。(此时乘以负1是为了变成正数)
// 音量拖拽
Vodian.onmousedown = function(e){
document.onmousemove = function(e){
let y = e.clientY;
let a = Vodian.offsetParent.offsetTop;
let n = y-a - Vodian.offsetWidth/2;
if(n>=7 && n<=101){
Vodian.style.marginTop =n+"px";
Vobeijing.style.height =n+"px";
//让音量同步 以当前运动时间 除以 总路程 减1 是为了变成负数
let coP = parseInt(getComputedStyle(Vodian).marginTop)/Vojindu.offsetHeight-1;
let lopT = coP*-1 //此时乘以 负1 是为了变回正数
audiO.volume = lopT;
console.log(coP)
}else{
n = 7;
}
}
document.onmouseup = function(e){
this.onmousedown = null;
this.onmousemove = null;
}
}ok 此时已经完成了 两大功能 第一是 拖拽进度条 让进度条同步播放 ，第二是 音量拖动 使音量可以自由放大缩小。歌词显示 及歌词滚动 也可以用上面的公式 你们可以自己试试看。
如有书写错误还请及时提出，感谢 ！非常感谢 ！
文件链接：百度网盘 请输入提取码
提取码：7780
代码我放在下方 需要可以自取，
HTML
精致版播放器
奇迹再现
专辑：迪迦歌手：光
迪迦-奇迹再现
00:00 / 00:00
.png)
.png)
CSS
*{
margin: 0px;
padding: 0px;
list-style: none;
text-decoration: none;
}
body{
}
/* 底部播放器-开始 */
.B-body{
width: 100vw;
height: 230px;
/* background-color: #b8b5b5; */
position: fixed;
display: flex;
flex-direction: column;
align-items: center;
bottom: 0;
}
.b-waizhao{
width: 900px;
height: 80px;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
/* 播放键 */
.b-play{
width: 145px;
height: 80px;
display: flex;
justify-content: space-between;
align-items: center;
}
.b-play>div>img{
width: 35px;
height: 35px;
cursor: pointer;
}
/* 进度条 */
.b-progress{
width: 500px;
height: 80px;
/* background-color: #214231; */
display: flex;
align-items: center;
justify-content: space-around;
}
.tou-X{
width: 60px;
height: 60px;
}
.tou-X>img{
width: 100%;
height: 100%;
}
.Prss{
width: 390px;
height: 60px;
}
.Prss-biaoti{
width: 100%;
display: flex;
justify-content: space-between;
margin-top: 5px;
}
.bt-1{
font-size: 13px;
color: #f9f6f6;
}
.s-time{
font-size: 13px;
color: #f9f6f6;
}
.p-instll{
width: 390px;
margin-top: 20px;
cursor: pointer;
position: relative;
}
.p-jintu{
width: 390px;
border: solid 1px #f9f6f6;
position: absolute;
}
.p-drop{
width: 10px;
height: 10px;
background-color: #f9f6f6;
border-radius: 5px;
position: absolute;
margin-top: -4px;
z-index: 2;
}
.p-background{
width: 5px;
border: solid 1px #00aaff;
position: absolute;
z-index: 1;
}
/* 音量键 */
.b-volume{
width: 200px;
height: 80px;
/* background-color: aqua; */
display: flex;
align-items: center;
justify-content: space-around;
position: relative;
}
.b-volume>div{
height: 80px;
display: flex;
align-items: center;
}
.b-volume>div>img{
width: 18px;
height: 18px;
cursor: pointer;
}
.yinkuang{
width: 80px;
height: 150px;
/* background-color: #55ff00; */
margin-left: 550px;
opacity: 0;
transition: 0.2s;
}
.yinliang{
width: 25px;
height: 120px;
border-radius: 10px;
background-color: #444444;
display: flex;
flex-direction: column;
align-items: center;
margin: 0 auto;
}
.Vo-dian{
width: 10px;
height: 10px;
border-radius: 5px;
background-color: #00aaff;
z-index: 2;
cursor: pointer;
margin-top: 10px;
}
.Vo-beijing{
width: 4px;
height: 10px;
background-color: #ffffff;
position: absolute;
z-index: 1;
margin-top: 10px;
}
.Vo-jindu{
width: 4px;
height: 100px;
background-color: #00aaff;
position: absolute;
margin-top: 10px;
}
/* 底部播放器-结束 */
.zhong-pig{
width: 100vw;
height: 100vh;
overflow: hidden;
position: relative;
}
/* 歌词开始 */
.G-lyric{
width: 100vw;
height: 100vh;
background-color: rgb(53, 53, 53,0.5);
position: absolute;
display: flex;
align-items: center;
justify-content: center;
}
.G-back{
width: 260px;
height: 500px;
}
.G-back>img{
width: 260px;
height: 280px;
}
.g-kuangci{
width: 460px;
height: 500px;
/* background-color: #55aaff; */
margin-left: 137px;
}
.g-biaoti>p{
width: 300px;
margin-top: 10px;
display: flex;
font-size: 20px;
font-weight: bold;
color: #fff;
justify-content: space-between;
}
.g-biaoti>p>span{
font-size: 15px;
}
.ge-xianci{
width: 400px;
height: 400px;
/* background-color: blueviolet; */
margin-top: 20px;
overflow: hidden;
}
.geciO{
width: 400px;
/* background-color: #ffaa7f; */
transition: 0.3s;
}
.geciO>li{
color: #eeeeee;
font-size: 16px;
margin-top: 10px;
}
/* 歌词结束 */
/* 背景虚化开始 */
.XW-wu{
width: 1200px;
height: 1200px;
position: absolute;
}
.XW-wu>img{
width: 100vw;
height: 100%;
filter: blur(50px);
}如有书写错误还请及时提出，感谢 ！非常感谢 ！