jQuery開發(fā)仿QQ版音樂播放器

更新時間：2020年07月10日 11:01:30 作者：Alan.hsiang

這篇文章主要介紹了jQuery開發(fā)仿QQ版的音樂播放器，文中示例代碼非常詳細(xì)，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下

本文通過Html+CSS+jQuery開發(fā)仿QQ版的音樂播放器，是前端技術(shù)的綜合應(yīng)用，所用素材來源于網(wǎng)絡(luò)，僅供學(xué)習(xí)分享使用，如有不足之處，還請指正。

涉及知識點

在本例中用到的知識點如下，按jQuery和CSS進(jìn)行區(qū)分：

jQuery 是一個 JavaScript 庫，極大地簡化了 JavaScript 編程，常見知識點如下：

通過標(biāo)簽獲取jQuery對象：var $audio =$("audio");
通過選擇符獲取jQuery對象并設(shè)置文本內(nèi)容：$(".music_progrss_time").text(timeStr);
通過選擇符，標(biāo)簽名獲取對象并獲取第i個子元素：$(".song_lyric ul li").eq(index);
通過ajax異步獲取數(shù)據(jù)并刷新頁面：$.ajax({});
通過類選擇符獲取元素并進(jìn)行隱藏或顯示：$(this).find(".list_menu").stop().fadeIn(100);
通過委托動態(tài)設(shè)置單擊事件，主要針對動態(tài)生成元素：$(".content_list").delegate(".list_check", "click", function() {});
通過addClass添加類，removeClass刪除類，toggleClass切換類，hasClass是否包含類
獲取與對象同級的兄弟節(jié)點：$musicList.siblings();
觸發(fā)相關(guān)事件：$(".music_next").trigger("click");

CSS通過使用 CSS 我們可以大大提升網(wǎng)頁開發(fā)的工作效率！本例使用知識點如下：

設(shè)置距離左邊的距離：margin-left: 20px; 設(shè)置距離右邊的距離：margin-right: 20px;
設(shè)置透明度：opacity: 0.6; 值[0,1]從透明到全不透明
設(shè)置背景圖片：background: url(../img/player_logo.png) no-repeat 0 0;設(shè)置背景顏色和透明度：background: rgba(255,255,255,0.5);
設(shè)置li的樣式：list-style: none;
設(shè)置顯示樣式為行內(nèi)塊：display: inline-block;
設(shè)置圓角：border-radius: 5px;
設(shè)置相對位置：position: relative;
背景圖片的起始坐標(biāo)：background-position: 0 -75px;

示例效果圖及結(jié)構(gòu)劃分

本例的示例效果圖及結(jié)構(gòu)劃分如下所示：

Html核心代碼

Header部分代碼：主要用于顯示logo和登錄顯示，如下所示：

<div class="header">
 <h1 class="logo">
 <a href="#" rel="external nofollow" ></a> --by Alan.hsiang
 </h1>
 <ul class="register">
 <li>登錄</li>
 <li>設(shè)置</li>
 </ul>
</div>

中間區(qū)域部分：主要包括坐邊的列表和右邊的歌曲相關(guān)，如下所示：

 <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">
   <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:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="song_info_pic">
   <img src="" alt="" />
   </a>
   <div class="song_info_name">歌曲名稱：<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class=""></a></div>
   <div class="song_info_singer">歌手名：<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class=""></a></div>
   <div class="song_info_album">專輯名稱：<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class=""></a></div>
  </div>
  <div class="song_lyric"><ul></ul></div>
  </div>
 </div>
 </div>

底部區(qū)域代碼，主要用于播放相關(guān)內(nèi)容，如下所示：

 <div class="footer">
 <div class="footer_in">
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="music_pre" title="上一首"></a>
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="music_play" title="播放"></a>
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="music_next" title="下一首"></a>
  <div class="music_progress_info">
  <div class="music_progress_top">
   <span class="music_progrss_name"></span>
   <span class="music_progrss_time"></span>
  </div>
  <div class="music_progress_bar">
   <div class="music_progress_line">
   <div class="music_progress_dot"></div>
   </div>
  </div>
  </div>
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="music_mode" title="播放模式"></a>
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="music_fav" title="收藏"></a>
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="music_down" title="下載"></a>
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="music_comment" title="評論"></a>
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="music_only" title="純凈模式"></a>
  <div class="music_voice">
  <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="music_voice_info" title="聲音"></a>
  <div class="music_voice_bar">
   <div class="music_voice_line">
   <div class="music_voice_dot"></div>
   </div>
  </div>
  </div>
 </div>
 </div>

jQuery功能性核心代碼

在本示例中，從功能上區(qū)分，主要分為播放模塊，進(jìn)度條模塊，歌詞模塊，各個模塊相互獨立，所以進(jìn)行了適當(dāng)?shù)姆庋b。

播放模塊【Play】主要包括歌曲的初始化，播放與暫停，上一首，下一首，播放同步，跳轉(zhuǎn)等功能，核心代碼如下：

(function(window){
 function Player($audio){
 return new Player.prototype.init($audio);
 }
 Player.prototype={
 constructor :Player,
 musicList:[],
 currIndex:-1,
 $audio:null,
 audio:null,
 init:function($audio){
  this.$audio=$audio;//jQuey包裝對象
  this.audio=$audio.get(0);//原生audio對象
 },
 play:function(index,music){
  console.log(index,music);
  console.log(this.$audio);
  if(this.currIndex==index){
  //同一首音樂，則是暫停，播放之間切換

  if(this.audio.paused){
   this.audio.play();
  }else{
   this.audio.pause();
  }
  }else{
  //不是同一首，重新播放
  this.$audio.attr('src',music.link_url);
  this.audio.play();
  this.currIndex=index;
  }
 },
 preIndex:function(){
  var index=this.currIndex-1;
  if(index<0){
  index=this.musicList.length-1;
  }
  return index;
 },
 nextIndex:function(){
  var index=this.currIndex+1;
  if(index>this.musicList.length-1){
  index=0;
  }
  return index;
 },
 del:function(index){
  this.musicList.splice(index,1);
  if(index<this.currIndex){
  this.currIndex=this.currIndex-1;
  }
 },
 musicTimeUpdate:function(callBack){
  //需要一個回調(diào)函數(shù)作為參數(shù)
  var that=this;
  //監(jiān)聽audio播放事件
  this.$audio.on("timeupdate",function(){
  var duration=that.audio.duration;
  var currentTime=that.audio.currentTime;
  var timeStr=that.formatTime(currentTime,duration);
  //參數(shù)是一個回調(diào)函數(shù)
  callBack(duration,currentTime,timeStr);
  });
 },
 //定義一個格式化時間的方法
 formatTime:function (currentTime,duration){
  //總時長
  var endMin=parseInt(duration/60);
  var endSec=parseInt(duration%60);
  endMin=endMin<10?"0"+endMin:endMin;
  endSec=endSec<10?"0"+endSec:endSec;
  //當(dāng)前時長
  var curMin=parseInt(currentTime/60);
  var curSec=parseInt(currentTime%60);
  curMin=curMin<10?"0"+curMin:curMin;
  curSec=curSec<10?"0"+curSec:curSec;
  return curMin+":"+curSec+" / "+endMin+":"+endSec;
 },
 musicSeekTo:function(value){
  var that=this;
  var duration=that.audio.duration;
  if(isNaN(duration))return;
  if(isNaN(value))return;
  that.audio.currentTime=duration*value ;
 },
 musicVoiceSeekTo:function(value){
  if(isNaN(value))return;
  if(value<=0 || value>=1) return;
  this.audio.volume=value;
 }
 };
 Player.prototype.init.prototype=Player.prototype;
 window.Player=Player;
})(window);

歌詞模塊【lyric】，主要包括歌詞的加載，解析，同步等功能，核心代碼如下：

(function(window){
 function Lyric(path){
 return new Lyric.prototype.init(path);
 }
 Lyric.prototype={
 constructor :Lyric,
 times:[],
 lyrics:[],
 index:-1,
 init:function(path){
  this.path=path;
 },
 loadLyric:function(callBack){
  var that=this;
  $.ajax({
  type: "get",
  dataType:"text",
  contentType: "application/text; charset=utf-8",
  url: that.path,
  success: function(data) {
   //console.log(data);
   that.parseLyric(data);
   callBack();
  },
  error: function(e) {
   console.log(e);
  }
  });
 },
 parseLyric:function(data){
  var that=this;
  //初始化歌詞和時間
  that.times=[];
  that.lyrics=[];
  that.index=-1;
  //
  var array=data.split("\n");
  //console.log(array);
  var timeReg=/\[(\d*:\d*\.\d*)\]/;
  $.each(array, function(index,ele) {
  //console.log(ele);
  //
  var lyc=ele.split("]")[1];
  if(lyc==null || lyc.length==1){
   return true;//排除空字符串
  }
  that.lyrics.push(lyc);

  var res=timeReg.exec(ele);
  //console.log(res);
  if(res==null){
   return true; //排除空時間
  }
  var timeStr=res[1];
  var res2=timeStr.split(":");
  var min=parseInt(res2[0]) *60;
  var sec=parseFloat(res2[1]) ;
  var res3=parseFloat( Number(min+sec).toFixed(2));
  //console.log(res3);
  that.times.push(res3);
  });
  console.log(that.times.length +" , "+ that.lyrics.length);
 },
 currentLyric:function(currentTime){
  //console.log(currentTime);
  if(currentTime>this.times[0]){
  this.index++;
  this.times.shift();//刪除第一個元素，并返回剩余的數(shù)組
  }
  return this.index;
 }
 };
 Lyric.prototype.init.prototype=Lyric.prototype;
 window.Lyric=Lyric;
})(window);

進(jìn)度條模塊【Progress】主要包括：進(jìn)度條的初始化，單擊，拖動，回調(diào)等功能，核心代碼如下：

(function(window){
 function Progress($progressBar,$progressLine,$progressDot){
 return new Progress.prototype.init($progressBar,$progressLine,$progressDot);
 }
 Progress.prototype={
 constructor :Progress,
 isMove:false,
 init:function($progressBar,$progressLine,$progressDot){
  this.$progressBar=$progressBar;
  this.$progressLine=$progressLine;
  this.$progressDot=$progressDot;
 },
 progressClick:function(callBack){
  //console.log(this.$progressBar);
  var that=this;//此時的this表示Progress
  this.$progressBar.click(function(event){
  //此時的this表示progrssBar點擊的對象
  var normalLeft = $(this).offset().left;//控件默認(rèn)距左邊的位置
  var eventLeft = event.pageX;//當(dāng)前鼠標(biāo)點擊的距左邊的位置
  that.$progressLine.css("width",eventLeft-normalLeft);
  that.$progressDot.css("left",eventLeft-normalLeft);
  //計算進(jìn)度條的比例
  var value=(eventLeft-normalLeft)/$(this).width();
  callBack(value);
  });
 },
 progressMove:function(callBack){
  var that=this;//此時的this表示Progress
  var normalLeft =-1;
  var eventLeft=-1;
  var barWidth=this.$progressBar.width();
  this.$progressBar.mousedown(function(){
  that.isMove=true;
  normalLeft = $(this).offset().left;//控件默認(rèn)距左邊的位置

  $(document).mousemove(function(){
   //此時的this表示progrssBar點擊的對象
   eventLeft = event.pageX;//當(dāng)前鼠標(biāo)點擊的距左邊的位置
   var v=eventLeft-normalLeft;
   if(v>=0 && v<=barWidth){
   //判斷值的有效范圍再賦值
   that.$progressLine.css("width",eventLeft-normalLeft);
   that.$progressDot.css("left",eventLeft-normalLeft);
   }
  });
  });
  $(document).mouseup(function(){
  $(document).off("mousemove");
  that.isMove=false;
  //計算進(jìn)度條的比例
  var value=(eventLeft-normalLeft)/that.$progressBar.width();
  //鼠標(biāo)抬起時觸發(fā)，防止音樂斷斷續(xù)續(xù)
  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);

加載流程，包括初始化歌曲列表，歌詞信息，注冊事件，初始化進(jìn)度條等功能，本例中的歌曲列表和歌詞信息，均是通過ajax從本地文件中獲取，核心代碼如下：

$(function() {
 var $audio =$("audio");
 var player=new Player($audio);
 var progress=null;
 var voiceProgress=null;
 var lyric=null;
 //1.加載音樂
 getPlayerList();
 //2.注冊事件
 initEvent();
 //3.初始化進(jìn)度條，包括聲音
 initProgress();

 //音樂播放同步
 player.musicTimeUpdate(function(duration,currentTime,timeStr){
 //同步時間
 $(".music_progrss_time").text(timeStr);
 //同步進(jìn)度條
 var value=currentTime/duration *100;
 progress.setProgress(value);
 //實現(xiàn)歌詞同步
 var oldIndex=lyric.index;
 var index=lyric.currentLyric(currentTime);
 if(oldIndex==index)return;
 var item=$(".song_lyric ul li").eq(index);
 item.addClass("cur");
 item.siblings().removeClass("cur");
 if(index<0) return;
 $(".song_lyric ul").css({
  marginTop:(-index+2)*40
 });
 })

 //獲取列表函數(shù)
 function getPlayerList() {
 $.ajax({
  type: "get",
  url: "music_list.json",
  success: function(data) {
  //player.musicList=data;
  //console.log(data);
  var musicList = $(".content_list ul");
  $.each(data, function(index, ele) {
   var item = createMusicItem(index, ele);
   musicList.append(item);
  });
  //默認(rèn)初始化第一首歌曲信息
  initMusicInfo(data[0]);

  //初始化歌詞信息
  initMusicLyric(data[0]);
  },
  error: function(e) {
  console.log(e);
  }
 });
 }
 //定義一個方法，創(chuàng)建一條音樂
 function createMusicItem(index, music) {
 var $item = $("<li class=\"list_music\">\n" +
  "<div class=\"list_check\">\n" +
  "<i></i>\n" +
  "</div>\n" +
  "<div class=\"list_number\">\n" +
  (index + 1) +
  "</div>\n" +
  "<div class=\"list_name\">\n" +
  music.name +
  "<div class=\"list_menu\">\n" +
  "<a href=\"javascript:;\" title=\"播放\" class=\"list_menu_play\"></a>\n" +
  "<a href=\"javascript:\;\" title=\"添加\"></a>\n" +
  "<a href=\"javascript:;\" title=\"下載\"></a>\n" +
  "<a href=\"javascript:;\" title=\"分享\"></a>\n" +
  "</div>\n" +
  "</div>\n" +
  "<div class=\"list_singer\">\n" +
  music.singer +
  "</div>\n" +
  "<div class=\"list_time\">\n" +
  "<span>\n" +
  music.time +
  "</span>\n" +
  "<a href=\"javascript:;\" title=\"刪除\" class=\"list_menu_del\"></a>\n" +
  "</div>\n" +
  "</li>");
 $item.get(0).index=index;
 $item.get(0).music=music;
 return $item;
 }

 //初始化音樂信息
 function initMusicInfo(music){
 //獲取元素
 var $musicImg=$(".song_info_pic img");
 var $musicName=$(".song_info_name a");
 var $musicSinger=$(".song_info_singer a");
 var $musicAlbum=$(".song_info_album a");
 var $musicTopName=$(".music_progrss_name");
 var $musicTopTime=$(".music_progrss_time");
 var $musicBg=$(".mask_bg");
 //賦值
 $musicImg.attr("src",music.cover);
 $musicName.text(music.name);
 $musicSinger.text(music.singer);
 $musicAlbum.text(music.album);
 $musicTopName.text(music.name+" / "+ music.singer);
 $musicTopTime.text("00:00 / "+music.time);
 $musicBg.css("background","url('"+music.cover+"') no-repeat 0 0;");

 }

 //初始化歌詞信息
 function initMusicLyric(music){
 lyric=new Lyric(music.link_lrc);
 var lyricContainer=$(".song_lyric ul");
 //清空信息
 lyricContainer.html("");
 //加載歌詞
 lyric.loadLyric(function(){
  //加載完成后處理函數(shù)
  $.each(lyric.lyrics,function(index,ele){
  var item=$("<li>"+ele+"</li>");
  lyricContainer.append(item);
  });
 });
 }
 //注冊事件
 function initEvent() {
 //監(jiān)聽歌曲的移入移出事件
 //通過委托動態(tài)監(jiān)聽事件
 $(".content_list").delegate(".list_music", "mouseover", function() {
  //移入事件：1.顯示子菜單 2. 隱藏時長 ，顯示刪除按鈕
  $(this).find(".list_menu").stop().fadeIn(100);
  $(this).find(".list_time a").stop().fadeIn(100);
  $(this).find(".list_time span").stop().fadeOut(100);
  //
  $(this).find(".list_name").addClass("list_music_hover");
 });
 $(".content_list").delegate(".list_music", "mouseleave", function() {
  //移出事件：1.隱藏子菜單 2. 顯示時長 ，隱藏刪除按鈕
  $(this).find(".list_menu").stop().fadeOut(100);
  $(this).find(".list_time a").stop().fadeOut(100);
  $(this).find(".list_time span").stop().fadeIn(100);
  $(this).find(".list_name").removeClass("list_music_hover");
 });

 //以下綁定事件只針對靜態(tài)語句
 // $(".list_music").hover(function(){
 // //移入事件：1.顯示子菜單 2. 隱藏時長 ，顯示刪除按鈕
 // $(this).find(".list_menu").stop().fadeIn(100);
 // $(this).find(".list_time a").stop().fadeIn(100);
 // $(this).find(".list_time span").stop().fadeOut(100);
 // },function(){
 // //移出事件：1.隱藏子菜單 2. 顯示時長 ，隱藏刪除按鈕
 // $(this).find(".list_menu").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 musicList = $(this).parents(".list_music");
  if($(this).hasClass("list_checked")) {
  musicList.find("div").css("color", "#fff");
  musicList.siblings().find("div").css("color", "rgba(255,255,255,0.5)");
  } else {
  musicList.find("div").css("color", "rgba(255,255,255,0.5)");
  }
 });
 // //監(jiān)聽復(fù)選框的點擊事件
 // $(".list_check").click(function(){
 // $(this).toggleClass("list_checked");
 // });

 //監(jiān)聽點擊播放事件
 $(".content_list").delegate(".list_menu_play", "click", function() {
  //切換播放圖標(biāo)
  $(this).toggleClass("list_menu_play2");
  //還原其他項的圖標(biāo)
  var $musicList = $(this).parents(".list_music");

//  console.log($musicList.get(0).index);
//  console.log($musicList.get(0).music);

  $musicList.siblings().find(".list_menu_play").removeClass("list_menu_play2");
  //底部圖標(biāo)同步
  if($(this).hasClass("list_menu_play2")) {
  $(".music_play").addClass("music_pause");
  $musicList.find("div").css("color", "#fff");
  $musicList.siblings().find("div").css("color", "rgba(255,255,255,0.5)");
  } else {
  $(".music_play").removeClass("music_pause");
  $musicList.find("div").css("color", "rgba(255,255,255,0.5)");
  }
  $musicList.find(".list_number").toggleClass("list_number_play");
  $musicList.siblings().find(".list_number").removeClass("list_number_play");
  //播放
  player.play($musicList.get(0).index,$musicList.get(0).music);
  //
  initMusicInfo($musicList.get(0).music);
  //同步歌詞
  initMusicLyric($musicList.get(0).music);
 });

 //監(jiān)聽刪除事件
 $(".content_list").delegate(".list_menu_del", "click", function() {
  var $item=$(this).parents(".list_music");
  $item.remove();
  player.del($item.get(0).index);
  if($item.get(0).index==player.currIndex){
  //如果刪除的是當(dāng)前播放的歌曲，則自動播放下一首
  $(".music_next").trigger("click");
  }
  //修改序號
  $(".list_music").each(function(index,ele){
  ele.index=index;
  $(ele).find(".list_number").text(index+1);
  });
 });
 //監(jiān)聽底部按鈕
 //播放
 $(".music_play").click(function(){
  //判斷是否有播放過音樂
  if(player.currIndex==-1){
  //表示沒有播放過
  $(".list_music").eq(0).find(".list_menu_play").trigger("click");

  }else{
  //表示之前有播放過
  $(".list_music").eq(player.currIndex).find(".list_menu_play").trigger("click");
  }
 });
 //前一首
 $(".music_pre").click(function(){
  $(".list_music").eq(player.preIndex()).find(".list_menu_play").trigger("click");
 });
 //下一首
 $(".music_next").click(function(){
  $(".list_music").eq(player.nextIndex()).find(".list_menu_play").trigger("click");
 });
 //聲音事件
 $(".music_voice_info").click(function(){
  //圖標(biāo)切換
  $(this).toggleClass("music_voice_info2");
  if($(this).hasClass("music_voice_info2")){
  //無聲音
  player.musicVoiceSeekTo(0);
  }else{
  //有聲音
  player.musicVoiceSeekTo(1);
  }
 });
 }
 //初始化進(jìn)度條
 function initProgress(){
 //進(jìn)度條
 var $progressBar=$(".music_progress_bar");
 var $progressLine=$(".music_progress_line");
 var $progressDot=$(".music_progress_dot");
 progress=new Progress($progressBar,$progressLine,$progressDot);
 progress.progressClick(function(value){
  console.log("進(jìn)度點0001");
  player.musicSeekTo(value);
 });
 progress.progressMove(function(value){
  player.musicSeekTo(value);
 });
 //聲音條
 var $musicVoiceBar=$(".music_voice_bar");
 var $musicVoiceLine=$(".music_voice_line");
 var $musicVoiceDot=$(".music_voice_dot");
 voiceProgress=new Progress($musicVoiceBar,$musicVoiceLine,$musicVoiceDot);
 voiceProgress.progressClick(function(value){
  console.log("聲音點0001");
  player.musicVoiceSeekTo(value);
 });
 voiceProgress.progressMove(function(value){
  player.musicVoiceSeekTo(value);
 });
 }

});

如果歌曲發(fā)生改變，則背景圖也跟著改變，如下所示：