From be15a89ad6dc630ebc68611706e855c002defa51 Mon Sep 17 00:00:00 2001
From: Astrian Zheng <happy.wheel6743@astrian.moe>
Date: Wed, 4 Jun 2025 22:31:16 +1000
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=81=A2=E5=A4=8D=E9=9D=9E=20Safari=20?=
 =?UTF-8?q?=E6=B5=8F=E8=A7=88=E5=99=A8=E7=9A=84=E9=9F=B3=E9=A2=91=E5=8F=AF?=
 =?UTF-8?q?=E8=A7=86=E5=8C=96=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 只在 Safari 浏览器上使用静态图标替代可视化
- Chrome、Firefox 等浏览器保留原有的动态可视化效果
- Player.vue 和 PlayQueueItem.vue 现在都会检测浏览器支持情况

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/components/PlayQueueItem.vue | 14 ++++++++++++--
 src/components/Player.vue        |  7 +++++++
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/components/PlayQueueItem.vue b/src/components/PlayQueueItem.vue
index 85ee912..eb3d284 100644
--- a/src/components/PlayQueueItem.vue
+++ b/src/components/PlayQueueItem.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { usePlayQueueStore } from '../stores/usePlayQueueStore'
-import { artistsOrganize } from '../utils'
+import { artistsOrganize, supportsWebAudioVisualization } from '../utils'
 
 import XIcon from '../assets/icons/x.vue'
 import UpHyphenIcon from '../assets/icons/uphypen.vue'
@@ -19,6 +19,9 @@ const playQueueStore = usePlayQueueStore()
 
 const hover = ref(false)
 
+// 检查浏览器是否支持音频可视化
+const isAudioVisualizationSupported = supportsWebAudioVisualization()
+
 function moveUp() {
 	if (props.index === 0) return
 
@@ -157,7 +160,14 @@ function removeItem() {
 				<img :src="queueItem.album?.coverUrl" />
 				<div class="w-full h-full absolute top-0 left-0 bg-neutral-900/75 flex justify-center items-center"
 					v-if="isCurrent">
-					<SoundwaveIcon :size="6" class="text-white animate-pulse" />
+					<!-- 在支持的浏览器上显示可视化，否则显示音波图标 -->
+					<div v-if="isAudioVisualizationSupported" style="height: 1rem;" class="flex justify-center items-center gap-[.125rem]">
+						<div class="bg-white w-[.125rem] rounded-full" v-for="(bar, index) in playQueueStore.visualizer"
+							:key="index" :style="{
+								height: `${Math.max(10, bar)}%`
+							}" />
+					</div>
+					<SoundwaveIcon v-else :size="6" class="text-white animate-pulse" />
 				</div>
 			</div>
 			<div class="flex flex-col text-left flex-auto w-0">
diff --git a/src/components/Player.vue b/src/components/Player.vue
index ce7c178..147d1e2 100644
--- a/src/components/Player.vue
+++ b/src/components/Player.vue
@@ -519,6 +519,13 @@ setInterval(syncVolumeFromStorage, 100)
 			}">
 				<div v-if="playQueueStore.isPlaying">
 					<LoadingIndicator v-if="playQueueStore.isBuffering === true" :size="4" />
+					<!-- 在支持的浏览器上显示可视化，否则显示暂停图标 -->
+					<div v-else-if="isAudioVisualizationSupported" class="h-4 flex justify-center items-center gap-[.125rem]">
+						<div class="bg-white/75 w-[.125rem] rounded-full" v-for="(bar, index) in playQueueStore.visualizer"
+							:key="index" :style="{
+								height: `${Math.max(10, bar)}%`
+							}" />
+					</div>
 					<PauseIcon v-else :size="4" />
 				</div>
 				<PlayIcon v-else :size="4" />