自己写的一个简单的音乐播放器， 主要实现了控制播放暂停，时间显示，音乐进度条点击以及拖动改变播放进度效果.

基于jquery编写，需要引入jquery.

HTML:

CSS:

.progress{width:300px; height: 5px; background-color: #c2c2c4; position: relative; float: left; display: inline; margin-top: 5px; border-radius: 5px;}

.pgBar{width:0%; height: 5px; background-color: #e83c3c; position: absolute; left: 0; top:0; border-radius: 5px;}

.pgbtn{width:10px; height: 10px; border-radius: 50%; position: absolute; left: 0%; top:-4px; background-color: #fff; border:1px solid #c2c2c4; cursor: pointer;}

.showTime{float: left; display: inline; font-size: 12px; padding:0 10px;}

.controlsBox{clear: both; font-size: 13px; padding:20px; margin-left: 180px;}

.playBtn{cursor: pointer;}

JS代码：

/* 插件代码 */

$.fn.musicPlay = function(options){

var audio = $(this).find('.music')[0],

playBtn = $(this).find('.playBtn'),

showTimeL = $(this).find('.showTimeL'),

showTimeR = $(this).find('.showTimeR'),

pgBar = $(this).find('.pgBar'),

pgbtn = $(this).find('.pgbtn'),

progress = $(this).find('.progress'),

pgWidth = progress.width(),

totalTime = 0,setPosX = 0,pos_x,pos_parX,srcEle;

playBtn.bind('click',function(){

play();

})

progress.bind('click',function(e){

audio.currentTime = audio.duration*(e.offsetX / pgWidth);

})

pgbtn.bind('click',function(e){

e.preventDefault();

e.stopPropagation();

})

$(document).bind('mousedown',function(e){

srcEle = e.target;

if($(srcEle).hasClass('pgbtn')){

pos_x = e.pageX;

pos_parX = pgbtn.position().left;

audio.removeEventListener('timeupdate',updateProgress,false);

$(document).bind('mousemove',function(e){

e.preventDefault();

var xOff = e.pageX - pos_x,

curTime,

value = '';

setPosX = pos_parX + xOff,

setPosX = (setPosX <= 0) ? 0:setPosX;

setPosX = (setPosX > pgWidth) ? pgWidth:setPosX;

value = Math.round((Math.floor(setPosX) / Math.floor(pgWidth)) * 100,0);

curTime = calcTime(audio.duration * (setPosX / pgWidth));

showTimeL.html(curTime);

setplan(value);

})

}

})

$(document).bind('mouseup',function(e){

if($(srcEle).hasClass('pgbtn')){

$(document).unbind('mousemove');

audio.addEventListener('timeupdate',updateProgress,false);

var curTime = audio.duration * (setPosX / pgWidth);

if(curTime !== 0){

audio.currentTime = curTime;

}

}

})

audio.addEventListener('timeupdate',updateProgress,false);

audio.addEventListener('ended',audioEnded,false);

audio.addEventListener('pause',audioPause,false);

audio.addEventListener('play',audioPlay,false);

audio.addEventListener('canplaythrough',function(){

totalTime = calcTime(Math.floor(audio.duration));

showTimeR.html(totalTime);

},false);

function audioEnded(){

audio.currentTime = 0;

audio.pause();

}

function audioPause(){

playBtn.html('播放');

}

function audioPlay(){

playBtn.html('暂停');

}

function calcTime(time){

var hour,minute,second;

hour=String(parseInt(time/3600,10));

if (hour.length == 1) hour = '0' + hour;

minute=String(parseInt((time%3600)/60,10));

if (minute.length == 1) minute = '0' + minute;

second=String(parseInt(time%60,10));

if (second.length == 1) second = '0' + second;

return hour+":"+minute+":"+second;

}

function play(){

if(audio.paused){

audio.play();

}else{

audio.pause();

}

}

function updateProgress(){

var value = Math.round((Math.floor(audio.currentTime)/Math.floor(audio.duration))*100,0),

curTime = calcTime(Math.floor(audio.currentTime));

showTimeL.html(curTime);

setplan(value);

}

function setplan(val){

val = (val == 100)?98:val;

pgBar.css('width',val+'%');

pgbtn.css('left',val+'%');

}

}

/* 插件代码 end */

$(function(){

$("#musicBox").musicPlay();

})