每个人都能制作的简易版QQ音乐(HTML+CSS+JQuery)

自制系列二它来了。

如果在制作过程中有如何问题你都可以私信我,我会答复你的。

今天中秋节,首先祝大家中秋节快乐!

因为没什么礼物送给大家,所以在这里给大家安利一份简易版QQ音乐的制作,过程很简单,每个人都能学会。

下面将是制作步骤了:

先建好目录如下:

 source文件夹里存放如下:

下面就是把代码复制到相应的目录中:

QQ音乐播放器.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/jquery.mCustomScrollbar.css"/>
        <link rel="stylesheet" type="text/css" href="css/1.css"/>
        <script src="js/jquery-1.12.4.js"></script>
        <script src="js/jquery.mCustomScrollbar.concat.min.js"></script>
        <script src="js/2.js"></script>
        <script src="js/3.js"></script>
        <script src="js/1.js"></script>
    </head>
    <body>
        <div class="header">
            <h1 class="logo"><a href="#"></a></h1>
            <ul class="register">
                <li>登录</li>
                <li>设置</li>
            </ul>
        </div>
        <div class="content">
            <div class="content_in">
                <div class="content_left">
                    <div class="content_toolbar">
                        <span><i></i>收藏</span>
                        <span><i></i>添加到</span>
                        <span><i></i>下载</span>
                        <span><i></i>删除</span>
                        <span><i></i>清空列表</span>
                    </div>
                    <div class="content_list" data-mcs-theme="minimal-dark">
                        <ul>
                            <li class="list_title">
                                <div class="list_check"><i></i></div>
                                <div class="list_number"></div>
                                <div class="list_name">歌曲</div>
                                <div class="list_singer">歌手</div>
                                <div class="list_time">时长</div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="content_right">
                    <div class="song_info">
                        <a href="javascript:;" class="song_info_pic">
                            <img src="img/lnj.png" >
                        </a>
                        <div class="song_info_name">歌曲名称:
                            <a href="javascript:;">后来</a>
                        </div>
                        <div class="song_info_singer">歌手名:
                            <a href="javascript:;">刘若英</a>
                        </div>
                        <div class="song_info_ablum">专辑名:
                            <a href="javascript:;">我等你</a>
                        </div>
                    </div>
                    <ul class="song_lyric">
                        <li class="cur">第一条歌词</li>
                        <li>第二条歌词</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="footer_in">
                <a href="javascript:;" class="music_pre"></a>
                <a href="javascript:;" class="music_play"></a>
                <a href="javascript:;" class="music_next"></a>
                <div class="music_progress_info">
                    <div class="music_progress_top">
                        <span class="music_progress_name">后来 / 刘若英</span>
                        <span class="music_progress_time">00:00 / 04:25</span>
                    </div>
                    <div class="music_progress_bar">
                        <div class="music_progress_line">
                            <div class="music_progress_dot"></div>
                        </div>
                    </div>
                </div>
                <a href="javascript:;" class="music_mode"></a>
                <a href="javascript:;" class="music_fav"></a>
                <a href="javascript:;" class="music_down"></a>
                <a href="javascript:;" class="music_comment"></a>
                <a href="javascript:;" class="music_only"></a>
                <div class="music_voice_info">
                    <a href="javascript:;" class="music_voice_icon"></a>
                    <div class="music_voice_bar">
                        <div class="music_voice_line">
                            <div class="music_voice_dot"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="mask_bg"></div>
        <div class="mask"></div>
        <audio src="" ></audio>
    </body>
</html>

1.css

*{
    margin: 0;
    padding: 0;
}
html,body{
    width: 100%;
    height: 100%;
    font-size: 14px;
}
.header{
    width: 100%;
    height: 45px;
/*     background: red; */
}
.header .logo{
    float: left;
    margin-top: 5px;
    margin-left: 20px;
    opacity: 0.5;
}
.header .logo:hover{
    opacity: 1;
}
.header .logo a{
    display: inline-block;
    width: 115px;
    height: 37px;
    background: url("../img/logo.png") no-repeat 0 0;
}
.header .register{
    float: right;
    line-height: 45px;
}
.header .register li{
    list-style: none;
    float: left;
    margin-right: 20px;
    color: #fff;
    opacity: 0.5;
}
.header .register li:hover{
    opacity: 1;
}
.content{
    width: 100%;
    height: 620px;
/*     background: blue; */
}
.content .content_in{
    width: 1200px;
    height: 100%;
/*     background: deeppink; */
    margin: 0 auto;
}
.content_in .content_left{
    float: left;
    width: 800px;
    height: 100%;
/*     background: pink; */
}
.content_left .content_toolbar{
    width: 100%;
    height: 40px;
/*     background: #000; */
}
.content_toolbar span{
    display: inline-block;
    width: 122px;
    height: 100%;
    line-height: 40px;
    text-align: center;
    border: 1px solid #fff;
    box-sizing: border-box;
    border-radius: 5px;
    color: #fff;
    opacity: 0.5;
}
.content_toolbar span i{
    display: inline-block;
    width: 18px;
    height: 18px;
    background: red no-repeat 0 0;
    margin-right: 10px;
    vertical-align: -5px;
}
.content_toolbar span:nth-child(1){
    background-position: -60px -20px;
}
.content_toolbar span:nth-child(2){
    background-position: -20px -20px;
}
.content_toolbar span:nth-child(3){
    background-position: -40px -240px;
}
.content_toolbar span:nth-child(4){
    background-position: -100px -20px;
}
.content_toolbar span:nth-child(5){
    background-position: -40px -300px;
}
.content_toolbar span i:hover{
    opacity: 1;
}
.content_left .content_list{
    width: 100%;
    height: 420px;
/*     background: purple; */
    overflow: auto;
}
.content_list li{
    list-style: none;
    width: 100%;
    height: 50px;
/*     background: orangered; */
    border-bottom: 1px solid rgba(255,255,255,0.5);
    box-sizing: border-box;
    user-select: none;
}
.content_list li div{
    float: left;
    color: rgba(255,255,255,0.5);
    line-height: 50px;
/*     opacity: 0.5; */
}
.content_list .list_check{
    width: 50px;
    height: 100%;
/*     background: #000; */
    text-align: center;
}
.content_list .list_check i{
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 1px solid #fff;
    opacity: 0.5;
}
.content_list .list_checked i{
    background: red no-repeat -60px -80px;
    opacity: 1;
}
.content_list .list_number{
    width: 20px;
    height: 100%;
/*     background: green; */
}
.content_list .list_number2{
    color: transparent !important;
    background: deeppink no-repeat 0 center;
}
.content_list .list_name{
    width: 50%;
    height: 100%;
/*     background: #ccc; */
}
.list_name .list_meau{
    margin-top: 5px;
    float: right;
    margin-right: 20px;
    display: none;
}
.list_meau a{
    display: inline-block;
    width: 36px;
    height: 36px;
    background: red no-repeat 0 0;
    opacity: 0.5;
}
.list_meau a:hover{
    opacity: 1;
}
.list_meau a:nth-child(1){
    background-position: -120px 0;
}
.list_meau a:nth-child(2){
    background-position: -120px -80px;
}
.list_meau a:nth-child(3){
    background-position: -120px -120px;
}
.list_meau a:nth-child(4){
    background-position: -120px -40px;
}
.list_meau .list_meau_play2{
    background-position: -80px -200px !important;
}
.content_list .list_singer{
    width: 20%;
    height: 100%;
/*     background: pink; */
}
.content_list .list_time a{
    display: inline-block;
    width: 36px;
    height: 36px;
    background: red no-repeat -120px -160px;
    float: left;
    margin-top: 5px;
    display: none;
    opacity: 0.5;
}
.content_list .list_time a:hover{
    opacity: 1;
}
.content_in .content_right{
    float: right;
    width: 400px;
    height: 100%;
    user-select: none;
/*     background: #ccc; */
}
.content_right .song_info{
    text-align: center;
    color: rgba(255,255,255,0.5);
    line-height: 30px;
}
.song_info .song_info_pic{
    display: inline-block;
    background: red no-repeat 0 0;
    width: 201px;
    height: 180px;
    text-align: left;
}
/* .song_info_pic img{
    width: 180px;
    height: 180px;
} */
.song_info div a{
    text-decoration: none;
    color: #fff;
    opacity: 0.5;
}
.song_info div a:hover{
    opacity: 1;
}
.content_right .song_lyric{
/*     background: green; */
    text-align: center;
    margin-top: 30px;
}
.content_right .song_lyric li{
    list-style: none;
    line-height: 30px;
    font-weight: bold;
    color: rgba(255,255,255,0.5);
}
.content_right .song_lyric .cur{
    color: #31c27c;
}
.footer{
    width: 100%;
    height: 60px;
/*     background: deeppink; */
    position: absolute;
    left: 0;
    bottom: 0;
}
.footer .footer_in{
    width: 1200px;
    height: 100%;
/*     background: plum; */
    margin: 0 auto;
    user-select: none;
}
.footer_in a{
    display: inline-block;
    text-decoration: none;
    color: #fff;
    background: red no-repeat 0 0;
    margin-left: 20px;
}
.footer_in .music_pre{
    width: 19px;
    height: 20px;
    background-position: 0 -30px;
}
.footer_in .music_play{
    width: 19px;
    height: 20px;
    background-position: 0 0;
}
.footer_in .music_play2{
    width: 29px;
    height: 30px;
    background-position: -30px 0;
}
.footer_in .music_next{
    width: 19px;
    height: 20px;
    background-position: 0 -52px;
}
.footer_in .music_progress_info{
    display: inline-block;
    width: 670px;
    height: 40px;
    background: green;
    position: relative;
    top: 10px;
}
.music_progress_info .music_progress_top{
    width: 100%;
    height: 30px;
    line-height: 30px;
/*     background: #000; */
    color: #fff;
}
.music_progress_top .music_progress_name{
    float: left;
    opacity: 0.5;
}
.music_progress_top .music_progress_name:hover{
    opacity: 1;
}
.music_progress_top .music_progress_time{
    float: right;
    opacity: 0.5;
}
.music_progress_info .music_progress_bar{
    width: 100%;
    height: 4px;
    background: rgba(255,255,255,0.5);
    margin-top: 5px;
    position: relative;
}
.music_progress_bar .music_progress_line{
    width: 0;
    height: 100%;
    background: #fff;
}
.music_progress_line .music_progress_dot{
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    top: -5px;
    left: 0;
}
.footer_in .music_mode{
    width: 19px;
    height: 20px;
    background-position: 0 -205px;
}
.footer_in .music_mode2{
    width: 24px;
    height: 25px;
    background-position: 0 -260px;
}
.footer_in .music_mode3{
    width: 29px;
    height: 30px;
    background-position: 0 -74px;
}
.footer_in .music_mode4{
    width: 34px;
    height: 35px;
    background-position: 0 -232px;
}
.footer_in .music_fav{
    width: 19px;
    height: 20px;
    background-position: 0 -96px;
}
.footer_in .music_fav2{
    width: 29px;
    height: 30px;
    background-position: -30px -96px;
}
.footer_in .music_down{
    width: 19px;
    height: 20px;
    background-position: 0 -120px;
}
.footer_in .music_comment{
    width: 19px;
    height: 20px;
    background-position: 0 -400px;
}
.footer_in .music_only{
    width: 19px;
    height: 20px;
    background-position: 0 -281px;
}
.footer_in .music_only2{
    width: 29px;
    height: 30px;
    background-position: 0 -310px;
}
.footer_in .music_voice_info{
    display: inline-block;
    width: 100px;
    height: 40px;
    /* background: green; */
    position: relative;
    top: 10px;
}
.music_voice_info .music_voice_icon{
    width: 19px;
    height: 20px;
    background-position: 0 -144px;
    position: absolute;
    left: 0;
    top: 10px;
}
.music_voice_info .music_voice_icon2{
    width: 19px;
    height: 30px;
    background-position: 0 -182px;
}
.music_voice_info .music_voice_bar{
    width: 60px;
    height: 4px;
    background: rgba(255,255,255,0.5);
    position: absolute;
    right: 0;
    top: 18px;
}
.music_voice_bar .music_voice_line{
    width: 60px;
    height: 100%;
    background: #fff;
}
.music_voice_line .music_voice_dot{
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    position: relative;
    top: -5px;
    left: 60px;
}
.mask_bg{
    position: absolute;
    left: 0;
    top: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    background: url("../img/lnj.png") no-repeat 0 0;
    background-size: cover;
    filter: blur(100px);
}
.mask{
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.35);
}
._mCS_1 .mCSB_scrollTools .mCSB_dragger_bar{
    width: 8px;
}

1.js

$(function(){
    //自定义滚动条
    $(".content_list").mCustomScrollbar();
    var audios = $("audio");
    var player = new Player(audios);
    var progress;
    var voiceProgress;
    //加载歌曲
    getPlayerList();
    function getPlayerList(){
        $.ajax({
            url: "./source/musiclist.json",
            dataType: "json",
            success: function(data){
                // console.log(data);
                var musicList = $(".content_list ul");
                player.musicList = data;
                $.each(data,function(index,ele){
                    var item = createMusicItem(index,ele);
                    musicList.append(item);
                });
                initMusicInfo(data[0]);
                // initMusicLyric(data[0]);
            },
            error: function(e){
                console.log(e);
            }
        });
    }
    //初始化歌曲信息
    function initMusicInfo(music){
        //获取对应的元素
        var musicImage = $(".song_info_pic img");
        var musicName = $(".song_info_name a");
        var musicSinger = $(".song_info_singer a");
        var musicAblum = $(".song_info_ablum a");
        var musicProgressName = $(".music_progress_name");
        var musicProgressTime = $(".music_progress_time");
        var musicBg = $(".mask_bg");
        //给元素赋值
        musicImage.attr("src",music.cover);
        musicName.text(music.name);
        musicSinger.text(music.singer);
        musicAblum.text(music.album);
        musicProgressName.text(music.name +" / "+music.singer);
        musicProgressTime.text("00:00 / "+music.time);
        musicBg.css("background","url('"+music.cover+"')");
    }
    //初始化歌词信息
    // function initMusicLyric(music){
    //     var lyric = new Lyric(music.link_lrc);
    //     lyric.loadLyric();
    // }
    //初始化进度条
    initProgress();
    function initProgress(){
        var progressBar = $(".music_progress_bar");
        var progressLine = $(".music_progress_line");
        var progressDot = $(".music_progress_dot");
        progress = Progress(progressBar,progressLine,progressDot);
        progress.progressClick(function(value){
            player.musicSeekTo(value);
        });
        progress.progressMove(function(value){
            player.musicSeekTo(value);
        });
        
        var voiceBar = $(".music_voice_bar");
        var voiceLine = $(".music_voice_line");
        var voiceDot = $(".music_voice_dot");
        voiceProgress = Progress(voiceBar,voiceLine,voiceDot);
        voiceProgress.progressClick(function(value){
            player.musicVoiceSeekTo(value);
        });
        voiceProgress.progressMove(function(value){
            player.musicVoiceSeekTo(value);
        });
    }
    //初始化事件监听
    initEvents();
    function initEvents(){
        //监听歌曲移入移出
        $(".content_list").delegate(".list_music","mouseenter",function(){
            //显示子菜单
            $(this).find(".list_meau").stop().fadeIn(100);
            $(this).find(".list_time a").stop().fadeIn(100);
            //隐藏时长
            $(this).find(".list_time span").stop().fadeOut(100);
        });
        $(".content_list").delegate(".list_music","mouseleave",function(){
            //隐藏子菜单
            $(this).find(".list_meau").stop().fadeOut(100);
            $(this).find(".list_time a").stop().fadeOut(100);
            //显示时长
            $(this).find(".list_time span").stop().fadeIn(100);
        });
        //监听复选框的点击
        $(".content_list").delegate(".list_check","click",function(){
            $(this).toggleClass("list_checked");
        });
        //添加子菜单播放按钮
        var musicPlay = $(".music_play");
        $(".content_list").delegate(".list_meau_play","click",function(){
            var item = $(this).parents(".list_music");
            // console.log(item.get(0).index);
            // console.log(item.get(0).music);
            //切换播放图标
            $(this).toggleClass("list_meau_play2");
            //复原其他播放图标
            item.siblings().find(".list_meau_play").removeClass("list_meau_play2");
            if($(this).attr("class").indexOf("list_meau_play2") != -1){
                //当前子菜单播放按钮是播放状态
                musicPlay.addClass("music_play2");
                //让文字高亮
                item.find("div").css("color","#fff");
                item.siblings().find("div").css("color","rgba(255,255,255,0.5)");
            }else{
                //当前子菜单播放按钮不是播放状态
                musicPlay.removeClass("music_play2");
                //让文字不高亮
                item.find("div").css("color","rgba(255,255,255,0.5)");
            }
            // musicPlay.toggleClass("music_play2");
            //切换序号状态
            item.find(".list_number").toggleClass("list_number2");
            item.siblings().find(".list_number").removeClass("list_number2");
            //播放音乐
            player.playMusic(item.get(0).index,item.get(0).music);
            //切换歌曲信息
            initMusicInfo(item.get(0).music);
        });
        //监听底部播放按钮的点击
        musicPlay.click(function(){
            //判断有没有播放过音乐
            if(player.currentIndex == -1){
                //没有播放
                $(".list_music").eq(0).find(".list_meau_play").trigger("click");
            }else{
                //播放过
                $(".list_music").eq(player.currentIndex).find(".list_meau_play").trigger("click");
            }
        });
        //监听底部上一首按钮的点击
        $(".music_pre").click(function(){
            $(".list_music").eq(player.preIndex()).find(".list_meau_play").trigger("click");
        });
        //监听底部下一首按钮的点击
        $(".music_next").click(function(){
            $(".list_music").eq(player.nextIndex()).find(".list_meau_play").trigger("click");
        });
        //监听删除按钮点击
        $(".content_list").delegate(".list_meau_del","click",function(){
            //找到被点击的音乐
            var item = $(this).parents(".list_music");
            //判断当前删除的音乐是否在播放
            if(item.get(0).index == player.currentIndex){
                $(".music_next").trigger("click");
            }
            item.remove();
            player.changeMusic(item.get(0).index);
            //重新排序
            $(".list_music").each(function(index,ele){
                ele.index = index;
                $(ele).find(".list_number").text(index + 1);
            });
        });
        //监听播放进度
        player.musicTimeUpdate(function(currentTime,duration,timeStr){
            //同步时间
            $(".music_progress_time").text(timeStr);
            //同步进度条
            //计算播放比例
            var value = currentTime / duration * 100;
            progress.setProgress(value);
        });
        //监听声音按钮的点击
        $(".music_voice_icon").click(function(){
            //图标切换
            $(this).toggleClass("music_voice_icon2");
            //声音切换
            if($(this).attr("class").indexOf("music_voice_icon2") != -1){
                //变为没有声音
                player.musicVoiceSeekTo(0);
            }else{
                //变为有声音
                player.musicVoiceSeekTo(1);
            }
        });
    }
    
    //定义一个方法创建一条音乐
    function createMusicItem(index,music){
        var item = $("<li class=\"list_music\">"+
                                "<div class=\"list_check\"><i></i></div>"+
                                "<div class=\"list_number\">"+(index+1)+"</div>"+
                                "<div class=\"list_name\">"+music.name+""+
                                    "<div class=\"list_meau\">"+
                                        "<a href=\"javascript:;\" title=\"播放\" class=\"list_meau_play\"></a>"+
                                        "<a href=\"javascript:;\" title=\"添加\"></a>"+
                                        "<a href=\"javascript:;\" title=\"下载\"></a>"+
                                        "<a href=\"javascript:;\" title=\"分享\"></a>"+
                                    "</div>"+
                                "</div>"+
                                "<div class=\"list_singer\">"+music.singer+"</div>"+
                                "<div class=\"list_time\">"+
                                    "<span>"+music.time+"</span>"+
                                    "<a href=\"javascript:;\" title=\"删除\" class=\"list_meau_del\"></a>"+
                                "</div>"+
                            "</li>");
        item.get(0).index = index;
        item.get(0).music = music;
        return item;
    }
    
});

2.js

//JS的面向对象
(function(window){
    function Player(audios){
        return new Player.prototype.init(audios);
    }
    Player.prototype = {
        constructor: Player,
        musicList: [],
        init: function(audios){
            this.audios = audios;
            this.audio = audios.get(0);
        },
        currentIndex: -1,
        playMusic: function(index,music){
            //判断是否是同一首音乐
            if(this.currentIndex == index){
                //同一首音乐
                if(this.audio.paused){
                    this.audios.attr("src",music.link_url);
                    this.audio.play();
                }else{
                    this.audio.pause();
                }
            }else{
                this.currentIndex = index;
                // console.log(this.currentIndex);
                //不是同一首
                this.audios.attr("src",music.link_url);
                this.audio.play();
            }
        },
        preIndex:function(){
            var index = this.currentIndex - 1;
            if(index < 0){
                index = this.musicList.length - 1;
            }
            return index;
        },
        nextIndex:function(){
            var index = this.currentIndex + 1;
            if(index > this.musicList.length - 1){
                index = 0;
            }
            return index;
        },
        changeMusic:function(index){
            //删除对应的数据
            this.musicList.splice(index,1);
            //判断当前删除的音乐是否是正在播放音乐的前面
            if(index < this.currentIndex){
                this.currentIndex = this.currentIndex - 1;
            }
        },
        // getMusicDuration:function(){
        //     return this.audio.duration;
        // },
        // getMusicCurrentTime:function(){
        //     return this.audio.currentTime;
        // },
        musicTimeUpdate:function(callBack){
            var $this = this;
            this.audios.on("timeupdate",function(){
                var duration = $this.audio.duration;
                var currentTime = $this.audio.currentTime;
                var timeStr = $this.formatDate(currentTime,duration);
                callBack(currentTime,duration,timeStr);
            });
        },
        formatDate:function(currentTime,duration){
            var endMin = parseInt(duration / 60);
            var endSec = parseInt(duration % 60);
            if(endMin < 10){
                endMin = "0" + endMin;
            }
            if(endSec < 10){
                endSec = "0" + endSec;
            }
            var startMin = parseInt(currentTime / 60);
            var startSec = parseInt(currentTime % 60);
            if(startMin < 10){
                startMin = "0" + startMin;
            }
            if(startSec < 10){
                startSec = "0" + startSec;
            }
            return startMin+":"+startSec+" / "+endMin+":"+endSec;
        },
        musicSeekTo:function(value){
            if(isNaN(value)) return;
            this.audio.currentTime = this.audio.duration * value;
        },
        musicVoiceSeekTo:function(value){
            if(isNaN(value)) return;
            if(value < 0 || value > 1) return;
            //0~1
            this.audio.volume = value;
        }
    }
    Player.prototype.init.prototype = Player.prototype;
    window.Player = Player;
})(window);

3.js

//JS的面向对象
(function(window){
    function Progress(progressBar,progressLine,progressDot){
        return new Progress.prototype.init(progressBar,progressLine,progressDot);
    }
    Progress.prototype = {
        constructor: Progress,
        init: function(progressBar,progressLine,progressDot){
            this.progressBar = progressBar;
            this.progressLine = progressLine;
            this.progressDot = progressDot;
        },
        isMove:false,
        progressClick:function(callBack){
            var $this = this;//此时此刻的this是progress
            //监听背景点击
            this.progressBar.click(function(event){
                //获取背景距离窗口默认位置
                var normalLeft = $(this).offset().left;
                //获取点击的位置距离窗口的位置
                var eventLeft = event.pageX;
                //设置前景的宽度
                $this.progressLine.css("width",eventLeft - normalLeft);
                $this.progressDot.css("left",eventLeft - normalLeft);
                //计算进度条比例
                var value = (eventLeft - normalLeft) / $(this).width();
                callBack(value);
            });
        },
        progressMove:function(callBack){
            var $this = this;
            //获取背景距离窗口默认位置
            var normalLeft = this.progressBar.offset().left;
            var barWidth = this.progressBar.width();
            var eventLeft;
            //监听鼠标的按下
            this.progressBar.mousedown(function(){
                $this.isMove = true;
                //监听鼠标的移动
                $(document).mousemove(function(event){
                    //获取点击的位置距离窗口的位置
                    eventLeft = event.pageX;
                    var offset = eventLeft - normalLeft;
                    if(offset >= 0 && offset <= barWidth){
                        //设置前景的宽度
                        $this.progressLine.css("width",eventLeft - normalLeft);
                        $this.progressDot.css("left",eventLeft - normalLeft);
                    }
                });
            });
            //监听鼠标的抬起
            $(document).mouseup(function(){
                $(document).off("mousemove");
                $this.isMove = false;
                //计算进度条比例
                var value = (eventLeft - normalLeft) / $this.progressBar.width();
                callBack(value);
            });
        },
        setProgress:function(value){
            if(this.isMove) return;
            if(value < 0 || value > 100) return;
            this.progressLine.css({
                width: value+"%"
            });
            this.progressDot.css({
                left: value+"%"
            });
        }
    }
    Progress.prototype.init.prototype = Progress.prototype;
    window.Progress = Progress;
})(window);

4.js

//JS的面向对象
(function(window){
    function Lyric(path){
        return new Lyric.prototype.init(path);
    }
    Lyric.prototype = {
        constructor: Lyric,
        musicList: [],
        init: function(path){
            this.path = path;
        },
        loadLyric:function(){
            var $this = this;
            $.ajax({
                url: $this.path,
                dataType: "text",
                success: function(data){
                    // console.log(data);
                    $this.parseLyric(data);
                },
                error: function(e){
                    console.log(e);
                }
            });
        }
    }
    Lyric.prototype.init.prototype = Lyric.prototype;
    window.Lyric = Lyric;
})(window);

musiclist.json

[
    {
        "name":"I Lomo You",
        "singer":"王欣宇",
        "album":"I Lomo You",
        "time":"01:47",
        "link_url":"./source/ILomoYou.mp3",
        "cover":"./source/ILomoYou.png",
        "link_lrc":"I Lomo You"
    },
    {
        "name":"千灯之约",
        "singer":"王者荣耀",
        "album":"千灯之约",
        "time":"06:06",
        "link_url":"./source/千灯之约.mp3",
        "cover":"./source/千灯之约.png",
        "link_lrc":"千灯之约"
    },
    {
        "name":"西海情歌",
        "singer":"刀郎",
        "album":"刀郎III",
        "time":"05:46",
        "link_url":"./source/西海情歌.mp3",
        "cover":"./source/西海情歌.png",
        "link_lrc":"西海情歌"
    },
    {
        "name":"年轻的战场",
        "singer":"张杰",
        "album":"年轻的战场",
        "time":"04:53",
        "link_url":"./source/年轻的战场.mp3",
        "cover":"./source/年轻的战场.png",
        "link_lrc":"年轻的战场"
    },
    {
        "name":"公子向北走",
        "singer":"梦凉",
        "album":"公子向北走",
        "time":"02:16",
        "link_url":"./source/公子向北走.mp3",
        "cover":"./source/公子向北走.png",
        "link_lrc":"公子向北走"
    },
    {
        "name":"一起走的幸福",
        "singer":"橘子拿来u",
        "album":"橘子翻唱合集",
        "time":"03:07",
        "link_url":"./source/一起走的幸福.mp3",
        "cover":"./source/一起走的幸福.png",
        "link_lrc":"一起走的幸福"
    },
    {
        "name":"棉花糖",
        "singer":"黑崎子",
        "album":"棉花糖",
        "time":"03:49",
        "link_url":"./source/棉花糖.mp3",
        "cover":"./source/棉花糖.png",
        "link_lrc":"棉花糖"
    },
    {
        "name":"藏不住的心跳",
        "singer":"何三川",
        "album":"藏不住的心跳",
        "time":"03:59",
        "link_url":"./source/藏不住的心跳.mp3",
        "cover":"./source/藏不住的心跳.png",
        "link_lrc":"藏不住的心跳"
    },
    {
        "name":"有幸",
        "singer":"老光",
        "album":"有幸",
        "time":"03:39",
        "link_url":"./source/有幸.mp3",
        "cover":"./source/有幸.png",
        "link_lrc":"有幸"
    },
    {
        "name":"孤芳自赏",
        "singer":"杨小壮",
        "album":"孤芳自赏",
        "time":"04:28",
        "link_url":"./source/孤芳自赏.mp3",
        "cover":"./source/孤芳自赏.png",
        "link_lrc":"孤芳自赏"
    },
    {
        "name":"理想三旬",
        "singer":"张宇清",
        "album":"理想三旬",
        "time":"03:08",
        "link_url":"./source/理想三旬.mp3",
        "cover":"./source/理想三旬.png",
        "link_lrc":"理想三旬"
    },
    {
        "name":"会好的",
        "singer":"张艺兴",
        "album":"会好的",
        "time":"03:30",
        "link_url":"./source/会好的.mp3",
        "cover":"./source/会好的.png",
        "link_lrc":"会好的"
    },
    {
        "name":"只要平凡",
        "singer":"张杰/张碧晨",
        "album":"只要平凡",
        "time":"04:06",
        "link_url":"./source/只要平凡.mp3",
        "cover":"./source/只要平凡.png",
        "link_lrc":"只要平凡"
    },
    {
        "name":"老人与海",
        "singer":"海鸣威",
        "album":"精彩音乐汇",
        "time":"02:54",
        "link_url":"./source/老人与海.mp3",
        "cover":"./source/老人与海.png",
        "link_lrc":"老人与海"
    },
    {
        "name":"会呼吸的痛",
        "singer":"梁静茹",
        "album":"会呼吸的痛",
        "time":"04:32",
        "link_url":"./source/会呼吸的痛.mp3",
        "cover":"./source/会呼吸的痛.png",
        "link_lrc":"会呼吸的痛"
    }
]

以上就是我们需要完成的所有代码。

还有一些插件(两个js和一个css)需要自己到网上去下载,如果找不到可以私信我,我私发给你。

下面再来看看完成之后的效果图吧!

 

 

我随便截了几张图,下面我来说说可以实现的功能:

基本的播放暂停和上一首下一首毋庸置疑是没问题的,还可以实现调节音乐声音的大小、拖拉进度条等等。

而且你们可以看到,背景色是会随着歌曲的不同而改变的,是不是显得高端大气上档次呀!

最美中不足的是我按钮都没有用相应的图标代替,这怪我做的时候偷懒了,但是你们自己可以试试去改一下,也不难,就是在css找到相应的按钮背景换成图片就可以。

还有就是歌词同步问题,由于当时我找不到相应歌曲的歌词文档,所以我就省了这一步骤。你们如果有歌词文档的话,把歌词封装成一个数组,然后导入,添加一个js就可以了。

如果在制作过程中有如何问题你都可以私信我,我会答复你的。

最后,祝大家都可以成功制作出QQ音乐,这就是系列二的全部内容了,大家中秋节记得吃月饼和柚子哦!have a good time!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/52200.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

音乐app、app原型、音乐原型、云音乐、听歌、电台、本地音乐、点赞、收藏、歌单广场、动态、社区、评论、歌词、歌手、主播、视频、云村、下载、翻唱、歌曲播放、订阅、频道、引导页、登录注册、axure原型

音乐app、app原型、音乐原型、云音乐、听歌、电台、本地音乐、点赞、收藏、歌单广场、动态、社区、评论、歌词、歌手、主播、视频、云村、下载、翻唱、歌曲播放、订阅、频道、引导页、登录注册、axure原型 Axure原型演示及下载地址&#xff1a; 登陆 (首次打开) (pmdaniu.com)…

音乐网站设计

设计内容&#xff1a; 音乐网站网站是一款提供在线播放音乐和下载音乐功能的网站&#xff0c;具有音乐排行榜、歌星排行榜、音乐分类三个板块&#xff0c;并提供查询功能&#xff0c;要求如下&#xff1a; ① 页面布局合理&#xff0c;色彩和谐&#xff0c;链接正确&#xff0c…

音乐app、音乐原型、在线音乐、云音乐、听歌、电台、本地音乐、点赞、收藏、歌单广场、动态、社区、评论、歌词、歌手、主播、视频、云村、下载、翻唱、歌曲播放、订阅、频道、引导页、登录注册、axure原型

音乐app、音乐原型、在线音乐、云音乐、听歌、电台、本地音乐、点赞、收藏、歌单广场、动态、社区、评论、歌词、歌手、主播、视频、云村、下载、翻唱、歌曲播放、订阅、频道、引导页、登录注册、axure原型、产品原型 Axure原型演示及下载地址&#xff1a;Axure Cloud - Gener…

【学习笔记】穿T恤听古典音乐

文章目录 1 走进古典音乐1.1 音乐中的自然法则1.2 音乐要素如何模仿1.3 模仿与超越 2 每一天的巴赫2.1 巴赫的故事与作品2.2 对位法2.3 数学之美 3 莫扎特&#xff1a;把日子过成歌剧3.1 《莫扎特传》序曲——唐璜3.2 历史地位与风格演变3.3 咏叹调与宣叙调3.4 《后宫诱逃》3.5…

如何找到能商用的背景纯音乐

很多时候&#xff0c;我们在网上下载的音乐都是不能商用的。如果要商用就必须向作者购买版权授权。对于一些自媒体、博主、小公司等&#xff0c;这将是一笔不菲的费用。那么&#xff0c;哪里有免费可商用的背景配乐吗&#xff1f; 有的&#xff0c;那就是版权协议为CC0的公共音…

设计师精选实用AI工具合集 | Midjourney 、GPT等...

作为一名设计师&#xff0c;我们都知道&#xff0c;在智能化技术的推动下及ChatGPT的突然爆火&#xff0c;越来越多的AI工具正在被设计师广泛应用于日常工作中。 在这里给设计师们介绍几款功能强大、易于使用的AI设计工具。 第一款&#xff0c;基于 GPT 的 Figma 配色生成插件…

比尔·盖茨退出微软董事会,回顾盖茨与微软的传奇故事

作者&#xff5c;年素清 责编&#xff5c;伍杏玲 出品&#xff5c;CSDN&#xff08;ID&#xff1a;CSDNnews&#xff09; 头图&#xff5c;视觉中国 微软于周五宣布&#xff0c;公司联合创始人兼技术顾问比尔盖茨&#xff08;Bill Gates&#xff09;辞去微软董事会职务。 对于这…

后盖茨的IT世界

本文应《中华读书报》之邀所写。 图1 Joel Spolsky的新书More Joelon Software中文版,人民邮电出版社即将出版图2 The Big Switch,中文版,中信出版社 比尔盖茨今以壮岁之年隐退&#xff0c;不再掌管微软帝国的日常工作&#xff0c;标志着一个时代的结束。过渡从两年前就开始…

电子计算机比尔盖茨和微软品牌,尉迟:比尔盖茨卖安全套 牌子不能叫微软

核心提示&#xff1a;真正的土豪通常有更重要的事做&#xff0c;比方说比尔盖茨。IT男跨界转行做安全套。预计是明年2015年推出上市。但是估计不能延续以前的品牌&#xff0c;叫“微软安全套”&#xff0c;这个要改。 凤凰卫视9月27日《笑逐言开》&#xff0c;以下为文字实录&a…

比尔盖茨为什么能成为世界首富?

说到比尔盖茨的财富&#xff0c;很多人可能首先想到的是比尔盖茨精明的投资&#xff0c;因为这些年他通过跟巴菲特学投资&#xff0c;光靠投资就带来了超过700亿美元的财富&#xff0c;而微软所带来的财富只占其总财富的1/8左右。 但我想说的是&#xff0c;投资确实给比尔盖茨带…

你见过比尔盖茨38年前写的MicrosoftBasic代码吗

你见过比尔盖茨38年前写的MicrosoftBasic代码吗 2016-11-15 06:07 编辑&#xff1a; suiling 分类&#xff1a;程序人生 来源&#xff1a;w3cschoolcn 1 2830 程序员比尔盖茨 招聘信息&#xff1a; iOS开发工程师移动APP研发工程师产品经理/Product ManagerUnity开发工程师…

比尔盖茨/UNIX之父/Donald Knuth/Dijkstra等全球IT大师的编程名言

这不是一个bug,这只是一个未列出来的特性。——匿名 ​​ ​ Dennis Ritchie

比尔·盖茨1978年写的古老程序曝光:IT人膜拜

官方网站 www.itilzj.com 官方文库: wenku.itilzj.com 比尔盖茨31岁&#xff0c;就成为世界首富。很多人好奇&#xff0c;作为世界第一大PC系统的创始人&#xff0c;抛弃世界首富的头衔&#xff0c;单单从程序员角度来讨论&#xff0c;比尔盖茨的代码水平如何&#xff1f; 其实…

微软创始人 比尔·盖茨

比尔盖茨 比尔盖茨&#xff08;Bill Gates&#xff09;&#xff0c;全名威廉亨利盖茨&#xff08;William Henry Gates&#xff0c;1955年10月28日&#xff0d;&#xff09;&#xff0c;美国微软公司的董事长。他与保罗艾伦一起创建了微软公司&#xff0c;曾任微软CEO和首席软件…

有钱真的能为所欲为,微软用75亿美元解决了比尔盖茨的“心头大患”

全世界只有3.14 % 的人关注了 数据与算法之美 2018年6月4日&#xff0c;微软在官方博客上宣布&#xff1a;以75 亿美元的价格收购了全球最大的开源代码托管平台GitHub。 谁也没想到&#xff0c;微软和开源这场长达几十年的战争&#xff0c;到最后双方竟然喜结连理了。 不过&…

比尔盖茨聘请投资高手,26年亏掉4300亿美金!

作者| Mr.K 整理| Emma 来源| 技术领导力(ID&#xff1a;jishulingdaoli) 大年初五&#xff0c;聊聊挣钱的话题&#xff0c;先从比尔盖茨的故事说起&#xff1a; 2020年末&#xff0c;比尔盖茨身价1072亿美金&#xff0c;创了历史新高。其中&#xff0c;他名下微软3%的股票市…

比尔盖茨离婚,平分8000亿! 用5张图看看微软的发展史

我是Allen&#xff0c;我的公众号是【CodeAllen】&#xff0c;程序员技术交流①群&#xff1a;736386324,转载请注明出处 大早上看新闻刷到比尔盖茨离婚了&#xff0c;两人会平分8000多亿财产&#xff0c;跟很多吃瓜群众不同&#xff0c;我感觉离婚没什么&#xff0c;不管是出于…

如何使用Java开发QQ机器人 方法二

使用Java开发QQ机器人- CQ & HTTP TO CQ 警告 此方法已经无效&#xff0c;可以看simple-robot框架 2.x的帖子&#xff1a;如何用Java写QQ机器人 v2.0。 使用酷Q平台下的HTTP TO CQ插件以及simple-robot核心标准库作为依赖。 此插件与框架的 简陋 简单介绍&#xff1a;文档处…

数据分析报告

很多人在写数据分析报告的时候&#xff0c;往往更关注如何将报告做的更美观&#xff0c;例如&#xff1a;做漂亮的可视化图表&#xff0c;做很炫的PPT等。但当别人看你做的数据分析报告的时候&#xff0c;往往更关注这个报告对他是否有价值&#xff1f;价值是什么&#xff1f;值…