灵感的由来是前些天看到了博： http://www.cnblogs.com/li-cheng 的首页有一个很漂亮的播放器，感觉很不错，是用Flex做的Flash播放器。
于是我也便想到了，自己也来来弄个玩玩。
所以利用1天的时间，通过收集整理，做了一款自己专属的播放器!
播放器实现了以下功能操作：
1：播放、暂停
2：快进、快退
3：上一曲、下一曲
4：单曲循环
效果如下：
奉献JS源码如下：
(function ($) {
$.fn.Html5Player = function() {
//获取音频API
var audio = $('body').find('audio').get();
/**********歌曲列表***************/
var songDefualtSettings=[
{"Singer":"火星哥","SongName":"The Lazy Song","img":"./images/火星哥.jpg"},
{"Singer":"邓紫棋","SongName":"We Will Rock You","img":"./images/邓紫棋.jpg"},
{"Singer":"王菲","SongName":"闷","img":"./images/王菲.jpg"},
{"Singer":"梁静茹","SongName":"情歌","img":"./images/梁静茹.jpg"}
];
/*********当前播放的歌曲**********/
var pointerInt=;
return this.each(function() {
/*******音频处理操作********/
var ExcuteAudioCommon = {
//播放进度条的转变事件
DurationProcessRange:function (rangeVal) {
audio.currentTime = rangeVal * audio.duration;
audio.play();
},
//获得总的时间刻度
TimeSpan:function() {
var ProcessYet = ;
var _this = this;
setInterval(function () {
var ProgressYet = (audio.currentTime / audio.duration) * ;
$(".ProgressYet").css("width", ProgressYet);
var currentTime = _this.timeDispose(audio.currentTime);
var timeAll = _this.timeDispose(_this.TimeAll());
$(".SongTime").html(currentTime + " | " + timeAll);
}, );
},
//将时长计算成分秒
timeDispose: function (number) {
var minute = parseInt(number / );
var second = parseInt(number % );
minute = minute >= ? minute : "" + minute;
second = second >= ? second : "" + second;
return minute + ":" + second;
},
//获取音频总时长
TimeAll: function () {
return audio.duration;
}
}
/*******上一曲**********/
$(this).find(".LeftControl").click(function(){
CreateSongStart(pointerInt=pointerInt==?:pointerInt-);
$("#MainControl").data("play")==="off"&&audio.play()&&ExcuteAudioCommon.TimeSpan();
});
/******播放，暂停********/
$("#MainControl").click(function() {
if($(this).data("play")==="off")
{
$("#MainControl").removeClass("PlayControl").addClass("StopControl");
audio.pause();
$(this).data("play","on");
}else{
$("#MainControl").addClass("PlayControl").removeClass("StopControl");
if (audio.src == "") {
pointerInt= parseInt(Math.random()*songDefualtSettings.length,);
CreateSongStart(pointerInt);
}
audio.play();
ExcuteAudioCommon.TimeSpan();
$(this).data("play","off");
}
});
function CreateSongStart(SongNumber){
var Defaultsong = songDefualtSettings[SongNumber];
$(".SongName").text(Defaultsong.SongName);
$(".Singer").text(Defaultsong.Singer)
$("#singerImg").attr("src",Defaultsong.img);
audio.src = "./media/" + Defaultsong.SongName + ".mp3";
}
/*******下一曲********/
$(this).find(".RightControl").click(function(){
CreateSongStart(pointerInt=pointerInt==(songDefualtSettings.length-)?pointerInt:pointerInt+);
$("#MainControl").data("play")==="off"&&audio.play()&&ExcuteAudioCommon.TimeSpan();
});
/********音频进度条事件（进度增加）*******/
$(".Progress").click(function (e) {
//----播放进度条的基准参数
var Progress = $(".Progress").offset();
var ProgressStart = Progress.left;
var ProgressLength = $(".Progress").width();
var CurrentProces = e.clientX - ProgressStart;
ExcuteAudioCommon.DurationProcessRange(CurrentProces / ProgressLength);
$(".ProcessYet").css("width", CurrentProces);
});
/********音频进度条事件（进度减少）********/
$(".ProgressYet").click(function (e) {
//-----播放进度条的基准参数
var Progress = $(".Progress").offset();
var ProgressStart = Progress.left;
var ProgressLength = $(".Progress").width();
var CurrentProces = e.clientX - ProgressStart;
ExcuteAudioCommon.DurationProcessRange(CurrentProces / ProgressLength);
$(".ProgressYet").css("width", CurrentProces);
})
//监听媒体文件结束的事件（ended），这边一首歌曲结束就读取下一首歌曲，实现播放上的循环播放
audio.addEventListener('ended', function () {
CreateSongStart(pointerInt=(pointerInt>=&&(songDefualtSettings.length-)!=pointerInt)?++pointerInt:);
$("#MainControl").data("play")==="off"&&audio.play()&&ExcuteAudioCommon.TimeSpan();
}, false);
})
}
})(jQuery);