博客制作单独页面音乐播放器

首先我们给出效果图
接下来让我们开始操作吧！！！

1、添加“我的音乐”模块

在Git Bash中执行代码

1
$ hexo new page playlist

之后会在博客sourse目录下生成文件playlist，修改里面index文件如下

1
2
3
4
5
---
title: 歌单
date: 2020-07-08 10:08:04
type: "playlist"
---

我引用的主题为spfk，我们在theme\spfk\lanhuages下找到zh-Hans.yml
并在menu下添加playlist: 歌单

1
2
3
4
5
6
menu:
  menu: 菜单
  home: 首页
  archives: 归档
  categories: 分类
  playlist: 歌单

2、添加 hexo-tag-aplayer 插件

安装执行

1
$ npm install --save hexo-tag-aplayer

在 Hexo 配置文件_config.yml中设置

1
2
aplayer:
   meting: true

接着就可以使用 MetingJS 播放器了，例如我们在 Hexo的sourse\playlist\index中添加歌单模块

1
{% meting "523845661" "netease" "playlist" "theme:#FF4081" "mode:circulation" "mutex:true" "listmaxheight:340px" "preload:auto" %}

和

1
{% meting "547791232" "netease" "playlist" "theme:#FF4081" "mode:circulation" "mutex:true" "listmaxheight:340px" "preload:auto" %}

找到博客中的“我的音乐”就可以看到我们第一张图中的结果

3、歌单模块中的参数设置

选项 默认值 描述
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 播放器风格色彩设置

4、结语

关于音乐的板块制作到此结束了，但是当我们换页面时，音乐会停止播放。要做到切换页面时，音乐继续播放，需要安装 Pajx 插件，但是我还没弄懂怎么做，大家可以去搜索一下资料，弄懂了也可以告诉我哦！！！，下一篇我们将介绍怎么获得音乐id