打造属于自己的音乐播放

最新推荐文章于 2024-04-24 08:30:00 发布

柚子·小哥哥

最新推荐文章于 2024-04-24 08:30:00 发布

阅读量324

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_46174785/article/details/105679960

版权

vue 专栏收录该内容

32 篇文章 1 订阅

订阅专栏

打造属于自己的音乐播放器：

html 代码

<!DOCTYPE html>
<html lang="zn">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>打造属于自己的音乐播放器</title>
        <link rel="stylesheet" href="css/index.css">
        <link rel="shortcut icon" type="text/css" href="http://ganto.xyz/images/favicon.ico"/>
    </head>
    <body>
        <div id="box">
            <div id="app">
                <div class="header">
                    <span class="ntm"><a style="color: white;text-decoration: none;" href="#">Music</a></span>
                    <div class="search">
                        <input type="text" placeholder="请输入歌手名字" class="text" v-model="city" @keyup.enter="getjoke">
                        <input type="button" class="button" value="搜索" @click="getjoke" >
                    </div>
                    <span class="tm" title="点击隐藏"><i>右上角展开</i>×</span>
                </div>
                <ul>
                    <li class="li" :title="a.name + '-' + a.artists[0].name" v-for="(a,index) in arr" @click="fun(a.id,a.name,a.artists[0].name)">{{a.name}}-{{a.artists[0].name}}</li>
                </ul>
                <div class="section">
                    <div class="nar">
                        <span class="name">{{ name }}</span>
                        <img class="img" :src="imgUrl" alt="">
                    </div>
                    <div class="lyric">
                        <span v-for="lrc in lyric">{{ lrc.toString().substring(10,)  }}</br></span>
                    </div>
                </div>
                <audio autoplay controls loop :src="url"></audio>
            </div>
            <span class="kai" title="展开">√</span>
        </div>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <!-- 开发环境版本，包含了有帮助的命令行警告 -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="js/index.js"></script>
        <script>
            $(function(){
                $(".kai").hide();
                $(".tm i").hide();
                $(".tm").click(function(){
                    $("#app").slideUp(100);
                    $(".kai").fadeIn();
                });
                $(".tm").hover(function(){
                    $(".tm i").stop().slideDown();
                },function(){
                    $(".tm i").stop().slideUp();
                })
                $(".kai").click(function(){
                    $("#app").slideDown(100);
                    $(".kai").fadeOut();
                });
                var app = $("#app"),
                    header = $(".header");
                var disX,
                    disY;
                header.mousedown(function(e){
                    disX = e.pageX - parseInt(app.offset().left);
                    disY = e.pageY - parseInt(app.offset().top);
                    document.onmousemove = function(e){
                        var event = e || window.event;
                        app.css({"left":e.pageX - disX + "px", "top":e.pageY - disY + "px"});
                    }
                    document.onmouseup = function(){
                        document.onmousemove = null;
                    }
                    
                })
                $(".github").mousedown(function(e){
                    if(e.button == 2){
                        $(this).fadeOut();
                    }
                })
            })
        </script>
    </body>
</html>

js 代码

/**
 * 1. 歌曲搜索接口，
 *    请求地址是： https://autumnfish.cn/Search
 *    请求方式是：get，
 *    请求的参数是keywords(查询关键字)
 *    响应内容，歌曲搜索结果
 * 2. 歌曲url获取接口
 *    请求地址是"https://autumnfish.cn/song/url"
 *    请求方法是get，
 *    请求参数是id
 *    响应内容：歌曲url地址
 **/
var app = new Vue({
    el:"#app",
    data:{
       city:"",
       arr:[],
       url:"",
       imgUrl:"",
       name:"",
       lyric:""
    },
    methods:{
        getjoke:function(){
            var that = this;
            axios.get("https://autumnfish.cn/search?keywords="+this.city).then(function(response){
                that.arr = response.data.result.songs;
            }).catch(function(error){
                console.log(error);
            });
        },
        fun:function(i,a,b){
            this.name = a+ "-" +b;
            var that = this;
            
            axios.get("https://autumnfish.cn/song/url?id="+i).then(function(response){
                that.url = response.data.data[0].url;
            }).catch(function(error){
                console.log(error);
            })
            axios.get("https://autumnfish.cn/song/detail?ids="+i).then(function(response){
                that.imgUrl = response.data.songs[0].al.picUrl;
                var box = document.getElementById("box");
                box.style.backgroundImage = "url("+that.imgUrl+")";
            }).catch(function(error){
                console.log(error);
            });
            axios.get("https://autumnfish.cn/lyric?id="+i).then(function(response){
                that.lyric = response.data.lrc.lyric.split("\n");
            }).catch(function(error){
                console.log(error);
            });
        },
    }
});

css 样式

*{
    margin: 0;
    padding: 0;
}
body{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
}
#box{
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    transition: all 1s;
    display: flex;
    justify-content: center;
    align-items: center;
}
#app{
    width: 800px;
    height: 500px;
    max-width: 800px;
    max-height: 500px;
    box-shadow: 0px 0px 100px black;
    position: absolute;
    border-radius: 5px;
    overflow: hidden;
}
.header{
    width: 100%;
    height: 30px;
    background: #2ab2ab;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.header img{
    width: 20px;
    height: 20px;
    cursor: pointer;
}
.header span{
    color: white;
    font-weight: 900;
    cursor: pointer;
}
.search{
    border-radius: 20px;
    background-color: rgba(255, 255, 255, .5);
    height: 30px;
}
.search .text{
    height: 30px;
    border: 0;
    background: rgba(0, 0, 0, 0);
    outline: none;
    margin-left: 10px;
    font-size: 12px;
    color: white;
}
.search .button{
    display: inline-block;
    width: 40px;
    height: 30px;
    border: 0;
    cursor: pointer;
    background: rgba(0, 0, 0, 0);
    transition: all 1s;
    color: white;
    border-radius: 20px;
    outline: none;
}
.search .button:hover{
    color: white;
    background-color: royalblue;
}
audio{
    width: 100%;
    height: 40px;
    position: absolute;
    bottom: 0;
    background-color: #eeeeee;
    outline: none;
    z-index: 9;
}
ul{
    list-style: none;
    width: 200px;
    height: 430px;
    max-height: 430px;
    background-color: royalblue;
    overflow-y: auto;
    position: relative;
    z-index: 1;
}
ul::-webkit-scrollbar{
    display: none;
}
ul li{
    height: 17px;
    cursor: pointer;
    padding: 8px 10px;
    margin: 10px;
    border-radius: 4px;
    color: white;
    text-align: right;
    transition: all 1s;
    font-size: 13px;

    white-space: nowrap;  
    text-overflow:ellipsis;
    overflow:hidden;
}
ul li:hover{
    background: #2ab2ab;
}
li:nth-of-type(odd) {
    background: rgba(255, 255, 255, .3);
}
li:nth-of-type(even) {
    background: rgba(255, 255, 255, .1);
}
.section{
    width: 600px;
    height: 430px;
    background: royalblue;
    position: absolute;
    right: 0;
    top: 30px;
    overflow: hidden;
    /* display: flex;
    justify-content: center; */
}
.section .nar{
    width: 390px;
    position: absolute;
    top: 15px;
    text-align: center;
}
.section img{
    width: 150px;
    height: 150px;
    border-radius: 4px;
}

.section .name{
    display: block;
    color: wheat;
    z-index: 99;
    font-weight: 900;
    text-shadow: 2px 2px 5px wheat;
    padding: 20px;
}

.section .lyric{
    width: 180px;
    height: 400px;
    position: absolute;
    right: 0;
    padding: 0 10px;
    font-size: 12px;
    color: wheat;
    overflow-y: auto;
    margin: 15px;
}
.section .lyric::-webkit-scrollbar{
    display: none;
}
.section .lyric span{
    display: block;
    margin: 4px 0;

}
.kai{
    display: inline-block;
    width: 30px;
    height: 30px;
    position: fixed;
    border-radius: 50%;
    top: 10px;
    right: 10px;
    box-sizing: border-box;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
    font-weight: 900;
    font-family: 幼圆;
    color: white;
    background-color: #66eeaa;
}
.kai:hover{
    box-shadow: 0 0 10px rgba(0,0,0,.5) inset;
}
.tm{
    font-size: 20px;
    font-weight: 900;
    font-family: 幼圆;
    color: white;
    position: relative;
}
.tm i{
    display: inline-block;
    width: 80px;
    height: 20px;
    font-style: normal;
    font-size: 12px;
    position: absolute;
    bottom: 0;
    left: -80px;
    text-align: center;
    line-height: 20px;
}
.github{
    position: absolute;
    bottom: 0;
    right: 0;
}

效果图

在这里插入图片描述

注释：:（样式不太好看）

柚子·小哥哥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
打造属于自己的音乐播放

打造属于自己的音乐播放器html 代码<!DOCTYPE html><html lang="zn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"...
复制链接

扫一扫