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 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

{% 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

_config.yml

aplayer:
  meting: true

Now you can use

{% meting ...%}

{% meting "60198" "netease" "playlist" %}


{% meting "60198" "netease" "playlist" "autoplay" "mutex:false" "listmaxheight:340px" "preload:none" "theme:#ad7a86"%}

The

{% meting %}

| Option | Default | Description | | ------------- | ------------ | ------------------------------------------------------------ | | id | required | song id / playlist id / album id / search keyword | | server | required | Music platform:

netease

tencent

kugou

xiami

baidu

song

playlist

album

search

artist

false

false

all

list

false

false

true

340px

auto

none

metadata

auto

metingjs

#ad7a86

Read section customization to learn how to configure self-host meting api server in

hexo-tag-aplayer

PJAX compatible

You need destroy APlayer instances manually when you use PJAX.

$(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

_config.yml

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:

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

Duplicate APlayer.JS loading

The plugin hooks filter

after_render:html

APlayer.js

Meting.js

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

However,

after_render:html

• 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 hook

after_post_render

If you want to solve this issue definitely, you can disable this auto-injection feature in

_config.yml

aplayer:
  asset_inject: false

LICENSE

MIT