原創: 做一款屬於自己風格的音樂播放器 (HTML5的Audio新特性)

靈感的由來是前些天看到了博： 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(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);