From 0435644acee616204b88901dae1dc7b4688341ca Mon Sep 17 00:00:00 2001
From: Astrian Zheng <happy.wheel6743@astrian.moe>
Date: Tue, 19 Aug 2025 17:03:57 +1000
Subject: [PATCH] =?UTF-8?q?add:=20=E5=90=91=E6=B5=8F=E8=A7=88=E5=99=A8?=
 =?UTF-8?q?=E5=92=8C=E6=93=8D=E4=BD=9C=E7=B3=BB=E7=BB=9F=E6=8A=A5=E5=91=8A?=
 =?UTF-8?q?=E9=9F=B3=E9=A2=91=E5=85=83=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Player.vue | 30 +++++++++++++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/src/components/Player.vue b/src/components/Player.vue
index 6f12287..e8d1bf0 100644
--- a/src/components/Player.vue
+++ b/src/components/Player.vue
@@ -20,7 +20,35 @@ watch(() => playQueue.queue, async () => {
 	resourcesUrl.value = newResourcesUrl
 })
 
-// 判断目前播放状态
+// 在播放曲目变动时，将元数据更新到浏览器和操作系统中
+watch(() => playQueue.currentTrack, async () => {
+	if (!playQueue.currentTrack) return
+	navigator.mediaSession.metadata = new MediaMetadata({
+		title: playQueue.currentTrack.song.name,
+		artist: artistsOrganize(playQueue.currentTrack.song.artists ?? []),
+		album: playQueue.currentTrack.album?.name,
+		artwork: [
+			{
+				src: playQueue.currentTrack.album?.coverUrl ?? '',
+				sizes: '500x500',
+				type: 'image/png',
+			},
+		],
+	})
+})
+
+// 优化音乐人字符串显示
+function artistsOrganize(list: string[]) {
+	if (list.length === 0) return '未知音乐人'
+
+	return list
+		.map((artist) => {
+			return artist
+		})
+		.join(' / ')
+}
+
+// 自动播放属性判断
 function isAutoPlay(cid: string) {
 	// 为了提前缓存播放队列中的歌曲，同时消除两首歌切换时的间隙，因此改用了新的方式来在网页上挂载音频
 	// 现在会将队列中每一首歌曲都挂载一个单独的 <audio> 并添加 preload="auto" 属性