HTML5音乐播放器(三):播放进度,时间显示以及音量的调节

时间真是不够用,只能晚上抽空把功能完善了,这节我们说下歌曲播放进度,时间显示以及音量的调节这三个部分。
一.歌曲播放进度
这个功能用到的 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;
}

猛击demo ☻
二.歌曲时间显示
用到的 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;
}

猛击demo ☻
三.音量的调节
用到的 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);
            }
        }
    };
})();

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注

One thought on “HTML5音乐播放器(三):播放进度,时间显示以及音量的调节