/hexo-tag-aplayer

Embed aplayer in Hexo posts/pages

Primary LanguageJavaScriptMIT LicenseMIT

hexo-tag-aplayer

npm npm

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

中文文档

plugin screenshot

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