Skip to content

Implement Sound side-panel section (master audio on/off + volume)#22

Merged
vecnode merged 1 commit into
mainfrom
sound-section-master-audio
Jul 11, 2026
Merged

Implement Sound side-panel section (master audio on/off + volume)#22
vecnode merged 1 commit into
mainfrom
sound-section-master-audio

Conversation

@vecnode

@vecnode vecnode commented Jul 11, 2026

Copy link
Copy Markdown
Owner

Summary

Implements the previously proposal-only "Sound" section (docs/proposals/sound-section.md) - a new panel between Sketch and Libraries with a master Off/On toggle and a 0-1 volume slider over sketch audio, muted by default.

  • buildAudioController(enabled, volume) in script.js is injected into the sketch iframe (after captureController, before any imported library/the sketch code). It wraps AudioContext/webkitAudioContext once: each context gets a GainNode spliced in via Reflect.construct(RealAC, arguments), with destination shadowed as an own property on that instance - so anything the sketch connects to ctx.destination (p5.sound, raw Web Audio, an imported library) lands on the gain node instead of real output.
  • applyAudioState() posts { type: 'audio-set', enabled, volume } to the running sketch so toggling/adjusting the slider takes effect immediately, without re-running.
  • No new capability crosses the sandbox boundary - the message is just a boolean and a float, iframe stays sandbox="allow-scripts" with no allow-same-origin, same as everywhere else in the app.
  • Proposal doc updated with a "Status: implemented" note listing the (small) differences from the original design.

Test plan

  • node --check public/script.js passes; extracted buildAudioController's template and ran it through vm.Script to confirm the injected string itself is valid JS.
  • Built and ran locally. In the live app:
    • Sound section renders between Sketch and Libraries; defaults to Off, slider disabled, matches the "muted by default" design.
    • Ran a sketch that creates a real AudioContext + oscillator: ctx.destination.constructor.name === 'GainNode' and its initial gain.value matches the baked-in enabled/volume state.
    • Toggled Sound On/Off and moved the slider on an already-running sketch (no re-run) and confirmed ctx.destination.gain.value updates live each time (1 -> 0 -> 0.3) via the postMessage bridge.
    • Confirmed light/dark theme and the Ace dark-theme fix from the previous two rounds still work correctly alongside this change; no console errors.

Generated with Claude Code

New "Sound" section between Sketch and Libraries: an Off/On segmented toggle
and a 0-1 master volume slider, muted by default. Implements the design in
docs/proposals/sound-section.md (now updated with a "Status: implemented"
note listing where the code diverges from the original proposal).

- public/script.js: buildAudioController(enabled, volume) is injected into
  the sketch iframe's srcdoc (after captureController, before any imported
  library or the sketch code). It wraps AudioContext/webkitAudioContext once
  per context - each gets a GainNode spliced in via Reflect.construct(RealAC,
  arguments), with `destination` shadowed as an own property on that
  instance so anything the sketch connects to ctx.destination lands on the
  gain node instead. applyAudioState() posts { type: 'audio-set', enabled,
  volume } to push changes live without re-running the sketch.
- public/index.html: the panel markup (segmented toggle + range input),
  reusing the existing .sketch-bg-row/.segmented styles.
- public/style.css: minor styling for the new #audio-master-slider.
- AGENTS.md/README.md: document the feature and its security note (no new
  capability crosses the sandbox - the postMessage payload is just a
  boolean and a 0-1 float).

Verified against a real AudioContext in the running app: ctx.destination
resolves to our GainNode, initial gain matches the baked-in state, and
toggling/adjusting the slider updates gain.value live on an already-running
sketch without a re-run.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
@vecnode vecnode merged commit 25f7e2d into main Jul 11, 2026
@vecnode vecnode deleted the sound-section-master-audio branch July 11, 2026 18:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant