对于一个个人博客而言，添加一个背景音乐播放器可以极大地提升访客的浏览体验。本文将详细介绍如何在您的 Hexo 博客中，通过 hexo-tag-aplayer 插件集成一个功能强大且支持多个音乐平台的免费音乐播放器。

我们将使用 APlayer 播放器和 MetingJS 的组合，它可以让您轻松地嵌入来自网易云音乐、QQ 音乐等平台的歌单。

最终效果

集成后，您的博客网站左下角或右下角将出现一个可吸底的音乐播放器，即使切换页面音乐也不会中断。

APlayer播放器示例

集成步骤

整个过程分为三步：安装插件、添加配置、启用主题支持。

第一步：安装插件

首先，我们需要在您博客的根目录下安装 hexo-tag-aplayer 插件。打开终端或命令行工具，进入您的博客项目文件夹，然后运行以下命令：

1
npm install --save hexo-tag-aplayer

这个命令会自动下载插件并将其添加到您项目的依赖中。

第二步：配置插件

安装完成后，我们需要在博客的根配置文件 _config.yml 中添加播放器的相关设置。在文件的末尾添加以下 YAML 代码块：

1
2
3
4
5
6
7
8
9
10
11
12
# APlayer 音乐播放器配置
aplayer:
  meting: true      # 必须开启，才能与 MetingJS 配合使用
  server: netease   # 音乐平台，可选：netease, tencent, kugou, xiami, baidu
  type: playlist    # 资源类型，可选：song, playlist, album, search, artist
  id: 7485922287    # 歌单、歌曲或专辑的 ID
  fixed: true       # 开启吸底模式，播放器会固定在页面左下角
  autoplay: false   # 是否自动播放
  loop: all         # 循环模式: 'all' (列表循环), 'one' (单曲循环), 'none' (不循环)
  order: list       # 播放顺序: 'list' (顺序播放), 'random' (随机播放)
  preload: auto     # 预加载设置
  volume: 0.7       # 默认音量

如何找到歌单 ID？

以网易云音乐为例，打开您的浏览器，进入网易云音乐网站，找到您喜欢的歌单。此时浏览器地址栏中的 URL 会像这样：https://music.163.com/#/playlist?id=7485922287。其中 id= 后面的那一串数字 7485922287 就是您需要的歌单 ID。

第三步：启用主题支持

我们使用的是 Butterfly 主题，它对 APlayer 有着良好的内置支持。我们只需要在主题配置文件 _config.butterfly.yml 中开启对应的开关即可。

找到 aplayerInject 配置项，并修改如下：

1
2
3
4
# Inject the css and script (aplayer/meting)
aplayerInject:
  enable: true
  per_page: false # 设置为 false，使播放器在所有页面都加载（全局播放器）
  • enable: true: 开启功能。
  • per_page: false: false 代表全局启用，即所有页面共享一个播放器实例，切换页面时音乐不会中断。如果设置为 true，则只有在文章的 Front-matter 中单独设置 aplayer: true 的页面才会加载播放器。对于全局背景音乐的需求，我们推荐设置为 false。

完成与测试

完成以上所有步骤后，重新生成并启动您的博客：

1
hexo clean && hexo s

现在，在浏览器中打开 http://localhost:4000，您应该就能看到页面左下角出现了音乐播放器。

至此，您的 Hexo 博客已经成功集成了免费的音乐播放器。您可以随时通过修改 _config.yml 中的 id 来更换不同的歌单。