Vue 2.0 华丽的音乐搜索播放 Demo
发布于 8 年前 作者 Sioxas 16509 次浏览 来自 分享

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

先上链接

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

实现的功能

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

未实现的功能

  • 我喜欢
  • 查看MV
  • 切换播放模式
  • 下载
  • 歌词

截图

排行榜

排行榜
榜单

搜索

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

播放页面

播放页面

专辑页面

专辑页面

歌手页面

歌手页面
歌手页面

播放列表

播放列表

54 回复

卧槽,炫酷啊,跟app效果差不多啊,厉害了

做的挺不错的。就是安卓机卡成狗了、没有兼容uc浏览器

@bajian 兼容UC的工作量感觉巨大

来自酷炫的 CNodeMD

66666!数据来源是什么?

@bajian 一直以为手机上都是webkit…UC上什么样子?

@bluebeach 资源都来自网页版QQ音乐

是自己抓取的吗?

看了楼主的 我也去做了个播放器、 https://xyxiao001.github.io/vue-blog/#/music

@xyxiao001 厉害了,这么神速呀!效果好棒,功能也很全啊。代码开源吗?

亲,来大搜车吗😄

@xyxiao001 6666有歌词

@Sioxas 歌词解析 折腾我好久, 我要参考你的去做个手机端播放详情页

mark!感觉有点66666.

@xyxiao001 互相学习😄

这个真不错,赞!

楼主是女的吗? @Sioxas

@bajian 动画卡顿现象已经修复啦

厉害了,我的姐。

来自酷炫的 CNodeMD

@Sioxas 恩,不卡了。咋整的?

界面华丽,功能完善,不可多得的好demo

不错 看起来 很棒

怎样能做出这样一个项目啊?有没有教程啊?

@bajian 换成transform实现动画就不卡了

哎呦,爱上你了,楼主。我要给你生猴子,好东西啊

有没有人在看这个项目代码啊?能一起研究一下吗?

@jowang2016 你可以先看vue教程

@Sioxas 正在看,最看不懂的地方是如何关联到qq音乐网站的,我尝试打开那几个.vue文件中的url,但是都打不开啊

@jowang2016 那是api…

这感觉太棒了,先马住。

@Sioxas 厉害了,大兄弟

先马住。。。学起来

@Sioxas 那些api都是怎么拿到的呀,不跨域吗

@ldyfy 是跨域的

在移动端浏览器太卡 自豪地采用 CNodeJS ionic

看了楼主的,俺也 做了个简陋的。 https://www.darlin.me/

回到顶部