前言

想要给博客添加音乐，最简单的方法便是利用第三方音乐平台提供的外链播放器，可是效果并不好，外观丑没歌词且体验极差。

如果使用Hexo-Tag-Aplayer插件的话这个问题就能很好地解决了。

原先 hexo-tag-aplayer 不支持 MetingJS，使得需要图片url，音乐url等等参数，操作起来都很麻烦，需要去音乐网站扒音乐播放链接或者下载下来存储在七牛云或本地。

但是3.0新版本的Aplayer已经支持MeingJS了，MetingJS 是基于Meting API 的 APlayer 衍生播放器，引入 MetingJS 后，播放器将支持对于 QQ音乐、网易云音乐、虾米、酷狗、百度等平台的音乐播放。

具体过程：

使用音乐平台提供插件

这里以网易云为例，找到一首歌曲并生成外链播放器，复制html代码：

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=29004400&auto=1&height=66"></iframe>

在合适的地方插入代码即可，效果如下：

其中利用第三方音乐平台生成外链播放器最大的缺点就是有些音乐因为版权保护，无法生成外链：

使用 Hexo-Tag-Aplayer 插件

hexo-tag-aplayer 就是将 APlayer 内嵌入博客页面的 Hexo 插件。

首先执行安装命令：

npm install --save hexo-tag-aplayer

然后如果你想使用上文提到的 MetingJS 功能，请在 Hexo 配置文件 _config.yml 中设置：

aplayer:meting: true

接着找到一个歌单、歌曲或专辑的链接，复制这个链接的id，这里以QQ音乐举例： https://y.qq.com/n/yqq/playlist/7868042847.html ，这个歌单的id就是7868042847；

最后将以下示例代码插入到你想要呈现播放器的地方即可：

引用Aplayer播放器：

<linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/aplayer@1.10/dist/APlayer.min.css">
<scriptsrc="https://cdn.jsdelivr.net/npm/aplayer@1.10/dist/APlayer.min.js"></script>
<scriptsrc="https://cdn.jsdelivr.net/npm/meting@1.2/dist/Meting.min.js"></script>

插入播放器：

{% meting "7868005687" "tencent" "playlist" "theme:#555" "mutex:true" "listmaxheight:1000px" "preload:auto" %}

其中的tencent为公司名，也就是音乐平台，如: netease, tencent, kugou, xiami, baidu；

有关选项列表如下:

选项	默认值	描述
id	必须值	歌曲 id / 播放列表 id / 相册 id / 搜索关键字
server	必须值	音乐平台: `netease`, `tencent`, `kugou`, `xiami`, `baidu`
type	必须值	`song`, `playlist`, `album`, `search`, `artist`
fixed	`false`	开启固定模式
mini	`false`	开启迷你模式
loop	`all`	列表循环模式：`all`, `one`,`none`
order	`list`	列表播放模式： `list`, `random`
volume	0.7	播放器音量
lrctype	0	歌词格式类型
listfolded	`false`	指定音乐播放列表是否折叠
storagename	`metingjs`	LocalStorage 中存储播放器设定的键名
autoplay	`true`	自动播放，移动端浏览器暂时不支持此功能
mutex	`true`	该选项开启时，如果同页面有其他 aplayer 播放，该播放器会暂停
listmaxheight	`340px`	播放列表的最大长度
preload	`auto`	音乐文件预载入模式，可选项： `none`, `metadata`, `auto`
theme	`#ad7a86`	播放器风格色彩设置

进阶教程

添加全局吸底Aplayer教程

这里以Butterfly主题为例，参考文章：https://butterfly.js.org/posts/507c070f/

（图源：Butterfly）

关闭 asset_inject

此步骤适用于安装了hexo-tag-aplayer插件的人

由于需要全局都插入aplayer和meting资源，为了防止插入重复的资源，需要把asset_inject设为false

在Hexo的配置文件中：

aplayer:meting: trueasset_inject: false

开启主题的AplayerInject

在主题的配置文件中，enable设为true和per_page设为true：

# Inject the css and script (aplayer/meting)
aplayerInject:enable: trueper_page: true

把Aplayer代码插入到主题配置文件

inject:head:bottom:- <div class="aplayer" data-id="7868042847" data-server="tencent" data-type="playlist" data-fixed="true" data-mini="true" data-listFolded="false" data-order="random" data-preload="none" data-autoplay="true" muted></div>

运行Hexo就可以看到网页左下角出现了Aplayer

最后，如果你想切换页面时，音乐不会中断。请把主题配置文件的pjax设为true

为博客添加音乐页面

输入命令新建一个名为music的page：

hexo new page music

打开博客根目录/source/music/index.md文件，写入以下代码即可：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer@1.10/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@1.2/dist/Meting.min.js"></script>
{% meting "7868005687" "tencent" "playlist" "theme:#555" "mutex:true" "listmaxheight:1000px" "preload:auto" %}

效果：

我的歌单页面：https://amnesia-f.github.io/music/

结语

其他参数

名称	默认值	描述
container	document.querySelector	播放器容器元素
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

其他详见：APlayer官方文档

Hexo博客技巧：为博客插入音乐相关推荐

php插入音乐代码,如何修改Wordpress博客代码在文章中插入音乐 | 垃圾站
垃圾站博客昨天在网上看到有一篇通过修改Wordpress博客代码在文章中插入音乐的教程,特此整理编辑后分享给大家,教程如下: 1.下载swf播放器(点击下载:player.swf )上传到Wordpr ...
在Hexo搭建的博客中插入音乐或者视频
原文地址在Hexo搭建的博客中插入音乐或者视频用hexo搭建博客后,记录了自己生活和学习中的很多事情.今天偶然想到能不能在博客中插入音乐和视频呢?然后就开始了今天的历程.... hexo-tag-a ...
Hexo博客中插入音乐
hexo 搭建的个人博客:Aileen-zl 1. 前言正所谓没有逼格的博客不是好博客,而在自己搭建的博客里插入音乐或者视频能秒秒钟拉高博客的格调.Hexo作为一款优秀的静态博客生成器,当然也少不了 ...
hexo 菜单_Hexo 搭建个人博客教程 - 6 - 设置菜单，发布博客 - 2018
设置menu 位置:~\themes\next下的_config.yml文件,我的在D:\hexo\hexo\themes\next 去掉about和categories的注释menu: home: ...
hexo部署成功但是没效果_使用 Hexo+GitHub 搭建个人免费博客教程（小白向）
前言近些年来很多用户都喜欢使用 GitHub Pages 来搭建 Hexo 静态博客网站,其最吸引人的莫过于完全免费使用,并且非常稳定. 虽然搭建时比较麻烦,有点折腾,但是配置完成后,基本不需要操心 ...
猿创征文｜Hexo+Github搭建完全免费个人博客详细教程
前言完全免费的搭建个人博客,没有任何收费,零基础也能上手,不需要编程基础,跟着操作来即可. 首先: 要了解一下我们搭建博客要用到的框架:Hexo是高效的静态站点生成框架,它基于Node.js.通过H ...
Hexo+GitHub Pages搭建个人博客（ 0 基础、小白值得一看--实力软文！）- 初行ᵀᵀᴴ
文章目录 **写在之前** 一.搭建前的准备工作 - 安装工具 1.1 附上工具链接 1.2 Git 1.3 Node.js 1.4 GitHub Desktop 1.5 Notepad++ 1.6 ...
Hexo+Github+Vscode搭建个人博客内含添加图片和更换主题
本文导航 0. 环境配置 1. 连接GitHub 2. 创建Github Pages仓库 3. 本地安装Hexo博客程序 4. Hexo初始化和本地预览博客目录结构 5. 部署Hexo到Github ...
基于Hexo+Gitee的个人静态博客网页搭建
基于Hexo+Gitee的个人静态博客网页搭建前言环境搭建:NodeJs+Git+Hexo (Win10+64位) NodeJs安装 Hexo安装主题配置 Gitee仓库创建和部署个性化配置 ...

Hexo博客技巧：为博客插入音乐

前言