Hexo框架Fluid主题使用hexo-tag-aplayer组件播放网易云音乐

Aplayer是一个非常好看、简洁而优雅的音乐播放器，配置起来也不繁杂，但是其中也有一些坑，这里记录一下。

环境为Ubuntu，nodeJS版本12.0.0，npm版本6.9.0，hexo版本5.4.2

安装Aplayer

cd到博客根目录，执行

npm install --save hexo-tag-aplayer

此时node_module文件夹会多出来一个aplayer文件夹

ubuntu@VM-
-
-ubuntu:~
/blog$ ls node_modules/
 | 
grep
 aplayer
aplayer
hexo-tag-aplayer

将dist文件夹复制一份到主题目录文件下的source文件夹下
（注意后面我所说的source文件夹都指的是主题目录下的 ）

配置Aplayer

在source/js下新建一个amusic.js（自定义），手动配置Aplayer。audio中就是配置歌曲，参数的信息在官网找就好了，有中文很好找。

const
 ap = 
new
 APlayer({
container
: document.getElementById(
'aplayer'
),
    fixed: 
true
,
	  autoplay: 
false
, 
//关闭自动播放
    audio: [
	{
        name: 
''
,
        artist: 
''
,
        url: 
''
,
        cover: 
''
,
        lrc: 
''
,
    }, 
	]
});

这里需要手动填写的内容有：
name-歌曲名
artist-歌手名
url-歌曲链接
cover-歌曲封面
lrc-歌词

快链

歌曲链接是不能直接用官网的链接，需要使用外链。拿网易云音乐为例
例如：《特别的人》 歌手：方大同
网址是https://music.163.com/#/song?id=28403111，它的ID是28403111
那么这首歌的外链就是http://music.163.com/song/media/outer/url?id=28403111.mp3
也就是说外链的下载规则为：http://music.163.com/song/media/outer/url?id=数字ID.mp3
但要注意的是，网易云VIP单曲似乎不提供外链……
我自己一般网易云没有的话就直接Google去搜，锁着找一些专门提供快链的网站，http://music.xf1433.com/ 这个是我白天的时候用的，但不知道为啥晚上回家打不开了……离谱
还有一个快链来源：打开chrome控制台-Network,播放音乐后选择筛选media类型的URL，就可以了。
快链直接复制封面图片的地址，填写即可

歌词

歌词在官网有介绍三种插入方式，LRC、JS、HTML，后2种代码怼上去太繁杂了，直接拒绝。LRC我没有尝试成功，在别的网站那里找到另一种方式，如下：
LRC文件即歌词文件，格式一般是时间轴+歌词

[ti:不得不爱]
[ar:潘玮柏]
[al:高手]
[BY:]
[00:01.985]
www
.gecimao
.com
★QQ122121036 
[00:29.023]
天天都需要你爱 
[00:31.605]
我的心思由你猜 
[00:34.306]
I
 love you 
[00:35.675]
我就是要你让我每天都精彩 
[00:40.959]
天天把它挂嘴边 
[00:43.541]
到底什么是真爱 
[00:46.367]
I
 love you  
……………

我的做法是在网上找到这种格式的文本（搜索歌名+lrc 或者找专门的网站），直接复制下来，然后在我的ubuntu上touch一个文件，vim编辑好，注意一下编码是UTF-8。
配置文件中的lrc字段，其实只要是可以访问当的lrc文件就可以了，因此可以直接将lrc文件上传至github，通过域名能够访问到即可：
把在source下创建一个lrcs目录，将所有的LRC文件丢进去

歌词放在这个位置，部署后通过域名+/lrcs/xxx.lrc就可以访问到了，同时amusic.js文件配置好对应位置即可
（补充）需要注意的是，歌词默认展示的位置是底部居中，会遮挡一部分文字，最底部的统计也会被遮挡。至于怎么修改这个地方，我还没有去研究，知道的同学可以留言说一下。
展示一下我的

const ap = new APlayer({
    container: document.getElementById('aplayer'),
    fixed: true,
	  autoplay: false, 
//自动播放
    audio: [
	{
        name: '特别的人',
        artist: '方大同',
        url: 'http://music.163.com/song/media/outer/url?id=
.mp3',
        cover: 'https://p1.music.126.net/RTB72JJJapo01l4XfVDAWQ==/
.jpg',
        lrc: 'https://zhouyinglin.cn/lrcs/特别的人.lrc',
    },
        {
        name: '身骑白马',
        artist: '徐佳莹',
        url: 'http://music.163.com/song/media/outer/url?id=
.mp3',
        cover: 'http://p2.music.126.net/jSLMqcE_Yq27rRKDNrRKcA==/
.jpg',
        lrc: 'https://zhouyinglin.cn/lrcs/身骑白马.lrc',
    },
	]
});

添加到页面

由于fluid主题中留有footer的位置，这里也是一些小组件首选放置之地

<
link
rel
=
"stylesheet"
href
=
"/dist/APlayer.min.css"
>
<
div
id
=
"aplayer"
>
</
div
>
<
script
type
=
"text/javascript"
src
=
"/dist/APlayer.min.js"
>
</
script
>
<
script
type
=
"text/javascript"
src
=
"/js/diy/music.js"
>
</
script
>

注意这里的id需要与amusic.js中的getElementById填的ID相同，确认好之后部署。