美文网首页JAVASCRIPT前端Vue专辑Vue
Vue 2.0 华丽的音乐搜索播放 Demo

Vue 2.0 华丽的音乐搜索播放 Demo

作者: 2a0e839d6446 | 来源:发表于2016-11-16 16:31 被阅读3182次

空闲时间一边学Vue一边写了个音乐搜索播放的小网页(手机版),资源来自QQ音乐

先上链接

查看在线Demo(在大屏手机上效果最好)http://sioxas.github.io/
Github地址https://github.com/Sioxas/vue-music/
喜欢的话加个star

扫一扫体验

实现的功能

  1. 音乐播放、暂停、上一曲、下一曲
  2. 播放列表、添加到播放列表、做为下一首播放
  3. 搜索单曲、歌手、专辑、MV
  4. 查看歌手页面、专辑页面
  5. 热门搜索
  6. 搜索历史记录
  7. 排行榜
  8. 切换播放模式
  9. 歌词

未实现的功能

  • 我喜欢
  • 查看MV
  • 下载

截图

推荐

推荐推荐

排行榜

排行榜排行榜
榜单榜单

搜索

热门搜索和历史记录热门搜索和历史记录
搜索结果搜索结果
搜索结果搜索结果

播放页面

播放页面播放页面

专辑页面

专辑页面专辑页面

歌手页面

歌手页面歌手页面
歌手页面歌手页面

播放列表

播放列表播放列表

相关文章

网友评论

  • 我爱吃炸鸡:效果不错, 我也做了一个, vue + electron 做了个网易云音乐客户端。https://github.com/eugeneCN/vue-electron-music
    2a0e839d6446:@我爱吃炸鸡 喜欢(❤ ω ❤)
  • 南国世相:请问这里面除了用到vue,有用到JSZIP吗?还有哪些啊?歌曲的推荐你使用的是方法啊?
  • 一个小小的蚂蚁:可以写个教程吗?好想跟着学习一下
    2a0e839d6446::joy: 我感觉教程不太好写
  • Mr_Treasure:请问,整体的页面切换是怎么实现的呢?能大概描述下吗?
    2a0e839d6446:有些是用路由的动画实现的,有些是用v-show/v-if + 动画实现的
  • 我们的梦sky:怎么去找qq音乐的api接口信息,不知道去哪找 :hushed:
    2a0e839d6446:@我们的梦sky 我审查的QQ音乐网页版
  • vuevuevue:不错不错,请问demo里面qq音乐的接口要怎么调用?我用你的接口地址请求不到数据,一直报错Uncaught SyntaxError: Unexpected token
    2a0e839d6446:@vuevuevue 有些api是要加参数的,如果参数不对会有错误的返回结果,然后报错......
  • 83dd9be94798:太棒了 。
    83dd9be94798:@666623333哈哈哈哈
    已慕名前去star了 ~ :grin:
  • Pr_Chen:界面太美,什么时候能写几篇系列文章具体怎么实现的呢?好期待...
  • d9dca30ee578:你好 做的非常Nice 我想问下 播放api怎么设置
    2a0e839d6446:@duoduhaoshu 用audio标签
  • 捡了一只猪:你好,请问一下,你使用的是什么流媒体技术
    2a0e839d6446:用的QQ音乐的资源.....m4a格式的
  • zhaohehe:看了 很棒啊 如果你需要收藏这些功能而又缺少后端 可以找我呀 :relaxed:
  • 你糖都化了:很棒 个人觉得首页还是东西太少了 可以多加点资源
    你糖都化了:@666623333哈哈哈哈 嗯 做的挺不错的 简单看了一下源码 发现了几个问题 很多地方的事件是不是可以不用分开写的 写在一个父元素上比较好? 还有有些地方 感觉代码重复了 我也是小白 用你这个取取经 哈哈
    2a0e839d6446:@你糖都化了 昨天刚加上排行榜,bug还好多🙈
  • d943a2cac5b3:美感爆棚
  • 流年2017:很好
  • ca023a6fb816:超级棒!!!
  • 前端课堂:ui很棒

本文标题:Vue 2.0 华丽的音乐搜索播放 Demo

本文链接:https://www.haomeiwen.com/subject/ytyrpttx.html