时间真是不够用，只能晚上抽空把功能完善了，这节我们说下歌曲播放进度，时间显示以及音量的调节这三个部分。

一.歌曲播放进度

这个功能用到的 audio api 主要有：

currentTime() ：以秒为单位返回从开始播放到目前所花的时间，也可设置 currentTime 的值来跳转到特定位置；

duration：获取媒体文件的播放时长，以秒为单位，如果无法获取，则为 NaN；

歌曲进度：首先先设置一个定时器，分别获取这两个值，用当前播放的秒数除以歌曲总秒数，再乘以歌曲进度条的总宽度(px)，就能算出歌曲进度条一秒钟可以走多少了。

歌曲进度调节：点击进度条的某个位置，歌曲跳转到响应位置，这个功能的实现是先获取到点击的位置距离进度条最左边的长度(让 Firefox 支持 offsetX、offsetY)，接着获得这段距离在整个进度条的长度里所占的百分比，用这个百分比乘以歌曲的总长度，就能算出该给 currentTime 设置的值了。

/**

* 歌曲播放进度，播放时间

*/

//---------------------------------------------------【功能：播放进度，播放时间】

MUSICENGINE.prototype.playbackProgress = function(playSwitch){

var progressRateColor = document.getElementById("progressRateColor"),

songSchedule = 0,

timeall,

currenttime,

timer;

if(playSwitch === "play"){

timer = setInterval(function(){

var mPlayer = document.getElementById("musicEngine");

//获取歌曲总时间

timeall = timeAll();

//获取歌曲当前播放时间

currenttime = currentTime();

//计算歌曲播放时间

songPlaybackTime(timeall,currenttime);

//计算进度条宽度并赋值

songSchedule = (currenttime / timeall) * 262;

progressRateColor.style.width = songSchedule + "px";

//当歌曲播放完毕后

if(mPlayer.ended){

//清除定时器，进度条归零，播放下一首

clearInterval(timer);

progressRateColor.style.width = 0;

document.getElementById("next").click();

}

},1000);

}

if(playSwitch === "pause"){

clearInterval(timer);

}

};

//---------------------------------------------------【功能：歌曲进度调节】

MUSICENGINE.prototype.songProgressAdjust = function(time){

this.musicPlayer.currentTime = time;

};

//---------------------------------------------------【歌曲进度变化过程】

function getSongProgress(event){

var progressRateBg = document.getElementById("progressRateBg"),

mplayer = document.getElementById("musicEngine"),

progressBP,

SongProgress;

//获得距相对元素距离的百分比

var coord = coordinate(event),

offsetCoord_X = coord.coord_X;

//计算进度条的宽度

songScheduleChange(offsetCoord_X);

//计算进度条的宽度百分比

progressBP = progressBarPercentage(262,offsetCoord_X) / 100;

//真实的歌曲进度数值

SongProgress = progressBP * mplayer.duration;

return SongProgress;

}

//---------------------------------------------------【歌曲进度条变化】

function songScheduleChange(size){

var progressRateColor = document.getElementById("progressRateColor");

progressRateColor.style.width = size + "px";

}

//---------------------------------------------------【获取歌曲总时间】

function timeAll(){

var mPlayer = document.getElementById("musicEngine");

if(mPlayer.currentTime != 0){

return mPlayer.duration;

}else{

return 0;

}

}

//---------------------------------------------------【获取歌曲当前播放时间】

function currentTime(){

var mPlayer = document.getElementById("musicEngine");

return mPlayer.currentTime;

}

二.歌曲时间显示

用到的 api 同上。

歌曲显示：在计算歌曲进度的定时器内，不断发送歌曲的播放时间和总时间，左边的时间为歌曲的播放时间，也就是 currentTime 的值，右边的时间用总时间减去 currentTime ，并将它们转换为我们需要的格式即可。

//---------------------------------------------------【计算歌曲播放时间】

function songPlaybackTime(timeall,currenttime){

var playTime = document.getElementById("playTime"),

surplusTime = document.getElementById("surplusTime"),

leftTime,

rightTime;

if(currenttime < timeall){

//左边时间

leftTime = parseInt(currenttime);

//右边时间

rightTime = parseInt(timeall - currenttime);

//输出时间

playTime.innerHTML = conversionTime(leftTime);

surplusTime.innerHTML = "-" + conversionTime(rightTime);

}else{

//播放完毕

playTime.innerHTML = "0:00";

surplusTime.innerHTML = "-0:00";

}

}

//---------------------------------------------------【将剩余秒数转化为标准格式】

function conversionTime(time){

var surplusMinite,

surplusSecond,

cTime;

//将剩余秒数转化为分钟

surplusMinite = Math.floor((time / 60) % 60);

//将剩余秒数转化为秒钟

surplusSecond = Math.floor(time % 60);

if(surplusSecond < 10){

surplusSecond = "0" + surplusSecond;

}

cTime = surplusMinite + ":" + surplusSecond;

return cTime;

}

三.音量的调节

用到的 api 有：

volume：在0.0到1.0间设置音量值,或查询当前音量值；

音量调节：这个功能实现起来很简单，把 volume 的值设为 0.0，就静音了。在控件上调节音量的原理和也歌曲的进度条一样，判断点击位置距离第一个相对元素 Y 轴上最顶端的位置，然后再进一步计算出具体的数值，注意数值的格式，别超过1，并且小数点后只有1位。

/**

* 音量控制

*/

//---------------------------------------------------【功能：静音切换】

MUSICENGINE.prototype.volume = function(muteSwitch){

var volumeSizeColor = document.getElementById("volumeSizeColor"),

volumeSizeSave = parseInt(volumeSizeColor.style.height);

//设为静音

if(muteSwitch === "on"){

//记录静音前的音量大小

volumeSizeColor.attributes["data-volume"].nodeValue = this.musicPlayer.volume;

//记录静音前的元素高度

volumeSizeColor.attributes["data-height"].nodeValue = volumeSizeSave;

this.musicPlayer.volume = 0.0;

//音量图标切换 - 打开静音

volumeIconSwitch("on");

//音量控件的音量条变化(100为元素高度)

volumeSize(100);

}

//取消静音

if(muteSwitch === "off"){

this.musicPlayer.volume = volumeSizeColor.attributes["data-volume"].nodeValue;

//音量图标切换 - 关闭静音

volumeIconSwitch("off");

//音量控件的音量条变化

volumeSize(volumeSizeColor.attributes["data-height"].nodeValue);

}

};

//---------------------------------------------------【功能：音量控制条】

MUSICENGINE.prototype.volumeControlStrip = function(realVolume){

this.musicPlayer.volume = realVolume;

if(realVolume > 0){

//音量图标切换 - 关闭静音

volumeIconSwitch("off");

}else{

//音量图标切换 - 打开静音

volumeIconSwitch("on");

}

};

//---------------------------------------------------【音量变化过程】

function VolumeChangeProcess(event){

var volumeSizeBg = document.getElementById("volumeSizeBg"),

progressBP,

realVolume;

//获得距相对元素距离的百分比

var coord = coordinate(event),

offsetCoord_Y = coord.coord_Y;

//音量杆动画变化

progressBP = progressBarPercentage(48,offsetCoord_Y);

volumeSize(progressBP);

//真实的音量数值0.0~1.0

realVolume = parseInt((100 - progressBP) / 10) / 10;

return realVolume;

}

//---------------------------------------------------【音量的图标切换】

function volumeIconSwitch(muteSwitch){

var nowVolume = document.getElementById("nowVolume"),

nowMute = document.getElementById("nowMute"),

volume = document.getElementById("volume"),

mute = document.getElementById("mute"),

volumeSizeColor = document.getElementById("volumeSizeColor");

//打开静音

if(muteSwitch === "on"){

//静音的显示图标变化

hide(nowVolume);

show(nowMute);

//音量控件的图标变化

hide(volume);

show(mute);

//音量为0时，让音量杆也为0，优化视觉

volumeSizeColor.style.height = "100%";

}

//关闭静音

if(muteSwitch === "off"){

//静音的显示图标变化

hide(nowMute);

show(nowVolume);

//音量控件的图标变化

hide(mute);

show(volume);

}

}

//---------------------------------------------------【音量控件的音量条变化】

function volumeSize(size){

var volumeSizeColor = document.getElementById("volumeSizeColor");

volumeSizeColor.style.height = size + "%";

}

//---------------------------------------------------【音量控件显示&隐藏，大小调节】

(function(){

var nowVolume = document.getElementById("nowVolume"),

nowMute = document.getElementById("nowMute"),

volumeControl = document.getElementById("volumeControl");

//音量控件显示&隐藏

nowVolume.onmouseover = function(){

show(volumeControl);

};

nowMute.onmouseover = function(){

show(volumeControl);

};

//解决onmouseout事件遇到子元素时，也触发onmouseout的BUG

volumeControl.onmouseout = function(event){

var Event = event || window.event;

if(Event){

if(volumeControl.contains(Event.relatedTarget||Event.toElement)){

//如果是子元素，结束函数

return false;

}else{

//触发的事件

hide(volumeControl);

}

}

};

})();

播放器到现在还没做完，很多地方还需要完善，个人感觉用  api 简单的实现功能很简单，但要把体验做好还是挺费事的，很多功能都相互交叉，需要好好考虑的地方还挺多，努力吧，一定要做到桌面版播放器的体验效果：)