More to pulsing music player

src/App.vue

@@ -155,20 +155,24 @@
             </div>
             <div class="player-body">
               <div
-                v-if="currentClipUrl"
                 class="custom-player"
-                :style="{ '--pulse': pulseLevel.toFixed(3) }"
+                :class="{ idle: !currentClipUrl }"
+                :style="{
+                  '--pulse': pulseLevel.toFixed(3),
+                  '--ray': rayLevel.toFixed(3),
+                  '--ray-hue': rayHue.toFixed(0)
+                }"
               >
-                <div class="pulse-orb" :class="{ active: isPlaying }"></div>
+                <div
-                <div class="player-controls">
+                  class="pulse-orb"
-                  <button class="ghost" @click="togglePlayback">
+                  :class="{
-                    {{ isPlaying ? 'Pause' : 'Play' }}
+                    active: isPlaying,
-                  </button>
+                    playing: isPlaying && !isAnswerClip,
-                  <div class="player-meta">
+                    answer: isPlaying && isAnswerClip,
-                    <span class="label">Status</span>
+                    idle: !currentClipUrl
-                    <span class="value">{{ isPlaying ? 'Playing' : 'Paused' }}</span>
+                  }"
-                  </div>
+                ></div>
-                </div>
+                <div class="pulse-rays" :class="{ active: isPlaying }"></div>
               </div>
               <audio
                 ref="player"
@@ -180,7 +184,7 @@
                 @pause="handlePlayerPause"
                 @ended="handlePlayerPause"
               ></audio>
-              <div v-else class="player-empty">
+              <div v-if="!currentClipUrl" class="player-empty">
                 Pick a tile to start the round.
               </div>
             </div>
@@ -260,9 +264,13 @@ export default {
       audioContext: null as AudioContext | null,
       analyser: null as AnalyserNode | null,
       analyserData: null as Uint8Array | null,
+      frequencyData: null as Uint8Array | null,
       rafId: 0,
       mediaSource: null as MediaElementAudioSourceNode | null,
-      mediaElement: null as HTMLAudioElement | null
+      mediaElement: null as HTMLAudioElement | null,
+      rayLevel: 0,
+      rayHue: 200,
+      isAnswerClip: false
     }
   },
   computed: {
@@ -335,7 +343,9 @@ export default {
 
       this.analyser = analyser
       this.analyserData = new Uint8Array(analyser.fftSize)
+      this.frequencyData = new Uint8Array(analyser.frequencyBinCount)
       this.pulseLevel = 0
+      this.rayLevel = 0
     },
     teardownAudio() {
       if (this.rafId) {
@@ -352,28 +362,47 @@ export default {
       }
       this.mediaElement = null
       this.analyserData = null
+      this.frequencyData = null
       this.isPlaying = false
       this.pulseLevel = 0
+      this.rayLevel = 0
     },
     startPulse() {
-      if (!this.analyser || !this.analyserData) return
+      if (!this.analyser || !this.analyserData || !this.frequencyData) return
       const analyser = this.analyser
       const data = this.analyserData
+      const freq = this.frequencyData
 
       const tick = () => {
-        if (!this.isPlaying || !this.analyser || !this.analyserData) {
+        if (!this.isPlaying || !this.analyser || !this.analyserData || !this.frequencyData) {
           this.rafId = 0
           return
         }
         analyser.getByteTimeDomainData(data)
+        analyser.getByteFrequencyData(freq)
         let sumSquares = 0
         for (let i = 0; i < data.length; i += 1) {
           const centered = (data[i] - 128) / 128
           sumSquares += centered * centered
         }
         const rms = Math.sqrt(sumSquares / data.length)
-        const target = Math.min(1, rms * 2.8)
+        const target = Math.min(1, rms * 3.6)
-        this.pulseLevel = this.pulseLevel * 0.7 + target * 0.3
+        this.pulseLevel = this.pulseLevel * 0.65 + target * 0.35
+
+        const lowBandEnd = Math.floor(freq.length * 0.2)
+        const highBandStart = Math.floor(freq.length * 0.55)
+        let lowSum = 0
+        for (let i = 0; i < lowBandEnd; i += 1) lowSum += freq[i]
+        const lowAvg = lowSum / Math.max(1, lowBandEnd) / 255
+
+        let highSum = 0
+        for (let i = highBandStart; i < freq.length; i += 1) highSum += freq[i]
+        const highAvg = highSum / Math.max(1, freq.length - highBandStart) / 255
+
+        const rayTarget = Math.min(1, (lowAvg * 0.6 + highAvg * 0.9) * 1.4)
+        this.rayLevel = this.rayLevel * 0.7 + rayTarget * 0.3
+        const hueTarget = 180 + highAvg * 120
+        this.rayHue = this.rayHue * 0.8 + hueTarget * 0.2
         this.rafId = requestAnimationFrame(tick)
       }
 
@@ -435,6 +464,7 @@ export default {
       this.currentTileKey = null
       this.currentClipUrl = ''
       this.lastAwardedTeamId = null
+      this.isAnswerClip = false
       this.teardownAudio()
     },
     tileKey(cIndex: number, qIndex: number) {
@@ -479,6 +509,7 @@ export default {
         this.tiles[key] = { status: 'playing', lastTeamId: null }
         this.currentTileKey = key
         this.currentClipUrl = encodeURI(clue.song)
+        this.isAnswerClip = false
         await nextTick()
         const player = this.getPlayer()
         if (player) {
@@ -502,6 +533,7 @@ export default {
         this.lastAwardedTeamId = null
         if (clue.answer) {
           this.currentClipUrl = encodeURI(clue.answer)
+          this.isAnswerClip = true
           await nextTick()
           const player = this.getPlayer()
           if (player) {
@@ -541,6 +573,7 @@ export default {
         this.tiles[key].status = 'void'
         this.currentTileKey = null
         this.currentClipUrl = ''
+        this.isAnswerClip = false
         const player = this.getPlayer()
         player?.pause()
         this.teardownAudio()

src/styles.css

@@ -386,6 +386,10 @@ audio.hidden-audio {
   overflow: hidden;
 }
 
+.custom-player.idle {
+  background: radial-gradient(circle at top, rgba(20, 20, 20, 0.5), rgba(5, 6, 12, 0.95) 70%);
+}
+
 .custom-player::after {
   content: '';
   position: absolute;
@@ -400,39 +404,72 @@ audio.hidden-audio {
   height: 96px;
   border-radius: 50%;
   background: radial-gradient(circle at 30% 30%, #fbd72b, #f58b2b 60%, #1d3b8b);
-  transform: scale(calc(1 + var(--pulse, 0) * 0.22));
+  transform: scale(calc(1 + var(--pulse, 0) * 0.45));
-  box-shadow: 0 0 calc(20px + var(--pulse, 0) * 60px) rgba(251, 215, 43, 0.35);
+  box-shadow:
-  transition: transform 0.08s ease-out;
+    0 0 calc(18px + var(--pulse, 0) * 90px) rgba(251, 215, 43, 0.5),
+    0 0 calc(40px + var(--pulse, 0) * 160px) rgba(61, 214, 255, 0.35);
+  transition: transform 0.06s ease-out;
+  position: relative;
+  z-index: 2;
+}
+
+.pulse-orb.idle {
+  background: radial-gradient(circle at 40% 40%, #1a1a1a, #000 65%);
+  box-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
+  transform: scale(1);
+}
+
+.pulse-orb.playing {
+  background: linear-gradient(
+    135deg,
+    #7df9ff,
+    #6c63ff,
+    #ff7ad9,
+    #ffd36a,
+    #7df9ff
+  );
+  background-size: 240% 240%;
+  animation: gradientShift 6s ease-in-out infinite;
+}
+
+.pulse-orb.answer {
+  background: radial-gradient(circle at 30% 30%, #6bff9f, #1ecb5a 65%, #0b5c2b);
+  box-shadow:
+    0 0 calc(18px + var(--pulse, 0) * 90px) rgba(43, 220, 123, 0.6),
+    0 0 calc(40px + var(--pulse, 0) * 160px) rgba(43, 220, 123, 0.3);
 }
 
 .pulse-orb.active {
   animation: pulseGlow 1.6s ease-in-out infinite;
 }
 
-.player-controls {
+.pulse-rays {
-  display: grid;
+  position: absolute;
-  gap: 12px;
+  inset: -20%;
-  place-items: center;
+  border-radius: 50%;
+  background:
+    conic-gradient(
+      from 0deg,
+      hsla(var(--ray-hue, 200), 90%, 70%, 0.3) 0deg,
+      transparent 30deg,
+      hsla(var(--ray-hue, 200), 90%, 70%, 0.45) 60deg,
+      transparent 95deg,
+      hsla(var(--ray-hue, 200), 90%, 70%, 0.25) 130deg,
+      transparent 170deg,
+      hsla(var(--ray-hue, 200), 90%, 70%, 0.35) 210deg,
+      transparent 250deg,
+      hsla(var(--ray-hue, 200), 90%, 70%, 0.4) 300deg,
+      transparent 340deg
+    );
+  opacity: calc(0.1 + var(--ray, 0) * 0.9);
+  filter: blur(6px);
+  transform: scale(calc(0.9 + var(--ray, 0) * 0.6));
+  transition: opacity 0.1s ease-out, transform 0.1s ease-out;
+  z-index: 1;
 }
 
-.player-meta {
+.pulse-rays.active {
-  text-align: center;
+  animation: raySpin 6s linear infinite;
-  font-size: 0.85rem;
-  color: rgba(255, 255, 255, 0.7);
-}
-
-.player-meta .label {
-  text-transform: uppercase;
-  letter-spacing: 0.2em;
-  font-size: 0.65rem;
-  display: block;
-}
-
-.player-meta .value {
-  display: block;
-  color: #f6f4ef;
-  font-weight: 600;
-  margin-top: 4px;
 }
 
 @keyframes pulseGlow {
@@ -445,6 +482,27 @@ audio.hidden-audio {
   }
 }
 
+@keyframes gradientShift {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+@keyframes raySpin {
+  from {
+    transform: scale(calc(0.9 + var(--ray, 0) * 0.6)) rotate(0deg);
+  }
+  to {
+    transform: scale(calc(0.9 + var(--ray, 0) * 0.6)) rotate(360deg);
+  }
+}
+
 .player-empty {
   color: rgba(255, 255, 255, 0.6);
 }