vue 网络应用----音乐播放器

1.获取接口方法

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

2:歌曲url获取接口
请求地址:https://autumnfish.cn/song/url
请求方法:get
请求参数:id(歌曲id)
响应内容:歌曲url地址
3.歌曲详情获取
请求地址:https://autumnfish.cn/song/detail
请求方法:get
请求参数:ids(歌曲id)
响应内容:歌曲详情(包括封面信息)
4.热门评论获取
请求地址:https://autumnfish.cn/comment/hot?type=0
请求方法:get
请求参数:id(歌曲id,地址中的type固定为0)
响应内容:歌曲的热门评论
5.mv地址获取
请求地址:https://autumnfish.cn/mv/url
请求方法:get
请求参数:id(mvid,为0表示没有mv)
响应内容:mv的地址
 

2.内容

从上到下，分别是搜索栏、主体部分、音频进度条，主体部分从左到右分别是音乐列表、磁盘动画、留言列表。
主要功能有：
1.歌曲搜索：搜索栏中输入关键字，按下回车或者鼠标点击输入框后面的放大镜图标，返回给左侧音乐列表所有相关的歌曲名称。
2.歌曲播放：点击音乐列表中每条音乐前面的红色播放图标实现播放功能，下方进度条显示当前播放进度。
3.查看热评：歌曲播放的同时，右侧评论列表展示所有热评。
4.歌曲播放时的动画：歌曲播放的同时，磁盘中央封面改成相对应的专辑封面，上面的磁头旋转到磁盘上，歌曲暂停后，磁头再旋转回去。
5.mv播放：点击音乐列表中右侧的小电视图标，展现出四周由遮罩层包含的mv界面。
6.mv暂停：点击四周遮罩层，mv暂停，回到主界面。