炒鸡好看的 HTML5 音乐播放器： APlayer

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 3326 天前的主题，其中的信息可能已经有所发展或是发生改变。

是不是很好看呀，是不是，是不是...

GitHub ： https://github.com/DIYgod/APlayer

Demo ： https://www.anotherhome.net/file/APlayer

第 1 条附言 · 2015-11-21 13:00:50 +08:00

哇塞，上了 GitHub 的 Trending JavaScript repositories (≧∇≦)

第 2 条附言 · 2015-11-21 18:39:56 +08:00

上到了 GitHub 的 Trending 总榜了！

GitHub

aplayer

好看

html5

63 条回复 • 2015-12-26 19:41:48 +08:00

superxzr

2015-11-20 19:30:58 +08:00

E 可赛艇

xiao201261

2015-11-20 19:33:37 +08:00

正想偷懒找个好看的 HTML5audio 样式呢 23333

tcdw

2015-11-20 19:33:44 +08:00

喜欢这个播放器的样式和 UI 。

感觉有了它，以后在博客等地方分享音乐更方便了。

sobigfish

2015-11-20 19:35:14 +08:00

👍，有歌词显示的功能＋区域就更好了，放歌名下会不会怪？（只显示当前行）

sobigfish

2015-11-20 19:40:27 +08:00

https://github.com/ted423/lrc-parser

DIYgod

2015-11-20 19:49:21 +08:00

@superxzr A 可屠羊

@sobigfish 正有歌词展示的计划，感谢歌词解析程序，省得自己写了 23333

Andy1999

2015-11-20 19:57:10 +08:00 via iPhone

没有手机端吗

jimmy66

2015-11-20 19:58:48 +08:00

喔喔，好赞，已 star

Acirno

2015-11-20 20:02:26 +08:00

赞一个

DIYgod

2015-11-20 20:05:29 +08:00

@Andy1999 还没。。已加入 todo 豪华晚餐

Totato5749

2015-11-20 20:27:33 +08:00

mac 字体渲染效果加成

chui

2015-11-20 21:11:07 +08:00

赞！

DIYgod

2015-11-20 22:19:41 +08:00

泥萌不要只收藏不回复呀😂

shyling

2015-11-20 22:21:11 +08:00

话说。。。感觉和网易云的外链播放器差不多外观啊

DIYgod

2015-11-20 22:29:38 +08:00

@shyling README 里也有说， UI 参考了网易云音乐外链播放器😂

kiritoalex

2015-11-20 22:34:08 +08:00

一颗赛艇！

luoway

2015-11-20 22:39:45 +08:00 via Android

标题党
大片空白就是败笔

DIYgod

2015-11-20 22:40:53 +08:00

@luoway 哪来的大片空白。。。

echopan

2015-11-20 22:50:38 +08:00

diygay 做的播放器好好看看

DIYgod

2015-11-20 23:00:11 +08:00

@echopan 啊你暴露了我的外号，我恨你

flynnX

2015-11-20 23:12:00 +08:00

进度只能拖动啊，如果能做成可以点选的就更好了

DIYgod

2015-11-20 23:15:12 +08:00

@flynnX 可以点选呀，鼠标移到进度条上变成小受的时候就能点了

DIYgod

2015-11-20 23:15:45 +08:00

@DIYgod 小手。。。对不起我污了。。。

kn007

2015-11-20 23:37:20 +08:00

。。再来个列表和歌词就完美了

niceworld

2015-11-20 23:44:19 +08:00

进度条拖动的识别范围稍微有点小再大点就好了

wenketel

2015-11-20 23:54:30 +08:00

star 个

azurefire

2015-11-20 23:57:16 +08:00

把所有交互区域的可点击面积做的比看上去的再大一点就好了

ldehai

2015-11-21 00:48:29 +08:00

very good

aofall

2015-11-21 00:53:15 +08:00 via iPhone

DIYGay 好棒呀

skylancer

2015-11-21 01:41:04 +08:00

@DIYgod 这人太污了

lanlanlan

2015-11-21 09:29:38 +08:00

大家都在好好说话你竟然污言以对 @DIYgay

DIYgod

2015-11-21 10:26:00 +08:00 via iPad

@kn007 会有哒

@niceworld
@azurefire 感谢建议，待改善～

@skylancer
@lanlanlan 真是污脸见人了∠( ᐛ 」∠)＿

Twinkle

2015-11-21 11:27:48 +08:00

第一反应是和网易云音乐的外链播放器有点像 w 厉害，受我一拜！

x990

2015-11-21 12:06:15 +08:00

去污 diygay

zjqzxc

2015-11-21 12:57:05 +08:00

已 star

whitefable

2015-11-21 14:16:39 +08:00

真是超级好看 233333

xifangczy

2015-11-21 15:57:43 +08:00

star

peinhu

2015-11-21 16:39:09 +08:00

AetherPlayer 表示不服！ http://www.2ndrenais.com/aetherplayer

liujiantao

2015-11-21 16:39:51 +08:00 via iPhone

好看好看， star

Andy1999

2015-11-21 18:58:05 +08:00

@peinhu 好看！！！

Roise

2015-11-21 20:25:57 +08:00

DIYgod 好棒！

echopan

2015-11-22 15:11:16 +08:00

@peinhu 我去收藏了

kyonnn

2015-11-23 11:26:00 +08:00

美~~~~~~~

zy65334

2015-11-23 14:37:17 +08:00

mark

shyling

2015-11-23 14:44:56 +08:00

@DIYgod 嗯。。我没去 github 看。。只看了图片 0 0 ， so...

codeyung

2015-11-23 18:10:03 +08:00

原谅的我眼睛！ AVPlayer :)逃~

liuzhen

2015-11-23 18:48:57 +08:00

还没有切换按钮

lilyswf

2015-11-23 23:22:45 +08:00

挺不错，楼主要是能把暂停和播放之间切换的动效简单做一下就完美了。至少不要那么生硬地切换，用点运动曲线啥的。

monk

2015-11-24 00:18:59 +08:00

不就 iTunes alike 么

caliy

2015-11-24 09:25:43 +08:00

哈哈哈哈，不小心 get√到了奇怪的点，污力滔滔，先去 star 了

fhefh

2015-11-24 19:48:37 +08:00

mark~~~

endpoint

2015-11-25 13:02:30 +08:00

啊啊啊，太赞了。突然多了个小想法。多谢楼主

DIYgod

2015-11-25 13:08:16 +08:00

@codeyung AVPlayer 是真实存在的 https://itunes.apple.com/us/app/avplayer/id395680819?mt=8

aprikyblue

2015-11-25 23:11:38 +08:00 via Android

DIYloli 好棒！已 star

heylogo

2015-11-29 00:20:38 +08:00 via iPad

第一反应，网易云音乐哈哈

heylogo

2015-11-29 00:24:33 +08:00 via iPad

With lyrics 模式，个人觉得遮挡歌词的阴影不好看，去掉更好

sobigfish

2015-11-29 01:25:14 +08:00

多个时间的 lrc 解析不正确啊楼主
比如
[ti:稳稳的幸福]
[ar:陈奕迅]
[t_time:(03:47 )]
[00:01.48] 稳稳的幸福
[00:02.39] 演唱：陈奕迅
[01:43.84] [00:07.88] 有一天
[01:45.96] [00:10.03] 我发现自怜资格都已没有
[01:51.14] [00:15.29] 只剩下不知疲倦的肩膀
[01:55.18] [00:19.36] 担负着简单的满足
[01:59.64] [00:23.49] 有一天

DIYgod

2015-11-29 09:42:07 +08:00

@sobigfish 原来还能这样写。。我现在只支持了一行一个时间的

snakehnb

2015-12-01 11:30:00 +08:00

好看

Ricoo

2015-12-02 11:25:08 +08:00

网站好像访问不了，翻墙好像也不行

DIYgod

2015-12-02 12:34:01 +08:00

@Ricoo linode 忘续费，主机被删了。。。。今天或者明天能恢复

zgk

2015-12-26 14:55:52 +08:00

好棒！！！
@sobigfish
@DIYgod 话说我以前写过一个可以解析多标签的 lrc 歌词的函数，或许用得上呢
http://blog.izgq.net/archives/75/

DIYgod

2015-12-26 19:41:48 +08:00

@sobigfish 已支持多时间标签~

@zgk 多谢，参考你的代码支持了多时间标签~