Enochian Synth Studio

Sound is off on arrival. Enable the small master button to create a Web Audio context. Notes remain visible when muted. This study records note events in memory, not audio; refreshing clears your tape.

Keyboard & touch

First octave: A S D F G H J white keys; W E T Y U accidentals. Second: K L ; ' ] \\ / white; O P [ = Backspace accidentals. Focus any note then hold Space or Enter. Glide while holding; independent touch contacts and computer chords coexist. Z / X shift the octave. Leaving the window releases all notes.

Encoders & tape

Drag upwards to increase. Arrow keys change one step; Page Up / Down change ten; Home / End set the limits. Double-click returns that encoder to the Canticle default. Presets 1–8 are real parameter sets. Record arms a new take; Play starts capture. Stop finishes it, then Play replays it. Loop repeats a take. Clear has one-level undo. Home stops and rewinds.

No sequencer, mixer, audio export, or hardware firmware is implied. Playback uses your current sound settings and the original recorded MIDI pitches.

Self-contained HTML, CSS, and JavaScript. No libraries, remote fonts, or network requests. The four role colors are a deliberate exception to the atlas’s red signal, requested for this study.

Synth key

<button class="op-cell" data-note="0" aria-label="C4">
  <span class="op-cap"></span>
</button>
/* Use .op-row-w for pills; .op-row-b for round caps.
   data-down="true" is the shared active-state contract. */

Encoder & event contracts

<div class="encoder" data-encoder="tone" role="slider" tabindex="0"
  aria-label="Tone" aria-orientation="vertical">
  <span class="encoder-cap"></span>
</div>
// See makeKnob(element, { min, max, step, value, fmt, onChange }).
// Events bubble from #instrument:
instrument.addEventListener('canticle:note', ({detail}) => {
  // { phase: 'on' | 'off', note: 0..23, midi, hz, source }
});
instrument.addEventListener('canticle:parameter', ({detail}) => {
  // { parameter: 'pitch'|'tone'|'release'|'level', value, unit }
});

Source map: volume-3/index.html Enochian Synth Keyboard supplies .op-cell / .op-cap / .op-row-w / .op-row-b, note mapping, triangle + sine voice and envelope. Its Spring supplies damped cap motion. volume-2/index.html supplies makeKnob and the arm / play / stop transport state pattern. Adapted here with source ownership, graph cleanup and a real note-event tape.