每个人都能制作的简易版QQ音乐（HTML+CSS+JQuery）

自制系列二它来了。

如果在制作过程中有如何问题你都可以私信我，我会答复你的。

今天中秋节，首先祝大家中秋节快乐！

因为没什么礼物送给大家，所以在这里给大家安利一份简易版QQ音乐的制作，过程很简单，每个人都能学会。

下面将是制作步骤了：

先建好目录如下：

source文件夹里存放如下：

下面就是把代码复制到相应的目录中：

QQ音乐播放器.html

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <link rel="stylesheet" type="text/css" href="css/jquery.mCustomScrollbar.css"/>
       <link rel="stylesheet" type="text/css" href="css/1.css"/>
       <script src="js/jquery-1.12.4.js"></script>
       <script src="js/jquery.mCustomScrollbar.concat.min.js"></script>
       <script src="js/2.js"></script>
       <script src="js/3.js"></script>
       <script src="js/1.js"></script>
   </head>
   <body>
       <div class="header">
           <h1 class="logo"><a href="#"></a></h1>
           <ul class="register">
               <li>登录</li>
               <li>设置</li>
           </ul>
       </div>
       <div class="content">
           <div class="content_in">
               <div class="content_left">
                   <div class="content_toolbar">
                       <span><i></i>收藏</span>
                       <span><i></i>添加到</span>
                       <span><i></i>下载</span>
                       <span><i></i>删除</span>
                       <span><i></i>清空列表</span>
                   </div>
                   <div class="content_list" data-mcs-theme="minimal-dark">
                       <ul>
                           <li class="list_title">
                               <div class="list_check"><i></i></div>
                               <div class="list_number"></div>
                               <div class="list_name">歌曲</div>
                               <div class="list_singer">歌手</div>
                               <div class="list_time">时长</div>
                           </li>
                       </ul>
                   </div>
               </div>
               <div class="content_right">
                   <div class="song_info">
                       <a href="javascript:;" class="song_info_pic">
                           <img src="img/lnj.png" >
                       </a>
                       <div class="song_info_name">歌曲名称:
                           <a href="javascript:;">后来</a>
                       </div>
                       <div class="song_info_singer">歌手名:
                           <a href="javascript:;">刘若英</a>
                       </div>
                       <div class="song_info_ablum">专辑名:
                           <a href="javascript:;">我等你</a>
                       </div>
                   </div>
                   <ul class="song_lyric">
                       <li class="cur">第一条歌词</li>
                       <li>第二条歌词</li>
                   </ul>
               </div>
           </div>
       </div>
       <div class="footer">
           <div class="footer_in">
               <a href="javascript:;" class="music_pre"></a>
               <a href="javascript:;" class="music_play"></a>
               <a href="javascript:;" class="music_next"></a>
               <div class="music_progress_info">
                   <div class="music_progress_top">
                       <span class="music_progress_name">后来 / 刘若英</span>
                       <span class="music_progress_time">00:00 / 04:25</span>
                   </div>
                   <div class="music_progress_bar">
                       <div class="music_progress_line">
                           <div class="music_progress_dot"></div>
                       </div>
                   </div>
               </div>
               <a href="javascript:;" class="music_mode"></a>
               <a href="javascript:;" class="music_fav"></a>
               <a href="javascript:;" class="music_down"></a>
               <a href="javascript:;" class="music_comment"></a>
               <a href="javascript:;" class="music_only"></a>
               <div class="music_voice_info">
                   <a href="javascript:;" class="music_voice_icon"></a>
                   <div class="music_voice_bar">
                       <div class="music_voice_line">
                           <div class="music_voice_dot"></div>
                       </div>
                   </div>
               </div>
           </div>
       </div>
       <div class="mask_bg"></div>
       <div class="mask"></div>
       <audio src="" ></audio>
   </body>
</html>

1.css

*{
   margin: 0;
   padding: 0;
}
html,body{
   width: 100%;
   height: 100%;
   font-size: 14px;
}
.header{
   width: 100%;
   height: 45px;
/*    background: red; */
}
.header .logo{
   float: left;
   margin-top: 5px;
   margin-left: 20px;
   opacity: 0.5;
}
.header .logo:hover{
   opacity: 1;
}
.header .logo a{
   display: inline-block;
   width: 115px;
   height: 37px;
   background: url("../img/logo.png") no-repeat 0 0;
}
.header .register{
   float: right;
   line-height: 45px;
}
.header .register li{
   list-style: none;
   float: left;
   margin-right: 20px;
   color: #fff;
   opacity: 0.5;
}
.header .register li:hover{
   opacity: 1;
}
.content{
   width: 100%;
   height: 620px;
/*    background: blue; */
}
.content .content_in{
   width: 1200px;
   height: 100%;
/*    background: deeppink; */
   margin: 0 auto;
}
.content_in .content_left{
   float: left;
   width: 800px;
   height: 100%;
/*    background: pink; */
}
.content_left .content_toolbar{
   width: 100%;
   height: 40px;
/*    background: #000; */
}
.content_toolbar span{
   display: inline-block;
   width: 122px;
   height: 100%;
   line-height: 40px;
   text-align: center;
   border: 1px solid #fff;
   box-sizing: border-box;
   border-radius: 5px;
   color: #fff;
   opacity: 0.5;
}
.content_toolbar span i{
   display: inline-block;
   width: 18px;
   height: 18px;
   background: red no-repeat 0 0;
   margin-right: 10px;
   vertical-align: -5px;
}
.content_toolbar span:nth-child(1){
   background-position: -60px -20px;
}
.content_toolbar span:nth-child(2){
   background-position: -20px -20px;
}
.content_toolbar span:nth-child(3){
   background-position: -40px -240px;
}
.content_toolbar span:nth-child(4){
   background-position: -100px -20px;
}
.content_toolbar span:nth-child(5){
   background-position: -40px -300px;
}
.content_toolbar span i:hover{
   opacity: 1;
}
.content_left .content_list{
   width: 100%;
   height: 420px;
/*    background: purple; */
   overflow: auto;
}
.content_list li{
   list-style: none;
   width: 100%;
   height: 50px;
/*    background: orangered; */
   border-bottom: 1px solid rgba(255,255,255,0.5);
   box-sizing: border-box;
   user-select: none;
}
.content_list li div{
   float: left;
   color: rgba(255,255,255,0.5);
   line-height: 50px;
/*    opacity: 0.5; */
}
.content_list .list_check{
   width: 50px;
   height: 100%;
/*    background: #000; */
   text-align: center;
}
.content_list .list_check i{
   display: inline-block;
   width: 14px;
   height: 14px;
   border: 1px solid #fff;
   opacity: 0.5;
}
.content_list .list_checked i{
   background: red no-repeat -60px -80px;
   opacity: 1;
}
.content_list .list_number{
   width: 20px;
   height: 100%;
/*    background: green; */
}
.content_list .list_number2{
   color: transparent !important;
   background: deeppink no-repeat 0 center;
}
.content_list .list_name{
   width: 50%;
   height: 100%;
/*    background: #ccc; */
}
.list_name .list_meau{
   margin-top: 5px;
   float: right;
   margin-right: 20px;
   display: none;
}
.list_meau a{
   display: inline-block;
   width: 36px;
   height: 36px;
   background: red no-repeat 0 0;
   opacity: 0.5;
}
.list_meau a:hover{
   opacity: 1;
}
.list_meau a:nth-child(1){
   background-position: -120px 0;
}
.list_meau a:nth-child(2){
   background-position: -120px -80px;
}
.list_meau a:nth-child(3){
   background-position: -120px -120px;
}
.list_meau a:nth-child(4){
   background-position: -120px -40px;
}
.list_meau .list_meau_play2{
   background-position: -80px -200px !important;
}
.content_list .list_singer{
   width: 20%;
   height: 100%;
/*    background: pink; */
}
.content_list .list_time a{
   display: inline-block;
   width: 36px;
   height: 36px;
   background: red no-repeat -120px -160px;
   float: left;
   margin-top: 5px;
   display: none;
   opacity: 0.5;
}
.content_list .list_time a:hover{
   opacity: 1;
}
.content_in .content_right{
   float: right;
   width: 400px;
   height: 100%;
   user-select: none;
/*    background: #ccc; */
}
.content_right .song_info{
   text-align: center;
   color: rgba(255,255,255,0.5);
   line-height: 30px;
}
.song_info .song_info_pic{
   display: inline-block;
   background: red no-repeat 0 0;
   width: 201px;
   height: 180px;
   text-align: left;
}
/* .song_info_pic img{
   width: 180px;
   height: 180px;
} */
.song_info div a{
   text-decoration: none;
   color: #fff;
   opacity: 0.5;
}
.song_info div a:hover{
   opacity: 1;
}
.content_right .song_lyric{
/*    background: green; */
   text-align: center;
   margin-top: 30px;
}
.content_right .song_lyric li{
   list-style: none;
   line-height: 30px;
   font-weight: bold;
   color: rgba(255,255,255,0.5);
}
.content_right .song_lyric .cur{
   color: #31c27c;
}
.footer{
   width: 100%;
   height: 60px;
/*    background: deeppink; */
   position: absolute;
   left: 0;
   bottom: 0;
}
.footer .footer_in{
   width: 1200px;
   height: 100%;
/*    background: plum; */
   margin: 0 auto;
   user-select: none;
}
.footer_in a{
   display: inline-block;
   text-decoration: none;
   color: #fff;
   background: red no-repeat 0 0;
   margin-left: 20px;
}
.footer_in .music_pre{
   width: 19px;
   height: 20px;
   background-position: 0 -30px;
}
.footer_in .music_play{
   width: 19px;
   height: 20px;
   background-position: 0 0;
}
.footer_in .music_play2{
   width: 29px;
   height: 30px;
   background-position: -30px 0;
}
.footer_in .music_next{
   width: 19px;
   height: 20px;
   background-position: 0 -52px;
}
.footer_in .music_progress_info{
   display: inline-block;
   width: 670px;
   height: 40px;
   background: green;
   position: relative;
   top: 10px;
}
.music_progress_info .music_progress_top{
   width: 100%;
   height: 30px;
   line-height: 30px;
/*    background: #000; */
   color: #fff;
}
.music_progress_top .music_progress_name{
   float: left;
   opacity: 0.5;
}
.music_progress_top .music_progress_name:hover{
   opacity: 1;
}
.music_progress_top .music_progress_time{
   float: right;
   opacity: 0.5;
}
.music_progress_info .music_progress_bar{
   width: 100%;
   height: 4px;
   background: rgba(255,255,255,0.5);
   margin-top: 5px;
   position: relative;
}
.music_progress_bar .music_progress_line{
   width: 0;
   height: 100%;
   background: #fff;
}
.music_progress_line .music_progress_dot{
   width: 14px;
   height: 14px;
   border-radius: 50%;
   background: #fff;
   position: absolute;
   top: -5px;
   left: 0;
}
.footer_in .music_mode{
   width: 19px;
   height: 20px;
   background-position: 0 -205px;
}
.footer_in .music_mode2{
   width: 24px;
   height: 25px;
   background-position: 0 -260px;
}
.footer_in .music_mode3{
   width: 29px;
   height: 30px;
   background-position: 0 -74px;
}
.footer_in .music_mode4{
   width: 34px;
   height: 35px;
   background-position: 0 -232px;
}
.footer_in .music_fav{
   width: 19px;
   height: 20px;
   background-position: 0 -96px;
}
.footer_in .music_fav2{
   width: 29px;
   height: 30px;
   background-position: -30px -96px;
}
.footer_in .music_down{
   width: 19px;
   height: 20px;
   background-position: 0 -120px;
}
.footer_in .music_comment{
   width: 19px;
   height: 20px;
   background-position: 0 -400px;
}
.footer_in .music_only{
   width: 19px;
   height: 20px;
   background-position: 0 -281px;
}
.footer_in .music_only2{
   width: 29px;
   height: 30px;
   background-position: 0 -310px;
}
.footer_in .music_voice_info{
   display: inline-block;
   width: 100px;
   height: 40px;
   /* background: green; */
   position: relative;
   top: 10px;
}
.music_voice_info .music_voice_icon{
   width: 19px;
   height: 20px;
   background-position: 0 -144px;
   position: absolute;
   left: 0;
   top: 10px;
}
.music_voice_info .music_voice_icon2{
   width: 19px;
   height: 30px;
   background-position: 0 -182px;
}
.music_voice_info .music_voice_bar{
   width: 60px;
   height: 4px;
   background: rgba(255,255,255,0.5);
   position: absolute;
   right: 0;
   top: 18px;
}
.music_voice_bar .music_voice_line{
   width: 60px;
   height: 100%;
   background: #fff;
}
.music_voice_line .music_voice_dot{
   width: 14px;
   height: 14px;
   border-radius: 50%;
   background: #fff;
   position: relative;
   top: -5px;
   left: 60px;
}
.mask_bg{
   position: absolute;
   left: 0;
   top: 0;
   z-index: -2;
   width: 100%;
   height: 100%;
   background: url("../img/lnj.png") no-repeat 0 0;
   background-size: cover;
   filter: blur(100px);
}
.mask{
   position: absolute;
   left: 0;
   top: 0;
   z-index: -1;
   width: 100%;
   height: 100%;
   background: rgba(0,0,0,0.35);
}
._mCS_1 .mCSB_scrollTools .mCSB_dragger_bar{
   width: 8px;
}

1.js

$(function(){
   //自定义滚动条
   $(".content_list").mCustomScrollbar();
   var audios = $("audio");
   var player = new Player(audios);
   var progress;
   var voiceProgress;
   //加载歌曲
   getPlayerList();
   function getPlayerList(){
       $.ajax({
           url: "./source/musiclist.json",
           dataType: "json",
           success: function(data){
               // console.log(data);
               var musicList = $(".content_list ul");
               player.musicList = data;
               $.each(data,function(index,ele){
                   var item = createMusicItem(index,ele);
                   musicList.append(item);
               });
               initMusicInfo(data[0]);
               // initMusicLyric(data[0]);
           },
           error: function(e){
               console.log(e);
           }
       });
   }
   //初始化歌曲信息
   function initMusicInfo(music){
       //获取对应的元素
       var musicImage = $(".song_info_pic img");
       var musicName = $(".song_info_name a");
       var musicSinger = $(".song_info_singer a");
       var musicAblum = $(".song_info_ablum a");
       var musicProgressName = $(".music_progress_name");
       var musicProgressTime = $(".music_progress_time");
       var musicBg = $(".mask_bg");
       //给元素赋值
       musicImage.attr("src",music.cover);
       musicName.text(music.name);
       musicSinger.text(music.singer);
       musicAblum.text(music.album);
       musicProgressName.text(music.name +" / "+music.singer);
       musicProgressTime.text("00:00 / "+music.time);
       musicBg.css("background","url('"+music.cover+"')");
   }
   //初始化歌词信息
   // function initMusicLyric(music){
   //    var lyric = new Lyric(music.link_lrc);
   //    lyric.loadLyric();
   // }
   //初始化进度条
   initProgress();
   function initProgress(){
       var progressBar = $(".music_progress_bar");
       var progressLine = $(".music_progress_line");
       var progressDot = $(".music_progress_dot");
       progress = Progress(progressBar,progressLine,progressDot);
       progress.progressClick(function(value){
           player.musicSeekTo(value);
       });
       progress.progressMove(function(value){
           player.musicSeekTo(value);
       });

       var voiceBar = $(".music_voice_bar");
       var voiceLine = $(".music_voice_line");
       var voiceDot = $(".music_voice_dot");
       voiceProgress = Progress(voiceBar,voiceLine,voiceDot);
       voiceProgress.progressClick(function(value){
           player.musicVoiceSeekTo(value);
       });
       voiceProgress.progressMove(function(value){
           player.musicVoiceSeekTo(value);
       });
   }
   //初始化事件监听
   initEvents();
   function initEvents(){
       //监听歌曲移入移出
       $(".content_list").delegate(".list_music","mouseenter",function(){
           //显示子菜单
           $(this).find(".list_meau").stop().fadeIn(100);
           $(this).find(".list_time a").stop().fadeIn(100);
           //隐藏时长
           $(this).find(".list_time span").stop().fadeOut(100);
       });
       $(".content_list").delegate(".list_music","mouseleave",function(){
           //隐藏子菜单
           $(this).find(".list_meau").stop().fadeOut(100);
           $(this).find(".list_time a").stop().fadeOut(100);
           //显示时长
           $(this).find(".list_time span").stop().fadeIn(100);
       });
       //监听复选框的点击
       $(".content_list").delegate(".list_check","click",function(){
           $(this).toggleClass("list_checked");
       });
       //添加子菜单播放按钮
       var musicPlay = $(".music_play");
       $(".content_list").delegate(".list_meau_play","click",function(){
           var item = $(this).parents(".list_music");
           // console.log(item.get(0).index);
           // console.log(item.get(0).music);
           //切换播放图标
           $(this).toggleClass("list_meau_play2");
           //复原其他播放图标
           item.siblings().find(".list_meau_play").removeClass("list_meau_play2");
           if($(this).attr("class").indexOf("list_meau_play2") != -1){
               //当前子菜单播放按钮是播放状态
               musicPlay.addClass("music_play2");
               //让文字高亮
               item.find("div").css("color","#fff");
               item.siblings().find("div").css("color","rgba(255,255,255,0.5)");
           }else{
               //当前子菜单播放按钮不是播放状态
               musicPlay.removeClass("music_play2");
               //让文字不高亮
               item.find("div").css("color","rgba(255,255,255,0.5)");
           }
           // musicPlay.toggleClass("music_play2");
           //切换序号状态
           item.find(".list_number").toggleClass("list_number2");
           item.siblings().find(".list_number").removeClass("list_number2");
           //播放音乐
           player.playMusic(item.get(0).index,item.get(0).music);
           //切换歌曲信息
           initMusicInfo(item.get(0).music);
       });
       //监听底部播放按钮的点击
       musicPlay.click(function(){
           //判断有没有播放过音乐
           if(player.currentIndex == -1){
               //没有播放
               $(".list_music").eq(0).find(".list_meau_play").trigger("click");
           }else{
               //播放过
               $(".list_music").eq(player.currentIndex).find(".list_meau_play").trigger("click");
           }
       });
       //监听底部上一首按钮的点击
       $(".music_pre").click(function(){
           $(".list_music").eq(player.preIndex()).find(".list_meau_play").trigger("click");
       });
       //监听底部下一首按钮的点击
       $(".music_next").click(function(){
           $(".list_music").eq(player.nextIndex()).find(".list_meau_play").trigger("click");
       });
       //监听删除按钮点击
       $(".content_list").delegate(".list_meau_del","click",function(){
           //找到被点击的音乐
           var item = $(this).parents(".list_music");
           //判断当前删除的音乐是否在播放
           if(item.get(0).index == player.currentIndex){
               $(".music_next").trigger("click");
           }
           item.remove();
           player.changeMusic(item.get(0).index);
           //重新排序
           $(".list_music").each(function(index,ele){
               ele.index = index;
               $(ele).find(".list_number").text(index + 1);
           });
       });
       //监听播放进度
       player.musicTimeUpdate(function(currentTime,duration,timeStr){
           //同步时间
           $(".music_progress_time").text(timeStr);
           //同步进度条
           //计算播放比例
           var value = currentTime / duration * 100;
           progress.setProgress(value);
       });
       //监听声音按钮的点击
       $(".music_voice_icon").click(function(){
           //图标切换
           $(this).toggleClass("music_voice_icon2");
           //声音切换
           if($(this).attr("class").indexOf("music_voice_icon2") != -1){
               //变为没有声音
               player.musicVoiceSeekTo(0);
           }else{
               //变为有声音
               player.musicVoiceSeekTo(1);
           }
       });
   }

   //定义一个方法创建一条音乐
   function createMusicItem(index,music){
       var item = $("<li class=\"list_music\">"+
                               "<div class=\"list_check\"><i></i></div>"+
                               "<div class=\"list_number\">"+(index+1)+"</div>"+
                               "<div class=\"list_name\">"+music.name+""+
                                   "<div class=\"list_meau\">"+
                                       "<a href=\"javascript:;\" title=\"播放\" class=\"list_meau_play\"></a>"+
                                       "<a href=\"javascript:;\" title=\"添加\"></a>"+
                                       "<a href=\"javascript:;\" title=\"下载\"></a>"+
                                       "<a href=\"javascript:;\" title=\"分享\"></a>"+
                                   "</div>"+
                               "</div>"+
                               "<div class=\"list_singer\">"+music.singer+"</div>"+
                               "<div class=\"list_time\">"+
                                   "<span>"+music.time+"</span>"+
                                   "<a href=\"javascript:;\" title=\"删除\" class=\"list_meau_del\"></a>"+
                               "</div>"+
                           "</li>");
       item.get(0).index = index;
       item.get(0).music = music;
       return item;
   }

});

2.js

//JS的面向对象
(function(window){
   function Player(audios){
       return new Player.prototype.init(audios);
   }
   Player.prototype = {
       constructor: Player,
       musicList: [],
       init: function(audios){
           this.audios = audios;
           this.audio = audios.get(0);
       },
       currentIndex: -1,
       playMusic: function(index,music){
           //判断是否是同一首音乐
           if(this.currentIndex == index){
               //同一首音乐
               if(this.audio.paused){
                   this.audios.attr("src",music.link_url);
                   this.audio.play();
               }else{
                   this.audio.pause();
               }
           }else{
               this.currentIndex = index;
               // console.log(this.currentIndex);
               //不是同一首
               this.audios.attr("src",music.link_url);
               this.audio.play();
           }
       },
       preIndex:function(){
           var index = this.currentIndex - 1;
           if(index < 0){
               index = this.musicList.length - 1;
           }
           return index;
       },
       nextIndex:function(){
           var index = this.currentIndex + 1;
           if(index > this.musicList.length - 1){
               index = 0;
           }
           return index;
       },
       changeMusic:function(index){
           //删除对应的数据
           this.musicList.splice(index,1);
           //判断当前删除的音乐是否是正在播放音乐的前面
           if(index < this.currentIndex){
               this.currentIndex = this.currentIndex - 1;
           }
       },
       // getMusicDuration:function(){
       //    return this.audio.duration;
       // },
       // getMusicCurrentTime:function(){
       //    return this.audio.currentTime;
       // },
       musicTimeUpdate:function(callBack){
           var $this = this;
           this.audios.on("timeupdate",function(){
               var duration = $this.audio.duration;
               var currentTime = $this.audio.currentTime;
               var timeStr = $this.formatDate(currentTime,duration);
               callBack(currentTime,duration,timeStr);
           });
       },
       formatDate:function(currentTime,duration){
           var endMin = parseInt(duration / 60);
           var endSec = parseInt(duration % 60);
           if(endMin < 10){
               endMin = "0" + endMin;
           }
           if(endSec < 10){
               endSec = "0" + endSec;
           }
           var startMin = parseInt(currentTime / 60);
           var startSec = parseInt(currentTime % 60);
           if(startMin < 10){
               startMin = "0" + startMin;
           }
           if(startSec < 10){
               startSec = "0" + startSec;
           }
           return startMin+":"+startSec+" / "+endMin+":"+endSec;
       },
       musicSeekTo:function(value){
           if(isNaN(value)) return;
           this.audio.currentTime = this.audio.duration * value;
       },
       musicVoiceSeekTo:function(value){
           if(isNaN(value)) return;
           if(value < 0 || value > 1) return;
           //0~1
           this.audio.volume = value;
       }
   }
   Player.prototype.init.prototype = Player.prototype;
   window.Player = Player;
})(window);

3.js

//JS的面向对象
(function(window){
   function Progress(progressBar,progressLine,progressDot){
       return new Progress.prototype.init(progressBar,progressLine,progressDot);
   }
   Progress.prototype = {
       constructor: Progress,
       init: function(progressBar,progressLine,progressDot){
           this.progressBar = progressBar;
           this.progressLine = progressLine;
           this.progressDot = progressDot;
       },
       isMove:false,
       progressClick:function(callBack){
           var $this = this;//此时此刻的this是progress
           //监听背景点击
           this.progressBar.click(function(event){
               //获取背景距离窗口默认位置
               var normalLeft = $(this).offset().left;
               //获取点击的位置距离窗口的位置
               var eventLeft = event.pageX;
               //设置前景的宽度
               $this.progressLine.css("width",eventLeft - normalLeft);
               $this.progressDot.css("left",eventLeft - normalLeft);
               //计算进度条比例
               var value = (eventLeft - normalLeft) / $(this).width();
               callBack(value);
           });
       },
       progressMove:function(callBack){
           var $this = this;
           //获取背景距离窗口默认位置
           var normalLeft = this.progressBar.offset().left;
           var barWidth = this.progressBar.width();
           var eventLeft;
           //监听鼠标的按下
           this.progressBar.mousedown(function(){
               $this.isMove = true;
               //监听鼠标的移动
               $(document).mousemove(function(event){
                   //获取点击的位置距离窗口的位置
                   eventLeft = event.pageX;
                   var offset = eventLeft - normalLeft;
                   if(offset >= 0 && offset <= barWidth){
                       //设置前景的宽度
                       $this.progressLine.css("width",eventLeft - normalLeft);
                       $this.progressDot.css("left",eventLeft - normalLeft);
                   }
               });
           });
           //监听鼠标的抬起
           $(document).mouseup(function(){
               $(document).off("mousemove");
               $this.isMove = false;
               //计算进度条比例
               var value = (eventLeft - normalLeft) / $this.progressBar.width();
               callBack(value);
           });
       },
       setProgress:function(value){
           if(this.isMove) return;
           if(value < 0 || value > 100) return;
           this.progressLine.css({
               width: value+"%"
           });
           this.progressDot.css({
               left: value+"%"
           });
       }
   }
   Progress.prototype.init.prototype = Progress.prototype;
   window.Progress = Progress;
})(window);

4.js

//JS的面向对象
(function(window){
   function Lyric(path){
       return new Lyric.prototype.init(path);
   }
   Lyric.prototype = {
       constructor: Lyric,
       musicList: [],
       init: function(path){
           this.path = path;
       },
       loadLyric:function(){
           var $this = this;
           $.ajax({
               url: $this.path,
               dataType: "text",
               success: function(data){
                   // console.log(data);
                   $this.parseLyric(data);
               },
               error: function(e){
                   console.log(e);
               }
           });
       }
   }
   Lyric.prototype.init.prototype = Lyric.prototype;
   window.Lyric = Lyric;
})(window);

musiclist.json

[
   {
       "name":"I Lomo You",
       "singer":"王欣宇",
       "album":"I Lomo You",
       "time":"01:47",
       "link_url":"./source/ILomoYou.mp3",
       "cover":"./source/ILomoYou.png",
       "link_lrc":"I Lomo You"
   },
   {
       "name":"千灯之约",
       "singer":"王者荣耀",
       "album":"千灯之约",
       "time":"06:06",
       "link_url":"./source/千灯之约.mp3",
       "cover":"./source/千灯之约.png",
       "link_lrc":"千灯之约"
   },
   {
       "name":"西海情歌",
       "singer":"刀郎",
       "album":"刀郎III",
       "time":"05:46",
       "link_url":"./source/西海情歌.mp3",
       "cover":"./source/西海情歌.png",
       "link_lrc":"西海情歌"
   },
   {
       "name":"年轻的战场",
       "singer":"张杰",
       "album":"年轻的战场",
       "time":"04:53",
       "link_url":"./source/年轻的战场.mp3",
       "cover":"./source/年轻的战场.png",
       "link_lrc":"年轻的战场"
   },
   {
       "name":"公子向北走",
       "singer":"梦凉",
       "album":"公子向北走",
       "time":"02:16",
       "link_url":"./source/公子向北走.mp3",
       "cover":"./source/公子向北走.png",
       "link_lrc":"公子向北走"
   },
   {
       "name":"一起走的幸福",
       "singer":"橘子拿来u",
       "album":"橘子翻唱合集",
       "time":"03:07",
       "link_url":"./source/一起走的幸福.mp3",
       "cover":"./source/一起走的幸福.png",
       "link_lrc":"一起走的幸福"
   },
   {
       "name":"棉花糖",
       "singer":"黑崎子",
       "album":"棉花糖",
       "time":"03:49",
       "link_url":"./source/棉花糖.mp3",
       "cover":"./source/棉花糖.png",
       "link_lrc":"棉花糖"
   },
   {
       "name":"藏不住的心跳",
       "singer":"何三川",
       "album":"藏不住的心跳",
       "time":"03:59",
       "link_url":"./source/藏不住的心跳.mp3",
       "cover":"./source/藏不住的心跳.png",
       "link_lrc":"藏不住的心跳"
   },
   {
       "name":"有幸",
       "singer":"老光",
       "album":"有幸",
       "time":"03:39",
       "link_url":"./source/有幸.mp3",
       "cover":"./source/有幸.png",
       "link_lrc":"有幸"
   },
   {
       "name":"孤芳自赏",
       "singer":"杨小壮",
       "album":"孤芳自赏",
       "time":"04:28",
       "link_url":"./source/孤芳自赏.mp3",
       "cover":"./source/孤芳自赏.png",
       "link_lrc":"孤芳自赏"
   },
   {
       "name":"理想三旬",
       "singer":"张宇清",
       "album":"理想三旬",
       "time":"03:08",
       "link_url":"./source/理想三旬.mp3",
       "cover":"./source/理想三旬.png",
       "link_lrc":"理想三旬"
   },
   {
       "name":"会好的",
       "singer":"张艺兴",
       "album":"会好的",
       "time":"03:30",
       "link_url":"./source/会好的.mp3",
       "cover":"./source/会好的.png",
       "link_lrc":"会好的"
   },
   {
       "name":"只要平凡",
       "singer":"张杰/张碧晨",
       "album":"只要平凡",
       "time":"04:06",
       "link_url":"./source/只要平凡.mp3",
       "cover":"./source/只要平凡.png",
       "link_lrc":"只要平凡"
   },
   {
       "name":"老人与海",
       "singer":"海鸣威",
       "album":"精彩音乐汇",
       "time":"02:54",
       "link_url":"./source/老人与海.mp3",
       "cover":"./source/老人与海.png",
       "link_lrc":"老人与海"
   },
   {
       "name":"会呼吸的痛",
       "singer":"梁静茹",
       "album":"会呼吸的痛",
       "time":"04:32",
       "link_url":"./source/会呼吸的痛.mp3",
       "cover":"./source/会呼吸的痛.png",
       "link_lrc":"会呼吸的痛"
   }
]