1.音乐播放器案例
歌曲搜索接口：
- 请求地址：autumnfish.cn/search
- 请求方式：get
- 请求参数：keywords
- 响应内容：歌曲搜索结果
2. 开始操作啦！
2.1 第一步：先写一个简易的播放器界面
header部分包含了播放器名称，搜索框，以及搜索按钮。 main部分包含了粉红色区域歌曲列表，中间灰色区域播放器部分以及右侧评论部分。
2.2 第二步，音乐查询，并渲染到左侧歌曲列表中
- 创建Vue，并挂载到这个播放器。
- 创建数据query,musicList。
- 创建方法searchMusic。
- 将query用v-model指令和searchMusic方法通过v-on指令绑定给搜索框。
<input type="text" v-model="query" @keyup.enter="searchMusic"> 复制代码
- 将musicList用v-for指令绑定给我们的列表。
<li v-for=" item in musicList"><b>{{item.name}}</b></li> 复制代码
为什么这里是item.name呢？
首先我们我们通过axios库的get方法请求成功后得到的数据应该是这样的： 我们搜索“学猫叫”然后在浏览器中打印结果。
我们可以看到这个歌曲信息存储在data属性下面的result属性下面的songs属性里的这个数组中，于是乎我们把这个数组返回给我们musicList，此时musicList存储的就是这个数组，我们列表渲染的应该是歌曲名字，故取数组中每个元素的name属性。 看！歌曲名字已经渲染到列表上啦！
2.3 如何播放歌曲？
歌曲的请求地址：autumnfish.cn/song/url
请求方法：get
响应参数：id
响应内容：歌曲的url地址
获取ID
<li v-for=" item in musicList"> <a href="javascript:;" @click="playMusic(item.id)">播放</a><b>{{item.name}}</b> </li> //这里的item.id作为参数传递到playMusic方法，然后通过该参数获取歌曲地址 复制代码
获取歌曲地址
playMusic: function (musicId) { console.log(musicId); axios.get("https://autumnfish.cn/song/url?id=" + musicId) .then(function (response) { console.log(response.data.data[0].url); }, function (err) { }) 复制代码
将获取的歌曲地址添加到audio标签
这里需要musicUrl来存储地址，
在data中添加。
data: { query: "", musicList: [], musicUrl: "" }, 复制代码
接下来通过v-bind指令绑定到audio的属性。
<audio :src="musicUrl" controls="controls" autoplay="autoplay" loop="loop" class="myaudio"></audio> 复制代码
好啦，播放歌曲功能现在已经实现了。
总结：歌曲id依赖歌曲搜索的结果，对于不用的数据也需要关注。
2.4 歌曲封面获取
请求地址:https://autumnfish.cn/song/detail 请求方法:get 请求参数:ids(歌曲id) 响应内容:歌曲详情(包括封面信息) 复制代码
增加歌曲详情获取方法 我们先在数据中创建一个变量imgUrl，然后调用axios请求库
axios.get("https://autumnfish.cn/song/detail?ids=" + musicId) .then(function (response) { that.imgUrl = response.data.songs[0].al.picUrl }, function (err) { }) 复制代码
接下来把imgUrl的值绑定给封面元素的属性
这样我们就可以实时获取到歌曲的封面
2.5 歌曲评论获取
请求地址:https://autumnfish.cn/comment/hot?type=0 请求方法:get 请求参数:id(歌曲id,地址中的type固定为0) 响应内容:歌曲的热门评论 复制代码
首先在数据中创建hotComments空数组，然后调用axios请求库
axios.get("https://autumnfish.cn/comment/hot?type=0&id=" + musicId) .then(function (response) { that.hotComments = response.data.hotComments; console.log(response.data.hotComments) }, function (err) { }) 复制代码
然后通过v-for指令1绑定给这个模块
**最后我们在把这个播放器美化以下，一起来看看效果吧！ **
这个控制唱片旋转的功能通过给audio标签的play事件在音频播放时触发。
作者：Cvgod
链接：https://juejin.cn/post/6954323849919856648
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
