CNode

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

分享
SSioxas发布于10 年前最后回复10 年前54 回复18058 浏览0 收藏

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

B
bajian#1·10 年前

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

L
leizongmin#2·10 年前

厉害

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

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

来自酷炫的 CNodeMD

B
bluebeach#4·10 年前

66666!数据来源是什么?

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

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

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

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

S
Sioxas#7·10 年前
C
Cheng-Bin#8·10 年前

厉害了,我的姐。

来自酷炫的 CNodeMD

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

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

S
shiyangzhaoa#11·10 年前
C
chejingchi#12·10 年前

先马住。。。学起来

L
LeeHao92#13·10 年前

太酷了

J
JcBy#14·10 年前

点个赞

E
eoo520#15·10 年前

点赞

M
MirrorWang#16·10 年前

赞 自豪地采用 CNodeJS ionic

P
P-ppc#17·10 年前

666

S
SilenceDN#18·10 年前

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

L
leehomeok#19·10 年前

赞一个

M
mabu233#20·10 年前

是自己抓取的吗?

D
dianjie#21·10 年前

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

X
xyxiao001#22·10 年前

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

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

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

X
XadillaX#25·10 年前

亲,来大搜车吗😄

X
xyxiao001#27·10 年前
引用 Sioxas@xyxiao001 6666有歌词

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

S
shenzhiguo#28·10 年前

mark!感觉有点66666.

D
DevinXian#30·10 年前

这个真不错,赞!

V
vjzning#31·10 年前

楼主是女的吗? @Sioxas

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

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

Q
qinyang912#33·10 年前

好腻害

V
vanishcode#34·10 年前

华丽~~

M
maochunguang#35·10 年前

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

X
xcatliu#36·10 年前

厉害

F
falost#37·10 年前

不错 看起来 很棒

H
hezhongfeng#38·10 年前

挺好的~

J
jowang2016#39·10 年前

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

S
sanrudongfeng#40·10 年前

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

J
jowang2016#41·10 年前

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

S
Sioxas#42·10 年前
J
jowang2016#43·10 年前
引用 Sioxas@jowang2016 你可以先看vue教程

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

Y
yuxiaochi12345#44·10 年前

厉害了

S
stop2stare#46·10 年前

这感觉太棒了,先马住。

F
fangker#47·10 年前

先mark

G
gaoli861121#48·10 年前

不错

L
Liklei#50·10 年前

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

F
FlyerJay#51·10 年前

mark

L
ldyfy#52·10 年前
引用 Sioxas@jowang2016 那是api....

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

D
doxiaodong#53·10 年前

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

J
jkjk77#54·10 年前
参与回复
登录后即可参与回复。登录