1. 技术文章
  2. jQuery实现高仿QQ音乐

jQuery实现高仿QQ音乐

由 血红的双手。 提交于 2020-02-06 03:33:29

几个实现的效果看视频吧：

动图很是不清楚
在这里插入图片描述
代码：
html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>music</title>
    <link href="../jquery.mCustomScrollbar.css" rel="stylesheet">
    <link href="../../../img/sup.ico" rel="icon">
    <link href="../css/style.css" rel="stylesheet">
    <script src="../../../jquery-3.4.1.min.js"></script>
    <script src="../jquery.mCustomScrollbar.concat.min.js"></script>
    <script src="../js/player.js"></script>
    <script src="../js/index.js"></script>
</head>
<body>
<div class="container">
    <div class="head">
        <ul class="nav">
            <li class="logo"></li>
            <li class="set">设置</li>
            <li class="up">登录</li>
        </ul>
    </div>

    <div class="banner">
        <div class="left">
            <div class="func">
                <span class="love"><i></i>收藏</span>
                <span class="appendTo"><i></i>添加到</span>
                <span class="download"><i></i>下载到</span>
                <span class="remove"><i></i>删除</span>
                <span class="clear_list"><i></i>清空列表</span>
            </div>

            <ul class="list" data-mcs-theme="minimal-dark">
                <li class="list_head">
                    <span class="list_select"></span>
                    <span class="list_index"></span>
                    <span class="list_music">歌曲</span>
                    <span class="list_name">歌手</span>
                    <span class="list_time">时长</span>
                </li>
            </ul>
        </div>
        <div class="right">
            <span class="picture_right"><div class="picture"></div></span>

            <a class="music_name_a" href="#"><span>歌曲名:</span><span>As long AS Love Me</span></a>
            <a class="music_name_b" href="#"><span>歌手名:</span><span>Justin Bieber</span></a>
            <a class="music_name_c" href="#"><span>专辑名:</span><span>NOW That's What I Call Music! 44）</span></a>
            <div class="box">
                <ul class="music_word">
                </ul>
            </div>
        </div>
    </div>

    <div class="footer">
        <div class="play_music">
            <span class="up_music"></span>
            <span class="stop_music"></span>
            <span class="down_music"></span>
        </div>

        <div class="music_news">
            <span class="music_name">As long AS Love Me-</span>
            <span class="music_music">Justin Bieber</span>
            <span class="music_time_total">03:49</span>
            <span class="music_time_current">00:00/</span>
        </div>

        <div class="scrollbar">
            <div class="scrollbar_current"></div>
            <div class="scroll_radius"></div>
        </div>

        <ul class="more_select">
            <li class="model_select model_select_bg"></li>
            <li class="model_love"></li>
            <li class="model_download"></li>
            <li class="model_talk"></li>
            <li class="model_clear model_clear_bg"></li>
        </ul>

        <div class="volume">
            <span class="volume_icon"></span>
            <div class="volume_bg"></div>
            <div class="volume_radius"></div>
        </div>
    </div>
    <div class="mask"></div>
    <div class="mask_mask"></div>
</div>
<audio></audio>
</body>
</html>

css

* {
    margin: 0;
    padding: 0;
    user-select: none;/*文字不可选中*/
}

html, body {
    width: 100%;
    height: 100%;
    font-family: "微软雅黑 Light";
}

.container {
    width: 1536px;
    margin: 0 auto;
}

.head {
    width: 100%;
    height: 60px;
}

.head .nav{
    list-style: none;
    display: inline-block;
    width: 100%;
}

.head .nav li{
    color: rgba(255,255,255,0.5);
}

.logo{
    display: inline-block;
    width: 150px;
    height: 60px;
    background: url("../image/player_logo.png") no-repeat;
    background-size: 100% 70%;
    margin-left: 20px;
    margin-top: 10px;
    cursor: pointer;
}

.set{
    display: inline-block;
    width: 50px;
    height: 20px;
    float: right;
    margin-top: 20px;
    margin-right: 20px;
    cursor: pointer;
}

.set:hover{
    color: rgba(255,255,255,1) !important;
}

.up{
    display: inline-block;
    width: 50px;
    height: 20px;
    float: right;
    margin-top: 20px;
    cursor: pointer;
}

.up:hover{
    color: rgba(255,255,255,1) !important;
}

.banner {
    width: 100%;
    height: 600px;
}

.banner .left {
    width: 886px;
    height: 600px;
    float: left;
    margin-left: 100px;
}

.func span{
    margin-top: 10px;
    cursor: pointer;
}

.love{
    display: inline-block;
    width: 100px;
    height: 40px;
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 5px;
    line-height: 40px;
    text-align: right;
    color: rgba(255,255,255,1);
    opacity: 0.5;
    margin-left: 50px;
    position: relative;
    padding-right: 40px;
}

.love i{
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url("../image/icon_sprite.png") no-repeat -60px 0;
    position: absolute;
    top: 12px;
    left: 40px;
}

.appendTo{
    display: inline-block;
    width: 110px;
    height: 40px;
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 5px;
    line-height: 40px;
    text-align: right;
    color: rgba(255,255,255,1);
    opacity: 0.5;
    position: relative;
    padding-right: 30px;
}

.appendTo i{
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url("../image/icon_sprite.png") no-repeat -20px 0;
    position: absolute;
    top: 12px;
    left: 35px;
}

.download{
    display: inline-block;
    width: 110px;
    height: 40px;
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 5px;
    line-height: 40px;
    text-align: right;
    color: rgba(255,255,255,1);
    opacity: 0.5;
    position: relative;
    padding-right: 30px;
}

.download  i{
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url("../image/icon_sprite.png") no-repeat -40px -219px;
    position: absolute;
    top: 12px;
    left: 40px;
}

.remove{
    display: inline-block;
    width: 100px;
    height: 40px;
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 5px;
    line-height: 40px;
    text-align: right;
    color: rgba(255,255,255,1);
    opacity: 0.5;
    position: relative;
    padding-right: 40px;
}

.remove  i{
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url("../image/icon_sprite.png") no-repeat -100px 0;
    position: absolute;
    top: 12px;
    left: 45px;
}

.clear_list{
    display: inline-block;
    width: 120px;
    height: 40px;
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 5px;
    line-height: 40px;
    text-align: right;
    color: rgba(255,255,255,1);
    opacity: 0.5;
    position: relative;
    padding-right: 20px;
}

.clear_list  i{
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url("../image/icon_sprite.png") no-repeat -40px -300px;
    position: absolute;
    top: 12px;
    left: 30px;
}

.func_hover{
    border: 1px solid rgba(255,255,255,1);
    opacity: 1 ;
}
.func_i_hover{
    filter:brightness(200%) !important;
}

.banner .left .list{
    width: 730px;
    height: 525px;
    list-style: none;
    margin-left: 50px;
    overflow: auto;
    text-align: center;
    line-height: 50px;
    margin-top: 20px;

}
.banner .left .list li{
    position: relative;
    height: 50px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    cursor: unset;
    user-select: none;/*文字无法选择*/
    color: rgba(254, 254, 254, 0.5);
}

.list_head{
    display: block;
    width: 100%;
    height: 50px;
}
.list_select{
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 1px solid #b6b6b6;
    border-radius: 4px;
    position: absolute;
    top: 18px;
    left: 20px;
    opacity: 0.5;
}
.list_select_check{
    border: 1px solid #ffffff;
    opacity: 1;
}
.list_select_icon{
    background: url("../image/icon_sprite.png") -20px -200px !important;
    opacity: 1!important;
}

.list_index{
    display: inline-block;
    position: absolute;
    left: 60px;
}

.list_index_animate{
    background: url("../image/wave.gif") no-repeat 0 center;
    color: transparent;/*文字透明看不见*/
    width: 10px;
}

.list_music{
    display: inline-block;
    width: 400px;
    position: absolute;
    left: 100px;
    text-align: left;
}

.list_name{
    display: inline-block;
    position: absolute;
    left: 500px;
}

.list_time{
    display: inline-block;
    position: absolute;
    left: 650px;
}

.list_rem{
    display: inline-block;
    position: absolute;
    left: 650px;
    width: 40px;
    height: 40px;
    top: 10px;
    background: url("../image/icon_list_menu.png") 0 -160px;
}

.music_list_f4{
    list-style: none;
    position: absolute;
    height: 40px;
    top: 10px;
    left: 200px;
    display: none;
}

.music_list_f4 li{
    display: inline-block;
    width: 40px !important;
    height: 40px !important;
    border-bottom: none !important;
}

.music_list_player{
    background: url("../image/icon_list_menu.png") -80px 0;
}
.music_list_player_bg{
    background: url("../image/icon_list_menu.png") -80px -200px!important;
}
.music_list_player_bg:hover{
    background: url("../image/icon_list_menu.png") -120px -200px!important;
}
.music_list_player:hover{
    background: url("../image/icon_list_menu.png") -120px 0;
}
.music_list_add{
    background: url("../image/icon_list_menu.png") -80px -80px;
}
.music_list_add:hover{
    background: url("../image/icon_list_menu.png") -120px -80px;
}
.music_list_download{
    background: url("../image/icon_list_menu.png") -80px -120px;
}
.music_list_download:hover{
    background: url("../image/icon_list_menu.png") -120px -120px;

}
.music_list_share{
    background: url("../image/icon_list_menu.png") -80px -40px;
}
.music_list_share:hover{
    background: url("../image/icon_list_menu.png") -120px -40px;
}
.list_rem:hover{
    background: url("../image/icon_list_menu.png") -120px -160px;
}

.banner .right {
    width: 550px;
    height: 600px;
    float: right;
    position: relative;
}

.picture{
    width: 250px;
    height: 250px;
    background: url("../file/source/AslongASLoveMe.jpg") no-repeat;
    background-size: 100% 100%;
}
.picture_right{
    display: inline-block;
    position: absolute;
    width: 280px;
    height: 250px;
    background: url("../image/album_cover_player.png") no-repeat;
    background-size: 100% 100%;
    top: 30px;
    right: 145px;
}

.music_name_a{
    text-decoration: none;
    display: block;
    text-align: center;
    margin-top: 300px;
    color: rgba(255,255,255,0.7);
    user-select: none;
}

.music_name_b{
    text-decoration: none;
    display: block;
    text-align: center;
    margin-top: 10px;
    color: rgba(255,255,255,0.7);
}

.music_name_c{
    text-decoration: none;
    display: block;
    text-align: center;
    margin-top: 10px;
    color: rgba(255,255,255,0.7);
}

.box{
    width: 300px;
    height: 200px;
    margin: 40px auto;
    cursor: grabbing;
    overflow: hidden;
}

.music_word{
    list-style: none;
    text-align: center;
    color: rgba(255,255,255,0.7);
}

.music_word li{
    font-weight: bold;
padding: 10px;
}

.footer {
    width: 100%;
    height: 100px;
    position: relative;
}

.play_music{
    width: 150px;
    height: 100px;
    display: inline-block;
    position: absolute;
    left: 100px;
}

.up_music{
    display: inline-block;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 40px;
    background: url("../image/player.png") no-repeat 0 -28px;
    opacity: 0.6;
}
.up_music:hover{
   opacity: 1 ;
}
.stop_music{
    display: inline-block;
    width: 30px;
    height: 30px;
    background: url("../image/player.png");
    position: absolute;
    top: 35px;
    left: 60px;
    opacity: 0.6;
}
.toggleStop{
    background: url("../image/player.png") -30px 0!important;
}
.stop_music:hover{
    opacity: 1 ;
}
.high{
    color:rgba(255,255,255,1)!important;
}
.down_music{
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url("../image/player.png") 0 -50px;
    position: absolute;
    top: 40px;
    left: 120px;
    opacity: 0.6;
}
.down_music:hover{
    opacity: 1 ;
}
.music_news{
    width: 600px;
    height: 20px;
    position: absolute;
    top: 20px;
    left: 320px;
    color: rgba(255,255,255,0.5);
}

.music_name{
    text-align: center;
}
.music_name:hover{
    color: rgba(255,255,255,1);
}
.music_music:hover{
    color: rgba(255,255,255,1);
}

.music_time_current{
    display: inline-block;
    width: 50px;
    height: 20px;
    float: right;
}
.music_time_current:hover{
    color: rgba(255,255,255,1);
}
.music_time_total{
    display: inline-block;
    width: 50px;
    height: 20px;
    float: right;
}
.music_time_total:hover{
    color: rgba(255,255,255,1);
}
.scrollbar{
    display: inline-block;
    width: 600px;
    height: 3px;
    background-color: #989b9c;
    position: relative;
    top: 55px;
    left: 320px;
    cursor: pointer;
}

.scrollbar_current{
    opacity: 0.6;
    width: 0px;
    height: 3px;
    background-color: #f3f8f9;
    position: absolute;
    display: inline-block;
}

.scroll_radius{
    opacity: 0.7;
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #ffffff;
    position: absolute;
    top: -6px;
    left: 0px;
    cursor: pointer;
}
.scrollbar_hover{
    opacity: 1!important;
}
.more_select{
    list-style: none;
    display: inline-block;
    width: 350px;
    height: 50px;
    position: absolute;
    top: 30px;
    right: 240px;
}

.model_select{
    width: 30px;
    height: 25px;
    position: absolute;
    top: 20px;
    left: 20px;
    /*background: url("../image/player.png") 0 -205px;*/
    opacity: 0.6;
}
.model_select_bg{
    background: url("../image/player.png") 0 -205px;
}
.model_select_bg1{
    background: url("../image/player.png") 0 -232px !important;
}
.model_select_bg2{
    height: 21px;
    background: url("../image/player.png") 0 -260px!important;
}
.model_select:hover{
    opacity: 1;
}
.model_love{
    opacity: 0.6;
    width: 30px;
    height: 25px;
    position: absolute;
    top: 20px;
    left: 80px;
    background: url("../image/player.png") 0 -95px;
}
.model_love_bg{
    background: url("../image/player.png") -30px -95px;
}
.model_love:hover{
    opacity: 1;
}
.model_download{
    width: 30px;
    height: 25px;
    position: absolute;
    top: 20px;
    opacity: 0.6;
    left: 140px;
    background: url("../image/player.png") 0 -118px;
}
.model_download:hover{
    opacity: 1;
}
.model_talk{
    width: 30px;
    height: 25px;
    position: absolute;
    top: 20px;
    left: 200px;
    background: url("../image/player.png") 0 -398px;
    opacity: 0.6;
}
.model_talk:hover{
    opacity: 1;
}
.model_clear{
    width: 80px;
    height: 30px;
    position: absolute;
    top: 20px;
    left: 260px;
    opacity: 0.6;
    cursor: pointer;
}
.model_clear_bg{
    background: url("../image/player.png") 0 -280px;
}
.model_clear_bg1{
    background: url("../image/player.png") 0 -310px !important;
}
.model_clear:hover{
    opacity: 1!important;
}
.volume{
    display: inline-block;
    position: absolute;
    width: 180px;
    height: 50px;
    right: 50px;
    top: 30px;
    opacity: 0.6;
}

.volume:hover{
    opacity: 1;
}
.volume_icon{
    display: inline-block;
    position: absolute;
    /*background: url("../image/player.png") 0 -180px;*/
    background: url("../image/player.png") 0 -145px;
    top: 25px;
    width: 40px;
    height: 20px;
}
.volume_icon:hover{
    opacity: 1;
}

.volume_bg{
    width: 80px;
    height: 2px;
    background-color: #d7ddde;
    position: absolute;
    top: 32px;
    left: 30px;
    cursor:pointer !important;
}

.volume_radius{
    display: inline-block;
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #FFFFFF;
    top: 26px;
    left: 100px;
    cursor: pointer;
}
.mask_mask {
    width: 1536px;
    height: 800px;
    z-index: -1;
    position: absolute;
    top: 0;
    background-color: rgba(0,0,0,0.5);
}
.mask{
    width: 1536px;
    height: 600px;
    background: url("../file/source/AslongASLoveMe.jpg") no-repeat 50% center;
    background-size: 100% 100%;
    z-index: -2;
    position: absolute;
    top: 0;
    filter: blur(60px);
}
.opacity_one{
    opacity: 1!important;
}
.volume_off{
    background: url("../image/player.png") 0 -183px;
}
.changeGreen{
    color: #5ab800;!important;
}

js

$(function () {
    //自定义滚动条
    $('.list').mCustomScrollbar();

    let $audio = $('audio');
    let player = new Player($audio);

    let off = false;
//一，加载音乐列表
    getPlayerList();

    function getPlayerList() {
        //歌曲列表加载
        $.ajax({
            url: '../file/source/musiclist.json',
            datatype: "json",
            success: function (data) {
                player.musicList = data;

                //遍历获取到的数据，创建每一首歌
                $.each(data, function (index, music) {
                    let $list_music = `<li class="music_list_item">
                    <span class="list_select"></span>
                    <span class="list_index">${index + 1}</span>
                    <span class="list_music">${music.name}
                    <ul class="music_list_f4">
                        <li class="music_list_player"></li>
                        <li class="music_list_add"></li>
                        <li class="music_list_download"></li>
                        <li class="music_list_share"></li>
                    </ul>
                    </span>
                    <span class="list_name">${music.singer}</span>
                    <span class="list_time">${music.time}</span>
                </li>`;
                    $('.list_head').parent().append($list_music);

                    $('.music_list_item').get(index).index = index;
                    $('.music_list_item').get(index).music = music;
                    $('.music_list_item').get(index).lrc = music.link_lrc;

                })
            }
        });
    }


//二，初始化事件监听
    initEvent();

    function initEvent() {
        //banner func span 鼠标移入移出事件
        $('.func span').hover(function () {
            $(this).toggleClass('func_hover');
            $(this).children().toggleClass('func_i_hover');//通过调高背景图片的亮度；来实现高亮的效果，省去了换背景图片的步骤
        },);
        //选择框事件
        $('body').delegate('.list_select', 'mousedown', function () {
            // $('.list_select').each(function (index,element) {
            //     $('.list_select')[index+1].onclick = function () {
            //         $('.list_select')[index+1].style.background = 'url("../image/icon_sprite.png") -20px -200px'
            //     }
            // });
        });
        $('body').delegate('.list_select', 'mouseenter', function () {
            $('.list_select').each(function (index, element) {
                $('.list_select')[index].onmouseenter = function () {
                    $('.list_select')[index].style.border = '1px solid #ffffff';
                    $('.list_select')[index].style.opacity = '1';
                }
            });
        });
        $('body').delegate('.list_select', 'mouseleave', function () {
            $('.list_select').each(function (index, element) {
                $('.list_select')[index].onmouseleave = function () {
                    $('.list_select')[index].style.border = '1px solid #b6b6b6';
                    $('.list_select')[index].style.opacity = '0.5';
                }
            });
        });
        //鼠标触碰歌曲事件(事件委托)
        $('body').delegate('.music_list_item', 'mouseenter', function () {
            $(this).css('color', "rgba(254, 254, 254, 1)")
                .children('.list_time').css('color', 'transparent').parent().append($('<span class="list_rem"></span>'));
            $(this).find('.music_list_f4').fadeIn(100).css('display', 'inline-block');
        });
        $('body').delegate('.music_list_item', 'mouseleave', function () {
            $(this).css('color', "rgba(254, 254, 254, 0.5)")
                .children('.list_rem').hide();
            $('.list_time').css('color', 'rgba(255,255,255,0.6)');
            $(this).find('.music_list_f4').css('display', 'none');
        });
        //进度条触碰事件
        $('.scrollbar_current').hover(function () {
            $('.scrollbar_current').toggleClass('scrollbar_hover');
            $('.scroll_radius').toggleClass('scrollbar_hover');
        });
        $('.scroll_radius').hover(function () {
            $('.scroll_radius').toggleClass('scrollbar_hover');
            $('.scrollbar_current').toggleClass('scrollbar_hover');
        });
        //循环按钮点击切换
        $('.model_select').on('click', function () {
            let bg1 = $(this).is('.model_select_bg1');
            let bg2 = $(this).is('.model_select_bg2');
            let bg = $(this).is('.model_select_bg');
            if (bg) {
                $(this).addClass('model_select_bg1');
            }
            if (bg && bg1) {
                $(this).addClass('model_select_bg2');
            }
            if (bg && bg1 && bg2) {
                $(this).removeClass('model_select_bg1');
                $(this).removeClass('model_select_bg2');
            }
        });
        //喜欢按钮点击变红标
        $('.model_love').on('click', function () {
            $(this).toggleClass('model_love_bg');
        });
        //纯净按钮点击切换
        $('.model_clear').on('click', function () {
            $(this).toggleClass('model_clear_bg1');
            $(this).toggleClass('model_clear_bg');
        });
        //右下角声音图标点击声音关闭/打开，图标切换
        $('.volume_icon').on('click', function () {
            $(this).toggleClass('volume_off');
            if ($(this).is('.volume_off')) {
                $audio.get(0).volume = 0;
            } else {
                $audio.get(0).volume = 1;
            }
        });
        //右下角声音按钮可拖拽 + 声音大小控制
        $('.volume_radius').on('mousedown', function (e) {
            let disX = e.offsetX;
            $(document).on('mousemove', function (e) {
                let $volume_offsetLeft = $('.volume').offset().left;
                let $left = e.pageX - $volume_offsetLeft - disX;
                if ($left < 30) {
                    $left = 30
                }
                if ($left > 100) {
                    $left = 100
                }
                $('.volume_radius')[0].style.left = $left + 'px';
                $('.volume_bg')[0].style.width = $left - 30 + 'px';
                //声音大小跟着走
                let proportion = parseInt($('.volume_radius').css('left')) - 30;
                $audio.get(0).volume = (proportion / 70);
                if (proportion / 70 <= 0) {
                    $('.volume_icon').toggleClass('volume_off');
                } else if (proportion / 70 > 0) {
                    $('.volume_icon').removeClass('volume_off');
                }
            });
            $(document).on('mouseup', function (e) {
                $(document).off('mousemove');
            });
        });
        //右下角声音点击 + 点哪声音大小设置
        $('.volume_bg').on('mousedown', function (e) {
            let $bg_width = e.pageX - $('.volume_bg').offset().left + 30 - parseInt($('.volume_radius').width()) / 2;
            $('.volume_radius').css({left: $bg_width});
            $('.volume_bg').css({width: $bg_width - 30});
            //声音大小控制
            $audio.get(0).volume = $(this).width() / 80;
        });
        //删除图标点击效果
        $('body').delegate('.list_rem', 'click', function () {
            let idx = $(this).parents('.music_list_item').get(0).index;
            //删除的如果是正在播放的歌曲，让它消失不见，并播放下一曲
            if (idx === currentIndex) {
                //主动触发下一曲事件
                $(".down_music").trigger('click');
            }
            //如果删除的是在正在播放的歌曲的前面，确保下一曲功能正常
            if (idx < currentIndex) {
                currentIndex -= 1
            }
            //删除
            $(this).parents('.music_list_item').remove();//前台删除
            player.musicList.splice(idx, 1);//后台数据删除，不光只删除li元素
            //序列号自动补位 ： 数据删除后，遍历剩余的数据给它们重新设置序号，并且找到li中的序号元素，设置innerHTMl为index +1
            $('.music_list_item').each(function (index, element) {
                element.index = index;
                $(element).find('.list_index').html(index + 1);
            });
        });
        //音乐列表中的播放按钮
        var currentIndex = -1;
        let arr_Time = [];
        let arr_lyrics = [];
        let index = -1;
        $('body').delegate('.music_list_player', 'click', function () {
            //播放音乐
            playMusic($(this).parents('.music_list_item').get(0).index, $(this).parents('.music_list_item').get(0).music);

            function playMusic(index, music) {
                //判断是否是同一首音乐
                if (currentIndex === index) {
                    //是一首
                    //如果没播放-播放
                    if ($audio.get(0).paused) {
                        $audio.get(0).play();
                    } else {
                        $audio.get(0).pause();
                    }
                } else {
                    //不是同一首
                    //获取当前点击歌曲的src设置给audio标签的src并播放它
                    $audio.prop('src', music.link_url);
                    $audio.get(0).play();
                    currentIndex = index;
                    //要判断下是否是同一首歌曲，不能点击一次就重置一次
                    arr_Time = [];
                    arr_lyrics = [];
                    index = -1;
                }
            }

            if ($(this).is('.music_list_player_bg')) {
                console.log("同一首！");
                $(this).toggleClass('music_list_player_bg');
                $(this).parents('li').removeClass('high');
                $(this).parents('li').find('.list_index').removeClass('list_index_animate');
                $('.stop_music').removeClass('toggleStop');
                return true;
            } else {
                //点击的不是同一个按钮，让歌词ul回到最初位置
                $('.music_word').css({marginTop: '0'});
                //要判断下是否是同一首歌曲，不能点击一次就重置一次
                //歌词同步
                $.ajax({
                    type: 'GET',
                    url: $(this).parents('.music_list_item').get(0).lrc,
                    dataType: 'text',
                    success: function (data) {
                        arr_Time = [];
                        arr_lyrics = [];
                        index = -1;

                        let a = data.split("\n");
                        let Reg = /\[(\d+:\d+.\d+)]/;
                        $.each(a, function (index, element) {
                            //处理歌词：有的为空，把那些在开头就排除掉，不进入下面的计算
                            let lyrics = element.split(']')[1];
                            if (lyrics.length === 1) return true;
                            arr_lyrics.push(lyrics);

                            let reg = Reg.exec(element);
                            // console.log(reg);
                            if (reg === null) return true;
                            let t = reg[1];
                            let i = t.split(":");
                            let m = parseInt(i[0] * 60);
                            let e = parseFloat(i[1]);
                            let time = Number(Number(m + e).toFixed(2));//保留两位小数，保留后变成字符串，用Number再转下格式变回数组类型，也可以用parseFloat
                            arr_Time.push(time);
                        });
                        //创建歌词列表
                        let $lyrics = $('.music_word');
                        $lyrics.children().remove();
                        $.each(arr_lyrics, function (index, element) {
                            let perfect = `<li>${arr_lyrics[index]}</li>`;
                            $lyrics.append(perfect);
                        });
                    }
                });
            }

            //背景切换+footer音乐时长+歌手+专辑切换
            //获取对应元素对象
            let $NameRight = $('.music_name_a>span:eq(1)');
            let $SingerRight = $('.music_name_b>span:last');
            let $AlbumRight = $('.music_name_c>span:last');

            let $NameLeft = $('.music_name');
            let $SingerLeft = $('.music_music');
            let $TotalTime = $('.music_time_total');

            let $bgLeft = $('.picture');
            let $bgContainer = $('.mask');
            //给获取的对象赋值
            let music = $(this).parents('.music_list_item').get(0).music;
            $NameRight.html(music.name);
            $SingerRight.html(music.singer);
            $AlbumRight.html(music.album);
            $NameLeft.html(music.name + "-");
            $SingerLeft.html(music.singer);
            $TotalTime.html(music.time);
            $bgLeft.css({background: 'url("' + music.cover + '") no-repeat'});
            $bgContainer.css({
                background: 'url("' + music.cover + '") no-repeat 50% center',
                backgroundSize: '100% 100%'
            });
            //点击播放按钮变暂停按钮
            $(this).toggleClass('music_list_player_bg');
            //点击对应一行的文字高亮
            $(this).parents('li').addClass('high');
            //当前的序号变成声音动画
            $(this).parents('li').find('.list_index').toggleClass('list_index_animate');
            //当前点击的按钮有背景即为播放状态下 去除其他列表的播放按钮背景，高亮，动画
            if ($(this).is('.music_list_player_bg')) {
                $(this).parents('li').siblings().find('.music_list_player').removeClass('music_list_player_bg');
                $(this).parents('li').siblings().removeClass('high');
                $(this).parents('li').siblings().find('.list_index').removeClass('list_index_animate');
            }
            //音乐列表中有播放按钮存在，先下方播放按钮就添加背景实现同步
            if ($('.music_list_player').is('.music_list_player_bg')) {
                $('.stop_music').addClass('toggleStop');
            }
            //全部音乐列表中都没有开始图标后，去除当前高亮，下方播放按钮去除添加的背景，实现同步
            if (!$('.music_list_player').is('.music_list_player_bg')) {
                $(this).parents('li').removeClass('high');
                $('.stop_music').removeClass('toggleStop');
            }
        });
        //音乐进度条拖拽
        $('.scroll_radius').on('mousedown', function (e) {
            let disX = e.offsetX;
            $(document).on('mousemove', function (e) {
                let $scrollbar_offsetLeft = $('.scrollbar').offset().left;
                let left = e.pageX - $scrollbar_offsetLeft - disX;
                if (left < 0) {
                    left = 0;
                }
                if (left > $('.scrollbar').width() - $('.scroll_radius').width()) {
                    left = $('.scrollbar').width() - $('.scroll_radius').width()
                }
                $('.scroll_radius').css({left: left});
                $('.scrollbar_current').width(left);
                $('.scroll_radius').css({opacity: 1});
                $('.scrollbar_current').css({opacity: 1});
                //在移动时防止timeupdate事件触发使拖拽一闪一闪，将timeupdate事件取消，等鼠标抬起时在恢复
                off = true;//让进度条跟音乐进度走方法失效确保拖拽使没有其方法干扰
            });
            $(document).on('mouseup', function () {
                $(document).off('mousemove');
                $(document).off('mousedown');
                $('.scroll_radius').css({opacity: 0.7});
                $('.scrollbar_current').css({opacity: 0.6});
                //正常拖拽，等鼠标抬起时获取当前进度条的比例进而设置播放音乐得到时间，保证在拖拽过程中音乐正常播放，如果添加在mousemove中会影响效果
                let percentage = $('.scrollbar_current').width() / $('.scrollbar').width();//获取当前进度条的比例
                $audio.get(0).currentTime = $audio.get(0).duration * percentage;//根据进度条比例设置点击时播放音乐的时间
                off = false;//在变回去，使进度条跟音乐进度自动走恢复
            });
        });
        //音乐进度条点哪到哪 + 音乐进度跟着到哪
        $('.scrollbar').on('mousedown', function (e) {
            if (currentIndex === -1) {
                alert("没有选中音乐，无法设置进度！")
            } else {
                let left = e.pageX - $('.scrollbar').offset().left - parseInt($('.scroll_radius').css('width')) / 2;
                $('.scroll_radius').css({left: left});
                $('.scrollbar_current').css({width: left});
                //音乐进度点哪到哪
                let percentage = $('.scrollbar_current').width() / $('.scrollbar').width();//获取当前进度条的比例
                $audio.get(0).currentTime = $audio.get(0).duration * percentage;//根据进度条比例设置点击时播放音乐的时间
            }
        });
        //全选框选中事件
        $('.list_select:first').on('click', function () {
            //点击全选 or 全取消
            let determine = $('.list_select:first').is('.list_select_icon');

            $('.list_select:first').addClass('list_select_icon');
            $('.list_select:gt(0)').addClass('list_select_icon').attr('data', 'ready');

            $('.list_select:first').on('click', function () {
                $(this).removeClass('list_select_icon');
                $('.list_select:gt(0)').removeClass('list_select_icon').attr('data', 'not');
            });

            if (!determine) {
                $('.list_select:first').on('click', function () {
                    $(this).addClass('list_select_icon');
                    $('.list_select:gt(0)').addClass('list_select_icon').attr('data', 'ready');
                });
            }
        });
        //下方框有取消选中，全选框取消选中(未完成。。。)
        $('.list_select:gt(0)').on('click', function () {
            // let all = $('.list_select:gt(0)').length;
            // if ($('.list_select:gt(0)').is('.list_select_icon')) {
            //     $(this).attr('data', 'ready')
            // }
            // if ($('.list_select:gt(0)').not('.list_select_icon')) {
            //     $(this).attr('data', 'not')
            // }
            // let a = [];
            // $('.list_select:gt(0)').each(function (index, element) {
            //     let ready_length = $('.list_select:gt(0)')[index].getAttribute('data');
            //     a.push(ready_length);
            // });
            // let ok = JSON.stringify(a).match(/ready/g);
            // if (ok == null){
            //     ok = [];
            // }
            // let ok_length = ok.length;
            // if (ok_length !== all && ok_length !== 0){
            //     $('.list_select:first').removeClass('list_select_icon');
            // }
            // if (ok_length === all){
            //     $('.list_select:first').addClass('list_select_icon');
            // }
            // console.log(ok_length);
        });
        //下方播放按钮点击
        $('.stop_music').on('click', function () {
            //判断当前是否有toggleStop样式
            if ($(this).is('.toggleStop')) {
                //如果有——移除
                $(this).removeClass('toggleStop');
            } else {//如果没有——添加
                $(this).addClass('toggleStop');
            }
            //判断当前音乐列表中是否有正在播放的歌曲(两种方法)
            if ($audio.prop('src') !== "") {//如果有播放其他音乐
                //if (currentIndex !== -1){
                // 获取它的index找到对应元素主动触发它
                $('.music_list_player').eq(currentIndex).trigger('click');
            } else {//没有音乐--播放第一首 trigger:主动触发某事件
                $('.music_list_player:eq(0)').trigger('click')
            }

        });
        //上一曲，下一曲点击事件
        $(".up_music").on('click', function () {
            //限制currentIndex
            if (currentIndex < 0) {
                currentIndex = $('.music_list_player').length;
            }
            $('.music_list_player').eq(currentIndex - 1).trigger('click');
        });
        $('.down_music').on('click', function () {
            if (currentIndex === $('.music_list_player').length - 1) {
                currentIndex = -1
            }
            $('.music_list_player').eq(currentIndex + 1).trigger('click');
        });
        //歌曲播放时间 + 音乐播放时底部进度走动
        $audio.on('timeupdate', function () {
            let perfectTime = parseInt($(this).get(0).currentTime);
            //失败案例：适用于小于60的
            // if (perfectTime < 10){
            //     perfectTime = "00:0"+ perfectTime + "/"
            // }
            // if (perfectTime >= 10){
            //     perfectTime = "00:" + perfectTime + "/"
            // }
            // if (perfectTime >60){
            //     perfectTime = "0"+parseInt(perfectTime/60)+":"+perfectTime-60*parseInt(perfectTime/60) + "/"
            // }
            if (perfectTime < 10 || perfectTime - (60 * parseInt(perfectTime / 60)) < 10) {
                $('.music_time_current').html("0" + parseInt(perfectTime / 60) + ":" + "0" + perfectTime % 60 + "/");
            } else {
                $('.music_time_current').html("0" + parseInt(perfectTime / 60) + ":" + perfectTime % 60 + "/");
            }
            //进度条同步
            let val = $(this).get(0).duration;//当前音乐总时长
            let percentage = perfectTime / val * 100;//获取当前时长占全部时长的
            //设置进度条的长度
            scrollbar_off(percentage);
            //歌词同步
            if (perfectTime >= arr_Time[0]) {
                index++;
                arr_Time.shift();
            }
            $('.music_word>li').eq(index).addClass('changeGreen');
            $('.music_word>li').eq(index).siblings().removeClass('changeGreen');
            if (index < 1) return true;
            $('.music_word').css({marginTop: (-(index + 2) * 30)});
            console.log(percentage)
        });

        //进度条跟音乐比例走 单独提一个方法出来是为了拖拽时 进度条不跟着音乐走 防止产生拖拽闪烁问题
        function scrollbar_off(percentage) {
            if (off) return;
            $('.scrollbar_current').css({width: percentage + "%", opacity: 1});
            $('.scroll_radius').css({left: percentage + "%", opacity: 1});
        }

        //空格键触发播放按钮
        $(document).on('keydown', function (e) {
            if (e.keyCode === 32) {
                $('.stop_music').trigger('click');
            }
        });

    }
});

另一个js

//这个面对对象写的像是开玩笑，待日后改进吧
(function (window) {
    function Player($audio) {
        return new Player.prototype.init($audio);
    }
    Player.prototype = {
        constructor: Player,//把原型指向Player
        musicList: [],
        init:function ($audio) {
            this.$audio = $audio;
            this.audio = $audio.get(0);
        },
        // currentIndex:-1,
        // playMusic : function (index,music) {
        //     //判断是否是同一首音乐
        //     if (this.currentIndex === index){
        //         //是一首
        //         //如果没播放-播放
        //         if (this.audio.paused){
        //             this.audio.play();
        //         }else{
        //             this.audio.pause();
        //         }
        //     }else {
        //         //不是同一首
        //         //获取当前点击歌曲的src，播放它
        //         this.$audio.attr('src',music.link_url);
        //         this.audio.play();
        //         this.currentIndex = index
        //     }
        // }
    };
    window.Player = Player;
})(window);

json

[
  {
    "name":"As long AS Love Me",
    "singer": "Justin Bieber",
    "album": "NOW That's What I Call Music! 44",
    "time": "03:49",
    "link_url":"../file/source/AslongASLoveMe.mp3",
    "cover": "../file/source/AslongASLoveMe.jpg",
    "link_lrc": "../file/source/AslongASLoveMe.txt"
  },
  {
    "name":"Something Just Like This",
    "singer": "Chainsmokers",
    "album": "Something Just Like This",
    "time": "04:07",
    "link_url":"../file/source/SomethingJustLikeThis.mp3",
    "cover":"../file/source/SomethingJustLikeThis.jpg",
    "link_lrc":"../file/source/SomethingJustLikeThis.txt"
  },
  {
    "name":"Your Song",
    "singer": "Lady Gaga",
    "album": "Your Song",
    "time": "04:16",
    "link_url":"../file/source/YourSong.mp3",
    "cover":"../file/source/YourSong.jpg",
    "link_lrc":"../file/source/YourSong.txt"
  },
  {
    "name":"凉凉",
    "singer": "杨宗纬/张碧晨",
    "album": "凉凉",
    "time": "05:00",
    "link_url":"../file/source/凉凉.mp3",
    "cover":"../file/source/凉凉.jpg",
    "link_lrc":"../file/source/凉凉.txt"
  },
  {
    "name":"小城大事",
    "singer": "张学友",
    "album": "学友光年世界巡迴演唱会",
    "time": "03:54",
    "link_url":"../file/source/小城大事.mp3",
    "cover":"../file/source/小城大事.jpg",
    "link_lrc":"../file/source/小城大事.txt"
  },
  {
    "name":"广东爱情故事",
    "singer": "广东雨神",
    "album": "广东爱情故事",
    "time": "03:34",
    "link_url":"../file/source/广东爱情故事.mp3",
    "cover":"../file/source/广东爱情故事.jpg",
    "link_lrc":"../file/source/广东爱情故事.txt"
  },
  {
    "name":"我是一个程序员",
    "singer": "单小叶",
    "album": "程序猿",
    "time": "02:14",
    "link_url":"../file/source/我是一个程序员.mp3",
    "cover":"../file/source/我是一个程序员.jpg",
    "link_lrc":"../file/source/我是一个程序员.txt"
  },
  {
    "name":"演员",
    "singer": "薛之谦",
    "album": "绅士",
    "time": "04:21",
    "link_url":"../file/source/演员.mp3",
    "cover":"../file/source/演员.jpg",
    "link_lrc":"../file/source/演员.txt"},
  {
    "name":"百里守约",
    "singer": "萧敬腾",
    "album": "《王者荣耀》百里守约英雄主打歌",
    "time": "03:42",
    "link_url":"../file/source/百里守约.mp3",
    "cover":"../file/source/百里守约.jpg",
    "link_lrc":"../file/source/百里守约.txt"
  },
  {
    "name":"社会摇",
    "singer": "萧全",
    "album": "社会摇",
    "time": "04:09",
    "link_url":"../file/source/社会摇.mp3",
    "cover":"../file/source/社会摇.jpg",
    "link_lrc":"../file/source/社会摇.txt"
  },
  {
    "name":"说散就散",
    "singer": "袁娅维",
    "album": "说散就散",
    "time": "04:02",
    "link_url":"../file/source/说散就散.mp3",
    "cover":"../file/source/说散就散.jpg",
    "link_lrc":"../file/source/说散就散.txt"
  },
  {
    "name":"输了你赢了世界又如何",
    "singer": "林俊杰",
    "album": "梦想的声音《第二季》",
    "time": "04:43",
    "link_url":"../file/source/输了你赢了世界又如何.mp3",
    "cover":"../file/source/输了你赢了世界又如何.jpg",
    "link_lrc":"../file/source/输了你赢了世界又如何.txt"
  }
]
标签
background
inline-block
position
player
hover
display
jquery
qq
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!