利用aplayer插件给博客添加音乐播放器功能
一. 安装插件
首先找到站点文件夹根目录，打开命令行，输入如下命令
1
| npm install hexo-tag-aplayer --save
|
等待下载安装完成即可
二. 获取音乐链接外链
利用不同的播放器都可以获得音乐外链
这里我借用网易云音乐获取歌曲外链，例如我想插入歌曲《旅行者一号》
在网易云网站中搜索这首歌曲，并打开歌曲的网页播放器，它有一个网址
https://music.163.com/#/song?id=490439632
网站后面的 id=490439632 就是歌曲的编号了。然后将歌曲的编号加入下面的链接中
http://music.163.com/song/media/outer/url?id= .mp3
例如我这里的外链就是
http://music.163.com/song/media/outer/url?id=490439632.mp3
三. 文章中插入播放器
在markdown文章中插如下入语句
1
| {% aplayer title author url [picture_url, narrow, autoplay, width:xxx, lrc:xxx] %}
|
其中的标签参数解释如下
1
2
3
4
5
6
7
8
9
10
11
| title : 曲目标题
author: 曲目作者
url: 音乐文件 URL 地址
picture_url: (可选) 音乐对应的图片地址
narrow: （可选）播放器袖珍风格
autoplay: (可选) 自动播放，移动端浏览器暂时不支持此功能
width:xxx: (可选) 播放器宽度 (默认: 100%)
lrc:xxx: （可选）歌词文件 URL 地址
当开启 Hexo 的 文章资源文件夹 功能时，可以将图片、音乐文件、歌词文件放入与文章对应的资源文件夹中，然后直接引用：
{% aplayer "Caffeine" "Jeff Williams" "caffeine.mp3" "picture.jpg" "lrc:caffeine.txt" %}
|
例如
1
| {% aplayer "旅行者一号" "合唱团" "http://music.163.com/song/media/outer/url?id=490439632.mp3" "https://img-blog.csdnimg.cn/20200830142014845.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMTM4NDU0,size_16,color_FFFFFF,t_70#pic_center" %}
|
效果如下
An audio error has occurred.
到这里基本的播放功能就已经配置完成了
四. 给播放器添加歌词
歌词标签
除了使用标签 lrc 选项来设定歌词，也可以直接使用 aplayerlrc 标签来直接插入歌词文本在博客中：
我们可以利用网易云提供的API来下载歌词
打开网址
http://music.163.com/api/song/media?id=490439632
这就是我所想要下载的歌词。注意网址后面的id就是我们上面的歌曲id
不过这个网址中的歌词还包含了一些lrc文件的前后缀，需要把它整理成如下格式:
1
2
3
| {% aplayerlrc "title" "author" "url" "autoplay" %}
[00:00.00]lrc here
{% endaplayerlrc %}
|
例如这首歌的歌词就是这样:
1
2
3
| {% aplayerlrc "旅行者一号" "合唱团" "http://music.163.com/song/media/outer/url?id=490439632.mp3" %}
[00:04.181]钢琴伴奏：白苑彤[00:06.367]录音/混音：莫家伟[00:07.552][00:10.500]小小火车 快快开向南方[00:17.500]是昨夜的星辰润化作春风[00:22.200]吹绿了小稻秧[00:27.550]小小火车 快快开向南方[00:34.354]饭后三点的窗外 摇曳河道两旁[00:38.851]洁白的小铃兰[00:43.700]春假已经过了一半[00:47.228]小山电话说功课还没做完(太多啦！)[00:52.261]我挎上老街买的白色背包 想四处游玩![01:00.494]海棠山茶紫玉兰 六十四只小鸳鸯[01:09.118]白兔野马梅花鹿 我热爱的大自然[01:17.758]敲鱼松糕大馄饨 三元一份桂花糖[01:27.300]朱砂白墨纸风筝 追着白云山外山[01:38.610][01:56.876]小小火车 快快开向南方[02:04.400]期待一个温暖又美丽的清晨[02:08.664]薄雾飘散的车站[02:13.404]小美亲手做的饼干[02:16.891]虽然有点硬但是还得吃完 (不想吃就寄还给我!)[02:22.060]老妈在远程普及注意事项[02:25.800]知道! 不要太紧张 安心啦![02:30.588]海棠山茶紫玉兰 六十四只小鸳鸯[02:38.781]白兔野马梅花鹿 我热爱的大自然[02:47.448]敲鱼松糕大馄饨 三元一份桂花糖[02:57.000]朱砂白墨纸风筝 追着白云山外山[03:09.400]啦啦啦啦啦啦啦 啦啦啦啦啦啦啦[03:18.603]朱砂白墨纸风筝 追着白云山外山[03:30.200]
{% endaplayerlrc %}
|
效果如下:
旅行者一号
- 合唱团
钢琴伴奏：白苑彤
录音/混音：莫家伟
小小火车 快快开向南方
小小火车 快快开向南方
是昨夜的星辰润化作春风
吹绿了小稻秧
小小火车 快快开向南方
饭后三点的窗外 摇曳河道两旁
洁白的小铃兰
春假已经过了一半
小山电话说功课还没做完(太多啦！)
我挎上老街买的白色背包 想四处游玩!
海棠山茶紫玉兰 六十四只小鸳鸯
白兔野马梅花鹿 我热爱的大自然
敲鱼松糕大馄饨 三元一份桂花糖
朱砂白墨纸风筝 追着白云山外山
小小火车 快快开向南方
小小火车 快快开向南方
期待一个温暖又美丽的清晨
薄雾飘散的车站
小美亲手做的饼干
虽然有点硬但是还得吃完 (不想吃就寄还给我!)
老妈在远程普及注意事项
知道! 不要太紧张 安心啦!
海棠山茶紫玉兰 六十四只小鸳鸯
白兔野马梅花鹿 我热爱的大自然
敲鱼松糕大馄饨 三元一份桂花糖
朱砂白墨纸风筝 追着白云山外山
啦啦啦啦啦啦啦 啦啦啦啦啦啦啦
朱砂白墨纸风筝 追着白云山外山
An audio error has occurred.
还可以给歌曲添加播放列表
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| 播放列表
{% aplayerlist %}
{
"narrow": false, // （可选）播放器袖珍风格
"autoplay": true, // （可选) 自动播放，移动端浏览器暂时不支持此功能
"mode": "random", // （可选）曲目循环类型，有 'random'（随机播放）, 'single' (单曲播放), 'circulation' (循环播放), 'order' (列表播放)， 默认：'circulation'
"showlrc": 3, // （可选）歌词显示配置项，可选项有：1,2,3
"mutex": true, // （可选）该选项开启时，如果同页面有其他 aplayer 播放，该播放器会暂停
"theme": "#e6d0b2", // （可选）播放器风格色彩设置，默认：#b7daff
"preload": "metadata", // （可选）音乐文件预载入模式，可选项： 'none' 'metadata' 'auto', 默认: 'auto'
"listmaxheight": "513px", // (可选) 该播放列表的最大长度
"music": [
{
"title": "CoCo",
"author": "Jeff Williams",
"url": "caffeine.mp3",
"pic": "caffeine.jpeg",
"lrc": "caffeine.txt"
},
{
"title": "アイロニ",
"author": "鹿乃",
"url": "irony.mp3",
"pic": "irony.jpg"
}
]
}
{% endaplayerlist %}
|
v1.5.2