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

心得技巧

html5 HTML/Xhtml CSS XML/XSLT Dreamweaver教程 Frontpage教程心得技巧

上一篇: JavaScript基础知识（2021.9.2）下一篇:组件奇思妙想·父子v-model+父子...

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

发布时间：2022-07-05 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了每个人都能制作的简易版QQ音乐（HTML+CSS+JQuery），脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

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

自制系列二它来了。

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

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

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

下面将是制作步骤了F1a;

先建好目录如下：

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

source文件夹里存放如下：

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

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

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":"会呼吸的痛" } ]

以上就是我们需要完成的所有代码。

还有一些插件（两个js和一个css）需要自己到网上去下载，如果找不到可以私信我，我私发给你。

下面再来看看完成之后的效果图吧！

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