悦听player音乐播放器

悦听player音乐播放器：

悦听player
1.歌曲搜索 2.歌曲播放 3.歌曲封面 4.歌曲评论 5.播放动画 6.mv播放

音乐查询：

根据关键字查询你想听的歌
1.按下回车进行歌曲搜索(v-on .enter)
2.查询数据(axios 接口 v-model)
3.渲染数据(v-for 数组 that)

歌曲搜索接口：

请求地址：
https://autumnfish.cn/search
请求方法：get
请求参数：keywords（查询的关键字）
响应内容：歌曲搜索结果

在main.js中：

var app = new Vue({
    el:"#player",
    // 通过审查元素发现id为player的标签包裹着整个播放器
    data:{
        query:"",
        // 查询存储的内容
        musicList:[],
        // 查询存储的歌曲列表
    },
    methods:{
        searchMusic:function(){
            var that = this;
            axios.get("https://autumnfish.cn/search?keywords="+this.query).then(function(response){
                // console.log(response);
                // console.log(response.data.result.songs);
                that.musicList=response.data.result.songs;
            },function(err){ })
        }
    }
})

html结构：
通过审查元素的方法找到class="search_bar"的div标签

<!-- 搜索歌曲 -->
<input type="text" autocomplete="off" v-model="query" @keyup.enter="searchMusic">
// 使用v-model指令双向绑定数据，v-on结合事件修饰符.enter方法绑定事件搜索的逻辑

再找到class=“song_list” 的ul标签

 <li v-for="item in musicList"><a href="javascript:;"></a><b>{{ item.name }}</b><span><i></i></span></li>
 // 在下面的li标签中加入v-for指令，使用v-text指令利用点语法渲染出歌曲的名字

总结：
1.服务器返回的数据比较复杂时，获取的时候要注意层级结构
2.通过审查元素快速定位到需要操纵的元素

音乐播放：

查询出来的歌点击播放即可播放
设置歌曲地址的本质就是设置src属性，属性的设置使用v-bind指令；同时呢，在data中增加地址的属性，每次查询完之后把服务器返回的结果设置给data中的属性，绑定的结果呢会同步更新
1.点击播放(v-on 自定义参数)
2.歌曲地址获取（接口 歌曲id）
3.歌曲地址设置，结合自定义参数简化编码

歌曲url获取
1.请求地址：https://autumnfish.cn
2.请求方法：get
3.请求参数：id（歌曲id）
4.响应内容：歌曲的url地址

main.js中：
在methods中加入playMusic方法：

playMusic:function(musicId){
// 需要传输歌曲id所以设置一个新的形参musicId
    var that = this;
    axios.get("https://autumnfish.cn/song/url?id="+musicId).then(function(response){
        that.musicUrl = response.data.data[0].url;
        // 检测完id 可以用之后，就继续完善playMusic方法，使用axios来调接口
        // response.data.data[0].url  来获取具体某首音乐的播放地址；再在data中添加一个musicUrl来存储音乐的地址
    },function(){})
}

html结构中：

<ul class="song_list">
    <!-- 点击放歌 -->
    <li v-for="item in musicList"><a href="javascript:;" @click="playMusic(item.id)"></a><b>{{ item.name }}</b><span><i></i></span>
    // 然后在html页面中找到播放的那个标签，也就是li标签中的a标签，在其中加入v-on指令，写入@click="playMusic(item.id)
    </li>
</ul>

此时点击不同的歌曲的播放键，就会有不同的id显示

总结：
1.歌曲id依赖歌曲搜索的结果，对于不用的数据也需要关注

歌曲封面:

在切换歌曲的同时呢，歌曲的封面也能同步切换，不仅能听歌，还能看到精美的歌曲封面

点击审查元素，发现控制歌曲封面的div是“player_con”
其中默认的封面图片是cover.png，更改封面的本质就是更改了src属性
然后依旧发现封面是从接口中调用实现的

步骤：
1.点击播放 （在播放音乐方法内部增加获取对应歌曲封面的逻辑，同时把歌曲的id 传递给服务器）
2.歌曲封面获取 （在获取到封面的属性之后呢设置给src属性）
3.歌曲封面设置（v-bind进行绑定）

歌曲详情获取：
1.请求地址：
https://autumnfish.cn/song/detail
2.请求方法：get
3.请求参数：ids（歌曲id）
4.响应内容：歌曲详情，包含封面信息

main.js中：
在methods方法中的歌曲播放方法中加入 歌曲详情获取
在data中加入变量musicCover为歌曲封面图片

axios.get("https://autumnfish.cn/song/detail?ids="+musicId).then(function(response){
    that.musicCover = response.data.songs[0].al.picUrl;
    // 保存封面的地址
},function(err){})
// 利用axios的get方法，通过接口地址根据歌曲的id获取歌曲的封面在线图片的网址

html结构：
最后在html中通过审查元素找到src：

 <!-- 歌曲信息容器 -->
 <div class="player_con">
     <img src="images/player_bar.png" class="play_bar">
     <!-- 黑胶碟片-->
     <img src="images/disc.png" class="disc autoRotate">
     <img :src="musicCover" class="cover autoRotate">
     // ./images/cover.png的改为变量musicCover，同时将src 改为v-bind形式，即其缩写形式“:src”
 </div>

总结：
1.在vue中通过v-bind操纵属性（src 属性）
2.对于本地无法获取的数据，基本都会有对应的接口

歌曲评论：

在点击播放的同时，同步的显示这首歌的热门评论
1.点击播放：评论的获取呢和音乐的播放，专辑封面图片的获取是同步进行的，所以继续在音乐播放的这个方法后面呢增加逻辑
2.歌曲评论获取：（接口 歌曲id）
3.歌曲评论渲染：歌曲评论渲染（v-for）；拿到了之后通过v-for指令在页面上渲染一个列表结构

热门评论的获取的接口的调用：
1.请求地址:https://autumnfish.cn/comment/hot?type=0
2.请求方法：get
3.请求参数：id（歌曲id，type固定为0）
4.响应内容：歌曲的热门评论

main.js中：
在playMusic函数中加入axios方法获取歌曲热门评论

// 歌曲评论获取
axios.get("https://autumnfish.cn/comment/hot?type=0&id="+musicId).then(function(response){
    // get 方法中不同于之前在后面写入“?=”再+musicId，这里呢在type=0后拼接上一个&id=
    that.hotComments = response.data.hotComments;
},function(err){})

html结构：
通过审查元素发现需要改的标签呢为dl标签

 <!-- 歌曲容器 -->
 <div class="comment_wrapper" ref='comment_wrapper'>
     <h5 class="title">热门留言</h5>
     <div class='comment_list'>
         <dl v-for="item in hotComments">
             <dt><img :src="item.user.avatarUrl" alt=""></dt>
             // 用户头像
             <dd class="name">{{ item.user.nickname }}</dd>
             // 用户名字
             <dd class="detail">
             // 用户评论信息
                 {{ item.content }}
             </dd>
         </dl>
     </div>
     //在后面呢加入v-for指令，写入item in hotComments；
     //并且根据用户头像 :src="item.user.avatarUrl"，用户名{{ item.user.nickname }}，用户评论{{ item.content }}来渲染在页面上
     <img src="images/line.png" class="right_line">
 </div>

总结：
点击播放的同时。歌曲播放、专辑封面显示和热门评论显示同时显示

播放动画：

在播放时碟片不会动，应该在播放时碟片旋转，暂停时碟片固定不动

核心：增删一个类；播放和暂停有自己各自一个事件，只需在各自的事件中增删类名就好了

在审查元素中发现，播放时在div中类名class会加入playing，暂停时class中就没有playing
步骤：
1.监听音乐播放 （v-on play）
2.监听音乐暂停 （v-on pause）
3.操纵类名（v-bind 对象）；两种状态：有/无–>data中加入一个布尔值
不需要调用接口，操纵类名即可，类名切换需要在事件中完成，通过事件知道是播放还是暂停，需要用到v-on指令

main.js中：
在methods加入两个新的方法，第一个为play方法，第二个为pause方法

        play:function(){
            console.log("play");
            this.isPlaying = true;
        },
        pause:function(){
            console.log("pause");
            this.isPlaying = false;
        }
        // 发现点击“播放”和“暂停”的话，在后台都会显示“play”和“pause”
        // 在play和pause两个function中，加入逻辑this.isPlaying = true和this.isPlaying = false

html结构中：
找到audio标签

<div class="audio_con">
    <audio ref='audio' @play="play" @pause="pause" :src="musicUrl" controls autoplay loop class="myaudio"></audio>
    // 添加v-on指令，缩写为@：@play="play" @pause="pause" 
</div>

再找到class=player_con的div标签

<!-- 歌曲信息容器 -->
<div class="player_con" :class="{playing:isPlaying}">
// 写入 :class="{playing:isPlaying}"
// 由css中提前写入的判断条件来确定；playing 是预先写好的转的css动画格式，对象形式t/f来选择是否触发
    <img src="images/player_bar.png" class="play_bar">
    <!-- 黑胶碟片-->
    <img src="images/disc.png" class="disc autoRotate">
    <img :src="musicCover" class="cover autoRotate">
</div>

播放mv:

通过审查元素发现播放mv 的标签为video标签，会发现src标签内的为播放mv的地址（即在线视频地址），更换不同的mv的本质就是设置src的地址为一个新值
显示和隐藏的（点击周围的黑色发现一个div中的style标签变了）本质就是改变该div的样式（通过v-show），通过接口获取mv的地址；mv图标有的有有的没有，因为不同的歌有或没有mvid，显示或者不显示依赖于mvid

步骤：
1.mv图标显示（v-if，因为不用频繁切换显示）
2.mv地址获取（v-on指令 获取接口）
3.遮罩层（v-show v-on）
4.mv地址设置（v-bind）

mv地址获取
请求地址：https://autumnfish.cn/mv/url
请求方法：get
请求参数：id（mvid，为0则说明没有mv）
响应内容：mv的地址

任意搜索一个人的歌，根据显示的列表，查找每一首歌的mvid，若为0则表示为无mv，若不为0则表示有mv可以播放；在审查元素中发现，mv的图标在li标签下的span标签。在span标签后写入v-if=“item.mvid!=0”
html结构中：

<ul class="song_list">
    <!-- 点击放歌 -->
    <li v-for="item in musicList"><a href="javascript:;" @click="playMusic(item.id)"></a><b>{{ item.name }}</b>
    <span v-if="item.mvid!=0" @click="playMV(item.mvid)"><i></i></span></li>
    // 找到span标签，后面写入v-on指令和v-if指令，绑定为点击事件
</ul>

点击mv图标要播放mv，播放mv的本质就是通过接口获取mv的地址，设置给对应地址的标签，同时呢弹出播放的界面。

继续在main.js里面：
写一个新的方法“播放mv”playMv方法

// 播放mv
playMV:function(mvid){
    var that = this;
    axios.get("https://autumnfish.cn/mv/url?id="+mvid).then(function(response){
        // 在axios中的get方法里写入接口+"?id"（但此id为mvid，书写为id）后面写好response，
		// 根据审查元素发现response.data.data.url为mv的在线播放地址
        that.isShow = true;
        that.mvUrl = response.data.data.url;
    },function(err){})
},
// 隐藏遮罩层
hide:function(){
    this.isShow = false;
},

获取完mv的地址后，需要做出弹出遮罩层，然后弹出播放mv的界面
通过审查元素找到mv的div标签为class=“video_con”：

<div class="video_con" v-show ="isShow" style="display:none;">
    <video :src="mvUrl" controls="controls"></video>
    // 具体的播放标签为controls
    // 在vedio标签中加入:src="mvUrl" 
<div class="mask" @click="hide"></div>
</div>

回到main.js中，添加两个变量，分别为
// 遮罩层的显示 isShow:false,
// mv地址 mvUrl:"",

总结：
1.不同的接口需要的数据是不同的，文档的阅读需要仔细
2.页面结构复杂之后，通过审查元素的方法去快速定位相关元素
3.响应的元素需要在data中定义，无论是本地应用还是网络应用