时间真是不够用，只能晚上抽空把功能完善了，这节我们说下歌曲播放进度，时间显示以及音量的调节这三个部分。
一.歌曲播放进度
这个功能用到的 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 简单的实现功能很简单，但要把体验做好还是挺费事的，很多功能都相互交叉，需要好好考虑的地方还挺多，努力吧，一定要做到桌面版播放器的体验效果：)
如何调整html中音乐播放器的大小 HTML5音乐播放器（三）：播放进度 时间显示以及音量的调节...
