标签：QQ JQuery function list height width 简易版 music background
自制系列二它来了。
如果在制作过程中有如何问题你都可以私信我，我会答复你的。
今天中秋节，首先祝大家中秋节快乐！
因为没什么礼物送给大家，所以在这里给大家安利一份简易版QQ音乐的制作，过程很简单，每个人都能学会。
下面将是制作步骤了：
先建好目录如下：
source文件夹里存放如下：
下面就是把代码复制到相应的目录中：
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）需要自己到网上去下载，如果找不到可以私信我，我私发给你。
下面再来看看完成之后的效果图吧！
我随便截了几张图，下面我来说说可以实现的功能：
基本的播放暂停和上一首下一首毋庸置疑是没问题的，还可以实现调节音乐声音的大小、拖拉进度条等等。
而且你们可以看到，背景色是会随着歌曲的不同而改变的，是不是显得高端大气上档次呀！
最美中不足的是我按钮都没有用相应的图标代替，这怪我做的时候偷懒了，但是你们自己可以试试去改一下，也不难，就是在css找到相应的按钮背景换成图片就可以。
还有就是歌词同步问题，由于当时我找不到相应歌曲的歌词文档，所以我就省了这一步骤。你们如果有歌词文档的话，把歌词封装成一个数组，然后导入，添加一个js就可以了。
如果在制作过程中有如何问题你都可以私信我，我会答复你的。
最后，祝大家都可以成功制作出QQ音乐，这就是系列二的全部内容了，大家中秋节记得吃月饼和柚子哦！have a good time！
标签：QQ,JQuery,function,list,height,width,简易版,music,background 来源： https://blog.csdn.net/W211001/article/details/120399531
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。