fberger/brabetz-homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace broken audio URL with robust Web Audio API drone generator

Browse Source
This commit is contained in:
Felix Brabetz
2026-05-16 05:28:01 +02:00
parent 4d3998b78e
commit 5eb63eae5f
1 changed files with 44 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/SubpageRain.astro
+44 -4
View File
@@ -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>