天天动听音乐播放器,最好用的音乐播放器

让我们来总结一下Vue实战的网络音乐播放器

首先，是设计整个主体框架

分为四个部分

最左边的歌曲列表、中间的唱片、最右边的热门评论的显示、以及下面的播放栏

然后，开始准备实现功能

首先，需要部署Vue依赖项和axios网络依赖项库

！ -开发环境版本，包含有用的命令行警告--- script src=' https://cdn.jsdelivr.net/NPM/vue/dist/vue.js '/script！ -官方网站提供的axios在线地址--- script src=' https://un pkg.com/axios/dist/axios.min.js '/script 3358 www.Sina.com

进行音乐检索时，用户需要输入关键词

定义接收关键字的query变量和存储数据的数组

data: { //查询关键字query: '，//歌曲数组musicList: []，}创建查询歌曲方法：

//歌曲来自searchMusic: function () { var that=this； axios.get (https://autumn fish.cn/search？ keywords=' this.query (.then (function (response ) )/console.log ) response )； that.music list=response.data.result.songs； console.log (response.data.result.songs )； }，function(err ) }通过get方式获取，在制作完整的数据之前记住

打印返回的数据并响应，疯狂的汉堡会寻找搜索到的路径

例如，我们需要的歌曲信息位于response.data.result.songs

在那里进行提取保存，传递给网页

li v-for='item in musicList '使用v-for进行循环展示

1.音乐搜索功能

因为我们的歌曲利用了互联网上的资源，所以每首歌曲都有歌曲id

各id对应着再现地址的再现地址

为此，使用axios进行身份接口对的网络请求，并分析返回的数据

的url位于response.data.data[0].url中

请注意在此设定that=this

由于this在每次搜索单击时都会发生变化，因此使用that保存当前所需的this

var that=this； //歌曲地址axios.get (获取https://autumn fish.cn/song/URL )？ id=' musicId ).then(function(response ) )/console.log (response )； //console.log (response.data.data [0].URL )； that.music URL=response.data.data [0].URL； }，function(err ) )在前页面中添加适当的触发方法

相应的歌曲名称必须设计为动态{{item.name}}

a href='javascript:' @click='playmusic(item.id ) )/ab ) {item.name}/b绑定到网页上的audio以获取歌曲的url

audio ref=' audio ' @ play=' play ' @ pause=' pause ' : src=' music URL ' controlsautoplayloopclass=' my audio '/a

2.歌曲播放

每首曲子都有相册的图像，图像的URL位于返回的数值中

//歌曲覆盖musicCover: '，//歌曲详情请访问axios.get (https://autumn fish.cn/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("https://autumnfish.cn/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 rel="external nofollow" 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，然后传递到页面上进行一个绑定

//播放MV playMV:function (mvid) { var that = this; axios.get("https://autumnfish.cn/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>//隐藏MV hide:function () { this.isShow = false; }

至此，音乐播放器大功告成！