Diagram - Signal Studio

#Patch a sound. Make it yours.

Signal Studio is a working instrument built on Diagram. Start an authored patch, change its notes and timbre, then reconnect the modules to hear a different signal path. The oscilloscope and spectrum measure the actual audio output.

#Play the instrument

Choose Start audio, then tune the Low-pass filter. Lower Cutoff to soften the sound; increase Resonance to emphasize the filter's edge. Choose Slow oscillator and change Rate or Depth to move that filter over time.

The eight buttons under the patch bay form a repeating phrase. Select a step, then choose its note or Rest. Step sequencer controls the tempo. Glass arpeggio, Night pulse and Open fifths supply three contrasting starting patches. Choosing a preset stops playback; start audio again to hear it.

Expand studio provides more room for patching. The module selector and Find selected module bring any module into view at a readable scale. Drag modules to rearrange the instrument; pan, zoom and Fit all modules remain available.

#Change the signal path

Select a module to expose its connection handles, then drag its output socket to a compatible input. Sound, notes and movement are distinct connection types. Each input accepts one cable, and user-created feedback loops are rejected. Echo has its own bounded feedback control.

The selected module's Input cables selectors perform the same public create or reconnect commands and also offer Disconnected. For example, select Output and connect it directly to Oscillator A to hear the voice without the mixer, filter or echo. Choose Echo again to restore the full path. The waveform and frequency spectrum show the result. Disconnected paths produce silence with repair guidance.

All controls are keyboard accessible. Selects use arrows and Enter. Sliders support arrows, Home and End. Undo and Redo restore cables, configuration and module positions. The toolbar and scoped Ctrl/Cmd+Z shortcuts use public Store history so cable removal remains reversible while module deletion stays blocked. A completed slider gesture is one history entry; its live preview is transient. Changing a preset is one transaction. Reset studio restores the initial patch and positions, and can itself be undone.

#What Diagram supplies

Eight custom nodes, typed ports and public Bézier connectors represent the instrument. One Store owns module geometry, configuration and patch cables. One Session owns selection, navigation, editing and public connection commands. The host consumes those records to connect an allowlisted native Web Audio graph. The runtime has no sound-specific behavior.

Audio starts only after an explicit Start action. The sequence uses AudioContext time with a short scheduling horizon; animation frames only paint measured samples. Two oscillator voices feed the patched graph. The output uses bounded master gain and a compressor. There is no microphone, media upload, external sample, network request or recording feature.

Stop, page hiding and component destruction close the audio context and clear scheduling and painting callbacks. A delayed audio-start promise cannot revive a stopped or destroyed instrument. Returning to the page never starts sound by itself. Reduced motion preserves audio and editing while holding a measured scope snapshot and removing the visual playhead; explicit changes refresh the snapshot.

#Adapt the example

Copy SignalStudioDemo.vue and its _shared/signal-studio files: SignalStudioWorkbench.vue, fixture.ts, audio.ts, SignalFace.vue, SignalIcon.vue and styles.css. Keep their relative imports together. The workbench reads current Diagram state through useDiagramContext() while audio, sequencer and analyser state stay application-owned. PrimeVue Button, Select and Slider supply companion controls. Follow First Diagram for setup.

fixture.ts defines the modules, sockets, presets and a defensive patch planner. audio.ts composes browser OscillatorNode, GainNode, BiquadFilterNode, DelayNode, DynamicsCompressorNode and AnalyserNode objects. It is a small host implementation for these eight modules, not a general audio graph runtime. Add another module only by extending its explicit socket contract, parameter bounds and audio mapping together. Never create saved history entries for analyser samples or sequencer ticks.

The waveform is derived with AnalyserNode.getFloatTimeDomainData. Native audio availability and output routing depend on the browser and device. Custom Vue node content has no export-fidelity claim. The former Incident Replay URL redirects to this example.

#Related Docs

• Node Content
• Ports
• Connector Paths
• History