芜湖音乐
通过VUE实时响应操作dom开发音乐播放器
1、定义CSS样式表,设计网页布局(略)
2、添加音乐搜索功能
使用网易云提供的API接口进行数据的交互。首先我们要实现的功能是回车搜索与点击搜索。
回车搜索功能绑定在input之中,而点击搜索功能则绑定在img上
然后我们在vue的实例中编写getMusicList函数获取歌曲列表
getMusicList: function () {//歌曲获取
var that = this
axios.get("https://autumnfish.cn/search?keywords=" + this.query)//网易云API
.then(function (response) {
that.musicList = response.data.result.songs//通过接口获取歌曲列表
//console.log(response)
}).catch(function (err) { })
},
然后通过v-for指令,获取列表中的各种数据,并渲染在对应的标签中
最后在input文本框中使用v-model绑定文本传入参数即可
3、点击播放功能
通过对应的API接口获取歌曲的url播放
在对应的img上绑定函数
并把url传入音乐播放器控件中
4、获取歌曲封面与用户评论功能
获取歌曲封面,通过对应的API获得封面的url,然后通过v-bind绑定src属性,显示图片
获取封面
v-bind属性
用户评论
用户评论同样是通过API接口获取用户评论列表,列表里包含头像、名称、评论内容等,渲染方式与歌曲列表的获取相同
API接口获取数据
使用v-for渲染用户评论
5、动画播放功能
动画播放功能通过音乐播放控件控制audio,使用audio中的play与pause事件控制动画的播放与暂停。
定义play与pause函数
通过isplaying控制动画的运动与停止,使用v-bind绑定属性,添加和删除动画的类,当类存在时CSS中的定义才可以执行
css动画
/* 旋转的动画 */
@keyframes Rotate {
from {
transform: rotateZ(0);
}
to {
transform: rotateZ(360deg);
}
}
/* 旋转的类名 */
.autoRotate {
animation-name: Rotate;
animation-iteration-count: infinite;
animation-play-state: paused;
animation-timing-function: linear;
animation-duration: 5s;
}
/* 是否正在播放 */
.player_con.playing .disc,
.player_con.playing .cover {
animation-play-state: running;
}
/* 播放杆 转回去 */
.player_con.playing .play_bar {
transform: rotate(20deg);
}
6、添加MV播放功能
使用网易云接口API接口获取MV的数据,同时设置MVshow为TRUE
通过绑定函数到img上,我们可以得到通过点击获取的数据
然后使用v-show指令绑定MVshow参数到我们的MV播放窗口,当MVshow时窗口显示,当!MVshow时窗口隐藏即可。
关闭MV功能,需要我们点击MV播放窗口以外的地方,我们称为遮罩层,此时点击遮罩层设置MVshow为false既可以关闭我们的MV播放器与歌曲的播放
总结
学习自:https://www.bilibili.com/video/BV12J411m7MG?p=36