konata此方

wish you happy everyday

0%

给博客添加音乐播放器

发表于 更新于 分类于 Valine：

利用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" %}

效果如下


        

        

到这里基本的播放功能就已经配置完成了




四. 给播放器添加歌词




歌词标签


除了使用标签 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 %}


效果如下:



				
[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]

			

			

还可以给歌曲添加播放列表 
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 %}