Hexo 使用Aplayer添加网络音乐

发表于 更新于 分类于 ， 本文字数： 4.6k 阅读时长 ≈ 5 分钟

之前的文章写了写通过Aplayer添加博客音乐的功能, 但是后来发现所有的音乐, 只要是需要开会员的全部都不能播放... 这尼玛就辣鸡了, 那我弄这个页面完全是废, 因此翻了一下官方的博客, 发现可以通过Aplayer自定义URL的方式, 曲线救国.

hexo-tag-aplayer/README-zh_cn.md at master · MoePlayer/hexo-tag-aplayer

Aplayer自定义媒体URL

官方文档中, 有一段是对Aplayer使用的介绍:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{% aplayerlist %}
{
    "narrow": false,                          // （可选）播放器袖珍风格
    "autoplay": true,                         // （可选) 自动播放，移动端浏览器暂时不支持此功能
    "mode": "random",                         // （可选）曲目循环类型，有 'random'（随机播放）, 'single' (单曲播放), 'circulation' (循环播放), 'order' (列表播放)， 默认：'circulation' 
    "showlrc": 3,                             // （可选）歌词显示配置项，可选项有：1,2,3
    "mutex": true,                            // （可选）该选项开启时，如果同页面有其他 aplayer 播放，该播放器会暂停
    "theme": "#e6d0b2",	                      // （可选）播放器风格色彩设置，默认：#b7daff
    "preload": "metadata",                    // （可选）音乐文件预载入模式，可选项： 'none' 'metadata' 'auto', 默认: 'auto'
    "listmaxheight": "513px",                 // (可选) 该播放列表的最大长度
    "music": [
        {
            "title": "CoCo",
            "author": "Jeff Williams",
            "url": "caffeine.mp3",
            "pic": "caffeine.jpeg",
            "lrc": "caffeine.txt"
        },
        {
            "title": "アイロニ",
            "author": "鹿乃",
            "url": "irony.mp3",
            "pic": "irony.jpg"
        }
    ]
}
{% endaplayerlist %}

在我的七牛云上传了一个音乐文件, 然后配置了一下试试, 结果是可行的, 其中showlrc这个只有设置为3有效, 其他都无效

1
2
3
4
5
6
7
8
9
10
11
12
13
{% aplayerlist %}
{
	"narrow": false,
	"autoplay": true,
	"mode": "circulation",
	"showlrc": 3,
	"mutex": true,
	"theme": "#e6d0b2",
	"preload": "auto",
	"listmaxheight": "513px",
	"music": [...]
}
{% endaplayerlist %}

针对于music这个列表, 其中有效的参数主要是以下几个:

  1. title: 歌曲标题
  2. author: 歌手名称
  3. url: 歌曲链接
  4. pic: 专辑封面图片链接
  5. lrc: 歌词文件链接

获取MP3的专辑封面

麦克周 – 音乐生活

我之前从👆🏻下载过许多无损的音乐, 其中不少都自带专辑封面和歌词文件, 因此想到通过Python脚本实现提取专辑封面, 然后上传到七牛云, 最后生成链接, 即可享用, 废话不多说, 直接上代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
#!/usr/bin/env python3
# -*- coding: utf-8 -*-
"""
Created on Mon May 23 15:26:53 2022

1. Convert file from GBK charset to UTF-8
2. Get album picture form mp3 files

@author: Rex Chow
"""

import os
import json
from pathlib import Path
import eyed3
from urllib.parse import quote


def gbk2utf8(directory, suffixs=['.lrc']):
    for root, dirs, files in os.walk(directory):
        for file in files:
            path = Path(os.path.join(root, file))
            if path.suffix not in suffixs:
                continue
            try:
                with open(path, 'r', encoding='gbk') as f:
                    content = f.readlines()
            except Exception:
                continue
            with open(path, 'w', encoding='utf-8') as f:
                f.writelines(content)


def get_albums(directory, suffixs=['.mp3']):
    result = []
    prefix = 'https://blog-static.chowrex.com/aplayer'
    for root, dirs, files in os.walk(directory):
        for file in files:
            path = Path(os.path.join(root, file))
            if path.suffix not in suffixs:
                continue
            name = path.with_suffix('').name
            audio = eyed3.load(path)
            for img in audio.tag.images:
                suffix = img.mime_type.split('/')[-1]
                pic = path.absolute().with_suffix(f'.{suffix}')
                with open(pic, 'wb') as f:
                    f.write(img.image_data)
                result.append(
                    {
                        'title': name,
                        'author': audio.tag.artist,
                        'url': f'{prefix}/songs/{quote(name)}.mp3',
                        'pic': f'{prefix}/pic/{quote(name)}.{suffix}',
                        'lrc': f'{prefix}/lrc/{quote(name)}.lrc'
                    }
                )
    return result


DIR = '/Users/rexchow/Downloads/upload'
albums = get_albums(DIR)
print(json.dumps(albums, ensure_ascii=False, indent=2))

上面这段代码, 一共包括两个主要方法: gbk2utf8和get_albums

其中gbk2utf8很简单, 就是读取GBK的lrc, 转成UTF-8编码, 不然在Web上会乱码

get_albums这个函数用到了一个很重要的包eyed3, 以下是参考链接

How to access MP3 metadata in Python - CodeSpeedy

nicfit/eyeD3: eyeD3 is a Python module and command line program for processing ID3 tags. Information about mp3 files (i.e bit rate, sample frequency, play time, etc.) is also provided. The formats supported are ID3v1 (1.0/1.1) and ID3v2 (2.3/2.4).

Home - ID3.org

mp3文件之所以可以存储诸如专辑/作曲家/歌手/封面等信息, 源于这个: Home - ID3.org协议, 更详细的可以去翻一翻, 这里就不多展开了, 通过我的一番测试探寻, 这个包针对于本次的场景, 主要需要使用到的属性/方法就是:

  1. eyed3.load(): 用于读取媒体文件
  2. eyed3.load().tag: 表示媒体文件中注入的所有Tag信息, 其中包含了需要用的歌手信息和专辑信息
  3. eyed3.load().tag.artist: 表示歌曲的艺术家, 我理解就是歌手
  4. eyed3.load().tag.images: 这个返回的是一个迭代器, 可以存储多张专辑信息
  5. [img for img in eyed3.load().tag.images]: 遍历上面的迭代器, 估计命名对象为img
  6. img.mime_type: 表示这个图片文件的格式, 一般为: image/jpeg
  7. img.image_data: 图片的二进制数据

拿到上面的信息, 要做的就是很简单了, 从MP3文件中, 提取专辑封面, 并在歌曲目录保存, 然后构造用于music: [...]的JSON字典, 最后把构造的结果粘贴上去, 搞定!

最后的最后, 不要忘记上传文件到七牛云哈, 参考: Hexo 增加评论系统 | Rex Chow's Blog