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

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