From 5eb63eae5fae31746f809cd1cca223f51cda7b8c Mon Sep 17 00:00:00 2001
From: Felix Brabetz <lixatnz@gmail.com>
Date: Sat, 16 May 2026 05:28:01 +0200
Subject: [PATCH] Replace broken audio URL with robust Web Audio API drone
 generator

---
 src/components/SubpageRain.astro | 48 +++++++++++++++++++++++++++++---
 1 file changed, 44 insertions(+), 4 deletions(-)

diff --git a/src/components/SubpageRain.astro b/src/components/SubpageRain.astro
index bc204d0..ef4574f 100644
--- a/src/components/SubpageRain.astro
+++ b/src/components/SubpageRain.astro
@@ -36,16 +36,56 @@
             </div>
 
             <!-- Music Control -->
-            <div class="pt-4 border-t border-stone-800 flex justify-between items-center">
+            <div class="pt-4 border-t border-stone-800 flex justify-between items-center" x-data="{ 
+                playing: false,
+                audioCtx: null,
+                osc1: null,
+                osc2: null,
+                gain: null,
+                toggle() {
+                    if (!this.audioCtx) {
+                        this.audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+                        this.gain = this.audioCtx.createGain();
+                        this.gain.gain.setValueAtTime(0, this.audioCtx.currentTime);
+                        
+                        this.osc1 = this.audioCtx.createOscillator();
+                        this.osc1.type = 'sine';
+                        this.osc1.frequency.setValueAtTime(100, this.audioCtx.currentTime);
+                        
+                        this.osc2 = this.audioCtx.createOscillator();
+                        this.osc2.type = 'sine';
+                        this.osc2.frequency.setValueAtTime(100.5, this.audioCtx.currentTime);
+                        
+                        let filter = this.audioCtx.createBiquadFilter();
+                        filter.type = 'lowpass';
+                        filter.frequency.setValueAtTime(400, this.audioCtx.currentTime);
+                        
+                        this.osc1.connect(filter);
+                        this.osc2.connect(filter);
+                        filter.connect(this.gain);
+                        this.gain.connect(this.audioCtx.destination);
+                        
+                        this.osc1.start();
+                        this.osc2.start();
+                    }
+                    
+                    if (this.playing) {
+                        this.gain.gain.linearRampToValueAtTime(0, this.audioCtx.currentTime + 0.5);
+                        setTimeout(() => { this.playing = false; }, 500);
+                    } else {
+                        this.gain.gain.linearRampToValueAtTime(0.05, this.audioCtx.currentTime + 0.5);
+                        this.playing = true;
+                    }
+                }
+            }">
                 <div>
                     <span class="block text-xs font-mono text-stone-500 uppercase mb-1 tracking-widest">Hintergrund-Vibe</span>
-                    <span class="text-xs text-stone-400">Goa-Zen Ambient Music</span>
+                    <span class="text-xs text-stone-400">Smooth Lo-Fi Drone (Web Audio)</span>
                 </div>
-                <button @click="$refs.audio.paused ? $refs.audio.play() : $refs.audio.pause(); playing = !$refs.audio.paused" class="text-white text-xs font-mono flex items-center gap-2 bg-stone-900 px-5 py-2.5 rounded-lg border border-stone-800 hover:border-emerald-500/50 transition-colors">
+                <button @click="toggle()" class="text-white text-xs font-mono flex items-center gap-2 bg-stone-900 px-5 py-2.5 rounded-lg border border-stone-800 hover:border-emerald-500/50 transition-colors">
                     <i class="fa-solid" :class="playing ? 'fa-pause text-emerald-400' : 'fa-play text-emerald-400'"></i>
                     <span x-text="playing ? 'Pausieren' : 'Abspielen'"></span>
                 </button>
-                <audio x-ref="audio" src="https://assets.mixkit.co/music/preview/mixkit-zen-meditation-123.mp3" loop></audio>
             </div>
         </div>