feat: 音乐播放器

Author: Rinai-R

package.json

@@ -11,6 +11,7 @@
 		"astro": "astro",
 		"type-check": "tsc --noEmit --isolatedDeclarations",
 		"new-post": "node scripts/new-post.js",
+		"extract-covers": "node scripts/extract-music-covers.mjs",
 		"format": "biome format --write ./src",
 		"lint": "biome check --write ./src",
 		"preinstall": "npx only-allow pnpm"
@@ -69,6 +70,7 @@
 		"@types/markdown-it": "^14.1.2",
 		"@types/mdast": "^4.0.4",
 		"@types/sanitize-html": "^2.16.0",
+		"music-metadata": "^11.12.3",
 		"postcss-import": "^16.1.1",
 		"postcss-nesting": "^13.0.2"
 	},

pnpm-lock.yaml

@@ -0,0 +1,80 @@
+/**
+ * 从 public/assets/music/mp3/ 下的 mp3 文件提取 ID3 封面
+ * 输出封面到 public/assets/music/cover/
+ * 并自动更新 src/_data/music.json
+ *
+ * 用法: pnpm extract-covers
+ */
+
+import * as mm from "music-metadata";
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const root = path.resolve(__dirname, "..");
+
+const mp3Dir = path.join(root, "public/assets/music/mp3");
+const coverDir = path.join(root, "public/assets/music/cover");
+const jsonPath = path.join(root, "src/_data/music.json");
+
+fs.mkdirSync(coverDir, { recursive: true });
+
+const mp3Files = fs
+	.readdirSync(mp3Dir)
+	.filter((f) => f.toLowerCase().endsWith(".mp3"))
+	.sort();
+
+if (mp3Files.length === 0) {
+	console.log("没有找到 mp3 文件");
+	process.exit(0);
+}
+
+const playlist = [];
+
+for (let i = 0; i < mp3Files.length; i++) {
+	const file = mp3Files[i];
+	const filePath = path.join(mp3Dir, file);
+	const baseName = path.basename(file, ".mp3");
+
+	console.log(`处理: ${file}`);
+
+	let title = baseName;
+	let artist = "未知艺术家";
+	let coverPath = "/assets/music/cover/default.webp";
+
+	try {
+		const meta = await mm.parseFile(filePath);
+		const tags = meta.common;
+
+		if (tags.title) title = tags.title;
+		if (tags.artist) artist = tags.artist;
+
+		// 提取内嵌封面
+		const pic = tags.picture?.[0];
+		if (pic) {
+			const ext = pic.format.includes("png") ? "png" : "jpg";
+			const coverFile = `${baseName}.${ext}`;
+			const coverFullPath = path.join(coverDir, coverFile);
+			fs.writeFileSync(coverFullPath, pic.data);
+			coverPath = `/assets/music/cover/${coverFile}`;
+			console.log(`  ✓ 提取封面 → ${coverFile}`);
+		} else {
+			console.log(`  ! 无内嵌封面，使用默认封面`);
+		}
+	} catch (e) {
+		console.error(`  ✗ 读取失败: ${e.message}`);
+	}
+
+	playlist.push({
+		id: i + 1,
+		title,
+		artist,
+		cover: coverPath,
+		url: `/assets/music/mp3/${file}`,
+		duration: 0,
+	});
+}
+
+fs.writeFileSync(jsonPath, JSON.stringify(playlist, null, "\t"), "utf-8");
+console.log(`\n✓ 已更新 src/_data/music.json（共 ${playlist.length} 首）`);

public/assets/music/cover/Memories of Kindness.jpg

@@ -0,0 +1,18 @@
+[
+	{
+		"id": 1,
+		"title": "Memories of Kindness",
+		"artist": "鹿乃",
+		"cover": "/assets/music/cover/Memories of Kindness.jpg",
+		"url": "/assets/music/mp3/Memories of Kindness.mp3",
+		"duration": 0
+	},
+	{
+		"id": 2,
+		"title": "星座になれたら",
+		"artist": "結束バンド",
+		"cover": "/assets/music/cover/若能化为星座.jpg",
+		"url": "/assets/music/mp3/若能化为星座.mp3",
+		"duration": 0
+	}
+]

public/assets/music/cover/若能化为星座.jpg

@@ -1,6 +1,8 @@
 ---
 import type { MarkdownHeading } from "astro";
+import { musicPlayerConfig } from "../../config";
 import Categories from "./Categories.astro";
+import MusicPlayerWidget from "./music/MusicPlayerWidget.astro";
 import Profile from "./Profile.astro";
 import Tag from "./Tags.astro";
 
@@ -16,6 +18,7 @@ const className = Astro.props.class;
         <Profile></Profile>
     </div>
     <div id="sidebar-sticky" class="transition-all duration-700 flex flex-col w-full gap-4 top-4 sticky top-4">
+        {musicPlayerConfig.enable && <MusicPlayerWidget class="onload-animation" style="animation-delay: 100ms" />}
         <Categories class="onload-animation" style="animation-delay: 150ms"></Categories>
         <Tag class="onload-animation" style="animation-delay: 200ms"></Tag>
     </div>