VUE学习日记——芜湖音乐

芜湖音乐
通过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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值