Butterfly 主题博客搭建音乐模块

前言

这篇帖子主要是分享如何搭建音乐模块以及搭建过程中遇到的一些问题

Aplayer 音乐播放器

Butterfly 主题自带了音乐播放器的功能，这也是最简单直接的方式（缺点是可能不够美观和功能不足）。Butterfly添加全局吸底Aplayer教程 | Butterfly

安装插件

在博客目录下执行

1	npm install hexo-tag-aplayer --save

在 Hexo的主题文件（config.yml）中找到aplayer修改它，如果没有就添加

1
2
3

aplayer:
  meting: true
  asset_inject: false

meting	启用 MetingJS 支持，允许你在文章中使用 `<meting-js>` 标签来嵌入音乐播放器。
asset_inject	主题自动注入 APlayer/Meting 的 CSS 和 JS 文件

修改主题的配置文件（_config.butterfly.yml)

1
2
3

aplayerInject:
  enable: true
  per_page: true

aplayerInject	用于控制 APlayer 资源注入行为的配置项
enable	是否启用 APlayer 资源自动注入功能
per_page	是否仅在“需要播放器的页面”才加载 APlayer 资源

然后再在主题的 _config.butterfly.yml 里找到有关inject设置（用bottom举例子）

inject:
  head:
  bottom:
    - <div class="aplayer no-destroy" data-id="60198" data-server="netease" data-type="playlist" data-fixed="true" data-autoplay="true"> </div>

data-id是歌单的id具体介绍可以看Butterfly添加全局吸底Aplayer教程 | Butterfly

之后重载博客就可以达到这样的效果

因为配置了全局吸底效果所以切换页面也不会暂停音乐。（VIP的音乐他只能播放试听片段）

音乐页播放器配置

如果你想再 music 页面也配置一个播放器所以要执行下面操作

效果预览

先确保你有 music 目录，如果没有就在博客根目录执行

1	hexo new page music

找到 index.md 文件添加下面这个代码

 # 🎵 音乐时光
  **享受美妙旋律吧！**
<!-- 音乐播放器 -->
<link rel="stylesheet" href="https://lib.baomitu.com/aplayer/1.10.1/APlayer.min.css">
<script src="https://lib.baomitu.com/aplayer/1.10.1/APlayer.min.js"></script>
<script src="https://lib.baomitu.com/meting/2.0.0/Meting.min.js"></script>

<meting-js
server="netease"
type="playlist"
id="60198"
fixed="false"
mini="false"
autoplay="false"
preload="metadata"
theme="#49B1F5"
volume="0.7">
</meting-js>

在网页中嵌入一个网易云音乐播放器的，它基于两个流行的开源库：APlayer 和 MetingJS

属性	值	说明
`server`	`"netease"`	音乐平台，支持：`netease`（网易云）、`tencent`（QQ 音乐）、`kugou`（酷狗）、`xiami`（虾米，已关停）等
`type`	`"playlist"`	内容类型：`song`（单曲）、`album`（专辑）、`playlist`（歌单）、`artist`（歌手）
`id`	`"60198"`	网易云音乐中该歌单的 ID。例如这个 `60198` 是网易云经典红心歌单
`fixed`	`"false"`	是否固定在页面底部（`true` 时为全局悬浮播放器）
`mini`	`"false"`	是否启用迷你模式（窄版播放器）
`autoplay`	`"false"`	是否自动播放（注意：现代浏览器通常会阻止自动播放音频）
`preload`	`"metadata"`	预加载策略：`none` / `metadata`（只加载歌曲信息）/ `auto`（预加载音频）
`theme`	`"#49B1F5"`	播放器主题色（这里是浅蓝色）
`volume`	`"0.7"`	默认音量（0.0 ～ 1.0，即 0% ～ 100%）

这是自建了一个音乐播放器，因为如果在index.md文件中直接添加

1	{% meting "13053307242" "netease" "playlist" autoplay="false" mutex="true" listmaxheight="400px" preload="auto" theme="#42b983" %}

代码的话会造成一个这样的效果，不知道是我自己的原因还是因为被挤压了

注意：这里因为引用了js和css样式所以可能加载会慢一些，你也可以把js和css样式下载到本地再引用。

问题与优化

1.更换歌单加载失败

大部分是因为只更改了data-id的值，所以出现歌单加载不出的情况，此处需要注意，data-id、data-server、data-type分别对应了歌单的id，歌单的服务商、歌单的类型所以需要确认这三项是一一对应的。

2.手机端体验优化

Aplayer的吸底标签一直占据着左下角的一片空间，对手机端阅读不太友好所以可以参考教程引入Aplayer播放音乐 | Akilarの糖果屋的第8点进行更改

3.VIP歌曲只能试听问题

这是因为 MetingJS 依赖公开 API 获取音频链接，它调用的是 非登录态的公开接口（如 api.i-meto.com）；所以：MetingJS 播放器本质上只能播放“免费可听”的歌曲。

但是如果你实在是想优化这方面的体验可以替换为音频文件直链也就是引用本地音频。

参考教程：butterfly主题Aplayer本地音源添加 | R1ck’s Portal

因为我并没有具体实现过所以具体效果如何我并不知道。

结语

因为博主并不太会前端的相关知识所以这篇文档也是参考了各种教程，总结各种问题得出的，所以如果有那里出现错误和不合理的地方，请您再评论区指出，让我们大家一起进步。