通过aplayer为Arknights主题博客添加背景音乐

文章发布时间:

2024-10-11

最后更新时间:

2025-03-21

文章总字数:

1.2k

预计阅读时间:

6 分钟

页面浏览: 加载中...

笔者没学过前端，这种改法可行，但一定不是最好的，而且会有点破坏代码美感。

安装aplayer

npm install aplayer —save

直接在博客根目录输入命令即可
随后在_config.yml文件最底部加上

aplayer:
  preload: 'metadata'
  theme: '#e6d0b2'
  autoplay: true
  loop: 'all'

数据准备

想要用aplayer在博客放音乐，需要三种文件：

mp3文件(音频)
jpg/png文件(音乐封面)
lrc文件(歌词)

将准备好的文件放在如下位置

your-blog/
├── source/
│   ├── assets/
│   │   ├── music/
│   │   │   └── yourmusic.mp3
│   │   ├── images/
│   │   │   └── yourmusic.jpg
│   │   └── lrc/
│   │       └── yourmusic.lrc
├── themes/
│   └── your-theme/
│       └── layout/
│           └── layout.pug
├── _config.yml
└── ...

在source下创建相应的文件夹，并将文件放入。

在某篇文章添加音乐

{% aplayerlist %}
{
    "autoplay": true,
    "showlrc": 0,
    "mutex": true,
    "music": [
        {
            "title": "music name",
            "author": "author name",
            "url": "/assets/music/music.mp3",
            "pic": "/assets/images/music.jpg",
            "lrc": "/assets/lrc/music.lrc"
        }
    ]
}
{% endaplayerlist %}

直接在想加音乐的文章中加入上述代码
就会得到下面的效果（没有的话就刷新一下页面）：

文章中多了一个音乐播放器，于是音乐添加成功了。

如果不想占用本地空间，url、pic、lrc后面也可以换成网址，像这样：

{% aplayerlist %}
{
    "autoplay": true,
    "showlrc": 0,
    "mutex": true,
    "music": [
        {
            "title": "music name",
            "author": "author name",
            "url": "https://...",
            "pic": "https://...",
            "lrc": "https://..."
        }
    ]
}
{% endaplayerlist %}

这个三个网址是外部连接，可以通过将文件上传到七牛云的云存储空间以后生成。
当然，如果觉得麻烦，也可以直接上传到github仓库。

在Arknights主题中增加可自由关闭的全局背景音乐

上面的方法是将音乐播放器添加在文章中，而现在我们要实现的是博客的全局背景音乐，笔者用的主题是Arknights主题，本身并没有提供aplayer的接口，所以我在界面中自己加了一个按钮来控制背景音乐的开关。接下来是具体步骤：

找到layout.pug文件

文件位置如下：

your-blog/
├── source/
│   ├── assets/
│   │   ├── music/
│   │   │   └── yourmusic.mp3
│   │   ├── images/
│   │   │   └── yourmusic.jpg
│   │   └── lrc/
│   │       └── yourmusic.lrc
├── themes/
│   └── arknights/
│       └── layout/
│         └── includes/
│           └── layout.pug
├── _config.yml
└── ...

修改layout.pug文件

直接把文件修改替换成如下：

-
  let pageTitle = page.title || config.subtitle || ''
  if (is_post()) pageTitle = page.title
  if (is_archive()) pageTitle = __('menu.archive.plural')
  if (is_tag()) pageTitle = __('menu.tag.plural') + ': ' + page.tag
  if (is_category()) pageTitle = __('menu.category.plural') + ': ' + page.category
  if (is_month()) pageTitle += ': ' + page.month + '/' + page.year
  if (is_year()) pageTitle += ': ' + page.year
  if (pageTitle) pageTitle += ' | '
  pageTitle += config.title
  const asideLogo = theme.aside.logo
  const pjax = theme.pjax ? theme.pjax.enable : false
  let searchConfig = null
  if (theme.search !== undefined && theme.search.enable === true) searchConfig = theme.search;
  const configs = JSON.stringify({
    root: config.root,
    search: {
      preload: searchConfig.preload,
      activeHolder: __('search.activeHolder'),
      blurHolder: __('search.blurHolder'),
      noResult: __('search.noResult')
    },
    code: {
      codeInfo: __('code.codeInfo'),
      copy: __('code.copy')
    }
  })

doctype html
html(lang=config.language theme-mode=theme.color)
  head
    include ./meta-data.pug
    link(rel="stylesheet", href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css")
    style.
      #music-control {
        position: absolute; /* 使用绝对定位 */
        bottom: 10px; /* 距离底部 10 像素 */
        left: 30px; /* 距离左侧 30 像素 */
        padding: 10px 20px;
        font-size: 16px;
        color: white;
        background-color: rgba(0, 0, 0, 0.5);
        border: 0.5px solid white;
        border-radius: 0px;
        cursor: pointer;
        display: flex; /* 使用 flex 布局 */
        align-items: center; /* 垂直居中 */
        transition: background-color 0.3s ease, color 0.3s ease; /* 添加过渡效果 */
      }
      #music-control:hover {
        background-color: rgba(90, 90, 90, 0.5);
        color: #26a5e0;
      }
  body
    if pjax
      .loading(style="opacity: 0;")
        .loadingBar.left
        .loadingBar.right
    main
      include ./header.pug
      // 在这里添加控制按钮
      button#music-control(type="button") 背景音乐-♪
      article
        if body
          div!= body
        else
          block content
        include ./bottom-btn.pug
      include ./aside.pug
    if theme.canvas_dust
      canvas#canvas-dust
    // 在这里添加 APlayer 播放器并隐藏它
    #aplayer(style="display: none;")
    script(src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js")
    script.
      document.addEventListener('DOMContentLoaded', function () {
        const ap = new APlayer({
          container: document.getElementById('aplayer'),
          autoplay: true,
          loop: 'all',
          preload: 'metadata',
          theme: '#e6d0b2',
          audio: [
            {
              name: 'lifestream',
              artist: 'arknights',
              url: '/assets/music/lifestream(machine).mp3',
              cover: '/assets/images/lifestream.jpg',
              lrc: '/assets/lrc/lifestream.lrc'
            }
          ]
        });

        // 控制按钮的事件监听器
        const controlButton = document.getElementById('music-control');
        controlButton.addEventListener('click', function () {
          if (ap.audio.paused) {
            ap.play();
          } else {
            ap.pause();
          }
        });
      });