music
Dependency:
- 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 - > https://kartjim.top/2021/10/16/music
hexo-tag-aplayer
JavaScript based player plug-in
github - DIYgod/APlayer
Using the aplayer plug-in in hexo:
download
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:
playlist
{% 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 %}
MeingJS
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:
aplayer: 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:
| option | Default value | describe |
|---|---|---|
| id | Required value | Song id / playlist id / album id / search keyword |
| server | Required value | Music platform: netease, tencent, kugou, xiami, baidu |
| type | Required value | song, playlist, album, search, artist |
| fixed | false | Turn on fixed mode |
| mini | false | Turn on mini mode |
| loop | all | List loop mode: all, one,none |
| order | list | List playback mode: list, random |
| volume | 0.7 | Player volume |
| lrctype | 0 | Lyrics format type |
| listfolded | false | Specifies whether the music playlist is collapsed |
| storagename | metingjs | The key name of the storage player setting in LocalStorage |
| autoplay | true | Auto play, the mobile browser does not support this function temporarily |
| mutex | true | When this option is on, if there are other aplayer s playing on the same page, the player will pause |
| listmaxheight | 340px | Maximum length of playlist |
| preload | auto | Music file preload mode, options: none, metadata, auto |
| theme | #ad7a86 | Player style color settings |
In addition, you can customize the configuration;
more: DIYgod/APlayer
use
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: https://y.music.163.com/m/playlist?id=1978921795&userid=1591897049&creatorId=1 (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 " https://c.y.qq.com/base/fcgi-bin/u?__=M2H4qb43 @"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: https://i.y.qq.com/n2/m/playsong/index.html?ADTAG=cbshare&_wv=1&appshare=android_qq&appsongtype=1&appversion=10180010&channelId=10036163&hosteuin=owCq7wosNKE57v%2A%2A&openinqqmusic=1&platform=11&songmid=004ND60i0f49Tf&type=0 」
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;
However:
- 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!