版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_34518793/article/details/78500402
思路都在注释里了，想法跟着注释走！
不会写作文，不废话，不矫情，上代码：
HTML部分：
<div class="main">
<!--创建audio对象-->
<audio id="my_music" src="http://www.xuxiangbo.com/music/song.mp3"></audio>
</div>
<div class="ctrl">
<!--音乐时长 数字方式显示-->
<div class="song_info"><span id="ed_time">00:00</span> / <span id="full_time"></span></div>
<!--进度条-->
<div class="time_line"><!--外层div代表音乐总时长-->
<div class="time_line_ed"><!--加ED的代表已经播放的-->
<div class="time_line_ed_tit"></div><!--进度条最右侧的小圆点-->
</div>
</div>
<!--控制器 没什么说的-->
<div class="ctrl_btn">
<button class="ctrl_button" title="上一曲">上一曲</button>
<button class="ctrl_button" title="播放" style="font-weight:bolder;font-size:30px">播放/暂停</button>
<button class="ctrl_button" title="下一曲">下一曲</button>
<span class="ctrl_vol"><a class="vol_off">音量</a></span>
</div>
</div>CSS部分挺简单的，没什么难度，主要就是进度条的两个DIV嵌套，代码：
#my_music{
display: none;
}
.ctrl{
position: absolute;
bottom: 100px;
left: 50%;
margin-left: -500px;
width: 1000px;
height: 100px;
overflow: hidden;
}
.time_line{
width: 1000px; /*1000px方便计算进度百分比，数学好的可以随便搞*/
height: 5px;
background: #fff;
border-radius: 20px;
position: relative;/*父级 .ctrl 用了绝对定位，这边可以用相对定位*/
top: 10px;
cursor: pointer;
}
.time_line_ed{
position: absolute;/*这个定位...为什么是absolute，忘记了，好尴尬....*/
left: -985px;
width: 1000px;
height: 5px;
border-radius: 20px;
background: #007979;
cursor: pointer;
}
.time_line_ed_tit{
width: 5px;
height: 5px;
background: #fff;
border: 5px solid #007979;
border-radius: 50%;
position: absolute;
top: -5px;
right: 0;
}
.ctrl_btn{
position: absolute;
top: 60px;
}
.ctrl_btn button{
background: none;
border: 0;
color: #fff;
font-size: 20px;
cursor: pointer;
margin: 0 10px;
}
.ctrl_btn button:hover{
color: #007979;
}
.ctrl_btn button:focus{
outline: none;
}
.ctrl_vol a{
font-size: 22px;
color: #007979;
margin-left: 20px;
cursor: pointer;
}
.ctrl_vol span{
display: inline-block;
width: 10px;
height: 8px;
background: #fff;
cursor: pointer;
position: relative;
bottom: 3px;
}JS部分：
window.onload = function (){
//获取音乐对象
var my_music = document.getElementById('my_music');
//获取音乐时间，要给一个canplay事件，否则会网络不好的时候会返回NAN
my_music.addEventListener("canplay",function(){
//设置初始音量
my_music.volume = 0.5;
//格式化音乐时长 duration
var time_min = parseInt(my_music.duration/60);
if (time_min<10) {
time_min = "0" + time_min; //小于十的数字前面加0
};
var time_sen = parseInt(my_music.duration%60);
if (time_sen<10) {
time_sen = "0" + time_sen;
};
var time = time_min + ":" + time_sen;
document.getElementById('full_time').innerHTML = time;//输出音乐时间
})
//已播放时长
function show_timed(){
//格式化已播放的时间 currentTime
var timed_min = parseInt(my_music.currentTime/60);
if (timed_min<10) {
timed_min = "0" + timed_min;
};
var timed_sen = parseInt(my_music.currentTime%60);
if (timed_sen<10) {
timed_sen = "0" + timed_sen;
};
var timed = timed_min + ":" + timed_sen;
document.getElementById('ed_time').innerHTML = timed;//输出已播放的时间
}
setInterval(show_timed,100);
//进度条
var time_line_ed = document.getElementsByClassName('time_line_ed')[0];
function move(){
//计算已播放的百分比 乘1000（CSS里面设置的time_line的宽度，减去小圆点的15，所以是985）
var jindu = my_music.currentTime/my_music.duration*985 - 985;
time_line_ed.style.left = jindu + "px";//请忽略这个高端大气上档次的变量名...
}
setInterval(move,100);//让进度条动起来
//进度条点击事件
var time_line = document.getElementsByClassName('time_line')[0];
time_line.addEventListener("click",function(){
var e = event || window.event;
var pos = time_line.getBoundingClientRect();
var dutime = e.clientX - pos.left;//获取点击位置
var ddd = dutime/985*my_music.duration;
my_music.currentTime = ddd;//根据百分比让 进度条 和 已播放时间 同步
})
//控制器 播放/暂停
var crtl_button = document.getElementsByClassName('ctrl_button');
crtl_button[1].addEventListener("click",function(){
//判断当前状态，paused 执行函数 播放（play()） or 暂停（pause()） ，
if (my_music.paused){
my_music.play();
this.style.color = "#007979";
this.setAttribute('title','暂停');
}else{
my_music.pause();
this.style.color = "#ffffff";
this.setAttribute('title','播放');
}
})
//当前播放完毕事件 暂停、恢复按钮状态
my_music.addEventListener("ended",function(){
my_music.pause();
crtl_button[1].style.color = "#ffffff";
crtl_button[1].setAttribute('title','播放');
})
//音量控制
var vol_num = 0;
var vol = document.getElementsByClassName('ctrl_vol')[0];
for (var i = 0; i < 10; i++) { //输出音量色块 每一个色块代表 10%的音量
var append_span = document.createElement("span");
vol.appendChild(append_span);
}
var vol_btn = vol.getElementsByTagName("span");
for (var i = 0; i < vol_btn.length; i++) {
if (i < 5) {
vol_btn[i].style.background = "#007979"; //默认50%音量，所以输出5个带颜色的
}
}
for (var i = 0; i < vol_btn.length; i++) {
vol_btn[i].index = i + 1;
vol_btn[i].addEventListener("click",function(){//判断点击色块的 索引
my_music.volume = this.index/10;
for (var x = 0; x < vol_btn.length; x++) {
if (x < this.index) {
vol_btn[x].style.background = "#007979";
}else{
vol_btn[x].style.background = "#fff";
}
}
vol_num = this.index;
})
};
var vol_off = document.getElementsByClassName('vol_off')[0];
vol_off.addEventListener("click",function(){
if (my_music.volume) {
my_music.volume = 0;
this.innerHTML = "静音";
for (var i = 0; i < vol_btn.length; i++) {
vol_btn[i].style.background = "#fff";
}
}else{
if (vol_num) {
my_music.volume = vol_num/10;
this.innerHTML = "音量";
for (var i = 0; i < vol_num; i++) {
vol_btn[i].style.background = "#007979";
}
}else{
my_music.volume = "0.5";
this.innerHTML = "";
for (var i = 0; i < 5; i++) {
vol_btn[i].style.background = "#007979";
}
}
}
})
}原生js撸的不多，工作一直都用jq来着，最近打算把扔掉的原生重新捡起来，所以代码写的比较懒散，大牛们有兴趣给优化一下的，欢迎联系我，博客：http://www.xuxiangbo.com