V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
DIYgod
V2EX  ›  分享创造

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

  •  3
     
  •   DIYgod · 2015-11-20 19:29:50 +08:00 · 10331 次点击
    这是一个创建于 3284 天前的主题,其中的信息可能已经有所发展或是发生改变。


    是不是很好看呀,是不是,是不是...

    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 总榜 了!

    63 条回复    2015-12-26 19:41:48 +08:00
    superxzr
        1
    superxzr  
       2015-11-20 19:30:58 +08:00
    E 可赛艇
    xiao201261
        2
    xiao201261  
       2015-11-20 19:33:37 +08:00
    正想偷懒找个好看的 HTML5audio 样式呢 23333
    tcdw
        3
    tcdw  
       2015-11-20 19:33:44 +08:00
    喜欢这个播放器的样式和 UI 。

    感觉有了它,以后在博客等地方分享音乐更方便了。
    sobigfish
        4
    sobigfish  
       2015-11-20 19:35:14 +08:00
    👍,有歌词显示的功能+区域就更好了,放歌名下会不会怪?(只显示当前行)
    sobigfish
        5
    sobigfish  
       2015-11-20 19:40:27 +08:00
    DIYgod
        6
    DIYgod  
    OP
       2015-11-20 19:49:21 +08:00
    @superxzr A 可屠羊

    @sobigfish 正有歌词展示的计划,感谢歌词解析程序,省得自己写了 23333
    Andy1999
        7
    Andy1999  
       2015-11-20 19:57:10 +08:00 via iPhone
    没有手机端吗
    jimmy66
        8
    jimmy66  
       2015-11-20 19:58:48 +08:00
    喔喔,好赞,已 star
    Acirno
        9
    Acirno  
       2015-11-20 20:02:26 +08:00
    赞一个
    DIYgod
        10
    DIYgod  
    OP
       2015-11-20 20:05:29 +08:00
    @Andy1999 还没。。已加入 todo 豪华晚餐
    Totato5749
        11
    Totato5749  
       2015-11-20 20:27:33 +08:00
    mac 字体渲染效果加成
    chui
        12
    chui  
       2015-11-20 21:11:07 +08:00
    赞!
    DIYgod
        13
    DIYgod  
    OP
       2015-11-20 22:19:41 +08:00
    泥萌不要只收藏不回复呀😂
    shyling
        14
    shyling  
       2015-11-20 22:21:11 +08:00
    话说。。。感觉和网易云的外链播放器差不多外观啊
    DIYgod
        15
    DIYgod  
    OP
       2015-11-20 22:29:38 +08:00
    @shyling README 里也有说, UI 参考了网易云音乐外链播放器😂
    kiritoalex
        16
    kiritoalex  
       2015-11-20 22:34:08 +08:00
    一颗赛艇!
    luoway
        17
    luoway  
       2015-11-20 22:39:45 +08:00 via Android
    标题党
    大片空白就是败笔
    DIYgod
        18
    DIYgod  
    OP
       2015-11-20 22:40:53 +08:00
    @luoway 哪来的大片空白。。。
    echopan
        19
    echopan  
       2015-11-20 22:50:38 +08:00
    diygay 做的播放器好好看看
    DIYgod
        20
    DIYgod  
    OP
       2015-11-20 23:00:11 +08:00
    @echopan 啊你暴露了我的外号,我恨你
    flynnX
        21
    flynnX  
       2015-11-20 23:12:00 +08:00
    进度只能拖动啊,如果能做成可以点选的就更好了
    DIYgod
        22
    DIYgod  
    OP
       2015-11-20 23:15:12 +08:00
    @flynnX 可以点选呀,鼠标移到进度条上变成小受的时候就能点了
    DIYgod
        23
    DIYgod  
    OP
       2015-11-20 23:15:45 +08:00
    @DIYgod 小手。。。对不起我污了。。。
    kn007
        24
    kn007  
       2015-11-20 23:37:20 +08:00
    。。再来个列表和歌词就完美了
    niceworld
        25
    niceworld  
       2015-11-20 23:44:19 +08:00
    进度条拖动的识别范围稍微有点小 再大点就好了
    wenketel
        26
    wenketel  
       2015-11-20 23:54:30 +08:00
    star 个
    azurefire
        27
    azurefire  
       2015-11-20 23:57:16 +08:00
    把所有交互区域的可点击面积做的比看上去的再大一点就好了
    ldehai
        28
    ldehai  
       2015-11-21 00:48:29 +08:00
    very good
    aofall
        29
    aofall  
       2015-11-21 00:53:15 +08:00 via iPhone
    DIYGay 好棒呀
    skylancer
        30
    skylancer  
       2015-11-21 01:41:04 +08:00
    @DIYgod 这人太污了
    lanlanlan
        31
    lanlanlan  
       2015-11-21 09:29:38 +08:00
    大家都在好好说话 你竟然污言以对 @DIYgay
    DIYgod
        32
    DIYgod  
    OP
       2015-11-21 10:26:00 +08:00 via iPad
    @kn007 会有哒

    @niceworld
    @azurefire 感谢建议,待改善~

    @skylancer
    @lanlanlan 真是污脸见人了∠( ᐛ 」∠)_
    Twinkle
        33
    Twinkle  
       2015-11-21 11:27:48 +08:00
    第一反应是和网易云音乐的外链播放器有点像 w 厉害,受我一拜!
    x990
        34
    x990  
       2015-11-21 12:06:15 +08:00
    去污 diygay
    zjqzxc
        35
    zjqzxc  
       2015-11-21 12:57:05 +08:00
    已 star
    whitefable
        36
    whitefable  
       2015-11-21 14:16:39 +08:00
    真是超级好看 233333
    xifangczy
        37
    xifangczy  
       2015-11-21 15:57:43 +08:00
    star
    peinhu
        38
    peinhu  
       2015-11-21 16:39:09 +08:00   ❤️ 2
    AetherPlayer 表示不服! http://www.2ndrenais.com/aetherplayer
    liujiantao
        39
    liujiantao  
       2015-11-21 16:39:51 +08:00 via iPhone
    好看好看, star
    Andy1999
        40
    Andy1999  
       2015-11-21 18:58:05 +08:00
    @peinhu 好看!!!
    Roise
        41
    Roise  
       2015-11-21 20:25:57 +08:00
    DIYgod 好棒!
    echopan
        42
    echopan  
       2015-11-22 15:11:16 +08:00
    @peinhu 我去 收藏了
    kyonnn
        43
    kyonnn  
       2015-11-23 11:26:00 +08:00
    美~~~~~~~
    zy65334
        44
    zy65334  
       2015-11-23 14:37:17 +08:00
    mark
    shyling
        45
    shyling  
       2015-11-23 14:44:56 +08:00
    @DIYgod 嗯。。我没去 github 看。。只看了图片 0 0 , so...
    codeyung
        46
    codeyung  
       2015-11-23 18:10:03 +08:00
    原谅的我眼睛! AVPlayer :)逃~
    liuzhen
        47
    liuzhen  
       2015-11-23 18:48:57 +08:00
    还没有切换按钮
    lilyswf
        48
    lilyswf  
       2015-11-23 23:22:45 +08:00
    挺不错,楼主要是能把暂停和播放之间切换的动效简单做一下就完美了。至少不要那么生硬地切换,用点运动曲线啥的。
    monk
        49
    monk  
       2015-11-24 00:18:59 +08:00
    不就 iTunes alike 么
    caliy
        50
    caliy  
       2015-11-24 09:25:43 +08:00
    哈哈哈哈,不小心 get√到了奇怪的点,污力滔滔,先去 star 了
    fhefh
        51
    fhefh  
       2015-11-24 19:48:37 +08:00
    mark~~~
    endpoint
        52
    endpoint  
       2015-11-25 13:02:30 +08:00
    啊啊啊,太赞了。突然多了个小想法。多谢楼主
    DIYgod
        53
    DIYgod  
    OP
       2015-11-25 13:08:16 +08:00
    aprikyblue
        54
    aprikyblue  
       2015-11-25 23:11:38 +08:00 via Android
    DIYloli 好棒!已 star
    heylogo
        55
    heylogo  
       2015-11-29 00:20:38 +08:00 via iPad
    第一反应,网易云音乐 哈哈
    heylogo
        56
    heylogo  
       2015-11-29 00:24:33 +08:00 via iPad
    With lyrics 模式,个人觉得遮挡歌词的阴影不好看,去掉更好
    sobigfish
        57
    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
        58
    DIYgod  
    OP
       2015-11-29 09:42:07 +08:00
    @sobigfish 原来还能这样写。。我现在只支持了一行一个时间的
    snakehnb
        59
    snakehnb  
       2015-12-01 11:30:00 +08:00
    好看
    Ricoo
        60
    Ricoo  
       2015-12-02 11:25:08 +08:00
    网站好像访问不了,翻墙好像也不行
    DIYgod
        61
    DIYgod  
    OP
       2015-12-02 12:34:01 +08:00
    @Ricoo linode 忘续费,主机被删了。。。。今天或者明天能恢复
    zgk
        62
    zgk  
       2015-12-26 14:55:52 +08:00
    好棒!!!
    @sobigfish
    @DIYgod 话说我以前写过一个可以解析多标签的 lrc 歌词的函数,或许用得上呢
    http://blog.izgq.net/archives/75/
    DIYgod
        63
    DIYgod  
    OP
       2015-12-26 19:41:48 +08:00
    @sobigfish 已支持多时间标签~

    @zgk 多谢,参考你的代码支持了多时间标签~
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2692 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 11:55 · PVG 19:55 · LAX 03:55 · JFK 06:55
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.