原创: 做一款属于自己风格的音乐播放器 (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);

转载于:https://www.cnblogs.com/Kummy/p/3654872.html