mePlayer - 一款简洁的 HTML5 播放器

[GUMU]

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

特点：

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

动画预览：

默认主题，含歌词

默认主题，不含歌词

迷你版主题

主题一键切换效果

使用方法：

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

练手作品，有不足之处恳请批评指正！

[Andy1999]

好多播放器

[wdhwg001]

切换效果给人很强的迷惑感。
音量调整吃掉了播放也让人不知所措。
暂停之后恢复居然躲在上面了，有些莫名。
顺便…模拟的频谱是精确的吗？如果不是的话代入感会差不少…

我不行，我不上，所以纯粹提意见了。

[wsxyeah]

提个问题哦，播放按钮的三角形图标不要中心对齐，中心对齐在视觉上是偏左的

[leobin]

三楼+1

[designer]

支持楼主挺棒的。 Google MD 即视感

[liqingcan]

3 楼厉害，不说我都没注意

[GUMU]

@liqingcan @leobin @wsxyeah 谢谢！已修正，之前也看着有点不对劲但不知道为啥

[DIYgod]

APlayer 作者前来滋瓷一个

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

PS ：播放图标的对齐快改下吧，强迫症看了浑身难受，噗

[GUMU]

@wdhwg001 谢谢建议！交互确实不怎么懂，凭感觉弄的，我再想想怎么改进。频谱是假的...只是一个动画，因为跨域没有办法绘制真实频谱

[GUMU]

@DIYgod 图标对齐刚修复哦，其他问题等忙完了再改~

[GUMU]

看来不能看着 dribbble 上好看的就抄...好看不一定好用啊

[zgk]

https://github.com/zgq354/APlayer-Typecho-Plugin
感觉换个皮就能插入到 typecho 了~

[GUMU]

@zgk 赞！过完年了来改个试试

[CrazySpiderMan]

还是挺好看的

[XianZaiZhuCe]

如果歌词超过一行，显示就有问题了。

[XianZaiZhuCe]

另外 ，歌词 字符串有格式要求吗？

[XianZaiZhuCe]

手机上 有问题。歌词不滚动了。魅族自带浏览器

[GUMU]

@XianZaiZhuCe 多谢！已 Mark ，等找完工作了来改。 README 中有歌词格式~

[XianZaiZhuCe]

@GUMU 歌词没什么问题，可以通过 css 来解决。主要就是移动端问题。