Enhance Audio SFX noise behavior and refine slider resolution - PR_26145_003-audio-sfx-noise-enhancements-and-slider-resolution

Author: ToolboxAid

docs/dev/reports/playwright_audio_sfx_noise_and_slider_resolution.md

@@ -0,0 +1,133 @@
+# Audio / SFX Playground V2 Noise and Slider Resolution Validation
+
+PR: `PR_26145_003-audio-sfx-noise-enhancements-and-slider-resolution`
+
+Playwright impacted: Yes.
+
+## Scope
+
+- Replaced simple noise mix behavior with a transient arcade-noise layer.
+- Added Audio / SFX Playground V2 controls for:
+  - Noise Amount
+  - Noise Decay
+  - Noise Brightness
+- Updated Audio / SFX payload/schema fields for the new noise parameters.
+- Updated slider resolution:
+  - Duration step: 5 ms
+  - Release step: 5 ms
+  - Sweep step: 5 cents
+  - Duration max: 2000 ms
+
+## Targeted Validation
+
+PASS: JavaScript syntax validation
+
+Command:
+
+```powershell
+Get-ChildItem -Recurse -File tools/audio-sfx-playground-v2/js -Filter *.js | ForEach-Object { node --check $_.FullName }
+```
+
+PASS: HTML/CSS static validation
+
+Checked Audio / SFX Playground V2 HTML/CSS for empty files, inline event handlers, `<style>` blocks, and inline `<script>` blocks.
+
+PASS: Schema JSON parse validation
+
+Command:
+
+```powershell
+Get-Content -Raw tools/schemas/tools/audio-sfx-playground-v2.schema.json | ConvertFrom-Json | Out-Null
+```
+
+PASS: Diff whitespace validation
+
+Command:
+
+```powershell
+git diff --check -- tools/audio-sfx-playground-v2 tools/schemas
+```
+
+PASS: Targeted Node behavior validation
+
+Validated with an inline Node module script:
+
+- Schema requires `noiseAmount`, `noiseDecayMs`, and `noiseFilterHz`.
+- Schema allows duration up to `2000` ms.
+- Schema enforces 5 ms duration increments.
+- Schema enforces 5 ms release increments.
+- Schema enforces 5 cent sweep increments.
+- Serializer preserves the new noise fields.
+- Serializer rejects non-5-cent sweep values.
+- Audio engine starts a noise buffer source when noise is enabled.
+- Noise stops at the configured decay time instead of full sound duration.
+- Noise brightness reaches the `BiquadFilterNode.frequency` path.
+- Noise amount reaches the transient noise gain path with audible gain.
+- Noise gain decays transiently.
+
+PASS: Targeted Playwright validation
+
+Validated with a temporary local HTTP server, Chromium, and an injected fake `AudioContext`:
+
+- Audio / SFX Playground V2 launched without console errors.
+- Noise Amount, Noise Decay, and Noise Brightness controls were visible.
+- Duration slider step was `5`.
+- Duration slider max was `2000`.
+- Release slider step was `5`.
+- Sweep slider step was `5`.
+- Clicking Play with noise enabled started the transient noise layer.
+- Noise stopped at the configured decay time.
+- Noise Brightness reached the engine filter frequency.
+- Noise Amount reached the audible transient gain path.
+
+## Workspace V2 Validation
+
+PARTIAL: `npm.cmd run test:workspace-v2`
+
+Command:
+
+```powershell
+$env:PLAYWRIGHT_BROWSERS_PATH='.ms-playwright'
+npm.cmd run test:workspace-v2
+```
+
+Result:
+
+- Workspace V2 Playwright launched with local Chromium.
+- The run timed out after 15 minutes at test 67 of 72.
+- 65 tests passed before timeout.
+- 2 unrelated Object Vector Studio V2 tests were marked failed before timeout:
+  - `shows Object Vector Studio V2 layout shell and schema-only palette gate`
+  - `compacts Object Vector Studio V2 geometry layouts and selected palette state`
+- The timeout/failures are outside the Audio / SFX Playground V2 synthesis-control scope.
+
+Expected Playwright pass behavior:
+
+- Audio / SFX Playground V2 launches without console errors.
+- Noise controls visibly affect the playback graph.
+- Noise can be clearly heard during playback through the transient noise gain path.
+- Duration/Release/Sweep sliders use 5-unit steps.
+- Duration reaches 2000 ms.
+
+Expected Playwright fail behavior:
+
+- Fail if noise controls are missing or disconnected from playback.
+- Fail if noise is mixed uniformly for the full duration instead of as a transient.
+- Fail if duration, release, or sweep slider steps regress.
+- Fail if duration max does not reach 2000 ms.
+- Fail if console errors occur.
+
+## Coverage
+
+Playwright V8 coverage was not collected during the focused inline browser validation.
+
+WARN: `tools/audio-sfx-playground-v2/js/AudioSfxPlaygroundV2App.js` - changed runtime JavaScript; coverage unavailable.
+WARN: `tools/audio-sfx-playground-v2/js/bootstrap.js` - changed runtime JavaScript; coverage unavailable.
+WARN: `tools/audio-sfx-playground-v2/js/controls/SfxControlPanel.js` - changed runtime JavaScript; coverage unavailable.
+WARN: `tools/audio-sfx-playground-v2/js/controls/SfxPreviewControl.js` - changed runtime JavaScript; coverage unavailable.
+WARN: `tools/audio-sfx-playground-v2/js/services/AudioSfxEngine.js` - changed runtime JavaScript; coverage unavailable.
+WARN: `tools/audio-sfx-playground-v2/js/services/ToolStateSerializer.js` - changed runtime JavaScript; coverage unavailable.
+
+## Full Samples Smoke Test
+
+Skipped. This PR only impacts Audio / SFX Playground V2 synthesis controls.

tools/audio-sfx-playground-v2/index.html

@@ -83,7 +83,7 @@ <h2 class="tools-platform-frame__eyebrow">First-Class Tools Surface V2</h2>
             </label>
             <label class="tool-starter__field" for="durationInput" data-density-control="duration">
               <span class="audio-sfx__label-tip" tabindex="0" data-tooltip="Controls the total playback length of the effect.">Duration</span>
-              <input id="durationInput" type="range" min="60" max="1400" step="10">
+              <input id="durationInput" type="range" min="60" max="2000" step="5">
               <output id="durationValue" for="durationInput"></output>
             </label>
             <label class="tool-starter__field" for="attackInput" data-density-control="attack">
@@ -93,7 +93,7 @@ <h2 class="tools-platform-frame__eyebrow">First-Class Tools Surface V2</h2>
             </label>
             <label class="tool-starter__field" for="releaseInput" data-density-control="release">
               <span class="audio-sfx__label-tip" tabindex="0" data-tooltip="Controls how long the sound fades out at the end.">Release</span>
-              <input id="releaseInput" type="range" min="20" max="700" step="10">
+              <input id="releaseInput" type="range" min="20" max="700" step="5">
               <output id="releaseValue" for="releaseInput"></output>
             </label>
             <label class="tool-starter__field" for="volumeInput" data-density-control="volume">
@@ -103,13 +103,28 @@ <h2 class="tools-platform-frame__eyebrow">First-Class Tools Surface V2</h2>
             </label>
             <label class="tool-starter__field" for="pitchSweepInput" data-density-control="sweep">
               <span class="audio-sfx__label-tip" tabindex="0" data-tooltip="Bends pitch over time in cents, positive upward and negative downward.">Sweep</span>
-              <input id="pitchSweepInput" type="range" min="-1200" max="1200" step="25">
+              <input id="pitchSweepInput" type="range" min="-1200" max="1200" step="5">
               <output id="pitchSweepValue" for="pitchSweepInput"></output>
             </label>
             <label class="tool-starter__toggle" for="noiseInput">
               <input id="noiseInput" type="checkbox">
               <span class="audio-sfx__label-tip" tabindex="0" data-tooltip="Adds a short noise burst for punchy hits and impacts.">Blend noise transient</span>
             </label>
+            <label class="tool-starter__field" for="noiseAmountInput" data-density-control="noiseAmount">
+              <span class="audio-sfx__label-tip" tabindex="0" data-tooltip="Sets how loud the arcade noise transient is when noise is enabled.">Noise Amount</span>
+              <input id="noiseAmountInput" type="range" min="0" max="1" step="0.01">
+              <output id="noiseAmountValue" for="noiseAmountInput"></output>
+            </label>
+            <label class="tool-starter__field" for="noiseDecayInput" data-density-control="noiseDecay">
+              <span class="audio-sfx__label-tip" tabindex="0" data-tooltip="Controls how quickly the noise burst fades out.">Noise Decay</span>
+              <input id="noiseDecayInput" type="range" min="20" max="600" step="5">
+              <output id="noiseDecayValue" for="noiseDecayInput"></output>
+            </label>
+            <label class="tool-starter__field" for="noiseFilterInput" data-density-control="noiseFilter">
+              <span class="audio-sfx__label-tip" tabindex="0" data-tooltip="Raises or lowers the transient brightness filter.">Noise Brightness</span>
+              <input id="noiseFilterInput" type="range" min="400" max="9000" step="50">
+              <output id="noiseFilterValue" for="noiseFilterInput"></output>
+            </label>
             <p id="sfxValidationMessage" class="tool-starter__hint">Ready to audition.</p>
             <div class="audio-sfx__shape-actions">
               <button id="toolPlayButton" type="button">Play</button>

tools/audio-sfx-playground-v2/js/AudioSfxPlaygroundV2App.js

@@ -5,6 +5,9 @@ function cloneSound(sound) {
     frequencyHz: sound.frequencyHz,
     name: sound.name,
     noise: sound.noise,
+    noiseAmount: sound.noiseAmount,
+    noiseDecayMs: sound.noiseDecayMs,
+    noiseFilterHz: sound.noiseFilterHz,
     pitchSweepCents: sound.pitchSweepCents,
     releaseMs: sound.releaseMs,
     volume: sound.volume,

tools/audio-sfx-playground-v2/js/bootstrap.js

@@ -50,6 +50,12 @@ window.addEventListener("DOMContentLoaded", () => {
       frequencyValue: requireElement("#frequencyValue"),
       deleteButton: requireElement("#deleteSfxButton"),
       nameInput: requireElement("#nameInput"),
+      noiseAmountInput: requireElement("#noiseAmountInput"),
+      noiseAmountValue: requireElement("#noiseAmountValue"),
+      noiseDecayInput: requireElement("#noiseDecayInput"),
+      noiseDecayValue: requireElement("#noiseDecayValue"),
+      noiseFilterInput: requireElement("#noiseFilterInput"),
+      noiseFilterValue: requireElement("#noiseFilterValue"),
       noiseInput: requireElement("#noiseInput"),
       pitchSweepInput: requireElement("#pitchSweepInput"),
       pitchSweepValue: requireElement("#pitchSweepValue"),

tools/audio-sfx-playground-v2/js/controls/SfxControlPanel.js

@@ -4,6 +4,9 @@ const DEFAULT_SOUND = Object.freeze({
   frequencyHz: 880,
   name: "Coin",
   noise: false,
+  noiseAmount: 0.65,
+  noiseDecayMs: 95,
+  noiseFilterHz: 5200,
   pitchSweepCents: 700,
   releaseMs: 90,
   volume: 0.42,
@@ -37,6 +40,12 @@ export class SfxControlPanel {
     frequencyInput,
     frequencyValue,
     nameInput,
+    noiseAmountInput,
+    noiseAmountValue,
+    noiseDecayInput,
+    noiseDecayValue,
+    noiseFilterInput,
+    noiseFilterValue,
     noiseInput,
     pitchSweepInput,
     pitchSweepValue,
@@ -56,6 +65,12 @@ export class SfxControlPanel {
     this.frequencyInput = frequencyInput;
     this.frequencyValue = frequencyValue;
     this.nameInput = nameInput;
+    this.noiseAmountInput = noiseAmountInput;
+    this.noiseAmountValue = noiseAmountValue;
+    this.noiseDecayInput = noiseDecayInput;
+    this.noiseDecayValue = noiseDecayValue;
+    this.noiseFilterInput = noiseFilterInput;
+    this.noiseFilterValue = noiseFilterValue;
     this.noiseInput = noiseInput;
     this.pitchSweepInput = pitchSweepInput;
     this.pitchSweepValue = pitchSweepValue;
@@ -77,6 +92,9 @@ export class SfxControlPanel {
       this.durationInput,
       this.frequencyInput,
       this.nameInput,
+      this.noiseAmountInput,
+      this.noiseDecayInput,
+      this.noiseFilterInput,
       this.noiseInput,
       this.pitchSweepInput,
       this.releaseInput,
@@ -100,6 +118,9 @@ export class SfxControlPanel {
     this.frequencyInput.value = String(sound.frequencyHz);
     this.nameInput.value = sound.name;
     this.noiseInput.checked = sound.noise;
+    this.noiseAmountInput.value = String(sound.noiseAmount);
+    this.noiseDecayInput.value = String(sound.noiseDecayMs);
+    this.noiseFilterInput.value = String(sound.noiseFilterHz);
     this.pitchSweepInput.value = String(sound.pitchSweepCents);
     this.releaseInput.value = String(sound.releaseMs);
     this.volumeInput.value = String(sound.volume);
@@ -111,6 +132,9 @@ export class SfxControlPanel {
     this.attackValue.textContent = `${Math.round(toNumber(this.attackInput))} ms`;
     this.durationValue.textContent = `${Math.round(toNumber(this.durationInput))} ms`;
     this.frequencyValue.textContent = `${Math.round(toNumber(this.frequencyInput))} Hz`;
+    this.noiseAmountValue.textContent = toNumber(this.noiseAmountInput).toFixed(2);
+    this.noiseDecayValue.textContent = `${Math.round(toNumber(this.noiseDecayInput))} ms`;
+    this.noiseFilterValue.textContent = `${Math.round(toNumber(this.noiseFilterInput))} Hz`;
     this.pitchSweepValue.textContent = `${Math.round(toNumber(this.pitchSweepInput))} cents`;
     this.releaseValue.textContent = `${Math.round(toNumber(this.releaseInput))} ms`;
     this.volumeValue.textContent = toNumber(this.volumeInput).toFixed(2);
@@ -130,7 +154,10 @@ export class SfxControlPanel {
     const release = readRange(this.releaseInput);
     const volume = readRange(this.volumeInput);
     const pitchSweep = readRange(this.pitchSweepInput);
-    const failed = [frequency, duration, attack, release, volume, pitchSweep].find((result) => !result.ok);
+    const noiseAmount = readRange(this.noiseAmountInput);
+    const noiseDecay = readRange(this.noiseDecayInput);
+    const noiseFilter = readRange(this.noiseFilterInput);
+    const failed = [frequency, duration, attack, release, volume, pitchSweep, noiseAmount, noiseDecay, noiseFilter].find((result) => !result.ok);
     if (failed) {
       return { valid: false, message: failed.message };
     }
@@ -145,6 +172,9 @@ export class SfxControlPanel {
         frequencyHz: Math.round(frequency.value),
         name,
         noise: this.noiseInput.checked,
+        noiseAmount: Number(noiseAmount.value.toFixed(2)),
+        noiseDecayMs: Math.round(noiseDecay.value),
+        noiseFilterHz: Math.round(noiseFilter.value),
         pitchSweepCents: Math.round(pitchSweep.value),
         releaseMs: Math.round(release.value),
         volume: Number(volume.value.toFixed(2)),

tools/audio-sfx-playground-v2/js/controls/SfxPreviewControl.js

@@ -11,8 +11,12 @@ function barHeight(index, sound) {
   }
   const wave = Math.abs(Math.sin((index + 1) * (sound.frequencyHz / 220)));
   const sweepTilt = 1 + ((sound.pitchSweepCents / 1200) * (normalizedIndex - 0.5));
-  const noiseLift = sound.noise ? 0.18 : 0;
-  return Math.max(8, Math.round((20 + (wave * 76) + (noiseLift * 100)) * Math.max(envelope, 0.08) * sweepTilt));
+  const noiseDecayRatio = sound.noiseDecayMs / sound.durationMs;
+  const noiseTransient = sound.noise
+    ? sound.noiseAmount * Math.max(0, 1 - (normalizedIndex / Math.max(noiseDecayRatio, 0.001)))
+    : 0;
+  const noiseBrightness = sound.noise ? sound.noiseFilterHz / 9000 : 0;
+  return Math.max(8, Math.round((20 + (wave * 76) + (noiseTransient * 110) + (noiseBrightness * noiseTransient * 32)) * Math.max(envelope, 0.08) * sweepTilt));
 }
 
 export class SfxPreviewControl {

tools/audio-sfx-playground-v2/js/services/AudioSfxEngine.js

@@ -12,6 +12,10 @@ function createNoiseBuffer(context, durationSeconds) {
   return buffer;
 }
 
+function noiseDurationSeconds(sound, durationSeconds) {
+  return Math.min(durationSeconds, sound.noiseDecayMs / 1000);
+}
+
 export class AudioSfxEngine {
   constructor({ windowRef = window } = {}) {
     this.context = null;
@@ -62,14 +66,20 @@ export class AudioSfxEngine {
 
     if (sound.noise) {
       const noise = context.createBufferSource();
+      const noiseFilter = context.createBiquadFilter();
       const noiseGain = context.createGain();
-      noise.buffer = createNoiseBuffer(context, Math.min(durationSeconds, 0.18));
-      noiseGain.gain.setValueAtTime(sound.volume * 0.36, now);
-      noiseGain.gain.exponentialRampToValueAtTime(0.0001, now + Math.min(durationSeconds, 0.18));
-      noise.connect(noiseGain);
+      const noiseSeconds = noiseDurationSeconds(sound, durationSeconds);
+      const noiseStopAt = now + noiseSeconds;
+      noise.buffer = createNoiseBuffer(context, noiseSeconds);
+      noiseFilter.type = "lowpass";
+      noiseFilter.frequency.setValueAtTime(sound.noiseFilterHz, now);
+      noiseGain.gain.setValueAtTime(Math.max(0.0001, sound.volume * sound.noiseAmount * 1.2), now);
+      noiseGain.gain.exponentialRampToValueAtTime(0.0001, noiseStopAt);
+      noise.connect(noiseFilter);
+      noiseFilter.connect(noiseGain);
       noiseGain.connect(context.destination);
       noise.start(now);
-      noise.stop(now + Math.min(durationSeconds, 0.18));
+      noise.stop(noiseStopAt);
     }
 
     await new Promise((resolve) => {