用Vue快速制作一个简单的音乐播放器

代码地址:
https://github.com/Tree-Traveler/MusicPlayer

https://gitee.com/tree-traveler/music-player

展示:
在这里插入图片描述
在这里插入图片描述
技术栈:
html/css/js

axios

Vue

功能:
一.歌曲搜索:

  1. 按下回车(v-on .enter)
  2. 查询数据(axios 接口 v-model )
  3. 渲染数据(v-for 数组 that)

二.歌曲播放

  1. 点击播放(v-on 自定义参数)
  2. 歌曲地址获取(接口 歌曲id)
  3. 歌曲地址设置(v-bind)

三.歌曲封面加载

  1. 点击播放(增加逻辑)
  2. 歌曲封面获取(接口 歌曲id)
  3. 歌曲封面设置(v-bind)

四.歌曲评论

  1. 点击播放(增加逻辑)
  2. 歌曲评论获取(接口 歌曲id)
  3. 歌曲评论渲染(v-for)

五.歌曲封面动画

  1. 监听音乐播放(v-on play)
  2. 监听音乐暂停(v-on pause)
  3. 操纵类名(v-bind 对象)

六.MV播放

  1. mv图标显示(v-if)
  2. mv地址获取(接口 mvid)
  3. 遮罩层(v-show v-on)
    mv播放6
  4. mv地址设置(v-bind)

接口地址:

 1:歌曲搜索接口
    请求地址:https://autumnfish.cn/search
    请求方法:get
    请求参数:ke
  • 4
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值