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从本地文件中获取,核心代码如下:
$(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开发音乐播放器的资料请关注我们其它相关文章!
赞 (0)