安装APlayer

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

本地歌曲

将歌曲放入路径source/music_db/1.mp3中
在正文中按如下格式添加：

1
<video controls="controls" autoplay="autoplay" name="media"><source src="http://lilibei.github.io/music_db/1.mp3" type="audio/mpeg"></video>

其中src后面引号中添加路径

网易云音乐

获取HTML代码

  • 点击生成外链接播放器

复制THML代码至正文

1
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=2094475513&auto=1&height=66"></iframe>

创建歌单页面

编辑_config.yml

  • 在博客根目录下修改_config.yml文件，添加如下内容
1
2
3
4
5
6
7
8
9
10
11
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repository: 
    github: git@github.com:lilibei/lilibei.github.io.git
  branch: master

#aplayer
aplayer:
  meting: true

创建音乐页面

1
hexo new page '音乐'

修改maupassant/_config.yml文件

  • 修改themes/maupassant/_config.yml文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
menu:
  - page: home
    directory: .
    icon: fa-home
  - page: archive
    directory: archives/
    icon: fa-archive
  - page: about
    directory: about/
    icon: fa-user
  - page: history
    directory: history/
    icon: fa-book
  - page: 音乐
    directory: 音乐/
    icon: fa-music

编辑index.md

  • 编辑/source/音乐/index.md

添加如下内容，其中2673046384位网易云音乐歌单的ID号

1
{% meting "2673046384" "netease" "playlist" "theme:#555" "mutex:true" "listmaxheight:340px" "preload:auto" %}

添加qq音乐

  • 版权是个问题
1
{% meting "7914670250" "tencent" "playlist" "theme:#555" "mutex:true" "listmaxheight:340px" "preload:auto" %}

参数

在page页面中引用

1
2
3
4
5
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer@1.10/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@1.2/dist/Meting.min.js"></script>

{% meting "2673046384" "netease" "playlist" "theme:#555" "mutex:true" "listmaxheight:340px" "preload:auto" %}

效果展示