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

mePlayer - 一款简洁的 HTML5 播放器

  •  
  •   GUMU ·
    newraina · 2016-02-07 01:20:55 +08:00 · 4591 次点击
    这是一个创建于 3197 天前的主题,其中的信息可能已经有所发展或是发生改变。

    最近写的一个练手作品, UI 参考bottom-music-player
    在线预览 | 我是 Github

    特点:

    • 内置两套主题(默认版和迷你版),可一键切换
    • 默认主题在提供歌词时显示歌词,否则显示模拟的频谱动画
    • 鼠标悬停在播放器界面上用滚轮调节音量(仅播放时),默认主题用音量条表现音量大小,迷你主题用图标透明度表现

    动画预览:

    默认主题,含歌词
    默认,有歌词
    默认主题,不含歌词
    默认,无歌词
    迷你版主题
    迷你主题
    主题一键切换效果
    主题切换

    使用方法:

    • 引入dist文件夹中相关文件
    • 或者npm install meplayer
    • 其他见 README

    练手作品,有不足之处恳请批评指正!

    19 条回复    2016-03-01 12:17:46 +08:00
    Andy1999
        1
    Andy1999  
       2016-02-07 01:44:26 +08:00 via iPhone
    好多播放器
    wdhwg001
        2
    wdhwg001  
       2016-02-07 02:37:36 +08:00 via iPhone
    切换效果给人很强的迷惑感。
    音量调整吃掉了播放也让人不知所措。
    暂停之后恢复居然躲在上面了,有些莫名。
    顺便…模拟的频谱是精确的吗?如果不是的话代入感会差不少…

    我不行,我不上,所以纯粹提意见了。
    wsxyeah
        3
    wsxyeah  
       2016-02-07 07:23:15 +08:00
    提个问题哦,播放按钮的三角形图标不要中心对齐,中心对齐在视觉上是偏左的
    leobin
        4
    leobin  
       2016-02-07 09:44:31 +08:00
    三楼+1
    designer
        5
    designer  
       2016-02-07 10:16:20 +08:00 via iPhone   ❤️ 1
    支持楼主挺棒的。 Google MD 即视感
    liqingcan
        6
    liqingcan  
       2016-02-07 10:21:20 +08:00 via Android
    3 楼厉害,不说我都没注意
    GUMU
        7
    GUMU  
    OP
       2016-02-07 10:49:59 +08:00
    @liqingcan @leobin @wsxyeah 谢谢!已修正,之前也看着有点不对劲但不知道为啥
    DIYgod
        8
    DIYgod  
       2016-02-07 10:51:28 +08:00 via iPad   ❤️ 1
    APlayer 作者前来滋瓷一个

    整体非常漂亮,再加几个 UI 上的小问题:
    音量控制是隐藏的,不太容易使用
    给中间歌词留的位置太窄,歌词长一点时,显示不下,自适应不好做
    播放器的使用场景应该是插在文章中居多,播放按钮上移后的位置之前肯定要预留出来,这样跟周围环境如何协调也是个问题

    PS :播放图标的对齐快改下吧,强迫症看了浑身难受,噗
    GUMU
        9
    GUMU  
    OP
       2016-02-07 10:51:41 +08:00
    @wdhwg001 谢谢建议!交互确实不怎么懂,凭感觉弄的,我再想想怎么改进。频谱是假的...只是一个动画,因为跨域没有办法绘制真实频谱
    GUMU
        10
    GUMU  
    OP
       2016-02-07 10:52:51 +08:00
    @DIYgod 图标对齐刚修复哦,其他问题等忙完了再改~
    GUMU
        11
    GUMU  
    OP
       2016-02-07 13:11:43 +08:00
    看来不能看着 dribbble 上好看的就抄...好看不一定好用啊
    zgk
        12
    zgk  
       2016-02-07 14:11:53 +08:00
    https://github.com/zgq354/APlayer-Typecho-Plugin
    感觉换个皮就能插入到 typecho 了~
    GUMU
        13
    GUMU  
    OP
       2016-02-08 16:08:07 +08:00
    @zgk 赞!过完年了来改个试试
    CrazySpiderMan
        14
    CrazySpiderMan  
       2016-02-11 17:10:16 +08:00
    还是挺好看的
    XianZaiZhuCe
        15
    XianZaiZhuCe  
       2016-02-27 16:34:02 +08:00
    如果歌词超过一行,显示就有问题了。
    XianZaiZhuCe
        16
    XianZaiZhuCe  
       2016-02-27 19:57:45 +08:00
    另外 ,歌词 字符串有格式要求吗?
    XianZaiZhuCe
        17
    XianZaiZhuCe  
       2016-02-29 18:49:08 +08:00
    手机上 有问题。歌词不滚动了。魅族自带浏览器
    GUMU
        18
    GUMU  
    OP
       2016-02-29 22:30:30 +08:00
    @XianZaiZhuCe 多谢!已 Mark ,等找完工作了来改。 README 中有歌词格式~
    XianZaiZhuCe
        19
    XianZaiZhuCe  
       2016-03-01 12:17:46 +08:00
    @GUMU 歌词没什么问题,可以通过 css 来解决。主要就是移动端问题。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5444 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 06:50 · PVG 14:50 · LAX 22:50 · JFK 01:50
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.