本文通过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和登录显示，如下所示：
1 <div class="header"> 2 <h1 class="logo"> 3 <a href="#"></a> --by Alan.hsiang 4 </h1> 5 <ul class="register"> 6 <li>登录</li> 7 <li>设置</li> 8 </ul> 9 </div>
中间区域部分：主要包括坐边的列表和右边的歌曲相关，如下所示：
1 <div class="content"> 2 <div class="content_in"> 3 <div class="content_left"> 4 <div class="content_toolbar"> 5 <span><i></i>收藏</span> 6 <span><i></i>添加到</span> 7 <span><i></i>下载</span> 8 <span><i></i>删除</span> 9 <span><i></i>清空列表</span> 10 </div> 11 <div class="content_list"> 12 <ul> 13 <li class="list_title"> 14 <div class="list_check"><i></i></div> 15 <div class="list_number"></div> 16 <div class="list_name">歌曲</div> 17 <div class="list_singer">歌手</div> 18 <div class="list_time">时长</div> 19 </li> 20 </ul> 21 </div> 22 </div> 23 <div class="content_right"> 24 <div class="song_info"> 25 <a href="javascript:;" class="song_info_pic"> 26 <img src="" alt="" /> 27 </a> 28 <div class="song_info_name">歌曲名称：<a href="javascript:;" class=""></a></div> 30 <div class="song_info_singer">歌手名：<a href="javascript:;" class=""></a></div> 32 <div class="song_info_album">专辑名称：<a href="javascript:;" class=""></a></div> 34 </div> 35 <div class="song_lyric"><ul></ul></div> 37 </div> 38 </div> 39 </div> 40
底部区域代码，主要用于播放相关内容，如下所示：
1 <div class="footer"> 2 <div class="footer_in"> 3 <a href="javascript:;" class="music_pre" title="上一首"></a> 4 <a href="javascript:;" class="music_play" title="播放"></a> 5 <a href="javascript:;" class="music_next" title="下一首"></a> 6 <div class="music_progress_info"> 7 <div class="music_progress_top"> 8 <span class="music_progrss_name"></span> 9 <span class="music_progrss_time"></span> 10 </div> 11 <div class="music_progress_bar"> 12 <div class="music_progress_line"> 13 <div class="music_progress_dot"></div> 16 </div> 17 </div> 18 </div> 19 <a href="javascript:;" class="music_mode" title="播放模式"></a> 20 <a href="javascript:;" class="music_fav" title="收藏"></a> 21 <a href="javascript:;" class="music_down" title="下载"></a> 22 <a href="javascript:;" class="music_comment" title="评论"></a> 23 <a href="javascript:;" class="music_only" title="纯净模式"></a> 24 <div class="music_voice"> 25 <a href="javascript:;" class="music_voice_info" title="声音"></a> 26 <div class="music_voice_bar"> 27 <div class="music_voice_line"> 28 <div class="music_voice_dot"></div> 29 </div> 30 </div> 31 </div> 32 </div> 33 </div> 34
jQuery功能性核心代码
在本示例中，从功能上区分，主要分为播放模块，进度条模块，歌词模块，各个模块相互独立，所以进行了适当的封装。
播放模块【Play】主要包括歌曲的初始化，播放与暂停，上一首，下一首，播放同步，跳转等功能，核心代码如下：
1 (function(window){ 2 function Player($audio){ 3 return new Player.prototype.init($audio); 4 } 5 Player.prototype={ 6 constructor :Player, 7 musicList:[], 8 currIndex:-1, 9 $audio:null, 10 audio:null, 11 init:function($audio){ 12 this.$audio=$audio;//jQuey包装对象 13 this.audio=$audio.get(0);//原生audio对象 14 }, 15 play:function(index,music){ 16 console.log(index,music); 17 console.log(this.$audio); 18 if(this.currIndex==index){ 19 //同一首音乐，则是暂停，播放之间切换 20 21 if(this.audio.paused){ 22 this.audio.play(); 23 }else{ 24 this.audio.pause(); 25 } 26 }else{ 27 //不是同一首，重新播放 28 this.$audio.attr('src',music.link_url); 29 this.audio.play(); 30 this.currIndex=index; 31 } 32 }, 33 preIndex:function(){ 34 var index=this.currIndex-1; 35 if(index<0){ 36 index=this.musicList.length-1; 37 } 38 return index; 39 }, 40 nextIndex:function(){ 41 var index=this.currIndex+1; 42 if(index>this.musicList.length-1){ 43 index=0; 44 } 45 return index; 46 }, 47 del:function(index){ 48 this.musicList.splice(index,1); 49 if(index<this.currIndex){ 50 this.currIndex=this.currIndex-1; 51 } 52 }, 53 musicTimeUpdate:function(callBack){ 54 //需要一个回调函数作为参数 55 var that=this; 56 //监听audio播放事件 57 this.$audio.on("timeupdate",function(){ 58 var duration=that.audio.duration; 59 var currentTime=that.audio.currentTime; 60 var timeStr=that.formatTime(currentTime,duration); 61 //参数是一个回调函数 62 callBack(duration,currentTime,timeStr); 63 }); 64 }, 65 //定义一个格式化时间的方法 66 formatTime:function (currentTime,duration){ 67 //总时长 68 var endMin=parseInt(duration/60); 69 var endSec=parseInt(duration%60); 70 endMin=endMin<10?"0"+endMin:endMin; 71 endSec=endSec<10?"0"+endSec:endSec; 72 //当前时长 73 var curMin=parseInt(currentTime/60); 74 var curSec=parseInt(currentTime%60); 75 curMin=curMin<10?"0"+curMin:curMin; 76 curSec=curSec<10?"0"+curSec:curSec; 77 return curMin+":"+curSec+" / "+endMin+":"+endSec; 78 }, 79 musicSeekTo:function(value){ 80 var that=this; 81 var duration=that.audio.duration; 82 if(isNaN(duration))return; 83 if(isNaN(value))return; 84 that.audio.currentTime=duration*value ; 85 }, 86 musicVoiceSeekTo:function(value){ 87 if(isNaN(value))return; 88 if(value<=0 || value>=1) return; 89 this.audio.volume=value; 90 } 91 }; 92 Player.prototype.init.prototype=Player.prototype; 93 window.Player=Player; 94 })(window);