hexo-tag-aplayer

by MoePlayer

MoePlayer / hexo-tag-aplayer

Embed aplayer in Hexo posts/pages

512 Stars 78 Forks Last release: over 4 years ago (1.1.0) MIT License 92 Commits 2 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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:
{% meting "60198" "netease" "playlist" %}


{% 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
:
...
<script src="assets/js/aplayer.min.js"></script>
<script src="assets/js/meting.min.js"></script>

...

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 hook

after_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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.