在GitHub中添加网易云音乐外链并且添加歌词

type

status

date

Aug 3, 2025 09:50 AM

slug

summary

一、功能效果

我们要实现：

博客页面添加音乐播放器

播放网易云音乐外链 MP3

显示歌词（同步滚动）

自定义播放器样式，支持多曲目切换

二、准备工作

已部署的 NotionNext 博客（Vercel + GitHub）

一首歌曲（网易云音乐）

歌词文件（.lrc 格式）

封面图片 URL

网易云音乐

三、制作歌词文件（LRC）

1. 打开在线工具：

👉 LRC Maker

2. 制作步骤：

粘贴歌词

点击播放并手动打点

导出 .lrc 文件

3. 命名规则：

示例：

4. 上传到博客(GitHub不可以添加文件夹，但是可以在上传文件时添加路径，在文件夹前面添加路径就可以建立文件夹了)：

将 .lrc 文件上传到：

📌 目录结构示例：

四、获取音乐外链和封面

网易云音乐外链：

歌曲 URL：

外链格式：

封面获取：

打开歌曲页面 → F12(或者右键-检查) → <img> 标签 → 复制图片链接，删除jpg之后的文字就是大图。

示例：

五、修改 `widget.config.js`

路径：

找到音乐播放器配置（APlayer），添加如下代码：

多曲目示例：

我的代码示例

六、页面美化

APlayer 自带 UI，但可以加 CSS 优化，示例：

📌 美化点：

圆角 + 半透明背景

歌词高亮

主题色可改成博客主色调

七、重新部署

提交代码 → GitHub

Vercel 自动构建

打开博客页面测试

最终效果

播放器悬浮 / 固定

歌词滚动

支持多曲目切换

用到的项目

歌词制作GitHub: 歌词滚动姬｜可能是你所能见到的最好用的歌词制作工具

实操网页：灯里的歌词滚动姬

📝网易云音乐失效应对与部署教程

在搭建博客播放网易云音乐时，常遇到 歌曲下架或版权问题导致失效 的情况。本文整理了两种可行的解决方法，并附上部署和访问技巧。

方法一：GitHub 存储音乐（简单、直接）

步骤

下载音乐

将音乐文件下载为 .m4a 或 .mp3 文件。

建议文件名使用英文或拼音，避免中文或特殊字符导致 URL 乱码。

创建 GitHub 仓库

注意：GitHub 不允许提交完全空文件夹，可以在文件夹中加一个占位文件（如 .gitkeep）。

上传音乐和封面

将下载的音乐上传到 /public/music。

可同时上传封面图片，例如：

访问方式

在博客或 GitHub 中调用音乐文件，可以通过 博客网址 + GitHub 文件路径：

例如：

在 NotionNext 配置

优点

部署简单，音乐和配置都在同一个仓库。

不依赖外部存储服务，适合个人小型音乐库。

缺点

文件较大或版权音乐可能被 GitHub 下架。

国内访问速度可能慢，尤其是 raw.githubusercontent.com。

方法二：B2 存储 + 图床调用（稳定、可扩展）

步骤

下载音乐

同样下载为 .m4a 或 .mp3 文件。

文件名使用英文或拼音，避免中文乱码。

上传到 B2 桶

将音乐上传到 B2。

通过图床生成自定义域名 URL

例如：

在 NotionNext 配置

优点

文件访问稳定，国内可通过 CDN 加速。

不占 GitHub 空间，仓库可私有。

支持大量音乐文件，适合长期管理。

缺点

文件名不能为中文，否则 URL 易乱码。

私有桶需要生成签名 URL 才能播放。

需要额外设置自定义域名和图床。

注意事项

文件命名

尽量使用英文或拼音。

避免空格或特殊字符。

版权问题

仅用于个人收藏或播放。

GitHub 对版权内容可能下架。

访问速度

B2 + CDN 优于 GitHub raw URL。

GitHub 适合少量个人音乐库测试使用。

GitHub 空文件夹

GitHub 不允许提交空文件夹，可添加 .gitkeep。

总结

方法	优点	缺点
GitHub `/public/music`	简单部署，直接调用博客地址	国内访问可能慢，文件大或版权可能下架
B2 + 图床 + 自定义域名	访问稳定，可用 CDN，适合大量音乐	文件名不能中文，私有桶需签名 URL

💡 小贴士

小型个人音乐库 → GitHub 方法即可

大量音乐或长期管理 → B2 + 图床 + 自定义域名最佳

封面图片 可以放 GitHub 或 CF 图床，播放体验更佳

在github中查看仓库大小

方法一：使用 GitHub API（推荐）

打开浏览器，访问以下链接（替换用户名和仓库名）：

页面会返回一段 JSON，找到 "size" 字段：

单位是 KB

12345 KB ≈ 12 MB

方法 2：本地克隆后查看

会显示：

size-pack → 压缩后的对象大小
size → 松散对象大小

总体就是仓库实际占用空间

如果只想看 /public/music 文件夹大小：

Windows 可右键文件夹 → 属性查看大小

方法 3：第三方工具

例如 GitHub Repo Size 等网站，可以输入仓库地址查看大小

不需要登录即可得到仓库大小信息

💡 总结

GitHub 网页端普通 Settings 已不显示仓库大小

使用 API 或本地克隆 是最可靠的方法

Online Mini Tools - GitHub Repository Size Checker

这是一个在线工具，允许你输入 GitHub 仓库的 URL，获取该仓库的总大小、文件数量等信息。

👉 https://onlineminitools.com/github-repo-size-checker

GitHub Repository Size Checker (GitHub Gist)

这是一个开源工具，利用 GitHub API 获取仓库的大小信息。

👉 https://gist.github.com/dingzeyuli/f07c126b74371adba4b7dbe181cb57d2

Chrome 扩展：GitHub Repo Size

这是一个 Chrome 浏览器扩展，安装后可以在 GitHub 仓库页面直接查看该仓库的大小。

👉 https://chromewebstore.google.com/detail/github-repo-size/jpdmfnflpdgefbfkafcikmhipofhanfl

这些工具可以帮助你快速查看 GitHub 仓库的大小，方便你判断是否适合用作博客背景音乐的存储。

方法三：🎵 GitHub 音乐外链 + jsDelivr 播放器教程

1️⃣ 上传音乐到 GitHub

登录你的 GitHub 账户。

创建一个公开仓库，例如：

在仓库中新建文件夹，例如：

上传你的音乐文件（支持 mp3、m4a、ogg 等）。

示例文件名：song1.m4a

⚠️ 注意：仓库必须是 Public（公开），否则 jsDelivr 无法访问。

2️⃣ 获取 jsDelivr CDN 外链

jsDelivr 可以直接加速 GitHub 仓库文件，格式如下：

示例：

GitHub 文件：

转换为 jsDelivr 外链：

提示：

更新文件后，可加版本号或时间戳刷新缓存：

3️⃣ 在博客中嵌入 HTML 音乐播放器

基本播放器

自动播放 + 循环 + 隐藏控件

控件可见 + 循环播放

4️⃣ 防止 GitHub 限速的小技巧

不要上传大量大文件（单文件建议 <50MB）。

合理使用 CDN 外链：

访问量较大时，建议用 Cloudflare R2 或 B2 作为长期解决方案。

更新文件加版本号：

这样可以避免缓存导致用户无法听到最新音乐。

5️⃣ 总结

GitHub + jsDelivr 是最简单、免费的音乐外链方案。

小规模博客嵌入音乐完全安全，不会违反 GitHub 条款。

对于访问量很大的博客，推荐搭配 Cloudflare R2 或专业 CDN。