Skip to content
On this page

音频播放

使用 APlayer

Kira-Hexo 自带了 hexo-tag-aplayer 依赖,用户可以使用它在文章中插入音乐。

关于 aplayer 的用法可以查阅官方文档

markdown
<!-- 简单示例 (id, server, type)  -->
{% meting "60198" "netease" "playlist" %}

<!-- 进阶示例 -->
{% meting "60198" "netease" "playlist" "autoplay" "mutex:false" "listmaxheight:340px" "preload:none" "theme:#ad7a86"%}

TIP

hexo-theme-kira@1.3.0 版本开始,我们已经支持直接使用 {% meting %} 标签使用 MetingJS 播放器。如果您曾是旧版用户,我们强烈建议您将 _config.yml 中的 aplayer 配置移除或将 aplayer.asset_inject 设置为 false

下面是 meting 标签的参数列表:

选项默认值描述
id必须值歌曲 id / 播放列表 id / 相册 id / 搜索关键字
server必须值音乐平台: netease, tencent, kugou, xiami, baidu
type必须值song, playlist, album, search, artist
fixedfalse开启固定模式
minifalse开启迷你模式
loopall列表循环模式:all, one,none
orderlist列表播放模式: list, random
volume0.7播放器音量
lrctype0歌词格式类型
listfoldedfalse指定音乐播放列表是否折叠
storagenamemetingjsLocalStorage 中存储播放器设定的键名
autoplaytrue自动播放,移动端浏览器暂时不支持此功能
mutextrue该选项开启时,如果同页面有其他 aplayer 播放,该播放器会暂停
listmaxheight340px播放列表的最大长度
preloadauto音乐文件预载入模式,可选项: none, metadata, auto
theme#ad7a86播放器风格色彩设置

旧版本兼容

在低于 1.3.0 的版本中,你可以在 _config.yml 当中添加下面的配置来开启 APlayer 对 MetingJS 的支持:

yaml
aplayer:
    meting: true
    asset_inject: false # 请务必将该值设置为 false

现在你可以通过 {% meting ... %} 在文章中使用 MetingJS 播放器了。

APlayer导致的资源污染

由于 hexo-tag-aplayer 默认会自动注入资源,会对您文档的构建产物造成资源污染。因此,如果您仍在使用低于 1.3.0 的 kira-hexo,我们强烈建议您更新至 1.3.0 版本以上,并完全移除 _config.yml 中的 aplayer 相关配置或将 aplayer.asset_inject 设置为 false