mePlayer - 一款简洁的 HTML5 播放器

爱意满满的作品展示区。

This topic created in 3924 days ago, the information mentioned may be changed or developed.

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

特点：

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

动画预览：

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

使用方法：

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

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

默认

主题

歌词

迷你

19 replies • 2016-03-01 12:17:46 +08:00

Andy1999

Feb 7, 2016 via iPhone

好多播放器

wdhwg001

Feb 7, 2016 via iPhone

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

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

wsxyeah

Feb 7, 2016

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

leobin

Feb 7, 2016

三楼+1

designer

Feb 7, 2016 via iPhone

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

liqingcan

Feb 7, 2016 via Android

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

GUMU

Feb 7, 2016

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

DIYgod

Feb 7, 2016 via iPad

APlayer 作者前来滋瓷一个

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

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

GUMU

Feb 7, 2016

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

GUMU

Feb 7, 2016

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

GUMU

Feb 7, 2016

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

zgk

Feb 7, 2016

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

GUMU

Feb 8, 2016

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

CrazySpiderMan

Feb 11, 2016

还是挺好看的

XianZaiZhuCe

Feb 27, 2016

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

XianZaiZhuCe

Feb 27, 2016

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

XianZaiZhuCe

Feb 29, 2016

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

GUMU

Feb 29, 2016

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

XianZaiZhuCe

Mar 1, 2016

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