总结一下Vue实战的网页音乐播放器
首先是设计出主体的整个框架
分为四个部分
最左边的歌曲列表，中间的唱片，最右边的热门评论显示以及下方的播放条
然后开始准备进行功能的实现
首先是需要导入Vue的依赖以及axios的js网络依赖库
<!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="/npm/vue/dist/vue.js"></script><!-- 官网提供的 axios 在线地址 --><script src="/axios/dist/axios.min.js"></script>
1.音乐搜索功能
进行音乐搜索，用户需要进行输入关键字
定义一个query变量来进行关键字的接收以及一个数组用于存放数据
data: {// 查询关键字query: "",// 歌曲数组musicList: [],}
编写查询歌曲方法：
// 歌曲搜索searchMusic: function() {var that = this;axios.get("/search?keywords=" + this.query).then(function(response) {// console.log(response);that.musicList = response.data.result.songs;console.log(response.data.result.songs);},function(err) {})},
使用get方式来获取，记得在编写完整的数据之前
先打印出返回的数据response，在里面查找一下搜索到的路径
比如我们需要的歌曲信息，就在response.data.result.songs这个地方
因此进行一个提取保存，然后传递给网页
<li v-for="item in musicList">
使用v-for进行一个循环，进行展示
2.歌曲播放
我们的歌曲利用的是网络上的资源，因此每一个歌曲都有一个歌曲id
每个id都对应着一个播放地址播放地址
因此，使用axios进行id+接口组合的网络请求，将返回的数据进行分析
歌曲的url在response.data.data[0].url里
注意在这里要设置一个that = this
因为this是会随着每次搜索点击而变动的，使用that来保存现在所需要的this
var that = this;// 获取歌曲地址axios.get("/song/url?id=" + musicId).then(function (response) {// console.log(response);// console.log(response.data.data[0].url);that.musicUrl = response.data.data[0].url;},function (err) {})
在前端网页上添加相应的触发方法
对应的歌曲名应该设计成动态的{{item.name}}
<a href="javascript:;" @click="playMusic(item.id)"></a><b>{{item.name}}</b>
歌曲的url以及获取，因此在网页上的audio里面进行绑定
<audio ref='audio' @play="play" @pause="pause" :src="musicUrl" controls autoplay loop class="myaudio"></audio>
使用:src="musicUrl"进行绑定歌曲源
3.歌曲专辑图片显示
每个歌曲都有一个专辑图片，图片的URL就在返回的数值里面
// 歌曲封面musicCover: "",//歌曲详情搜索axios.get("/song/detail?ids=" + musicId).then(function (response) {//console.log(response.data.songs[0].al.picUrl);that.musicCover = response.data.songs[0].al.picUrl;},function (err) {})
注释掉的console.log都是为了测试是否返回正确的值
确保返回正确后再设计函数进行处理
获取到图片的URL后在前端页面进行绑定
//使用v-bind进行绑定<img :src="musicCover" class="cover autoRotate" />
4.热门评论获取
同理，热门评论是在response.data.hotComments
通过接口加音乐id来获取所需要的数据组
//歌曲评论的获取axios.get("/comment/hot?type=0&id=" + musicId).then((function (response) {console.log(response.data.hotComments);that.hotConments = response.data.hotComments;}))
热门评论我们用//歌曲评论 hotConments:[],
数组来进行保存
然后在前端使用循环语句进行返回
每个热门语句都对应着评论者和头像
因此同样进行筛选返回
<!-- 评论容器 --><div class="comment_wrapper"><h5 class='title'>热门留言</h5><div class='comment_list'><dl v-for="item in hotConments"><dt><img :src="item.user.avatarUrl" alt=""></dt><dd class="name">{{item.nickname }}</dd><dd class="detail">{{item.content }}</dd></dl></div><img src="images/line.png" class="right_line"></div></div>
使用item.nickname来实现动态名称和头像显示
5.仿真胶片播放动画
我们希望当播放的时候，能有一个胶片旋转的动画进行播放
来增加更多的趣味性和真实性
首先就需要定义播放的状态，来判断是否在播放
逻辑很简单
//动画播放状态isPlaying:false,play:function () {// console.log("play");this.isPlaying = true;},pause:function () {// console.log("pause");this.isPlaying = false;},
定义一个变量，用于记录播放状态，初始设计为false
在前端的audio播放按钮进行绑定
每次点击都进行一个状态的切换（上面的代码里面已经写出来了）
然后在黑胶唱片那个div进行一个v-bind绑定
<div class="player_con" :class="{playing:isPlaying}">
当isplaying为真的时候，class名变换
相应的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;}
6.mv的播放
除了普通的音乐播放外，还可以进行mv的播放
每个歌曲都对应着一个mvid，每个mvid又对应着相应的mvURL
我们通过解析出mv的URL来实现视频播放
但并不是每一个歌曲都具有对应的mv
因此首先应该进行一个筛选
在前端歌曲列表中
<ul class="song_list"><li v-for="item in musicList"><!-- 这个a标签表示的是左侧列表里面的播放按钮--><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></ul>
使用v-if来进行判断，当具有mvid时，显示mv播放按钮，否则不显示
接下来编写播放mv功能
核心思想就是提取出mv的URL，然后传递到页面上进行一个绑定
//播放MVplayMV:function (mvid) {var that = this;axios.get("/mv/url?id=" + mvid).then(function (response) {that.isShow = true;that.mvUrl = response.data.data.url;},function (err) {})},<video :src="mvUrl" controls="controls"></video>
当然mv能打开也要能关闭
我们设计一个蒙版mask，在点击蒙版的时候进行隐藏
因此要设计一个状态变量来进行记录
<div class="video_con" v-show="isShow" style="display: none;"><video :src="mvUrl" controls="controls"></video><div class="mask" @click="hide"></div></div>//隐藏MVhide:function () {this.isShow = false;}
至此，音乐播放器大功告成！
