Use the plug-ins aplayer and MeingJS to add music in the hexo article

Keywords: Javascript html5 hexo



  • APlayer.js > 1.8.0
  • Meting.js > 1.1.1

The usage of hexo tag aplayer and MeingJS is excerpted from the official website: Chinese documents

Start your own personal blog - >


JavaScript based player plug-in

github - DIYgod/APlayer

Using the aplayer plug-in in hexo:


npm install --save hexo-tag-aplayer

Basic use

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

Label parameters

  • aplayer: fixed parameter, required
  • Title: track title
  • Author: track author
  • URL: music file URL address
  • picture_url: (optional) the picture address corresponding to the music
  • narrow: (optional) player pocket style
  • autoplay: (optional) auto play. The mobile browser does not support this function temporarily
  • width:xxx: (optional) player width (default: 100%)
  • lrc:xxx: (optional) URL address of lyrics file

When the article resource folder function of Hexo is enabled, you can put pictures, music files and lyrics files into the resource folder corresponding to the article, and then directly reference:

{% aplayer "Caffeine" "Jeff Williams" "caffeine.mp3" "picture.jpg" "lrc:caffeine.txt" %}

Lyrics label

In addition to using the label lrc option to set lyrics, you can also directly use the aplayer lrc label to directly insert lyrics text in the blog:

{% aplayerlrc "title" "author" "url" "autoplay" %}
[00:00.00]lrc here
{% endaplayerlrc %}

In addition to playing single songs, playlists are also supported:


{% aplayerlist %}
    "narrow": false,                          // (optional) player pocket style
    "autoplay": true,                         // (optional) automatic playback. The mobile browser does not support this function temporarily
    "mode": "random",                         // (optional) track loop type, including 'random', 'single', 'circulation' and 'order'. Default: 'circulation' 
    "showlrc": 3,                             // (optional) lyrics display configuration items. The options are: 1,2,3
    "mutex": true,                            // (optional) when this option is enabled, if there are other aplayer s playing on the same page, the player will pause
    "theme": "#e6d0b2",	                      // (optional) player style color setting, default: #b7daff
    "preload": "metadata",                    // (optional) music file preloading mode, options: 'none', 'metadata', 'auto', default: 'auto'
    "listmaxheight": "513px",                 // (optional) the maximum length of the playlist
    "music": [
            "title": "CoCo",
            "author": "Jeff Williams",
            "url": "caffeine.mp3",
            "pic": "caffeine.jpeg",
            "lrc": "caffeine.txt"
            "title": "アイロニ",
            "author": "Lu Nai",
            "url": "irony.mp3",
            "pic": "irony.jpg"
{% endaplayerlist %}


MetingJS is an APlayer derivative player based on Meting API. After MetingJS is introduced, the player will support music playback on QQ music, Netease cloud music, shrimp, cool dog, Baidu and other platforms.

If you want to use MetingJS in this plug-in, set it in the Hexo configuration file _config.yml:

  meting: true

Then you can use the MetingJS player in the article through {% meting...%}:

<!-- 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 list of options for {% meting%} is as follows:

optionDefault valuedescribe
idRequired valueSong id / playlist id / album id / search keyword
serverRequired valueMusic platform: netease, tencent, kugou, xiami, baidu
typeRequired valuesong, playlist, album, search, artist
fixedfalseTurn on fixed mode
minifalseTurn on mini mode
loopallList loop mode: all, one,none
orderlistList playback mode: list, random
volume0.7Player volume
lrctype0Lyrics format type
listfoldedfalseSpecifies whether the music playlist is collapsed
storagenamemetingjsThe key name of the storage player setting in LocalStorage
autoplaytrueAuto play, the mobile browser does not support this function temporarily
mutextrueWhen this option is on, if there are other aplayer s playing on the same page, the player will pause
listmaxheight340pxMaximum length of playlist
preloadautoMusic file preload mode, options: none, metadata, auto
theme#ad7a86Player style color settings

In addition, you can customize the configuration;
more: DIYgod/APlayer


If you only use aplayer, you need to configure the song url and lyrics url yourself. It is troublesome. It is recommended to use aplayer+MeingJS directly.

The most important and difficult step in using aplayer+MeingJS is to find the id number of the song or song list corresponding to the music platform.

Netease cloud music id is easy to find. Other music platforms have been encrypted several times, so it is difficult to find their music id number.

Here's how I organize it:

netease cloud music (netease)

Go to Netease cloud music client or web page to select favorite songs or song lists, and then click share to get a sharing link;
There will be the id number of the song or song list in the sharing link.

For example, I choose the audio list to get the sharing link:

Share the "cloud music audio list" created by Netease cloud music: (from @ Netease cloud music)

Where playlist?id=1978921795 is the id number of the song list;
{% endnote %}
Use example:
Remember to change the server and type

Electronic audio list

{% meting "1978921795" "netease" "playlist" "mutex:true" "theme:#777777" %}

Qiu Mingshan

{% meting "1359121313" "netease" "song" "mutex:true" "theme:#6F42C1" %}

Lin Junjie – dimple

{% meting "108468" "netease" "song" "mutex:true" "theme:#5CB85C" %}

QQ music (tencent)

Go to QQ music client or web page to select favorite songs or song lists, and then click Share - > copy link to obtain the sharing link;
Get: "Hu Ge" rain in June " @"QQ music"

Open the link in the browser, and the link will change in the search box. Copy the changed link.
For example, the link above will become: 」

Note that there will be an id number similar to songmid=004ND60i0f49Tf in the connection, that is, the song or song list id.

Only free songs can be heard!

Use example:
Remember to change the server and type
Hu Ge – rain in June

{% meting "004ND60i0f49Tf" "tencent" "song" "mutex:true" "theme:#D9534F" %}

Mai Zhenhong -- seeing the snow and falling into the world

{% meting "003IgzYb2zRkt1" "tencent" "song" "mutex:true" "theme:#F0AD4E" %}

Self built song list -- songs sung into my heart in those years

{% meting "4263757413" "tencent" "playlist" "mutex:true" "theme:#428BCA" %}

Light music - Xia ye and secret love

{% meting "002ocsmn2l3ukH" "tencent" "song" "mutex:true" "theme:#0F0F0F" %}

kugou music

It's too hard!

And qq music access links the same way;

  • It's not easy to get the link. You can usually find the album number;
  • Sometimes, even if you find the album number and change the type to album, you may not be able to > succeed. Either an error cannot play Not available, or an unknown playlist appears;
  • Cool dog music is basically paid to listen to music. Even if the id number is successfully found, it cannot be played (I can't crack member Music);

Barely find a song to play:

{% meting "9176014" "kugou" "album" "mutex:true" "theme:#5CB85C" %}

Qianqian music (baidu)

! unresolved
I really admire this encryption!!!

Shrimp music (xiami)

! shrimp music is up!

Posted by bgomillion on Sat, 16 Oct 2021 00:48:43 -0700