教程：APlayer × Meting × JustAddMusic 音乐可视化

原文链接：https://zfe.space/post/18661.html
作者：小冰博客（しゅふがく）

效果展示

依赖

一步安装到 Hexo（Butterfly 主题为例）

  1. 从 https://github.com/Zfour/APlayer-Meting-JustAddMusic 克隆项目：

    1
    git clone https://github.com/Zfour/APlayer-Meting-JustAddMusic.git

  2. 将项目存放于博客根目录的 source 文件夹下

  3. 将 Hexo page 文件夹里的 music 文件夹复制后，粘贴到 source 文件夹下

大功告成！

注意事项

  • 如果你开启了主题的 APlayer 插件，请关掉或在本页面禁用
  • 本项目仍处于测试阶段，请使用能够正常播放（非 VIP 歌曲）的 playlist 播放
  • 歌曲封面旋转、歌词滚动、频谱可视化等效果会自动生效

页面结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
source/
├── APlayer-Meting-JustAddMusic/
│   ├── css/
│   │   ├── APlayer.min.css
│   │   ├── font-awesome.min.css
│   │   └── justaddmusic.css
│   ├── js/
│   │   ├── APlayer.min.jam.js
│   │   ├── JustAddMusic.js
│   │   ├── Meting.min.js
│   │   ├── jamsetting.js
│   │   ├── jquary.js
│   │   ├── visualchanger.js
│   │   └── visualupper.js
│   └── fonts/
└── music/
    └── index.md

自定义配置

编辑 music/index.md，修改 {% meting %} 标签中的歌单 ID：

1
{% meting "你的歌单ID" "netease" "playlist" "order:random" %}

参数说明：

  • 第一个参数：歌单 ID
  • 第二个参数：音乐源（netease / tencent / kugou / xiami / baidu）
  • 第三个参数：类型（playlist / song / album / search）
  • 第四个参数：排序方式