jQuery网页版简易qq音乐_网页版将qq音乐添加到播放列表的源代码-CSDN博客

本文链接：https://blog.csdn.net/weixin_40619833/article/details/89103071

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>QQ音乐播放器 - NJ</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>
                   <!-- <li class="list_music">
                        <div class="list_check"><i></i></div>
                        <div class="list_number">1</div>
                        <div class="list_name">歌曲
                            <div class="list_menu">
                                <a href="javascript:;" title="播放"></a>
                                <a href="javascript:;" title="添加"></a>
                                <a href="javascript:;" title="下载"></a>
                                <a href="javascript:;" title="分享"></a>
                            </div>
                        </div>
                        <div class="list_singer">李凯</div>
                        <div class="list_time">
                            <span>03:09</span>
                            <a href="javascript:;" title="删除"></a>
                        </div>
                    </li>-->

                </ul>
            </div>
        </div>
        <div class="content_right">
            <div class="song_info">
                <a href="javascript:;" class="song_info_pic">
                    <img src="images/lnj.jpg" 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>

*{
    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 ul>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{
    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: 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_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;
}

$(function () {
    // 0.自定义滚动条
    $(".content_list").mCustomScrollbar();

    var $audio = $("audio");
    var player = new Player($audio);
    var progress;
    var voiceProgress;
    var lyric;

    //1 、加载歌曲列表
    getPlayList();
    function getPlayList() {
        $.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);
                    //3.1.1 添加子元素
                    $musicList.append($item);
                });
                initMusicInfo(data[0]);
                initMusicLyric(data[0]);
            },
            error:function (e) {
                console.log(e);
            }
        });
    }
    //2、初始化歌曲信息
    function initMusicInfo(music) {
        var $musicImg = $(".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 $mskBg = $(".mask_bg");

        //给获取到的元素赋值
        $musicImg.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);
        $mskBg.css("background", "url('"+music.cover+"')");
    }
    //3、初始化歌词信息
    function initMusicLyric(music) {
       lyric = new Lyric(music.link_lrc);
        var $lyricContainer = $(".song_lyric");
        //清空上一首歌的歌词
        $lyricContainer.html("");
        lyric.loadLyric(function () {
            //创建歌词列表
            $.each(lyric.lyrics,function (index,ele) {
                var $item = $("<li>"+ele+"</li>");
                $lyricContainer.append($item);
            })
        });
    }

    //5、初始化进度条
    initProgress()
    function initProgress() {
        var $musicProgressBar = $(".music_progress_bar");
        var $musicProgressLine = $(".music_progress_line");
        var $musicProgressDot = $(".music_progress_dot");
        progress = Progress($musicProgressBar,$musicProgressLine,$musicProgressDot);
        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);
        });

    }
    //6、 初始化事件监听
    initEvents();
    function initEvents() {
        //1、监听鼠标移入移出歌曲的事件
        //因为list_music是动态创建的所以监听时要形成事件委托
        $(".content_list").delegate(".list_music","mouseenter",function () {
            // 显示子菜单(find() 方法获得当前元素集合中每个元素的后代，通过选择器、jQuery 对象或元素来筛选。)
            $(this).find(".list_menu").stop().fadeIn(100);
            //隐藏时间
            $(this).find(".list_time>span").stop().fadeOut(100);
            $(this).find(".list_time>a").stop().fadeIn(100);
        });
        $(".content_list").delegate(".list_music","mouseleave",function () {
            // 显示子菜单(find() 方法获得当前元素集合中每个元素的后代，通过选择器、jQuery 对象或元素来筛选。)
            $(this).find(".list_menu").stop().fadeOut(100);
            $(this).find(".list_time>a").stop().fadeOut(100);
            //隐藏时间
            $(this).find(".list_time>span").stop().fadeIn(100);

        });
        //2、监听复选框的点击事件
        /*
           addClass()是在原有的类基础上增加类属性，仍然保留原有的类的样式
           toggleClass() 是切换元素class类别，删除原有的class样式，替换为新的class样式. (切换,没有加，有减)
        */
        $(".content_list").delegate(".list_check","click",function (){
            $(this).toggleClass("list_checked");
        });

        /*$(".list_title>.list_check").click(function () {
            if( $(this).attr("class").indexOf("list_checked") !=-1){
                //未选中
                $(this).addClass("list_checked");

            }else {
                $(this).removeClass("list_checked");

            }

         });*/

        //5 、子菜单播放按钮的监听
        //获取下面的播放按钮
        var $music_play = $(".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);
            //5.1 切换图标
            $(this).toggleClass("list_menu_play2");
            //5.2 复原其他播放图标
            $item.siblings().find(".list_menu_play").removeClass(".list_menu_play2");
            //5.3 同步底部的播放按钮
            if($(this).attr("class").indexOf("list_menu_play2") != -1){
                //当前是播放状态
                $music_play.addClass("music_play2");
                // 让文字高亮
                $item.find("div").css("color","#fff");
                $item.siblings().find("div").css("color","rgba(255,255,255,0.5)");
            }
            else {
                $music_play.removeClass("music_play2");
                // 让文字恢复
                $item.find("div").css("color","rgba(255,255,255,0.5)");
            }
            //5.4 播放时切换为跳动图标this代表.list_menu_play
            $item.find(".list_number").toggleClass("list_number2");
            $item.siblings().find(".list_number").removeClass("list_number2");

            //5.5 播放音乐
            player.playMusic($item.get(0).index,$item.get(0).music);
            //5.6 切换歌曲信息
            initMusicInfo($item.get(0).music);
            //5.7 切换歌词信息
            initMusicLyric($item.get(0).music);
        });

        //6、监听底部控制区域的播放按钮的点击
        $music_play.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");
            }
        });
        //7、监听底部控制区域的上一首按钮的点击
        $(".music_pre").click(function () {
            $(".list_music").eq(player.preIndex()).find(".list_menu_play").trigger("click");
        });
        //8、监听底部控制区域的下一首按钮的点击
        $(".music_next").click(function () {
            $(".list_music").eq(player.nextIndex()).find(".list_menu_play").trigger("click");
        });
        
        //9.监听子菜单的删除按钮的点击
        $(".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);
            });

        });

        //10.监听播放进度
      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
          });
      });
      //11、监听声音和图标的点击
        $(".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);
            }
        });

    }

    //4、定义方法创建一条音乐
    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+"\n" +
            "                            <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;//将他的序号保存到原生list_music中
        $item.get(0).music = music;
        return $item;
    }
});

(function (window) {
    function Player($audio) {
        return new Player.prototype.init($audio);
    }
    Player.prototype = {
        constructor: 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 {
                // 不是同一首
                this.$audio.attr("src", music.link_url);
                this.audio.play();
                this.currentIndex = index;
            }
        },
        //处理索引
        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;
            }
        },
        musicTimeUpdate: function (callBack) {
            var $this = this;
            this.$audio.on("timeupdate", function () {
                var duration = $this.audio.duration;
                var currentTime = $this.audio.currentTime;
                var timeStr = $this.formatDate(currentTime, duration);
                callBack(currentTime, duration, timeStr);//使用回调函数为了返回三个参数给 musicTimeUpdate的函数
            });
        },
        formatDate: function (currentTime, duration) {
            var endMin = parseInt(duration / 60); // 2
            var endSec = parseInt(duration % 60);
            if(endMin < 10){
                endMin = "0" + endMin;
            }
            if(endSec < 10){
                endSec = "0" + endSec;
            }
            var startMin = parseInt(currentTime / 60); // 2
            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);

(function (window) {
    function Progress($musicProgressBar,$musicProgressLine,$musicProgressDot) {
        return new Progress.prototype.init($musicProgressBar,$musicProgressLine,$musicProgressDot);
    }
    Progress.prototype = {
        constructor: Progress,//自定义
        init: function ($musicProgressBar,$musicProgressLine,$musicProgressDot) { //初始化
            this.$progressBar = $musicProgressBar;
            this.$progressLine = $musicProgressLine;
            this.$progressDot = $musicProgressDot;
        },
        isMove:false,
        progressClick:function (callBack) {
            var $this = this; //这个this是progress
            //监听背景的点击
           this.$progressBar.click(function (event) {
               //获取背景默认到窗口边的距离
               var normalLeft = $(this).offset().left; //这个this是$musicProgressBar
               //获取点击位置到窗口边的距离
               var evenLeft = event.pageX;
               //设置前景的宽度
               $this.$progressLine.css("width",evenLeft - normalLeft);
               $this.$progressDot.css("left",evenLeft - normalLeft);
               //计算进度条的比例（前景宽度除以背景宽度）
               var value = (evenLeft - normalLeft) / $(this).width();
               callBack(value);
           });
        },
        progressMove:function (callBack) {
            var $this = this;
            // 获取背景距离窗口默认的位置
            var normalLeft = this.$progressBar.offset().left;
            var barWidth = this.$progressBar.width();
            var eventLeft;
            //1、监听鼠标按下事件
            this.$progressBar.mousedown(function () {
                this.isMove = true;
                var normalLeft = $(this).offset().left; //这个this是$musicProgressBar
                //2、监听鼠标移动事件
                $(document).mousemove(function () {
                    //获取点击位置到窗口边的距离
                    var evenLeft = event.pageX;
                    //设置前景的宽度
                    $this.$progressLine.css("width",evenLeft - normalLeft);
                    $this.$progressDot.css("left",evenLeft - normalLeft);
                    //计算进度条的比例（前景宽度除以背景宽度）
                    var value = (evenLeft - normalLeft) / $(this).width();
                    callBack(value);
                });
            });
            //3、监听鼠标抬起事件
            $(document).mouseup(function () {
                $(document).off("mousemove");
                this.isMove = false;
                var value = (eventLeft - normalLeft) / barWidth;
                callBack(value);
            });
        },
        setProgress:function (value) {
            if(this.isMove) return;//默认情况下是false，在拖拽的情况下就会执行下面的代码，否则则不执行
            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);

(function (window) {
    function Lyric(path) {
        return new Lyric.prototype.init(path);
    }
    Lyric.prototype = {
        constructor: Lyric,
        init: function (path) {
            this.path = path;
        },
        times: [],
        lyrics: [],
        index: -1,
        loadLyric: function (callBack) {
            var $this = this;
            $.ajax({
                url: $this.path,
                dataType: "text",
                success: function (data) {
                    // console.log(data);
                    $this.parseLyric(data);
                    callBack();
                },
                error: function (e) {
                    console.log(e);
                }
            });
        },
        parseLyric: function (data) {
            var $this = this;
            // 一定要清空上一首歌曲的歌词和时间
            $this.times = [];
            $this.lyrics = [];
            var array = data.split("\n");
            // console.log(array);
            // [00:00.92]
            var timeReg = /\[(\d*:\d*\.\d*)\]/
            // 遍历取出每一条歌词
            $.each(array, function (index, ele) {
                // 处理歌词
                var lrc = ele.split("]")[1];
                // 排除空字符串(没有歌词的)
                if(lrc.length == 1) return true;
                $this.lyrics.push(lrc);

                // 处理时间
                var res = timeReg.exec(ele);
                // console.log(res);
                if(res == null) return true;//表示继续执行
                var timeStr = res[1]; // 00:00.92
                var res2 = timeStr.split(":");
                var min = parseInt(res2[0]) * 60;
                var sec = parseFloat(res2[1]);
                var time = parseFloat(Number(min + sec).toFixed(2)) ;
                $this.times.push(time);
            });
            // console.log($this.times + "");
            // console.log($this.lyrics + "");
        },
        currentIndex: function (currentTime) {
            // console.log(currentTime);
            // 0.93 >= 0.92
            // 4.8 >= 4.75
            if(currentTime >= this.times[0]){
                this.index++; // 0  1
                this.times.shift(); // 删除数组最前面的一个元素
            }
            return this.index; // 1
        }
        /*
        [6.4,23.59,26.16,29.33,34.27,36.9];
        ["告白气球 - 周杰伦","词：方文山","曲：周杰伦","塞纳河畔 左岸的咖啡","我手一杯 品尝你的美","留下唇印的嘴","花店玫瑰 名字写错谁","告白气球 风吹到对街"]
        */
    }
    Lyric.prototype.init.prototype = Lyric.prototype;
    window.Lyric = Lyric;
})(window);