从零开发一个定制版音乐播放器，女朋友不就有了吗？_李南江

未知 02-07 3139

极客江南：一个对开发技术特别执着的程序员，对移动开发有着独到的见解和深入的研究，有着多年的iOS、Android、HTML5开发经验，对NativeApp、HybridApp、WebApp开发有着独到的见解和深入的研究, 除此之外还精通 JavaScript、AngularJS、 NodeJS 、Ajax、jQuery、Cordova、React Native等多种Web前端技术及Java、PHP等服务端技术。

上一篇文章，利用 3 分钟做了一个冰冰版 3D 音乐播放器，今天再带着大家利用 1 小时，码个定制版的音乐播放器出来，想想都刺激。

学会这玩意，距离大伙找到女朋友又进了一步。

配套代码与素材下载链接：

废话不多说，老规矩，先上一张效果图：

开发思路

开发一个定制版的音乐播放器，首先你需要知道音乐播放器的逻辑，实现原理。

开发技术

htmlcssjq

实现思路

1.整理收集素材

2.利用 html + css 布局 QQ 音乐播放器界面

3.导入 jq 库与第三方插件

4.实现音乐播放器，播放，歌词同步、背景变换的逻辑

素材

素材主要包括，图片与音乐素材。

歌曲、背景图，背景颜色均可自定义，大家可以根据自己喜欢的歌曲来收集素材

核心逻辑

自定义滚动条加载歌曲列表初始化歌曲信息初始化歌词信息初始化进度条初始化事件监听监听播放的进度监听声音按钮的点击实现不同首音乐的播放与删除

HTML 代码

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>QQ音乐播放器 - 极客江南</title> <link rel="stylesheet" href="css/jquery.mCustomScrollbar.css"> <link rel="stylesheet" href="css/index.css"> <script src="js/jquery-1.12.4.js"></script> <script src="js/jquery.mCustomScrollbar.concat.min.js"></script> <script src="js/player.js"></script> <script src="js/progress.js"></script> <script src="js/lyric.js"></script> <script src="js/index.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="https://mp.weixin.qq.com/s/sb9n8dFe96XR6pRxEpZx0Q" class="song_info_pic"> <img src="images/4.png" alt=""> </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> <div class="song_lyric_container"> <ul class="song_lyric"> </ul> </div> </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 / 05:23</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>

CSS代码

*{ margin: 0; padding: 0; } html,body{ width: 100%; height: 100%; font-size: 14px; } .header{ width: 100%; height: 45px; } .header .logo{ float: left; margin-left: 20px; opacity: 0.5; } .header .logo:hover{ opacity: 1; } .header .logo a{ display: inline-block; width: 78px; height: 21px; background: url("../images/player_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: 460px; } .content .content_in{ width: 1200px; height: 100%; margin: 0 auto; } .content_in .content_left{ float: left; width: 800px; height: 100%; } .content_left .content_toolbar{ width: 100%; height: 40px; } .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:hover{ opacity: 1; } .content_toolbar span i{ display: inline-block; width: 18px; height: 18px; background: url("../images/icon_sprite.png") no-repeat 0 0; margin-right: 10px; vertical-align: -5px; } .content_toolbar span:nth-child(1) i{ background-position: -60px -20px; } .content_toolbar span:nth-child(2) i{ background-position: -20px -20px; } .content_toolbar span:nth-child(3) i{ background-position: -40px -240px; } .content_toolbar span:nth-child(4) i{ background-position: -100px -20px; } .content_toolbar span:nth-child(5) i{ background-position: -40px -300px; } .content_left .content_list{ width: 100%; height: 420px; overflow: auto; } .content_list li{ list-style: none; width: 100%; height: 50px; 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%; 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: url("../images/icon_sprite.png") no-repeat -60px -80px; opacity: 1; } .content_list .list_number{ width: 20px; height: 100%; } .content_list .list_number2{ color: transparent !important; background: url("../images/wave.gif") no-repeat 0 center; } .content_list .list_name{ width: 50%; height: 100%; } .list_name .list_menu{ margin-top: 5px; float: right; margin-right: 20px; display: none; } .list_menu a{ display: inline-block; width: 36px; height: 36px; background: url("../images/icon_list_menu.png") no-repeat 0 0; opacity: 0.5; } .list_menu a:hover{ opacity: 1; } .list_menu a:nth-child(1){ background-position: -120px 0; } .list_menu a:nth-child(2){ background-position: -120px -80px; } .list_menu a:nth-child(3){ background-position: -120px -120px; } .list_menu a:nth-child(4){ background-position: -120px -40px; } .list_menu .list_menu_play2{ background-position: -80px -200px !important; } .content_list .list_singer{ width: 20%; height: 100%; } .content_list .list_time a{ display: inline-block; width: 36px; height: 36px; background: url("../images/icon_list_menu.png") 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; } .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: url("../images/album_cover_player.png") no-repeat 0 0; width: 201px; height: 180px; text-align: left; } .song_info_pic img{ width: 200px; 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_container{ margin-top: 30px; height: 150px; overflow: hidden; } .content_right .song_lyric{ text-align: center; } .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: 80px; position: absolute; left: 0; bottom: 0; } .footer .footer_in{ width: 1200px; height: 100%; margin: 0 auto; user-select: none; } .footer_in a{ display: inline-block; text-decoration: none; color: #fff; background: url("../images/player.png") no-repeat 0 0; margin-right: 20px; } .footer_in .music_pre{ width: 19px; height: 20px; background-position: 0 -30px; } .footer_in .music_play{ width: 21px; height: 29px; background-position: 0 0; vertical-align: -5px; } .footer_in .music_play2{ 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; position: relative; top: 10px; } .music_progress_info .music_progress_top{ width: 100%; height: 30px; line-height: 30px; 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: 0px; height: 100%; background: #fff; } .music_progress_line .music_progress_dot{ width: 14px; height: 14px; border-radius: 50%; background: #fff; position: absolute; top: -5px; left: 0px; } .footer_in .music_mode{ width: 26px; height: 25px; background-position: 0 -205px; } .footer_in .music_mode2{ width: 23px; height: 20px; background-position: 0 -260px; } .footer_in .music_mode3{ width: 25px; height: 19px; background-position: 0 -74px; } .footer_in .music_mode4{ width: 26px; height: 25px; background-position: 0 -232px } .footer_in .music_fav{ width: 24px; height: 21px; background-position: 0 -96px; } .footer_in .music_fav2{ background-position: -30px -96px; } .footer_in .music_down{ width: 22px; height: 21px; background-position: 0 -120px; } .footer_in .music_comment{ width: 24px; height: 24px; background-position: 0 -400px; } .footer_in .music_only{ width: 74px; height: 27px; background-position: 0 -281px; } .footer_in .music_only2{ background-position: 0 -310px; } .footer_in .music_voice_info{ display: inline-block; width: 100px; height: 40px;' line-height: 40px; position: relative; top: 10px; } .music_voice_info .music_voice_icon{ width: 26px; height: 21px; background-position: 0 -144px; position: absolute; left: 0; top: 10px; } .music_voice_info .music_voice_icon2{ background-position: 0 -182px; } .music_voice_info .music_voice_bar{ width: 70px; height: 4px; background: rgba(255,255,255,0.5); position: absolute; right: 0; top: 18px; } .music_voice_bar .music_voice_line{ width: 70px; height: 100%; background: #fff; } .music_voice_line .music_voice_dot{ width: 14px; height: 14px; border-radius: 50%; background: #fff; position: relative; top: -5px; left: 70px; } .mask_bg{ position: absolute; left: 0; top: 0; z-index: -2; width: 100%; height: 100%; background: url("../images/lnj.jpg") 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; }

JS核心代码

$(function () { // 0.自定义滚动条 $(".content_list").mCustomScrollbar(); var $audio = $("audio"); var player = new Player($audio); var progress; var voiceProgress; var lyric; // 1.加载歌曲列表 getPlayerList(); function getPlayerList() { $.ajax({ url: "./source/musiclist.json", dataType: "json", success: function (data) { player.musicList = data; // 3.1遍历获取到的数据, 创建每一条音乐 var $musicList = $(".content_list ul"); $.each(data, function (index, ele) { var $item = crateMusicItem(index, ele); $musicList.append($item); }); initMusicInfo(data[0]); initMusicLyric(data[0]); }, error: function (e) { console.log(e); } }); } // 2.初始化歌曲信息 function initMusicInfo(music){ // 获取对应的元素 var $musicImage = $(".song_info_pic images"); 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+"')"); } // 3.初始化歌词信息 function initMusicLyric(music){ lyric = new Lyric(music.link_lrc); var $lryicContainer = $(".song_lyric"); // 清空上一首音乐的歌词 $lryicContainer.html(""); lyric.loadLyric(function () { // 创建歌词列表 $.each(lyric.lyrics, function (index, ele) { var $item = $("<li>"+ele+"</li>"); $lryicContainer.append($item); }); }); } // 4.初始化进度条 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); }); } // 5.初始化事件监听 initEvents(); function initEvents() { // 1.监听歌曲的移入移出事件 $(".content_list").delegate(".list_music", "mouseenter", function () { // 显示子菜单 $(this).find(".list_menu").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_menu").stop().fadeOut(100); $(this).find(".list_time a").stop().fadeOut(100); // 显示时长 $(this).find(".list_time span").stop().fadeIn(100); }); // 2.监听复选框的点击事件 $(".content_list").delegate(".list_check", "click", function () { $(this).toggleClass("list_checked"); }); // 3.添加子菜单播放按钮的监听 var $musicPlay = $(".music_play"); $(".content_list").delegate(".list_menu_play", "click", function () { var $item = $(this).parents(".list_music"); // console.log($item.get(0).index); // console.log($item.get(0).music); // 3.1切换播放图标 $(this).toggleClass("list_menu_play2"); // 3.2复原其它的播放图标 $item.siblings().find(".list_menu_play").removeClass("list_menu_play2"); // 3.3同步底部播放按钮 if($(this).hasClass("list_menu_play2")){ // 当前子菜单的播放按钮是播放状态 $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)"); } // 3.4切换序号的状态 $item.find(".list_number").toggleClass("list_number2"); $item.siblings().find(".list_number").removeClass("list_number2"); // 3.5播放音乐 player.playMusic($item.get(0).index, $item.get(0).music); // 3.5切换歌曲信息 initMusicInfo($item.get(0).music); // 3.6切换歌词信息 initMusicLyric($item.get(0).music); }); // 4.监听底部控制区域播放按钮的点击 $musicPlay.click(function () { // 判断有没有播放过音乐 if(player.currentIndex == -1){ // 没有播放过音乐 $(".list_music").eq(0).find(".list_menu_play").trigger("click"); }else{ // 已经播放过音乐 $(".list_music").eq(player.currentIndex).find(".list_menu_play").trigger("click"); } }); // 5.监听底部控制区域上一首按钮的点击 $(".music_pre").click(function () { $(".list_music").eq(player.preIndex()).find(".list_menu_play").trigger("click"); }); // 6.监听底部控制区域下一首按钮的点击 $(".music_next").click(function () { $(".list_music").eq(player.nextIndex()).find(".list_menu_play").trigger("click"); }); // 7.监听删除按钮的点击 $(".content_list").delegate(".list_menu_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); }); }); // 8.监听播放的进度 player.musicTimeUpdate(function (currentTime, duration, timeStr) { // 同步时间 $(".music_progress_time").text(timeStr); // 同步进度条 // 计算播放比例 var value = currentTime / duration * 100; progress.setProgress(value); // 实现歌词同步 var index = lyric.currentIndex(currentTime); var $item = $(".song_lyric li").eq(index); $item.addClass("cur"); $item.siblings().removeClass("cur"); // 实现歌词滚动 if(index <= 2) return; $(".song_lyric").css({ marginTop: (-index + 2) * 30 }); }); // 9.监听声音按钮的点击 $(".music_voice_icon").click(function () { // 图标切换 $(this).toggleClass("music_voice_icon2"); // 声音切换 if($(this).hasClass("music_voice_icon2")){ // 变为没有声音 player.musicVoiceSeekTo(0); }else{ // 变为有声音 player.musicVoiceSeekTo(1); } }); } // 定义一个方法创建一条音乐 function crateMusicItem(index, music) { var $item = $("" + "<li class=\"list_music\">\n" + "<div class=\"list_check\"><i></i></div>\n" + "<div class=\"list_number\">"+(index + 1)+"</div>\n" + "<div class=\"list_name\">"+music.name+"" + " <div class=\"list_menu\">\n" + " <a href=\"javascript:;\" title=\"播放\" class='list_menu_play'></a>\n" + " <a href=\"javascript:;\" title=\"添加\"></a>\n" + " <a href=\"javascript:;\" title=\"下载\"></a>\n" + " <a href=\"javascript:;\" title=\"分享\"></a>\n" + " </div>\n" + "</div>\n" + "<div class=\"list_singer\">"+music.singer+"</div>\n" + "<div class=\"list_time\">\n" + " <span>"+music.time+"</span>\n" + " <a href=\"javascript:;\" title=\"删除\" class='list_menu_del'></a>\n" + "</div>\n" + "</li>"); $item.get(0).index = index; $item.get(0).music = music; return $item; } });

最后在上一张切换歌曲的效果图：

基本制作过程不是很难，核心是理解其中的业务逻辑。

大家记得收藏前，先点个赞哦！好的文章值得被更多人看到。