还来不及，仔仔细细写下你的关于，描述我如何爱你，你却微笑的离我而去。

———-《我不配》

摘要

因为我并不了解前端HTML5或者是JavaScript等等，Hexo个人博客添加APlayer音乐播放器这个功能我前前后后Google了很多博客，完成了大部分博客介绍的内容。完整的GitHub上面开源的部分的演示内容是能够显示封面，显示歌手名，显示歌词，曲目列表，进度于音量调节，启、停播放控制。我一会就成功添加了除显示歌词以外的其余全部功能，后续大概花了6个小时在研究如何显示歌词上面，最后还是没有成功。

期间也尝试过联系GitHub开源APlayer项目的作者，qq和telegram都尝试了，都没有收到回信。（可能是APlayer是2018年开源的项目，现在不再维护，qq群也设置成禁止任何人加入。）啊啊啊我为什么要这么执着了，现在看来感觉真浪费时间🤡。

我在此分享我的全程思路和尝试，希望我的前车之鉴，我踩过的坑，后人不要再经历我的痛苦呜呜呜呜呜😭😭😭😭😭

如果有人知道了如何显示歌词，可以在评论区留言。

Hexo个人博客添加APlayer音乐播放器功能

效果图

引入APlayer音乐播放器

下载APlayer源码

APlayer源码下载地址：https://github.com/MoePlayer/APlayer

将源码放到next主题的source文件夹中

下载到APlayer源码压缩包，解压后把dist文件夹复制到\themes\next\source目录中。

放入自己喜欢的音乐

在dist目录里，新建music.js文件，并把如下代码粘贴进去。

代码

const ap = new APlayer({

  container: document.getElementById('aplayer'),

  fixed: true,

  autoplay: false,

  lrcType: 3,

  loop: 'all',

  order: 'random',

  preload: 'auto',

  volume: 0.7,

  mutex: true,

  listFolded: false,

  listMaxHeight: 120,

 

  audio: [

    {

    name: "Round & Laundry",

    artist: 'Nai Br.XX、Celeina Ann',

    url: 'https://bradtorresblog.oss-cn-beijing.aliyuncs.com/Music/MusicURL0412/Nai%20Br.XX%E3%80%81Celeina%20Ann%20-%20Round%20%26%20Laundry.flac',

    cover: 'https://bradtorresblog.oss-cn-beijing.aliyuncs.com/Music/Cover0412/The_Loneliest_Girl.png',

    lrc: 'https://bradtorresblog.oss-cn-beijing.aliyuncs.com/Music/LRC0412/Shake%20It%20Off-Taylor%20Swift_revise.lrc',

   },

     {

    name: 'Shake It Off (Live)',

    artist: 'Taylor Swift',

    url: 'https://bradtorresblog.oss-cn-beijing.aliyuncs.com/Music/MusicURL0412/Taylor%20Swift%20-%20Shake%20It%20Off.flac',

    cover: 'https://bradtorresblog.oss-cn-beijing.aliyuncs.com/Music/Cover0412/Shake%20it%20off.jpg',

    lrc: 'https://bradtorresblog.oss-cn-beijing.aliyuncs.com/Music/LRC0412/Shake%20It%20Off-Taylor%20Swift_revise.lrc',

   },

   {

    name: 'Welcome To New York (The 1989 World Tour Live)',

    artist: 'Taylor Swift',

    url: 'https://bradtorresblog.oss-cn-beijing.aliyuncs.com/Music/MusicURL0412/Taylor%20Swift%20-%20Welcome%20To%20New%20York%20%28The%201989%20World%20Tour%20Live%29.mp3',

    cover: 'https://bradtorresblog.oss-cn-beijing.aliyuncs.com/Music/Cover0412/Welcome%20To%20New%20York.jpg',

    lrc: 'https://bradtorresblog.oss-cn-beijing.aliyuncs.com/Music/LRC0412/Shake%20It%20Off-Taylor%20Swift_revise.lrc',

   },

     {

    name: 'Kiss Me',

    artist: 'Nai Br.XX、Celeina Ann',

    url: 'https://bradtorresblog.oss-cn-beijing.aliyuncs.com/Music/MusicURL0412/Nai%20Br.XX%E3%80%81Celeina%20Ann%20-%20Kiss%20Me.flac',

    cover: 'https://bradtorresblog.oss-cn-beijing.aliyuncs.com/Music/Cover0412/The_Loneliest_Girl.png',

    lrc: 'https://bradtorresblog.oss-cn-beijing.aliyuncs.com/Music/LRC0412/Shake%20It%20Off-Taylor%20Swift_revise.lrc',

   },

   {

    name: 'Bloom of Youth (风华正茂)',

    artist: '清水準一',

    url: 'https://bradtorresblog.oss-cn-beijing.aliyuncs.com/Music/MusicURL0412/%E6%B8%85%E6%B0%B4%E6%BA%96%E4%B8%80%20-%20Bloom%20of%20Youth%20%28%E9%A3%8E%E5%8D%8E%E6%AD%A3%E8%8C%82%29.flac',

    cover: 'http://p1.music.126.net/c5NVKUIAUcyN4BQUDbGnEg==/109951163221157827.jpg?param=130y130',

    lrc: 'https://bradtorresblog.oss-cn-beijing.aliyuncs.com/Music/LRC0412/Shake%20It%20Off-Taylor%20Swift_revise.lrc',

   }

  ]

});

参数说明

Aplayer主要参数说明：

名称	默认值	描述
container	document.querySelector(‘.aplayer’)	播放器容器元素
fixed	false	开启吸底模式, 详情
mini	false	开启迷你模式, 详情
autoplay	false	音频自动播放
theme	‘#b7daff’	主题色
loop	‘all’	音频循环播放, 可选值: ‘all’, ‘one’, ‘none’
order	‘list’	音频循环顺序, 可选值: ‘list’, ‘random’
preload	‘auto’	预加载，可选值: ‘none’, ‘metadata’, ‘auto’
volume	0.7	默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
audio	-	音频信息, 应该是一个对象或对象数组
audio.name	-	音频名称
audio.artist	-	音频艺术家
audio.url	-	音频链接
audio.cover	-	音频封面
audio.lrc	-	详情
audio.theme	-	切换到此音频时的主题色，比上面的 theme 优先级高
audio.type	‘auto’	可选值: ‘auto’, ‘hls’, ‘normal’ 或其他自定义类型, 详情
customAudioType	-	自定义类型，详情
mutex	true	互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
lrcType	0	详情
listFolded	false	列表默认折叠
listMaxHeight	-	列表最大高度
storageName	‘aplayer-setting’	存储播放器设置的 localStorage key

参考链接

如何获得歌曲URL

方法一：Hexo+Next添加网易云音乐

详情可以借鉴大佬的这篇博客

https://blog.csdn.net/Mculover666/article/details/90700059

歌曲的链接可以从这里免费生成。

[http://www.xmsj.org/?name=Shake%20it%20off&type=netease](http://www.xmsj.org/?name=Shake it off&type=netease)

本人感觉网易云的歌质量层次不齐，扒下来的链接url常常失效不稳定，导致歌曲无法播放。

网页会出现下面的报错

因此我采用的是第二种方法。

方法二:

一开始是想仅仅拿阿里云OSS作为图床的，详情配置见这个大佬的视频。

【Typora+PicGo+阿里云OSS实现云笔记|Typora上传图片】 https://www.bilibili.com/video/BV1ci4y1L7j8/?share_source=copy_web&vd_source=12b49fdcdd0ffebaac761ae3ad9f8764

图文教程见

Typora+PicGo+阿里云OSS搭建博客图床（超详细）

http://t.csdn.cn/frnT8

手把手教你Typora图床配置(PicGo+阿里云OSS/腾讯云COS)

http://t.csdn.cn/BuBaQ

后来为了解决歌曲的URL总是失效的问题，我就从趁着最后一天的酷狗音乐会员，下载了自己喜欢的歌曲到本地。

（用酷狗下载歌曲要注意下载的音质。如果是无损音质，得到的是后缀是KMGA的文件，无法在酷狗音乐里面播放，上传到阿里OSS后生成的URL链接无效。在网页里面会出现下面的报错。

6月一号补充：

下载得到kmg后缀的歌曲，上传到阿里OSS后生成的URL链接无效（就算你改后缀为MP3

也没有用，一样无效

亲测KMGA后缀的不行，就算将kmga后缀文件改后缀为flac也不行。经测试flac和mp3后缀的文件都可以

）

然后再将本地的歌曲上传到阿里云OSS。

直接拖拽即可

上传成功后在对应目录下查看

最后复制歌曲的URL到对应的参数url: ‘’就行了。

这里涉及到一个小问题，为什么不用QQ音乐。（~~酷狗音乐打钱~~）

简而言之就是为了方便后面获取歌曲的歌词文件LRC。

LRC，KRC，QRC文件的介绍

LRC(LRC是目前运用最广的歌词文件)

千千静听、酷我音乐都是用LRC做歌词解析的。歌词格式:

[00:02.37]三十而立

[00:03.12]

[00:03.80]作词：唐孝凡

[00:04.55]作曲：唐孝凡

[00:05.18]演唱：唐孝凡

[00:06.43]出品：深圳小龙文化

这种格式文件小，容易解析。但是，歌词的精度只能控制到一行

KRC(酷狗播放器专用的歌词文件)

KRC 是酷狗公司推出的专利歌词格式，主要是支持了逐字精准，解决了所谓“歌词显示不准确”的问题。让我们先浏览一下一个 .KRC 文件用记事本打开的前面一部分——

krc18F4飼!怢鹬???H椡盻Y継?螂MKB山?鱵z
7”_q鍽? 舝?煴渡貛韮枔to?龅?ㄩ乃8圛邬GG睙?垽eZ鸄1,倢诞?? -4孧Jx)?’*画姯汓袗塧9部潧恾蠒翰)彃湢炰X睱比柡犌栅],朢g |?塜蚳衖〇猤潚壚鲨蔒?Q}害

牨軖K悪w徊w>7? 藲?媺?攢A瓾湟泀闆坊囝”Io?€=?畨枞
6乺滼脥％踯每宪?T憐柩鳴-狞?x0O%€摨掋R?2胣＠?楸斕茺?7榥黖‑v洰窩?爻顄腛u陭’樺?_迿昔幾 6櫹w搷$幑^n@纄? 啅鸪嶬?涣樋话怾 ?l!?a秎婓sD?虥??澶?貮怿涧Jc? 鹣,贘F埡KQA雕淌邼魹?~k?娕芅T?︰闂眂匁1?擒{x駩癵{A莍燧

呃，等等。不是你电脑的问题——上面确实是一堆乱码！唉，酷狗歌词真不开放。除了在前面有“krc”供识别格式外，别的东西我们根本看不懂好吧！还好，根据《将酷狗krc歌词解析并转换为lrc歌词php源码》这篇高人写的文章，我们可以将后面的乱码解密解压后，得到正常的文本

QRC(QQ音乐播放器的歌词文件)

先前 QRC 格式是一种比较友好和开放的格式，但是现在……请看——

[offset:0]捬-偔!跖?J脚?唊?輣.[1]3蟐陕:v黣?nRvX+霟>?O??冰垙1U筘摉F屘?y芊凋FU蠱k?诘鄑?賓{麵J搈rZ滿?s抆M?Z讼烚?鋷粒Q@?e艩(?k硟廪Je撤?徇V=D葘”?嬝S

?稌oX?潥YpA翯?舼tfy?v黝?d.?叶滹な&`??蜫籛^媣(躯[1]闟愌?_?鵼;W[.癔锝眦6栭獔??瑆Sip+_wz€寕椨?騝痢碉鋭~?(蟒K?[1]???

嗯，它现在变成了一种，可以说比 KRC 还封闭的格式。现在我们既不能查看到其源码，也无法制作这种格式的歌词。腾讯客服网页火上浇油道，下载到的“QRC 类型”“不支持转换成 LRC 等其他类型”。我们现在只能粗略观察到 QRC 格式的一些特点，如支持逐字精准。

如何获得封面URL

简要概括

不用将图片拖拽到Typora的markdown格式的文本里面，我们直接把图片上传到阿里OSS。操作同上面的上传音频文件到阿里OSS的操作，仅仅将音频文件换成了图片文件。

最后复制图片文件的url到对应参数就行了。

倾囊相授

很多歌曲不好找封面，因为网上的大多数是专辑的封面，单曲的很少。我采用的方法是在bilibili里搜索你喜欢的歌曲

可以看到很多视频结果，挑选一个你喜欢的视频封面，点进去对应的视频。

在视频的下方分享按钮，选择获取视频分享链接

进入哔哩哔哩视频解析下载

https://bilibili.iiilab.com/

复制刚刚获取的视频分享链接到搜索框中，点击解析视频按钮

可以看到红框框里面出现两个对应的选项。

前者顾名思义，可以下载视频到本地。

后者望文生义，可以下载视频的封面。

点击另存图片为，我们就成功下载了自己喜欢歌曲的封面到本地电脑。

—————————————————————–分割线—————————————————————

六月七日补充

下载哔哩哔哩是视频，，还可以通过唧唧DOWN下载。（这个支持分P的视频一次性下载，功能更加全面人性化，同时还是完全免费的

进入他的官网下载即可

http://client.jijidown.com/

添加歌词的尝试

这一步我是花费了最多时间的。

在开源作者的GitHub上APlayer播放器的展示网页里面是可以显示歌词的。

https://aplayer.js.org/#/

但在我的电脑上无论怎么弄，都无法显示歌词。以下是我的尝试经历

采用LRC文件方式

将文件上传到阿里云OSS

复制URL链接到对应参数

结果网页里面报错

虽然无法显示歌词，但正常的播放功能是可以的。事实上，除了无法显示歌词之外，其余的一切正常。

为此我还怀疑LRC里面时间的精度

因为某些博客里面的文件是XXX.txt,而尝试过txt后缀文件

也怀疑过顶端的书写格式

后来被我一一排除，都不是，我的博客就是单纯的检测不到LRC文件而已。

采用JS 字符串方式

这里要注意，一行一行之间要用\n隔开

如原来是

[00:00.00] 作词 : Taylor Swift/Max Martin/Karl Johan Schuster

[00:01.00] 作曲 : Taylor Swift/Max Martin/Karl Johan Schuster

[00:04.97]I stay out too late, got nothing in my brain

[00:10.62]That’s what people say, that’s what people say

[00:16.32]I go on too many dates, but I can’t make them stay

[00:22.33]At least that’s what people say, that’s what people say

[00:28.52]But I keep cruising, can’t stop, won’t stop moving

[00:33.73]It's like I got this music in my mind saying it's gonna be alright

[00:41.08]Cause the players gonna play, play, play, play, play

[00:44.33]And the haters gonna hate, hate, hate, hate, hate

[00:47.00]Baby, I’m just gonna shake, shake, shake, shake, shake

[00:50.18]I shake it off, I shake it off

[00:52.51]Heartbreakers gonna break, break, break, break, break

[00:56.01]And the fakers gonna fake, fake, fake, fake, fake

[00:59.21]Baby, I’m just gonna shake, shake, shake, shake, shake

[01:02.15]I shake it off, I shake it off

[01:04.55]I’ll never miss a beat, I’m lightning on my feet

[01:10.31]And that’s what they didn’t see, that’s what they didn’t see

[01:16.59]I’m dancing on my own, I’ll make the moves up as I go

[01:22.27]And that’s what they didn’t know, that’s what they didn’t know

[01:28.14]But I keep cruising, can’t stop, won’t stop grooving

[01:33.53]It's like I got this music in my mind saying it's gonna be alright

[01:40.78]Cause the players gonna play, play, play, play, play

[01:43.97]And the haters gonna hate, hate, hate, hate, hate

[01:46.76]Baby, I’m just gonna shake, shake, shake, shake, shake

[01:49.91]I shake it off, I shake it off

[01:52.72]Heartbreakers gonna break, break, break, break, break

[01:55.69]And the fakers gonna fake, fake, fake, fake, fake

[01:58.78]Baby, I’m just gonna shake, shake, shake, shake, shake

[02:01.89]I shake it off, I shake it off

[02:05.15]I, I shake it off, I shake it off

[02:10.11]I, I shake it off, I shake it off

[02:17.82]Hey, hey, hey,

[02:19.38]just think while you’ve been getting down

[02:21.03]and out about the liars and dirty,

[02:22.90]dirty cheats in the world you could have been getting down to this sick beat

[02:28.74]My ex-man brought his new girlfriend

[02:31.46]She’s like “oh my God”, but I’m just gonna shake it

[02:34.52]And to the fella over there with the hella good hair

[02:37.37]Won’t you come on over, baby, we can shake, shake, shake

[02:42.16]Cause the players gonna play, play, play, play, play

[02:47.17]And the haters gonna hate, hate, hate, hate, hate

[02:49.81]Baby, I’m just gonna shake, shake, shake, shake, shake

[02:52.62]I shake it off, I shake it off

[02:55.38]Heartbreakers gonna break, break, break, break, break

[02:58.47]And the fakers gonna fake, fake, fake, fake, fake

[03:01.61]Baby, I’m just gonna shake, shake, shake, shake, shake

[03:04.56]I shake it off, I shake it off

[03:09.82]I, I shake it off, I shake it off

修改之后应该是

[00:00.00] 作词 : Taylor Swift/Max Martin/Karl Johan Schuster\n[00:01.00] 作曲 : Taylor Swift/Max Martin/Karl Johan Schuster\n[00:04.97]I stay out too late, got nothing in my brain\n[00:10.62]That’s what people say, that’s what people say\n[00:16.32]I go on too many dates, but I can’t make them stay\n[00:22.33]At least that’s what people say, that’s what people say\n[00:28.52]But I keep cruising, can’t stop, won’t stop moving\n[00:33.73]It's like I got this music in my mind saying it's gonna be alright\n[00:41.08]Cause the players gonna play, play, play, play, play\n[00:44.33]And the haters gonna hate, hate, hate, hate, hate\n[00:47.00]Baby, I’m just gonna shake, shake, shake, shake, shake\n[00:50.18]I shake it off, I shake it off\n[00:52.51]Heartbreakers gonna break, break, break, break, break\n[00:56.01]And the fakers gonna fake, fake, fake, fake, fake\n[00:59.21]Baby, I’m just gonna shake, shake, shake, shake, shake\n[01:02.15]I shake it off, I shake it off\n[01:04.55]I’ll never miss a beat, I’m lightning on my feet\n[01:10.31]And that’s what they didn’t see, that’s what they didn’t see\n[01:16.59]I’m dancing on my own, I’ll make the moves up as I go\n[01:22.27]And that’s what they didn’t know, that’s what they didn’t know\n[01:28.14]But I keep cruising, can’t stop, won’t stop grooving\n[01:33.53]It's like I got this music in my mind saying it's gonna be alright\n[01:40.78]Cause the players gonna play, play, play, play, play\n[01:43.97]And the haters gonna hate, hate, hate, hate, hate\n[01:46.76]Baby, I’m just gonna shake, shake, shake, shake, shake\n[01:49.91]I shake it off, I shake it off\n[01:52.72]Heartbreakers gonna break, break, break, break, break\n[01:55.69]And the fakers gonna fake, fake, fake, fake, fake\n[01:58.78]Baby, I’m just gonna shake, shake, shake, shake, shake\n[02:01.89]I shake it off, I shake it off\n[02:05.15]I, I shake it off, I shake it off\n[02:10.11]I, I shake it off, I shake it off\n[02:17.82]Hey, hey, hey, \n[02:19.38]just think while you’ve been getting down\n[02:21.03]and out about the liars and dirty, \n[02:22.90]dirty cheats in the world you could have been getting down to this sick beat\n[02:28.74]My ex-man brought his new girlfriend\n[02:31.46]She’s like “oh my God”, but I’m just gonna shake it\n[02:34.52]And to the fella over there with the hella good hair\n[02:37.37]Won’t you come on over, baby, we can shake, shake, shake\n[02:42.16]Cause the players gonna play, play, play, play, play\n[02:47.17]And the haters gonna hate, hate, hate, hate, hate\n[02:49.81]Baby, I’m just gonna shake, shake, shake, shake, shake\n[02:52.62]I shake it off, I shake it off\n[02:55.38]Heartbreakers gonna break, break, break, break, break\n[02:58.47]And the fakers gonna fake, fake, fake, fake, fake\n[03:01.61]Baby, I’m just gonna shake, shake, shake, shake, shake\n[03:04.56]I shake it off, I shake it off\n[03:09.82]I, I shake it off, I shake it off

但这个尝试也无效，甚至执行hexo clean& hexo g& hexo s -p 5555之后，左下角的整个播放器都消失了，也没有歌曲播放了。

采用HTML 方式

我没学过前端，所以这种方法就没有轻易尝试。到这里我也折腾浪费了够多时间了，所以我就停下来了。

在next主题下的layout中引入APlayer音乐播放器源码

在\themes\next\layout_layout.swig文件中，里新增如下代码：

重新部署

在blog目录下开启重新部署命令：

hexo clean& hexo g& hexo s -p 5555

其余精品教程

还希望更加详细的可以参考大佬发布在bilibili 的简易版视频教程

【保姆级教学带你安装Aplayer音乐播放器】 https://www.bilibili.com/video/BV1Q84y1A7kY/?share_source=copy_web&vd_source=12b49fdcdd0ffebaac761ae3ad9f8764

还有两个大佬的安装APlayer的博客也非常详细，讲到了很多我没遇到的问题，我没有踩过的坑

如何在博客中添加Aplayer音乐播放器

https://juejin.cn/post/7117427620190355486

HTML5 —— APlayer 音乐播放器

https://victor72.github.io/blog/2016/06/18/html5-audio-player/

折腾后的碎碎念

效率

整个过程花费了相当长的时间，经常性的忘记自己做到哪一步，看着近五十个网页找不着北，甚至做着做着开始忘记自己的目标，东一步西一步。效率极低，可能以后要在自己学习的时候加入番茄钟，或者做之前就估算自己每一步用多长时间做完，这样能够监视自己的效率。客观冷静的分析和优化策略。

性价比

做完之后在发觉，添加播放器的这部分真的花了太长时间了，尤其是添加歌词功能。我明明还有更加重要的事情去做，沉没成本太大让人更愿意吊死在一棵树上，要理性的看待，及时止损。

作用

如果自己学了前端的话，那我的折腾还算有点用。但是我没学，所以这些东西都是step by step的鼠标点点点的操作，花了时间却没有用。以后不能只看兴趣，想干啥就干啥，还是要有一个详尽的精确的每一小时的学习规划表。学习来了兴致往往不是好事，这只可能是迷失和偏离航道的前奏。

后续

后续我会专心更新博客内容，提升博客的质量，不弄这些花里胡哨的东西。如果有一些简单实用的美化博客方法我会做的，但是像这次的花费巨额时间收效甚微的我就不在重蹈覆辙了。