步骤：

歌曲搜索

歌曲搜索接口
●请求地址:
https://autumnfish.cn/search●请求方法:get
·请求参数: keywords(查询的关键字)响应内容:歌曲搜索结果

服务器返回的数据比较复杂时，获取的时候需要注意层级结构

通过审查元素快速定位到需要操纵的元素

歌曲播放

歌曲url获取
●请求地址:
https://autumnfish.cn/song/url·请求方法:get
·请求参数:id(歌曲id)·响应内容:歌曲的url地址

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

歌曲封面

歌曲详情获取
·请求地址:
https://autumnfish.cn/song/detail·请求方法:get
·请求参数:ids(歌曲id)
响应内容︰歌曲详情，包含封面信息

在vue中通过v-bind操纵属性
本地无法获取的数据，基本都会有对应的接口

歌曲评论

热门评论获取
请求地址:
https://autumnfish.cn/comment/hotpe=o请求方法:get
请求参数:id(歌曲id,type固定为0)响应内容:歌曲的热门评论

在vue中通过v-for生成列表

播放动画

audio标签的play事件会在音频播放的时候触发audio标签的pause事件会在音频暂停的时候触发
通过对象的方式设置类名，类名生效与否取决于后面值的真假

mv播放

mv地址获取
·请求地址:
https://autumnfish.cn/mv/url请求方法: get
请求参数:id (mvid，为o说明没有mv)响应内容:mv的地址

实例：