hexo-tag-aplayer

Embed APlayer(https://github.com/DIYgod/APlayer) in Hexo posts/pages.

中文文档

• Installation
• Dependency
• Usage
  • Option
  • With lyrics
  • With playlist
  • MeingJS support (new in 3.0)
  • PJAX compatible
• Customization (new in 3.0)
• Troubleshoot
  • Space within arguments
  • Duplicate APlayer.JS loading
• LICENSE

Installation

npm install --save hexo-tag-aplayer

Dependency

• APlayer.js >= 1.10.0
• Meting.js >= 1.2.0

Usage

{% aplayer title author url [picture_url, narrow, autoplay, width:xxx, lrc:xxx] %}

### Option

+ `title` : music title
+ `author`: music author
+ `url`: music file url
+ `picture_url`: optional, music picture url
+ `narrow`: optional, narrow style
+ `autoplay`: optional, autoplay music, not supported by mobile browsers
+ `width:xxx`: optional, prefix `width:`, player's width (default: 100%)
+ `lrc:xxx`: optional, prefix `lrc:`, LRC file url

With [post asset folders](https://hexo.io/docs/asset-folders.html#Tag-Plugins-For-Relative-Path-Referencing) enabled, you can easily place your image, music and LRC file into asset folder, and reference them like:

	{% aplayer "Caffeine" "Jeff Williams" "caffeine.mp3" "picture.jpg" "lrc:caffeine.txt" %}

### With lyrics

Besides 'lrc' option, you can use `aplayerlrc` which has end tag to show lyrics.

	{% aplayerlrc "title" "author" "url" "autoplay" %}
	[00:00.00]lrc here
	{% endaplayerlrc %}

With playlist

{% aplayerlist %}
	{
	    "narrow": false,                          // Optional, narrow style
	    "autoplay": true,                         // Optional, autoplay song(s), not supported by mobile browsers
	    "mode": "random",                         // Optional, play mode, can be `random` `single` `circulation`(loop) `order`(no loop), default: `circulation`
	    "showlrc": 3,                             // Optional, show lrc, can be 1, 2, 3
	    "mutex": true,                            // Optional, pause other players when this player playing
	    "theme": "#e6d0b2",	                      // Optional, theme color, default: #b7daff
	    "preload": "metadata",                    // Optional, the way to load music, can be 'none' 'metadata' 'auto', default: 'auto'
	    "listmaxheight": "513px",                 // Optional, max height of play list
	    "music": [
	        {
	            "title": "CoCo",
	            "author": "Jeff Williams",
	            "url": "caffeine.mp3",
	            "pic": "caffeine.jpeg",
	            "lrc": "caffeine.txt"
	        },
	        {
	            "title": "アイロニ",
	            "author": "鹿乃",
	            "url": "irony.mp3",
	            "pic": "irony.jpg"
	        }
	    ]
	}
	{% endaplayerlist %}

MeingJS support (new in 3.0)

When you use MetingJS, your blog can play musics from Tencent, Netease, Xiami, Kugou, Baidu and more.

See metowolf/MetingJS and metowolf/Meting in detail.

If you want to use MetingJS in hexo-tag-aplayer, you need enable it in _config.yml

1
2

aplayer:
  meting: true

Now you can use {% meting ...%} in your post:

1
2
3
4
5

<!-- Simple example (id, server, type)  -->
{% meting "60198" "netease" "playlist" %}

<!-- Advanced example -->
{% meting "60198" "netease" "playlist" "autoplay" "mutex:false" "listmaxheight:340px" "preload:none" "theme:#ad7a86"%}

The {% meting %} options are shown below:

Read section customization to learn how to configure self-host meting api server in hexo-tag-aplayer and other configuration.

PJAX compatible

You need destroy APlayer instances manually when you use PJAX.

1
2
3
4
5
6
7
8

$(document).on('pjax:start', function () {
    if (window.aplayers) {
        for (let i = 0; i < window.aplayers.length; i++) {
            window.aplayers[i].destroy();
        }
        window.aplayers = [];
    }
});

Customization (new in 3.0)

You can configure hexo-tag-aplayer in _config.yml:

1
2
3
4
5
6
7
8
9
10

aplayer:
  script_dir: some/place                        # Script asset path in public directory, default: 'assets/js'
  style_dir: some/place                         # Style asset path in public directory, default: 'assets/css'
  cdn: http://xxx/aplayer.min.js                # External APlayer.js url (CDN)
  style_cdn: http://xxx/aplayer.min.css         # External APlayer.css url (CDN)
  meting: true                                  # Meting support, default: false
  meting_api: http://xxx/api.php                # Meting api url
  meting_cdn: http://xxx/Meing.min.js           # External Meting.js url (CDN)
  asset_inject: true                            # Auto asset injection, default: true
  externalLink: http://xxx/aplayer.min.js       # Deprecated, use 'cdn' instead

Troubleshoot

Space within arguments

Hexo has an issue that cannot use space within tag arguments.

If you encounter this problem, install the latest (beta) version, and wrap the arguments within a string literal, for example:

1

{% aplayer "Caffeine" "Jeff Williams" "caffeine.mp3" "autoplay" "width:70%" "lrc:caffeine.txt" %}

Duplicate APlayer.JS loading

The plugin hooks filter after_render:html , and it would inject APlayer.js and Meting.js in <head>:

1
2
3
4
5
6
7
8

<html>
  <head>
    ...
    <script src="assets/js/aplayer.min.js"></script>
    <script src="assets/js/meting.min.js"></script>
  </head>
  ...
</html>

However, after_render:html is not fired in some cases :

• Does not work with hexo-renderer-jade
• after_render:html seems not to get emitted in default settings of hexo server module (hexo server), it means you have to use static serving mode( hexo server -s) instead.

In such cases, the plugin would hookafter_post_render as a fallback, which has a possibility to cause duplicate asset loadings.

If you want to solve this issue definitely, you can disable this auto-injection feature in _config.yml and insert the scripts by yourself:

1
2

aplayer:
  asset_inject: false

LICENSE

MIT