博客采用新的HTML5播放器APlayer

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

更新至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.php和WordPress.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》