jQuery开发仿QQ版音乐播放器

本文通过Html+CSS+jQuery开发仿QQ版的音乐播放器，是前端技术的综合应用，所用素材来源于网络，仅供学习分享使用，如有不足之处，还请指正。

涉及知识点

在本例中用到的知识点如下，按jQuery和CSS进行区分：

jQuery 是一个 JavaScript 库，极大地简化了 JavaScript 编程，常见知识点如下：

通过标签获取jQuery对象：var $audio =$("audio");
通过选择符获取jQuery对象并设置文本内容：$(".music_progrss_time").text(timeStr);
通过选择符，标签名获取对象并获取第i个子元素：$(".song_lyric ul li").eq(index);
通过ajax异步获取数据并刷新页面：$.ajax({});
通过类选择符获取元素并进行隐藏或显示：$(this).find(".list_menu").stop().fadeIn(100);
通过委托动态设置单击事件，主要针对动态生成元素：$(".content_list").delegate(".list_check", "click", function() {});
通过addClass添加类，removeClass删除类，toggleClass切换类，hasClass是否包含类
获取与对象同级的兄弟节点：$musicList.siblings();
触发相关事件：$(".music_next").trigger("click");

CSS通过使用 CSS 我们可以大大提升网页开发的工作效率！本例使用知识点如下：

设置距离左边的距离：margin-left: 20px; 设置距离右边的距离：margin-right: 20px;
设置透明度：opacity: 0.6; 值[0,1]从透明到全不透明
设置背景图片：background: url(../img/player_logo.png) no-repeat 0 0;设置背景颜色和透明度：background: rgba(255,255,255,0.5);
设置li的样式：list-style: none;
设置显示样式为行内块：display: inline-block;
设置圆角：border-radius: 5px;
设置相对位置：position: relative;
背景图片的起始坐标：background-position: 0 -75px;

示例效果图及结构划分

本例的示例效果图及结构划分如下所示：

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>设置</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">
  <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>

底部区域代码，主要用于播放相关内容，如下所示：

<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功能性核心代码

在本示例中，从功能上区分，主要分为播放模块，进度条模块，歌词模块，各个模块相互独立，所以进行了适当的封装。

播放模块【Play】主要包括歌曲的初始化，播放与暂停，上一首，下一首，播放同步，跳转等功能，核心代码如下：

(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){
  //需要一个回调函数作为参数
  var that=this;
  //监听audio播放事件
  this.$audio.on("timeupdate",function(){
  var duration=that.audio.duration;
  var currentTime=that.audio.currentTime;
  var timeStr=that.formatTime(currentTime,duration);
  //参数是一个回调函数
  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;
  //当前时长
  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();//删除第一个元素，并返回剩余的数组
  }
  return this.index;
 }
 };
 Lyric.prototype.init.prototype=Lyric.prototype;
 window.Lyric=Lyric;
})(window);

进度条模块【Progress】主要包括：进度条的初始化，单击，拖动，回调等功能，核心代码如下：

(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;//控件默认距左边的位置
  var eventLeft = event.pageX;//当前鼠标点击的距左边的位置
  that.$progressLine.css("width",eventLeft-normalLeft);
  that.$progressDot.css("left",eventLeft-normalLeft);
  //计算进度条的比例
  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;//控件默认距左边的位置
 
  $(document).mousemove(function(){
   //此时的this表示progrssBar点击的对象
   eventLeft = event.pageX;//当前鼠标点击的距左边的位置
   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;
  //计算进度条的比例
  var value=(eventLeft-normalLeft)/that.$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);

加载流程，包括初始化歌曲列表，歌词信息，注册事件，初始化进度条等功能，本例中的歌曲列表和歌词信息，均是通过ajax从本地文件中获取，核心代码如下：

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

$(function() {
 var $audio =$("audio");
 var player=new Player($audio);
 var progress=null;
 var voiceProgress=null;
 var lyric=null;
 //1.加载音乐
 getPlayerList();
 //2.注册事件
 initEvent();
 //3.初始化进度条，包括声音
 initProgress();
 
 //音乐播放同步
 player.musicTimeUpdate(function(duration,currentTime,timeStr){
 //同步时间
 $(".music_progrss_time").text(timeStr);
 //同步进度条
 var value=currentTime/duration *100;
 progress.setProgress(value);
 //实现歌词同步
 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
 });
 })
 
 //获取列表函数
 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);
  });
  //默认初始化第一首歌曲信息
  initMusicInfo(data[0]);
 
  //初始化歌词信息
  initMusicLyric(data[0]);
  },
  error: function(e) {
  console.log(e);
  }
 });
 }
 //定义一个方法，创建一条音乐
 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(){
  //加载完成后处理函数
  $.each(lyric.lyrics,function(index,ele){
  var item=$("<li>"+ele+"</li>");
  lyricContainer.append(item);
  });
 });
 }
 //注册事件
 function initEvent() {
 //监听歌曲的移入移出事件
 //通过委托动态监听事件
 $(".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");
 });
 
 //以下绑定事件只针对静态语句
 // $(".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)");
  }
 });
 // //监听复选框的点击事件
 // $(".list_check").click(function(){
 // $(this).toggleClass("list_checked");
 // });
 
 //监听点击播放事件
 $(".content_list").delegate(".list_menu_play", "click", function() {
  //切换播放图标
  $(this).toggleClass("list_menu_play2");
  //还原其他项的图标
  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");
  //底部图标同步
  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);
 });
 
 //监听删除事件
 $(".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){
  //如果删除的是当前播放的歌曲，则自动播放下一首
  $(".music_next").trigger("click");
  }
  //修改序号
  $(".list_music").each(function(index,ele){
  ele.index=index;
  $(ele).find(".list_number").text(index+1);
  });
 });
 //监听底部按钮
 //播放
 $(".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(){
  //图标切换
  $(this).toggleClass("music_voice_info2");
  if($(this).hasClass("music_voice_info2")){
  //无声音
  player.musicVoiceSeekTo(0);
  }else{
  //有声音
  player.musicVoiceSeekTo(1);
  }
 });
 }
 //初始化进度条
 function initProgress(){
 //进度条
 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("进度点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);
 });
 }
 
});

如果歌曲发生改变，则背景图也跟着改变，如下所示：

源码链接

以上就是jQuery开发仿QQ版音乐播放器的详细内容，更多关于jQuery开发音乐播放器的资料请关注自学编程网其它相关文章！

编程技巧