butterfly主题Aplayer本地音源添加

handsomelky

已于 2024-07-24 01:58:57 修改

阅读量533

点赞数 11

分类专栏： hexo博客搭建记录文章标签： javascript html5 css node.js npm 经验分享笔记

于 2024-07-23 23:53:27 首次发布

本文链接：https://blog.csdn.net/qq_27489877/article/details/140648771

版权

hexo博客搭建记录专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前言

构想博客之初，音乐🎵就是我脑海中的重要设计部分之一。

音乐是提升生产效率的工具，是朋友间闲聊的一大谈资。更重要的，音乐赋予了我分享精神世界的权利：透过我分享的歌单，所有人都能对我的内心窥探一二、与我共情。

都说“以代码为笔”。其实除了代码，于我而言，音乐也是一种语言。那么对于这种表达方式，当然需要我在博客中合理地设计它。

MetingJS的局限

在网上寻觅了许久教程，我也试着为自己的博客添加aplayer音乐播放器。整个过程非常顺利，直到测试时我才发现这个播放器在大部分教程中的用法并不能满足我的需求：

大部分博客教程中展示的aplayer用法是基于引入MetingJS后的版本，即播放在线平台（QQ音乐、网易云音乐等）的单曲和歌单。

使用MetingJS的步骤如下：

在博客根目录下输入
```
npm install --save hexo-tag-aplayer
```
来安装hexo-tag-aplayer插件
Hexo 配置文件 _config.yml 中设置
```
aplayer:
  meting: true
```

接着就可以通过以下代码在文章中使用 MetingJS 播放器了：

<!-- 简单示例 (id, server, type)  -->
{% meting "60198" "netease" "playlist" %}

<!-- 进阶示例 -->
{% meting "60198" "netease" "playlist" "autoplay" "mutex:false" "listmaxheight:340px" "preload:none" "theme:#ad7a86"%}

具体引入歌单id的方法就不在此赘述，很多教程中都有提到

有关 meting 的选项列表如下:

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

使用meting播放在线歌单固然方便，能将自己的QQ音乐或网易云等平台的歌单导入到播放器，歌词也能自动加载

但是播放在线歌单时会受到各大音乐平台的规则约束

使用meting的在线音源引用时，相应音源平台的会员歌曲和付费歌曲无法播放

如果只能小心翼翼地从免费歌曲里挑选自己想分享的放入博客，那还有什么意义呢

同时也会面临在线平台缺少特定歌曲的问题

那么本篇文章的重点来了：该如何往butterfly主题的Aplayer播放器里添加本地音源🤔

引入本地音源

以下为具体步骤
本教程仅适用于butterfly主题

安装hexo-tag-aplayer插件

虽然不使用meting功能，但是hexo-tag-aplayer简化了向hexo引入aplayer的方式，所以本教程还是基于hexo-tag-aplayer展开

在博客根目录下输入

npm install --save hexo-tag-aplayer

来安装hexo-tag-aplayer插件

配置yaml文件

修改 Hexo 的配置文件 _config.yml ，在末尾增加如下代码

aplayer:
  cdn: https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js  # 引用 APlayer.js 外部 CDN 地址
  style_cdn: https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css # 引用 APlayer.css 外部 CDN 地址
  asset_inject: true

使用模板

在需要放置aplayer播放器的页面引入模板

用例如下：

单曲

{% aplayer title author url [picture_url, narrow, autoplay, width:xxx, lrc:xxx] %}

播放列表

{% 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": "飞机场的10:30",
            "author": "陶喆",
            "url": "/music/index/飞机场的10_30.mp3",
            "pic": "/music/index/飞机场的10_30.png",
            "lrc": "飞机场的10_30.lrc"
        },
        {
            "title": "好心分手",
            "author": "王力宏、卢巧音",
            "url": "/music/index/好心分手.mp3",
            "pic": "/music/index/好心分手.png",
            "lrc": "好心分手.lrc"
        }
    ]
}
{% endaplayerlist %}

接下来只需要解决如何获得本地音源，即MP3文件、封面和歌词文件

获取资源

免责声明：本博客旨在分享音乐相关的知识和资源，包括但不限于音源下载方法。然而，我特此声明以下事项：

所有分享的音源仅供个人学习和欣赏之用，不得用于任何商业目的。未经版权所有者的明确许可，禁止将下载的音源用于商业用途，包括但不限于出售、分发或以其他方式获取经济利益。
我在博客中提供的音源下载方法仅供参考，不能保证其合法性和可靠性。使用这些方法下载音源的风险由用户自行承担。如果用户违反了相关的版权法律法规，后果将由用户自行承担。
我对任何因使用博客中的方法下载音源而导致的任何损失或法律纠纷概不负责。用户应自行评估和承担使用这些方法的风险。
博客中提供的任何音源下载方法可能会随时发生变化，我不保证这些方法的持续可用性。用户应自行负责获取最新的音源下载方法和确保其合法性。
如果版权所有者认为博客中分享的音源侵犯了其权益，请及时联系我，我将尽快删除相关内容。

请在使用本博客提供的音源下载方法之前，仔细阅读并理解本免责声明。通过使用这些方法下载音源，即表示您同意遵守本声明中的所有规定，并自愿承担由此可能引起的风险和责任。

若要获得vip单曲的MP3文件，可能会用到以下网站（将mgg后缀文件转为ogg）

跳转链接：文件格式转换

这里就不展开了，请自行摸索。

接下来我将以QQ音乐平台的免费单曲《淘汰》-陈奕迅为例，演示如何从获得本地音源所需文件：

MP3文件

点击下载按钮，推荐选择HQ高品质

请添加图片描述

在本地找到下载得到的文件，

请添加图片描述

在网站Convertio — 文件转换器中将其转换为mp3文件

请添加图片描述

这里用到的Convertio其实是以前打CTF时收录下来的网站，功能强大，能够转换的文件范围非常广泛，最关键的是完全免费使用、免注册（本人很反感在各种网站注册一大堆账号，很容易泄漏隐私）

专辑封面图片

打开QQ音乐网页端，搜索你想要的单曲，右键单曲封面将其另存为本地文件：

请添加图片描述

此时文件后缀为.webp

请添加图片描述

回到Convertio — 文件转换器将其转换为PNG文件

相比于webp格式，png在浏览器的兼容性更好

歌词文件

在QQ音乐客户端的设置>下载与缓存中勾选同时下载歌词

请添加图片描述

在下载目录下就能找到与歌曲同名的lrc后缀歌词文件

此时若直接放在相应目录下，Aplayer则会在歌词栏显示乱码，需要将歌词文件转换为UTF-8格式

右击歌词文件，使用记事本打开

请添加图片描述

点击文件>另存为

保存类型选择所有文件，编码选择UTF-8，保存并替换原文件

请添加图片描述

最终效果

可以前往我的博客butterfly主题Aplayer本地音源添加查看最终效果

本教程更新日志

2023-7-17:

这两天给博客添加装备界面后，发现样式和我预想的不一致，原本应该flex的盒子却以block形式显示，后来才查阅到原来是用户代理样式表的问题

请添加图片描述

用户代理样式表（User Agent Stylesheet）是一种CSS样式表，用于指定浏览器默认情况下渲染HTML元素的样式。每种浏览器都有自己的用户代理样式表，它们用于处理HTML文档中未定义样式的元素，使这些元素能够按照浏览器默认的样式来呈现。

用户代理样式表的作用是确保浏览器在没有指定任何样式的情况下，也能够提供合理的默认样式，从而使HTML文档在各种浏览器中都能够正确地呈现。用户代理样式表中定义了大量的CSS规则，包括字体、颜色、边框、内外边距、行高等，这些规则可以覆盖HTML元素的默认样式，从而改变它们的呈现方式。

找了一圈之后发现问题出在之前在Hexo 的配置文件 _config.yml中配置的属性asset_inject: true

于是我换回了比较原始的引入aplayer播放器的方法，即在每个要引入的地方加入如下代码：

<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>