博客采用新的HTML5播放器APlayer

提醒:本文最后更新于 2374 天前,文中所描述的信息可能已发生改变,请仔细核实。

更新至WordPress 4.8.3,博客采用新的HTML5播放器,APlayer,Github传送门


之前用着自己修改的Wordpress自带表单播放器,通过钩子支持外链,WordPress本身只支持上传到媒体库的音乐,改了之后支持外链,明显好用多了。但其古老的风格和一些先天不足,加上js、css文件引入多,最终,我还是换了它。

这次用了自己定制的Aplayer,WordPress上的Shortcode仍按照之前文章《[官方]按需加载 Shortcode 相关脚本、样式》中的例子来写。不但可以节省函数复用带来的浪费,而且非常简便在同篇文章使用多个播放器不冲突。

本着为开源做份贡献,把源码贡献出来。Github地址:https://github.com/kn007/APlayerHandle

我将函数封装成class类,将class.aplayer.php文件保存在主题根目录,然后在functions.php调用就好了。调用方法如下:

class_exists('APlayerHandle') or require(get_template_directory() . '/class.aplayer.php');
$aplayer = new APlayerHandle;
$aplayer->init();

因为我是定制版的,没有narrow、LRC模式,所以代码也就没有相关参数,需要的可以自己加。

文章调用短代码方法:

[aplayer mutex="true" autoplay="true" theme="#b7daff" preload="auto" mode="circulation" maxheight="500"]
[aplayer_trac title="あっちゅ~ま青春!" author="七森中☆ごらく部" src="http://devtest.qiniudn.com/あっちゅ~ま青春!.mp3" pic="http://devtest.qiniudn.com/あっちゅ~ま青春!.jpg"]
[aplayer_trac title="回レ!雪月花" author="小倉唯" src="http://devtest.qiniudn.com/回レ!雪月花.mp3" pic="http://devtest.qiniudn.com/回レ!雪月花.jpg"]
[/aplayer]

以上[aplayer][/aplayer]标签为播放器配置标签,上面列出所有默认设置。而[aplayer_trac]为歌曲标签,必须包含在[aplayer][/aplayer]标签中,其中title和src是必须设置的,author留空赋值Unknown,pic不配置,那么歌曲使用播放器默认图片。

如果没有想要改变的默认值,那么直接照下面例子这样就行了。

[aplayer]
[aplayer_trac title="あっちゅ~ま青春!" author="七森中☆ごらく部" src="http://devtest.qiniudn.com/あっちゅ~ま青春!.mp3" pic="http://devtest.qiniudn.com/あっちゅ~ま青春!.jpg"]
[aplayer_trac title="回レ!雪月花" author="小倉唯" src="http://devtest.qiniudn.com/回レ!雪月花.mp3" pic="http://devtest.qiniudn.com/回レ!雪月花.jpg"]
[/aplayer]

没有图片的是这样:

[aplayer]
[aplayer_trac title="あっちゅ~ま青春!" author="七森中☆ごらく部" src="http://devtest.qiniudn.com/あっちゅ~ま青春!.mp3"]
[aplayer_trac title="回レ!雪月花" author="小倉唯" src="http://devtest.qiniudn.com/回レ!雪月花.mp3"]
[/aplayer]

可以有些歌曲有图片,有些没有,随你。

另外,支持原生[audio]标签,前提是增加title参数,并且使用src参数。兼容AMP页面。

逻辑与原生[audio]标签一致,但没有class和style参数,功能与aplayer一致。

简单介绍下用法:

原有比如:

[audio src="http://devtest.qiniudn.com/あっちゅ~ま青春!.mp3" loop="on"]

变更为:

[audio src="http://devtest.qiniudn.com/あっちゅ~ま青春!.mp3" title="あっちゅ~ま青春!" author="七森中☆ごらく部" loop="on"]

注意,我定义了默认只在文章页和后台按需加载Aplayer,其他比如首页这些并不会加载,有需求自己改代码第25行。

新旧播放器对比(第一张为WordPress内置播放器,第二张为Aplayer播放器):


播放器示例可见专题《个人音乐精选集》中的任意文章。Audio标签的可见此帖

Aplayer好处还在于调用少,仅有一个js文件,除此就一段inline js和一行html。而WordPress自带的播放器,需要加载2个js文件、2个css文件、两段inline js和一行html。


目前Wordpress使用着我高度定制化的主题Seven,是一个甚至连参数页、设置页都没有的主题。

主题配置直接是functions.php定义全局参数,主题与Memcache高度协同,当MC没有数据时,主题会快速建立所有配置键值到MC,并且会针对所有评论者,建立一套认知体系到MC,以供评论时快速审计。

对于钩子及函数,主要分为UDF.phpWordPress.php,前者补充各种WordPress没有却该有的功能,后者主要对WordPress进行内部功能限制和改变。

UDF.php本身功能众多,有我一直以来做的各种功能,其中比较重要就是评论系统及邮件系统。

评论系统,半自动防机器人,通过一些策略(通过MC的数据)和黑白名单,自动审阅评论,无法判定的进待审,留给我自己审核,基本很少。另外一个就是与邮件系统做交互,对于第一次评论的人,提交评论同时,异步的将评论者邮件地址交由邮件系统检测,判定该用户可信程度。

邮件系统针对的是评论回复邮件这块的改善,单封邮件有HTML和TEXT版本,而且用户可以自助退订博客邮件,退订的用户将不再接受博客任何邮件。针对第一次评论的用户,会验证邮箱地址,默认对该邮件地址标记退订,并且通知评论系统,将其纳入待审。对于微软系邮箱,默认退订,并发一封邮件到用户告知情况并附上订阅链接,原因见《致微软邮箱用户的一封信》。

评论者评论计数实现的评论等级,由MC提供数据,每次通过审核的评论,会自动incr,使得无需查询数据库。

WordPress.php针对的是一些我个人不需要的WordPress功能,比如作者页、日期归档页等等,这些不需要的,我都返回404。还有比如说,一些不需要class、id,我都不让WordPress显示出来。诸如此类。

还有许多功能,就不一一描述。最终这个主题体现的就是,没有合适环境,就废了一大半。没有后台配置页,也不适合小白。所以不分享,仅当自用。

其中,关于单封邮件双版本鸣谢LWL提供的思路和方法,得益于此,才顺利写好兼容性强的双版本。

对验证邮箱地址这块,同感谢LWL,他的想法是对乱写的评论邮箱地址直接丢垃圾评论。我做了改变,异步验证是否作退订和标记评论待审。

Aplayer这块感谢DIYgod,感谢其开源的HTML5播放器,Such beautiful player。

两位的博客地址分别是:LWL的自由天空AnotherHome

转载请注明转自:kn007的个人博客的《博客采用新的HTML5播放器APlayer