Expose audio state and levels

`ready` only meant the graph got built — a suspended AudioContext is still
silent, so there was no way to tell whether the storm was actually audible.
The HUD now reports the real context state.

Verified through it: context runs on first gesture; 7.5 -> 17.8 m/s takes the
wind bed 0.16 -> 0.36 gain while the howl layer goes 0.016 -> 0.104 and the
cutoff opens 428 -> 767 Hz, so a gale reads as a gale and not just a louder
breeze. Rain tracks its curve 0.03 -> 0.32.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
m3ultra 2026-07-16 21:56:22 +10:00
parent 31a887bf75
commit 6c11368202
2 changed files with 14 additions and 1 deletions

View File

@ -168,6 +168,19 @@ function createAudio(seed = 1) {
return {
get ready() { return started; },
/** 'running' | 'suspended' | 'closed' | 'none'. `ready` only means the graph
* got built a suspended context is still silent, so the HUD reports this. */
get state() { return ctx ? ctx.state : 'none'; },
/** Current layer gains — for the HUD and for asserting the bed tracks wind. */
levels() {
if (!started) return null;
return {
wind: +windGain.gain.value.toFixed(4),
howl: +howlGain.gain.value.toFixed(4),
rain: +rainGain.gain.value.toFixed(4),
cutoff: Math.round(windFilter.frequency.value),
};
},
/** Call from the first click/keydown. Safe to call repeatedly. */
unlock() {

View File

@ -247,7 +247,7 @@ function frame(now) {
<div>dir ${(wind.dirAt(t)).toFixed(2)} rad</div>
<div>rain <span class="bar"><i style="width:${wind.rainAt(t) * 100}%"></i></span></div>
<div>worst <span class="bar"><i style="width:${Math.min(100, worst * 100)}%;background:${worst > 0.8 ? '#f66' : '#3dff8b'}"></i></span></div>
<div>debris ${debris.pieces.length} audio ${sky.audio.ready ? 'on' : '(click)'}</div>
<div>debris ${debris.pieces.length} audio ${sky.audio.ready ? sky.audio.state : '(click)'}</div>
<div>flash ${sky.flash.toFixed(2)}</div>
${tg ? `<div class="warn">GUST INBOUND ${tg.eta.toFixed(1)}s pow ${tg.power.toFixed(0)}</div>` : '<div>&nbsp;</div>'}
${ticker.slice(0, 3).map((s) => `<div class="bad">${s}</div>`).join('')}