Feedback and ambience without glue code
Sonance creates named sounds for interaction feedback, ambient loops, or entity behavior so CodeCube can add sound intentionally instead of treating it as an afterthought.
Behind CodeCube audio
Sonance
The browser audio system that gives CodeCube experiences feedback, ambience, modulation-aware sound — and now an interactive 3D designer.
Sonance is the audio layer inside CodeCube's interactive stack. It is bundled with the site so experiences can graduate from silent visuals to sound effects, sequenced soundtracks, and modulation-driven behavior without bolting on separate audio glue every time. The latest release adds relative clock modulators, a SonanceSceneManager for save/load, and a full 3D instrument designer built on Photonic.
Tone.js
Entity Sounds
Soundtracks
MIDI Utilities
Effects Chains
Modulation
Relative Modulators
Synth Designer
Scene Save / Load
What it enables on CodeCube
Structured soundtrack composition
Soundtracks organize channels with instruments, effect chains, volume routing, and looped note sequences under a shared transport so layered browser music feels composed instead of improvised.
Relative clock modulators
A master clock oscillator drives other modulators at integer divisions or multiples of its frequency — half-time, quarter-time, double-time — so complex rhythmic patterns emerge from a single tempo source.
Modulation-aware sound design
Sonance exposes modulation targets across instruments, effects, and output nodes so motion, state, or other systems can continuously reshape the soundscape.
3D Synth Designer
An interactive Photonic module visualizes the audio graph as a 3D node network. Click any node to edit its parameters, switch between presets, and save or export scenes as JSON.
Scene save and load
SonanceSceneManager persists scenes to localStorage, downloads them as JSON files, and reads them back — so custom instrument and modulator configurations survive page reloads.
Integrated into CodeCube
Sonance is bundled as its own generated asset, loaded site-wide, and designed to work with the same frontend building blocks that power CodeCube's visual experiments.
- Bundled as sonance.gen.js and exposed globally as window.Sonance for experimentation and future interactive features.
- Supports JSON-defined soundtracks, per-channel overrides, and helper utilities for note and sequence work.
- Shares modulation primitives with the broader frontend, making visual/audio coupling a natural extension instead of a special case.
- Relative modulators use clockRef + divisor/multiplier options, keeping clock-synced modulation composable and declarative.
- The synth-designer.js Photonic module ships as a standalone scene so it can be loaded from /viz/?module=synth-designer.js with no extra configuration.
Where it can show up on the site
Interactive experiences
Pair audio feedback with movement, state changes, or user input so an experience communicates through more than pixels alone.
Generative ambient layers
JSON-loaded soundtracks and looping sequences make it practical to create evolving beds, rhythmic patterns, and layered atmosphere directly in the browser.
Cross-system modulation
Because Sonance shares modulation ideas with the broader frontend, it opens the door to experiences where visuals and sound can evolve together.
Sound design playground
The Synth Designer lets you explore oscillator types, envelope shapes, filter sweeps, and relative clock rhythms visually before committing them to code.
Sound is part of the experience
Sonance expands CodeCube's idea of publishing from text and visuals into motion and sound, making room for experiences that feel composed rather than merely displayed. Open the Synth Designer to explore what relative modulators and 3D sound design look like in the browser.