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 class="player-controls">
-                  <button class="ghost" @click="togglePlayback">
-                    {{ isPlaying ? 'Pause' : 'Play' }}
-                  </button>
-                  <div class="player-meta">
-                    <span class="label">Status</span>
-                    <span class="value">{{ isPlaying ? 'Playing' : 'Paused' }}</span>
-                  </div>
-                </div>
+                <div
+                  class="pulse-orb"
+                  :class="{
+                    active: isPlaying,
+                    playing: isPlaying && !isAnswerClip,
+                    answer: isPlaying && isAnswerClip,
+                    idle: !currentClipUrl
+                  }"
+                ></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)
-        this.pulseLevel = this.pulseLevel * 0.7 + target * 0.3
+        const target = Math.min(1, rms * 3.6)
+        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()