自制系列二它來了，
如果在制作程序中有如何問題你都可以私信我，我會答復你的，
今天中秋節，首先祝大家中秋節快樂！
因為沒什么禮物送給大家，所以在這里給大家安利一份簡易版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！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/301983.html
標籤：其他