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

原创

极客江南

修改于 2021-09-04 09:14:06

7750

修改于 2021-09-04 09:14:06

文章被收录于专栏：代码情缘代码情缘

今天再带着大家利用 1 小时，码个定制版的音乐播放器出来，想想都刺激。

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

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

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

开发思路

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

开发技术

html
css
jq

实现思路

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;
    }
});

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