Home

Awesome

hexo-tag-aplayer

npm npm

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

中文文档

<!-- START doctoc generated TOC please keep comment here to allow auto update --> <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> <!-- END doctoc generated TOC please keep comment here to allow auto update -->

plugin screenshot

Installation

npm install --save hexo-tag-aplayer

Dependency

Usage

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

Option

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:

OptionDefaultDescription
idrequiredsong id / playlist id / album id / search keyword
serverrequiredMusic platform: netease, tencent, kugou, xiami, baidu
typerequiredsong, playlist, album, search, artist
fixedfalseEnable fixed mode
minifalseEnable mini mode
loopallPlayer loop play, values: 'all', 'one', 'none'
orderlistPlayer play order, values: 'list', 'random'
volume0.7Default volume, notice that player will remember user setting, default volume will not work after user set volume themselves
lrctype0Lyric type
listfoldedfalseIndicate whether list should folded at first
autoplayfalseAutoplay song(s), not supported by mobile browsers
mutextruePause other players when this player playing
listmaxheight340pxMax height of play list
preloadautoThe way to load music, can be none, metadata, auto
storagenamemetingjsLocalStorage key that store player setting
theme#ad7a86Theme 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 :

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