Need help with hexo-tag-aplayer?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

MoePlayer
547 Stars 81 Forks MIT License 92 Commits 40 Opened issues

Description

Embed aplayer in Hexo posts/pages

Services available

!
?

Need anything else?

Contributors list

# 60,431
chinese...
Lua
text-mi...
TypeScr...
80 commits
# 130,526
JavaScr...
danmaku
flv
Shell
2 commits
# 516,340
JavaScr...
hexo
1 commit
# 158,686
Lua
nginx
ngx-lua
Markdow...
1 commit
# 522,705
JavaScr...
hexo
1 commit
# 562
JavaScr...
html5
Electro...
instagr...
1 commit

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.