?
自制系列二它来了。
如果在制作过程中有如何问题你都可以私信我，我会答复你的。
今天中秋节，首先祝大家中秋节快乐！
因为没什么礼物送给大家，所以在这里给大家安利一份简易版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！