hexo/node_modules/hexo-tag-aplayer

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

aplayer:
  meting: true

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

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

Option	Default	Description
id	required	song id / playlist id / album id / search keyword
server	required	Music platform: netease, tencent, kugou, xiami, baidu
type	required	song, playlist, album, search, artist
fixed	false	Enable fixed mode
mini	false	Enable mini mode
loop	all	Player loop play, values: 'all', 'one', 'none'
order	list	Player play order, values: 'list', 'random'
volume	0.7	Default volume, notice that player will remember user setting, default volume will not work after user set volume themselves
lrctype	0	Lyric type
listfolded	false	Indicate whether list should folded at first
autoplay	false	Autoplay song(s), not supported by mobile browsers
mutex	true	Pause other players when this player playing
listmaxheight	340px	Max height of play list
preload	auto	The way to load music, can be none, metadata, auto
storagename	metingjs	LocalStorage key that store player setting
theme	#ad7a86	Theme color

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.

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

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 , and it would inject APlayer.js and Meting.js in <head>:

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

aplayer:
  asset_inject: false

LICENSE

MIT