src/assets/icons/soundwave.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+defineProps<{
+	size: number
+}>()
+</script>
+
+<template>
+	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" :class="`w-${size} h-${size}`">
+		<rect x="3" y="9" width="2" height="6" rx="1"></rect>
+		<rect x="7" y="5" width="2" height="14" rx="1"></rect>
+		<rect x="11" y="7" width="2" height="10" rx="1"></rect>
+		<rect x="15" y="4" width="2" height="16" rx="1"></rect>
+		<rect x="19" y="10" width="2" height="4" rx="1"></rect>
+	</svg>
+</template>

src/components/PlayQueueItem.vue

@@ -5,6 +5,7 @@ import { artistsOrganize } from '../utils'
 import XIcon from '../assets/icons/x.vue'
 import UpHyphenIcon from '../assets/icons/uphypen.vue'
 import DownHyphenIcon from '../assets/icons/downhyphen.vue'
+import SoundwaveIcon from '../assets/icons/soundwave.vue'
 
 import { ref } from 'vue'
 
@@ -156,12 +157,7 @@ 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">
-					<div 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 :size="6" class="text-white animate-pulse" />
 				</div>
 			</div>
 			<div class="flex flex-col text-left flex-auto w-0">

src/components/Player.vue

@@ -7,6 +7,7 @@ import { usePlayQueueStore } from '../stores/usePlayQueueStore'
 
 import LoadingIndicator from '../assets/icons/loadingindicator.vue'
 import PlayIcon from '../assets/icons/play.vue'
+import PauseIcon from '../assets/icons/pause.vue'
 import { audioVisualizer, checkAndRefreshSongResource, supportsWebAudioVisualization } from '../utils'
 
 const playQueueStore = usePlayQueueStore()
@@ -518,12 +519,7 @@ setInterval(syncVolumeFromStorage, 100)
 			}">
 				<div v-if="playQueueStore.isPlaying">
 					<LoadingIndicator v-if="playQueueStore.isBuffering === true" :size="4" />
-					<div v-else 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" />
 			</button>