灵感的由来是前些天看到了博： /li-cheng 的首页有一个很漂亮的播放器，感觉很不错，是用Flex做的Flash播放器。
于是我也便想到了，自己也来来弄个玩玩。
所以利用1天的时间，通过收集整理，做了一款自己专属的播放器!
播放器实现了以下功能操作：
1：播放、暂停
2：快进、快退
3：上一曲、下一曲
4：单曲循环
效果如下：
奉献JS源码如下：
(function ($) {$.fn.Html5Player = function() {//获取音频API var audio = $('body').find('audio').get(0); /**********歌曲列表***************/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=0;return this.each(function() {/*******音频处理操作********/var ExcuteAudioCommon = {//播放进度条的转变事件DurationProcessRange:function (rangeVal) {audio.currentTime = rangeVal * audio.duration;audio.play();},//获得总的时间刻度TimeSpan:function() {var ProcessYet = 0;var _this = this;setInterval(function () {var ProgressYet = (audio.currentTime / audio.duration) * 310;$(".ProgressYet").css("width", ProgressYet);var currentTime = _this.timeDispose(audio.currentTime);var timeAll = _this.timeDispose(_this.TimeAll());$(".SongTime").html(currentTime + " | " + timeAll);}, 1000);},//将时长计算成分秒timeDispose: function (number) {var minute = parseInt(number / 60);var second = parseInt(number % 60);minute = minute >= 10 ? minute : "0" + minute;second = second >= 10 ? second : "0" + second;return minute + ":" + second;},//获取音频总时长TimeAll: function () {return audio.duration;}}/*******上一曲**********/$(this).find(".LeftControl").click(function(){CreateSongStart(pointerInt=pointerInt==0?0:pointerInt-1);$("#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,10);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-1)?pointerInt:pointerInt+1);$("#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>=0&&(songDefualtSettings.length-1)!=pointerInt)?++pointerInt:0);$("#MainControl").data("play")==="off"&&audio.play()&&ExcuteAudioCommon.TimeSpan();}, false);})}})(jQuery);
