kn007的个人博客
♥ You are here: > > > 博客采用新的HTML5播放器APlayer

博客采用新的HTML5播放器APlayer

by | 33 Comments

更新至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

donate
有所帮助?

Comments

33 Comments立即评论
Loading...
  1. 原来我博客的音乐在ios系统下不能播放,现在又可以了好像,最好兼容性好。

  2. LV2回复

    内置播放器的样式个人很喜欢,拿来主义求下方法,可以的话发邮箱? :mrgreen:

    1. MOD回复

      @Ted: 支持外联的内置播放器?

    2. LV2回复

      @kn007: 是滴,不知可否 厚颜无耻的求分享下 :smile:

    3. MOD回复

      @Ted: wordpress需要一开始就传递音乐文件的时间。
      你的音乐在本地目录么。
      不在的话,需要服务器download音乐,获得时间再传递,你还觉得要么。越多首音乐,请求次数更多,带来压力更大,而且加载得越慢。
      当然,我音乐文件直接在本地,只是域名不是,我请求一次本地后进行cache,所以没影响。
      而你有没有跟我一样的环境就很难说了。

      即便这样,你还需要么

    4. LV2回复

      @kn007: 音乐不在本地,我的文件都是外链的,只是单纯喜欢原生的,这内置播放器界面觉得很不错。而我插入到单篇文章的音乐最多也就一首,你说的请求次数多的问题对我来说没啥的吧?
      哈 如果可以的话就发吧~说实在的,对代码本身并不感兴趣,因为不懂,只是对原生有一定执着。看你在 github 上代码都是按照 WP 规范写的,这个赞 :idea:

    5. MOD回复

      @Ted: 那么,我推荐你使用这个插件,他写的更完善,一开始可以在shortcode就定义歌曲时间,而且支持audio和video标签。
      https://xlino.com/projects/wordpress-playlist-shortcode-with-external-audio-or-video-files/
      我的就不放出来了,毕竟不维护了,而且早期写的,有点粗。我的主要利用了getID3,所以无需定义时间,但是每首音乐多了两个请求(但因为我歌曲本地存在,所以只有一个请求,而且我有cache,基本可以说只请求了cache)。

    6. LV2回复

      @kn007: 会试下,谢谢

icon_wink.gificon_neutral.gificon_mad.gificon_twisted.gificon_smile.gificon_eek.gificon_sad.gificon_rolleyes.gificon_razz.gificon_redface.gificon_surprised.gificon_mrgreen.gificon_lol.gificon_idea.gificon_biggrin.gificon_evil.gificon_cry.gificon_cool.gificon_arrow.gificon_confused.gificon_question.gificon_exclaim.gif