html文件:
<div class="m-box">
<audio src="img/mo.mp3" id='aud'></audio>
<div class='m-music'>
<div class="m-button">
<a class="m-control"><img src="img/play.png" alt=""><span style='color:white'>hhh</span></a>
</div>
<p class="m-nowtime">00:00</p>
<div class='m-progressBar'>
<div class='bar'></div>
<div class='m-left'></div>
<div class="m-right"></div>
</div>
<p class='m-totaltime'>00:00</p>
</div>
</div>
js文件:
//音乐播放器
//.paused 音频暂停
//对象.currentTime 音频已播放时间
//对象.duration 音频总时间
$(function(){
//保证全局只有一个timer,若在click里创建,将每点一次创建一个timer
var timer=null;
//获得音频对象
var $aud=$('#aud')[0];
//页面加载时,加载音乐总时长
var e_min=Math.floor($aud.duration/60);
var e_sec=Math.floor($aud.duration%60);
$('.m-totaltime').html(e_min+":"+e_sec);
$('.m-button').click(function(){
//转换成js对象,因为要使用其固有属性
$aud.loop=true;
if(!$aud.paused)
{
aud.pause();
$('.m-button img').attr('src','img/play.png');
//暂停清除定时器
clearInterval(timer);
}else{
//暂停点击播放
aud.play();
aud.loop=true;
var left=document.querySelector(".m-left");
var right=document.querySelector(".m-right");
var progress=document.querySelector(".m-progressBar");
var bar=document.querySelector('.bar');
//加入定时器动态改变数据
timer=setInterval(function(){
//时间划分取整操作
var min=Math.floor($aud.currentTime/60);
var sec=Math.floor($aud.currentTime%60);
if(min<10)
{
min='0'+min;
}
if(sec<10)
{
sec='0'+sec;
}
$('.m-nowtime').html(min+':'+sec);
//进度条操作
bar.style.left=($aud.currentTime/$aud.duration)*100+'%';
left.style.width=($aud.currentTime/$aud.duration)*100+"%";
right.style.width=(1-($aud.currentTime/$aud.duration))*100+'%';
},1000);
$('.m-button img').attr('src','img/pause.png')
//拖动进度条
var flag;
var sx;
var tx;
var res;
var n=0;
bar.onmousedown=function(){
flag=true;
n=1; //使得鼠标抬起时间只能配合按下使用,否则页面鼠标抬起就会响应改变播放时间操作
sx=event.clientX;
tx=bar.offsetLeft;
}
document.body.onmousemove=function(event)
{
if(flag)
{
var event=event||window.event;
var x=event.clientX;
res=tx+x-sx;
if(res>progress.offsetWidth-bar.offsetWidth)
{
res=progress.offsetWidth-bar.offsetWidth;
}
if(res<0)
{
res=0;
}
bar.style.left=res+'px';
}
}
document.body.onmouseup=function()
{
flag=false;
if(n==1)
{
var final=Math.floor((res/progress.offsetWidth)*$aud.duration);
$aud.currentTime=final;
}
n=0;
}
}
})
});
css文件:
/*播放器*/
.m-box{
background-color:rgb(30,30,30);
height: 50px;
}
.m-nowtime,.totaltime{
color:white;
float: left;
width:35px;
}
.m-nowtime{
margin-left:25px;
height: 50px;
line-height: 50px;
}
.m-totaltime{
height: 50px;
line-height: 50px;
color: white;
}
.m-button{
width:45px;
height: 45px;
float: left;
border-radius: 50%;
border:solid 1px rgb(16,157,89);
margin-top:2.5px;
cursor: pointer;
text-align: center;
font-size: 0px;
display: inline-block;
line-height: 45px;
margin-left: 75px;
}
.m-control>img{
height: 19px;
width:18px;
}
.m-progressBar{
float: left;
width: 620px;
height: 5px;
background-color: rgb(36,41,44);
margin:22.5px 15px;
position: relative;
}
.m-left{
float: left;
background-color: rgb(16,157,89);
width: 0px;
height: 5px;
}
.m-right{
float: left;
width: 100%;
height: 5px;
background-color: rgb(36,41,44);
}
.bar{
width: 7px;
height: 7px;
background-color: rgb(16,157,89);
border-radius: 50%;
position: absolute;
top:50%;
left:0px;
transform:translate(-50%,-50%);
}
.bar:hover{
transform-origin: 100% 100%;
transform: scale(1.5);
cursor: pointer;
}