离Hexo博客搭建只差一个教程(四):第三方服务——APlayer
在上一篇教程中,我们介绍了 Valine 评论系统的安装,配置与应用。
仅有文字的博客总令人感到枯燥无味,在阅读博客时自动播放 BGM,不仅能给博客添逼格,还能表现个人品味喜好。
接下来,我们会介绍一款 HTML5 音乐播放器 —— APlayer 。
介绍
Wow, such a beautiful HTML5 music player
APlayer 是一款 HTML 音乐播放器。目前被广泛使用在各大知名社区论坛上。相比其他音乐播放器,APlayer的优势很明显:界面美观,轻量易用。
GitHub:https://github.com/MoePlayer/APlayer
中文文档:https://aplayer.js.org/#/zh-Hans
单曲
歌单
其他样式
同时提供 吸底模式 和 迷你模式。具体样式可前往官方展示页。
安装
1 | npm install aplayer --save |
最新的 Hexo-tag-aplayer 拓展插件已经内置 MetingJS 支持。本着易用性原则,本教程不介绍旧版使用的 APlayer + Meting 方案。
Hexo-tag-aplaper
hexo-tag-aplayer 是 APlayer 播放器的 Hexo 标签插件。相比起直接使用 APlayer ,安装和应用都更为简便。
GitHub:https://github.com/MoePlayer/hexo-tag-aplayer
中文文档:https://github.com/MoePlayer/hexo-tag-aplayer/blob/master/docs/README-zh_cn.md
安装
1 | npm install --save hexo-tag-aplayer |
常规使用方法
单曲
在需要添加播放器的页面中加入:
1 | {% aplayer "title" "author" "url" "picture_url" "narrow" "autoplay" "width:xxx" "lrc:xxx" %} |
参数 | 值 |
---|---|
title |
曲目标题。 |
author |
曲目作者。 |
url |
音乐文件 URL 地址。 |
picture_url |
(可选)音乐对应的图片地址。 |
narrow |
(可选)播放器袖珍风格。 |
autoplay |
(可选)自动播放,移动端浏览器暂时不支持此功能。 |
width |
(可选)播放器宽度 (默认: 100%) |
lrc |
(可选)歌词文件 URL 地址。 |
当开启 Hexo 的 文章资源文件夹 功能时,可以将图片、音乐文件、歌词文件放入与文章对应的资源文件夹中,然后直接引用:
1 | {% aplayer "Caffeine" "Jeff Williams" "caffeine.mp3" "picture.jpg" "lrc:caffeine.txt" %} |
播放列表
在需要添加播放器的页面中加入:
1 | {% aplayerlist %} |
参数 | 值 |
---|---|
narrow |
(可选)播放器袖珍风格。 |
autoplay |
(可选)自动播放,移动端浏览器暂时不支持此功能。 |
mode |
(可选)曲目循环类型,有 random (随机播放), single (单曲播放), circulation (循环播放), order (列表播放), 默认:circulation 。 |
showlrc |
(可选)歌词显示配置项,可选项有:1 ,2 ,3 。 |
mutex |
(可选)该选项开启时,如果同页面有其他 aplayer 播放,该播放器会暂停。 |
theme |
(可选)播放器风格色彩设置,默认:#b7daff 。 |
preload |
(可选)音乐文件预载入模式,可选项: none metadata auto , 默认: auto 。 |
listmaxheight |
(可选)该播放列表的最大长度。 |
title |
曲目标题。 |
author |
曲目作者。 |
url |
音乐文件 URL 地址。 |
pic |
音乐对应的图片地址。 |
lrc |
(可选)歌词文件 URL 地址。 |
示例:
1 | {% aplayerlist %} |
歌词标签
使用 aplayerlrc 标签在博客中直接插入歌词文本。示例:
1 | {% aplayerlrc "title" "author" "url" "autoplay" %} |
MetingJS方法
在 站点配置文件 中启用 meting 模式,在配置末尾添加:
1 | aplayer: |
同时提供以下配置项:
1 | aplayer: |
在需要添加播放器的页面加入:
1 | {% meting "选项" %} |
选项 | 默认值 | 描述 |
---|---|---|
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 |
播放器风格色彩设置 |
歌单示例:
1 | {% meting "60198" "netease" "playlist" "autoplay" "mutex:false" "listmaxheight:340px" "preload:none" "theme:#ad7a86"%} |
单曲示例:
1 | {% meting "543611431" "netease" "song" "autoplay:false" "theme:#1da496" %} |
其他问题
- 参数填写时要符合一定格式。参数值前要加入空格,文本内容要使用双引号括住。
- meting和aplayer同时使用的时候,aplayer无法显示出播放器。
参考文章
[1]Tianma.Hexo 折腾:音乐播放
写在后面
感谢您的阅读!若您在阅读时发现教程存在疏漏或无法理解的地方,可以通过 评论区留言 进行交流讨论。
此文章为原创作品,禁止转载。如需转载请先经过许可,并在转载中注明原作者及出处。
请 收藏
本博客,本博客将持续更新。
离Hexo博客搭建只差一个教程(四):第三方服务——APlayer