js实现音乐播放器

第js实现音乐播放器播放控制按钮

就是暂停和播放按钮

判断全局变量isplay，如果是true说明当前正在播放歌曲，点击就会暂停，反之就会播放

//播放控制

document.getElementById('btnPlay').addEventListener('click',function(){

if(isplay){

pausePlay();

}else{

startPlay();

}

});

将当前歌曲的播放时长与总时长在界面上动态改变

//记录歌曲的当前播放时间

varnow=0;

//记录歌曲的总播放时长

vartotal=0;

//当播放器的数据被加载时触发

player.addEventListener('loadeddata',function(){

//获取当前播发器的播放位置以及总播放时长（单位s）

now=player.currentTime;

total=player.duration;

//将歌曲的播放时间显示到控制区域

document.querySelector('.play-current').innerText=fmtTime(now);

document.querySelector('.play-duration').innerText=fmtTime(total);

})

为进度条绑定进度改变事件

原理很简单，通过上面的时间变化求得百分比，设置为进度的百分比就OK了

//为播放器绑定播放进度改变事件

player.addEventListener('timeupdate',updateProgress);

functionupdateProgress(){

//获取当前的播放进度

now=player.currentTime;

//计算进度的百分比

varp=now/total*100+'%';

document.querySelector('.progress-control').style.width=p;

document.querySelector('.play-current').innerText=fmtTime(now);

}

为播放器绑定播放完成事件以及上下首的切换

同意要清除上一首歌的播放状态，改变全局变量currentIndex就可以实现

//为播放器绑定播放完成事件

player.addEventListener('ended',function(){

//清除上一首播放状态

clearstatus();

currentIndex++;

if(currentIndex=musics.length){

currentIndex=0;

}

//重新为播放器设置播放源

player.src=musics[currentIndex].path;

//继续播放

startPlay();

//上一首

document.querySelector('.btn-pre').addEventListener('click',function(){

clearstatus();

currentIndex--;

if(currentIndex0){

currentIndex=musics.length-1;

}

//重新为播放器设置播放源

player.src=musics[currentIndex].path;

//继续播放

startPlay();

//下一首

document.querySelector('.btn-next').addEventListener('click',function(){

clearstatus();

currentIndex++;

currentIndex=currentIndex%musics.length;

//重新为播放器设置播放源

player.src=musics[currentIndex].path;

//继续播放

startPlay();

});

通过进度条控制歌曲播放

对鼠标进行监听，得到鼠标最后的落点，计算出进度条的起始位置与该点占据总长度的比例，然后简单的数学运算，我们知道歌曲总长度就很清楚的得到鼠标落点的歌曲该播放的位置

//改变歌曲的播放进度

(function(box,bar){

//监听鼠标是否按下

varstatus=false;

//鼠标按下事件监听

document.querySelector(box).addEventListener('mousedown',function(e){

player.removeEventListener('timeupdate',updateProgress);

move(e);

status=true;

})

//鼠标抬起事件监听

document.addEventListener('mouseup',function(){

player.currentTime=now;

player.addEventListener('timeupdate',updateProgress);

status=false;

})

//鼠标移动事件监听

document.querySelector(box).addEventListener('mousemove',function(e){

if(status==true){

move(e)

}

})

//鼠标滑动执行

functionmove(e){

vareventLeft=e.offsetX;

varw=window.getComputedStyle(document.querySelector(box)).width;

varw1=window.getComputedStyle(document.querySelector('.play-current')).width;

varw2=window.getComputedStyle(document.querySelector('.play-duration')).width;

w1=parseInt(w1);

w2=parseInt(w2);

document.querySelector(bar).style.width=eventLeft+w1+'px';

now=(eventLeft)/(parseInt(w)-w1-w2)*total;

status=true;

//vareventLeft=e.offsetX;

//document.querySelector(bar).style.width=eventLeft+'px';

//varw=window.getComputedStyle(document.queryS