跳到主要内容
CNode

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

分享
SSioxas发布于 10 年前最后回复 10 年前
54180990
目录 · 6 个章节

空闲时间一边学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)

D
doxiaodong#5310 年前

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

L
LeeHao92#5210 年前

太酷了

L
Liklei#5110 年前

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

L
ldyfy#4910 年前
引用 Sioxas@jowang2016 那是api....

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

F
FlyerJay#4810 年前

mark

G
gaoli861121#4710 年前

不错

C
chejingchi#4610 年前

先马住。。。学起来

S
shiyangzhaoa#4510 年前
F
fangker#4310 年前

先mark

S
stop2stare#4210 年前

这感觉太棒了,先马住。

Y
yuxiaochi12345#4010 年前

厉害了

J
jowang2016#3910 年前
引用 Sioxas@jowang2016 你可以先看vue教程

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

J
jowang2016#3710 年前

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

S
sanrudongfeng#3610 年前

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

S
Sioxas#3510 年前
引用 bajian@Sioxas 恩,不卡了。咋整的?

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

J
jowang2016#3410 年前

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

H
hezhongfeng#3310 年前

挺好的~

F
falost#3210 年前

不错 看起来 很棒

X
xcatliu#3110 年前

厉害

M
maochunguang#3010 年前

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

V
vanishcode#2910 年前

华丽~~

Q
qinyang912#2810 年前

好腻害

B
bajian#2710 年前
引用 Sioxas@bajian 动画卡顿现象已经修复啦

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

C
Cheng-Bin#2610 年前

厉害了,我的姐。

来自酷炫的 CNodeMD

S
Sioxas#2510 年前
V
vjzning#2410 年前

楼主是女的吗? @Sioxas

D
DevinXian#2310 年前

这个真不错,赞!

S
shenzhiguo#2110 年前

mark!感觉有点66666.

X
xyxiao001#2010 年前
引用 Sioxas@xyxiao001 6666有歌词

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

X
XadillaX#1810 年前

亲,来大搜车吗😄

W
wendaosanshou#1610 年前
引用 xyxiao001看了楼主的 我也去做了个播放器、 https://xyxiao001.github.io/vue blog/ /music

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

X
xyxiao001#1510 年前

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

D
dianjie#1410 年前

可以!!6666 使用antd-moblie[cnode]版

M
mabu233#1310 年前

是自己抓取的吗?

S
Sioxas#1210 年前
引用 bluebeach66666!数据来源是什么?

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

S
Sioxas#1110 年前
引用 bajian做的挺不错的。就是安卓机卡成狗了、没有兼容uc浏览器

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

B
bluebeach#1010 年前

66666!数据来源是什么?

M
mrxf#910 年前
引用 bajian做的挺不错的。就是安卓机卡成狗了、没有兼容uc浏览器

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

来自酷炫的 CNodeMD

L
leizongmin#810 年前

厉害

B
bajian#710 年前

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

L
leehomeok#610 年前

赞一个

S
SilenceDN#510 年前

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

P
P-ppc#410 年前

666

M
MirrorWang#310 年前

赞 自豪地采用 CNodeJS ionic

E
eoo520#210 年前

点赞

J
JcBy#110 年前

点个赞

参与回复

登录后即可参与回复。登录