基于Jquery的音乐播放器进度条插件

/* * 功能描述：播放器进度条 * 参数： * ????????????option:挂载父元素 * ????????????inTime:进度条时间长度 * 示例: * ????????????$.playBar.addBar($(‘.wrap‘),400); ???-- 初始化进度条 * ????????????$.playBar.setDefault({ ??????????????-- 默认参数修改 * ???????????????width:200, ????????????????????????????-- 进度条宽度 * ???????????????bgColor:‘blue‘, ???????????????????????-- 进度条背景颜色 * ???????????????progressColor:‘red‘, ??????????????????-- 进度条颜色 * ???????????????ballColor:‘yellow‘, ???????????????????-- 拖动触发小圆球颜色 * ???????????????beginColor:‘lightgrey‘, ???????????????-- 初始时间字体颜色 * ???????????????finishColor:‘gray‘ ?????????????????????-- 结束时间字体颜色 * ???????????}) * ????????????$.playBar.beginPlay(); ??????????????-- 播放进度条 * ????????????$.playBar.endPlay(); ????????????????-- 结束播放进度条 * ????????????$.playBar.resetPlay(200); ???????????-- 重置进度条，参数为新输入时间 */

(function($,document){ ???//定义初始化变量、方法构造函数 ???var InitVariables = function(){ ???????this.barWidth = null; ???????????????????//进度条宽度 ???????this.barTime = null; ????????????????????//进度条展示时间 ???????this.onOff ???= false; ??????????????????//记录进度条是否进行播放 ???????this.timer = null; ??????????????????????//记录播放定时器 ???????this.curTime = 0; ???????????????????????//记录当前播放时间 ???????this.curWidth = 0; ??????????????????????//记录当前播放时间对应的宽度 ???????this.ballEl = null; ???????this.timeBeginEl = null; ???????this.timeEndEl = null; ???????this.bgEl = null; ???????this.curTimeEl = null; ???} ???InitVariables.prototype = { ???????‘setWidth‘:function(w){ ???????????????????//设置进度条宽度 ???????????this.barWidth = w; ???????????this.bgEl.width(w); ???????}, ???????‘setTime‘:function(t){ ????????????????????//设置进度条时间 ???????????this.barTime = t; ???????}, ???????‘setBGColor‘:function(color){ ?????????????//设置进度条背景色 ???????????this.bgEl.css(‘background-color‘,color); ???????}, ???????‘setProgressColor‘:function(color){ ???????//设置进度条颜色 ???????????this.curTimeEl.css(‘background-color‘,color); ???????}, ???????‘setBallColor‘:function(color){ ???????????//设置拖动小球颜色 ???????????this.ballEl.css(‘background-color‘,color); ???????}, ???????‘setBeginColor‘:function(color){ ??????????//设置起始时间 ???????????this.timeBeginEl.css(‘color‘,color); ???????}, ???????‘setFinishColor‘:function(color){ ?????????//设置结束时间 ???????????this.timeEndEl.css(‘color‘,color); ???????}, ???????‘timeToString‘:function(time){ ????????????//时间转00:00:00样式 ???????????if(time>24*3600){ ???????????????console.log("Error In ‘timeToString‘：输入时间超过允许值，已默认修改为24*3600-1"); ???????????????time = 24*3600-1; ???????????} ???????????var strHour = parseInt(time/3600)>0 ? ((parseInt(time/3600)>9 ? ‘‘ : ‘0‘) + parseInt(time/3600)) : false; ???????????var strMinute = (parseInt(time/60%60)>9 ? ‘‘ : ‘0‘) + parseInt(time/60%60); ???????????var strSecond = (parseInt(time%60)>9 ? ‘‘ : ‘0‘) + parseInt(time%60); ???????????return strHour ? strHour+‘:‘+strMinute+‘:‘+strSecond: strMinute+‘:‘+strSecond; ???????}, ???????‘beginPlay‘:function(){ ???????????????????//开始运动指令 ???????????var that = this; ???????????this.onOff = !this.onOff; ???????????this.timer=setInterval(that.changeBar.bind(this),1000); ???????}, ???????‘stopPlay‘:function(){ ????????????????????//停止运动指令 ???????????this.onOff = !this.onOff; ???????????clearInterval(this.timer); ???????}, ???????‘resetPlay‘:function(){ ???????????????????//重置指令 ???????????this.curTime = 0; ???????????this.curWidth = 0; ???????????this.curTimeEl.css("width",this.curWidth); ???????????this.ballEl.css("left",this.curWidth-this.ballEl.width()/2); ???????????this.timeBeginEl.html(this.timeToString(this.curTime)); ???????????this.timeEndEl.html(this.timeToString(this.barTime)); ???????}, ???????‘changeBar‘:function(){ ???????????????????//动态改变函数 ???????????this.curTime++; ???????????this.curWidth = this.curTime*this.barWidth/this.barTime; ???????????if (this.curWidth>=this.barWidth){this.stopPlay();this.resetPlay();} ???????????this.curTimeEl.css("width",this.curWidth); ???????????this.ballEl.css("left",this.curWidth-this.ballEl.width()/2); ???????????this.timeBeginEl.html(this.timeToString(this.curTime)); ???????}, ???????‘moveEvent‘:function(ballEl,curTimeEl,contentEl){ ???????//拖动函数 ???????????var that = this; ???????????ballEl.on(‘mousedown‘,function(ev){ ???????????????var e=ev||document.event; ???????????????var disX=event.clientX; ???????????????e.preventDefault(); ???????????????e.stopPropagation(); ???????????????if (that.onOff){ clearInterval(that.timer);} ???????????????$(document).on(‘mousemove‘,function(ev){ ???????????????????var e=ev||document.event; ???????????????????e.preventDefault(); ???????????????????var newX=event.clientX; ???????????????????var lefts=e.clientX-contentEl.offset().left; ???????????????????if (lefts>that.barWidth){ ???????????????????????lefts=that.barWidth; ???????????????????}else if(lefts<0){ ???????????????????????lefts=0; ???????????????????} ???????????????????that.curWidth = lefts; ???????????????????that.curTime = parseInt(that.curWidth/that.barWidth*that.barTime); ???????????????????that.curTimeEl.css("width",that.curWidth); ???????????????????that.ballEl.css("left",that.curWidth-that.ballEl.width()/2); ???????????????????that.timeBeginEl.html(that.timeToString(that.curTime)); ???????????????}); ???????????????$(document).on(‘mouseup‘,function(){ ???????????????????if (that.onOff){ that.timer=setInterval(that.changeBar.bind(that),1000);} ???????????????????$(document).off(‘mousemove mouseup‘); ???????????????}); ???????????}) ???????} ???} ???//初始化变量对象 ???var init = new InitVariables(); ???$.playBar={ ???????//初始化进度条 ???????‘addBar‘:function(option,inTime){ ???????????if (arguments.length<2){return false;} ???????????init.setTime(inTime); ???????????option.empty(); ???????????//载入DOM元素 ???????????option.append($( ???????????????`<div class=‘progress-bar‘> ???????????????????<div class=‘progress-bar-begin‘>00:00</div> ???????????????????<div class="progress-bar-content"> ???????????????????????<div class="progress-bar-ball"></div> ???????????????????????<div class="progress-bar-cur"></div> ???????????????????</div> ???????????????????<div class="progress-bar-finish">${init.timeToString(inTime)}</div> ???????????????</div> ???????????`)); ???????????//获取DOM元素 ???????????init.ballEl = $(‘.progress-bar-ball‘); ???????????init.timeBeginEl = $(‘.progress-bar-begin‘); ???????????init.timeEndEl = $(‘.progress-bar-finish‘); ???????????init.bgEl = $(‘.progress-bar-content‘); ???????????init.curTimeEl = $(‘.progress-bar-cur‘); ???????????//初始化进度条宽度 ???????????init.barWidth = init.bgEl.width(); ???????????//绑定滑动事件 ???????????init.moveEvent(init.ballEl,init.curTimeEl,init.bgEl); ???????}, ???????‘beginPlay‘:function(){ ???????????init.beginPlay(); ???????}, ???????‘endPlay‘:function(){ ???????????init.stopPlay(); ???????}, ???????‘resetPlay‘:function(time){ ???????????init.setTime(time); ???????????init.resetPlay(); ???????}, ???????‘setDefault‘:function(obj){ ???????????if(obj.width){init.setWidth(obj.width);} ???????????if(obj.bgColor){init.setBGColor(obj.bgColor);} ???????????if(obj.progressColor){init.setProgressColor(obj.progressColor);} ???????????if(obj.ballColor){init.setBallColor(obj.ballColor);} ???????????if(obj.beginColor){init.setBeginColor(obj.beginColor);} ???????????if(obj.finishColor){init.setFinishColor(obj.finishColor);} ???????}, ???????‘getCurTime‘:function(){ ???????????return init.curTime; ???????}, ???????‘getCurWidth‘:function(){ ???????????return init.curWidth; ???????} ???}})(jQuery,document);