原声html+css+js 实现简单的音乐播放器

百科知识2025-04-279

注意：代码我放在了最后面

在写音乐播放器之前我们先了解一下 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()

    // 播放歌曲
     = function(){
        if(onFout==true){
            ();  //play() 可以使音乐播放
        }else{
            ();  //pause() 可以使音乐暂停
        }
    }

第二步，实现歌曲进度条 这就要用到我们上面的公式了。

调用audio标签自带的属性 currentTime(当前运动时间)；除以 duration(总时间) 乘以 总路程(就是你设置进度条的宽度)；~~（）这个方法是取整

    //歌曲进度条
    function ProgressTime(){
        //公式：当前运动时间 除以 总时间 =比例；   然后比例*总路程 在赋值给那小点    
        let a = /;
         = ~~(a*)+"px";
         = a*+"px";

        //把当前运动时间传给页面
        let Odangqian = getTime();
        let Dqian = ("Dqian");
         = `${Odangqian[1]}:${Odangqian[2]}`
    }

第三步，拖拽进度条 使进度条同步

首先要先让进度条能拖拽 使用onmousedown鼠标按下、onmousemove鼠标移动、onmouseup鼠标抬起。

如何获取 “ 点 ” 走了多长距离 用 “ 点 ” 到前视口到的位置 减去  “ 点 ”的父级位置到视口的距离  然后再减去 “ 点 ”的宽度 除以 2 这里的（“ 点 ”的宽度 除以 2 意思是鼠标点击之后，鼠标在点的中间位置）。

这里我们就不能使用上面的公式了，要反向思考 。。。我反向思考九九八十一个小时后 得出公式

公式：当前运动时间 除以 总路程  = 比例  然后  比例 乘以 总时间。

currentTime(当前运动时间)；除以 总路程(就是你设置进度条的宽度)； 乘以 duration(总时间)

此时要注意offsetparent 

//拖动进度条
tuodong();
function tuodong(){
= function(ev){
= function(ev){
//offsetParent 元素自身有fixed定位，父元素不存在定位，则offsetParent的结果为null（firefox中为：body，其他浏览器返回为null）
let x = ;
let a = - / 2;
= a+"px";
= a+"px";

        //以当前运动时间 除以 总路程 = 比例 比例*总时间   就求出了当时运动到哪里了
        let n = parseInt(getComputedStyle(Dian).marginLeft)/;
         = n*;
        ProgressTime();
    }
     = function(ev){
         = null;
         = null;
    }
}

}

第四部， 音量，跟上面的进度条拖拽一模一样 只是内容换一下，音量也可以用刚才上面的公式 但是不完全一样 因为 进度条是左右拖动 ，而音量键是上下拖动，音量键最大值也就是1 最小值是0所以一开始是最大值 ，当他往下拖动就变成了 0.9 、0.6、 0.4 、直到0 就没声音了。

所以当套用之前的公式的时候，我们音量键往上拖动是负数 也就是越往上声音越小，明显逻辑不对，应该是越往上声音越大，所以我们在此处减1，变成负数 ，然后再用比例乘以-1 在变回正数

公式：（当前运动时间 除以 总路程）-1 (此时减1是为了变成负数)   = 比例  然后  比例 乘以 -1。(此时乘以负1是为了变成正数)

// 音量拖拽
= function(e){
= function(e){
let y = ;
let a = ;
let n = y-a - /2;
if(n>=7 && n<=101){
=n+"px";
=n+"px";

        //让音量同步   以当前运动时间 除以 总路程 减1 是为了变成负数
        let coP = parseInt(getComputedStyle(Vodian).marginTop)/-1;
        let lopT = coP*-1 //此时乘以 负1 是为了变回正数
         = lopT;
        (coP)
    }else{
        n = 7;
    }

}
 = function(e){
     = null;
     = null;
}

}

ok 此时已经完成了 两大功能  第一是 拖拽进度条 让进度条同步播放 ，第二是 音量拖动 使音量可以*放大缩小。歌词显示 及歌词滚动 也可以用上面的公式 你们可以自己试试看。

如有书写错误还请及时提出，感谢 ！非常感谢 ！

文件链接：百度网盘 请输入提取码

提取码：7780

代码我放在下方 需要可以自取，

HTML

<!DOCTYPE html>

    <meta charset="utf-8">
    <title>精致版播放器</title>

<body>
    <!-- 中屏显示歌词 -->

        <!-- 背景虚化 -->

        <!-- 显示歌词滚动 -->

                    <p>奇迹再现</p>
                    <p>专辑：迪迦歌手：光</p>

    <!-- 底部播放器 -->

                <!-- 播放键 -->

                <!-- 进度条 -->

                            <p  >迪迦-奇迹再现</p>
                            <p  >
                                00:00&nbsp;/&nbsp;00:00
                            </p>

                <!-- 音量键 -->

</body>

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);
}

如有书写错误还请及时提出，感谢 ！非常感谢 ！

网站标题：源之站
文章标题：原声html+css+js 实现简单的音乐播放器
文章链接：https://yuanzz.com/post-40349.html
© 版权声明
文章内容部分引用互联网信息，如有不实或者带来不适，请联系我们进行下架。
THE END