31:Tc03,station = gridContainer(runtime, { invalidation, module: dawModule, include: ["viewof playing","viewof bpm","viewof swing","viewof masterVol","viewof clock","viewof kit1","viewof drums","viewof bass1","viewof scope","viewof song","controls","viewof synth1","viewof synthSeq","viewof midi1","viewof keys1","viewof synth2","viewof keys2","viewof kick1","viewof snare1","viewof hat1","viewof pads1","viewof echo1","viewof verb1","viewof duck1","viewof tape1","viewof dub1","viewof drumBus","viewof roll1","viewof sections1","viewof prog","viewof chordpad1","viewof pad1","viewof note_tour","viewof note_pump","viewof note_arp","viewof note_chords","viewof note_lead","viewof note_sections","viewof note1","export_ui"], layout: { atoms: { "controls": {"x":0,"y":2,"w":20,"h":5}, "viewof playing": {"x":11,"y":0,"w":9,"h":2}, "viewof bpm": {"x":38,"y":2,"w":18,"h":2}, "viewof masterVol": {"x":20,"y":0,"w":23,"h":2}, "viewof swing": {"x":38,"y":4,"w":18,"h":2}, "export_ui": {"x":0,"y":5,"w":20,"h":4}, "viewof drums": {"x":17,"y":22,"w":20,"h":6}, "viewof clock": {"x":16,"y":17,"w":4,"h":2}, "viewof kit1": {"x":33,"y":35,"w":7,"h":2}, "viewof scope": {"x":20,"y":2,"w":18,"h":7}, "viewof bass1": {"x":33,"y":30,"w":22,"h":5}, "viewof synth1": {"x":24,"y":98,"w":27,"h":5}, "viewof synthSeq": {"x":0,"y":57,"w":20,"h":9}, "viewof midi1": {"x":43,"y":0,"w":7,"h":2}, "viewof keys1": {"x":24,"y":104,"w":17,"h":5}, "viewof chord1": {"x":33,"y":47,"w":13,"h":2}, "viewof song": {"x":40,"y":9,"w":18,"h":6}, "viewof synth2": {"x":18,"y":52,"w":27,"h":5}, "viewof keys2": {"x":20,"y":57,"w":17,"h":5}, "viewof seq1": {"x":37,"y":31,"w":22,"h":6}, "viewof chordSeq": {"x":24,"y":50}, "viewof kick1": {"x":37,"y":22,"w":16,"h":8}, "viewof snare1": {"x":1,"y":29,"w":16,"h":8}, "viewof hat1": {"x":17,"y":29,"w":16,"h":8}, "viewof pads1": {"x":1,"y":38,"w":19,"h":8}, "viewof echo1": {"x":37,"y":57,"w":11,"h":5}, "viewof verb1": {"x":49,"y":37,"w":9,"h":5}, "viewof duck1": {"x":20,"y":38,"w":13,"h":5}, "viewof slicer1": {"x":24,"y":108,"w":15,"h":8}, "viewof tape1": {"x":33,"y":42,"w":11,"h":5}, "viewof dub1": {"x":44,"y":42,"w":16,"h":5}, "viewof drumBus": {"x":33,"y":38,"w":16,"h":4}, "viewof roll1": {"x":0,"y":97,"w":23,"h":19}, "viewof sections1": {"x":16,"y":10,"w":20,"h":7}, "viewof prog": {"x":0,"y":73,"w":68,"h":10}, "viewof chordpad1": {"x":0,"y":83,"w":25,"h":9}, "viewof pad1": {"x":22,"y":68,"w":27,"h":5}, "viewof note_tour": {"x":0,"y":10,"w":16,"h":10}, "viewof note_pump": {"x":1,"y":22,"w":16,"h":7}, "viewof note_arp": {"x":0,"y":52,"w":18,"h":5}, "viewof note_chords": {"x":0,"y":68,"w":22,"h":5}, "viewof note_lead": {"x":0,"y":93,"w":22,"h":4}, "viewof note_sections": {"x":40,"y":15,"w":18,"h":6}, "viewof note1": {"x":0,"y":0,"w":11,"h":2} } }, columns: 60 })32:Te5c,title = md` A digital audio workstation that is nothing but a notebook. Every piece of state — knob positions, the drum pattern, the rack layout, even instruments you add from the template menu — lives in cell source code, so export, diff, undo and remix all see the whole studio. Built from three orthogonal concepts, none of them audio-specific: - **[sticky](https://observablehq.com/@tomlarkworthy/sticky)** — any view remembers its value in its own source (\`sticky(view, remembered)\`), persisted by a silent definition swap: no recompute, no remount, no audio glitch. - **[grid-container](https://observablehq.com/@tomlarkworthy/grid-container)** — the rack. Atoms are live cells; layout and membership are self-rewritten literals. Even the rack controls are a normal cell (\`controls = gridControls()\`) placed on the rack; its **＋ cell → templates** instantiates a copy of any \`template_*\` cell group under a fresh name — add an instrument without typing code. - **Observable dataflow** — structure. Voices are plain function cells; the kit's \`voices\` literal maps MIDI notes to them, edited like any other cell (✎ on its atom). Audio discipline (no timers anywhere): - \`daw_ctx\`/\`master\`/\`analyser\` use the \`this\` idiom — recompute returns the previous instance, so the audio graph is immortal. - The **clock** is the only ticking thing, and it runs on the **audio clock**: a silent \`ConstantSourceNode\` ends just before each step boundary and its \`onended\` schedules the next step. No \`setInterval\`, no lookahead polling, and it keeps time in background tabs. It dispatches look-ahead \`tick\` events carrying the exact \`AudioContext\` time of the boundary; everything downstream is a passive subscriber. - A **seq** is a pattern grid that listens to the clock and emits *timed* MIDI — a sequencer is a keyboard that plays itself. Instruments can't tell a pattern from a human. A **roll** is the same subscriber at finer grain: a piano-roll canvas whose notes carry fractional step positions and lengths. - Voice functions read knob **elements'** \`.value\` at trigger time, so turning a knob never recomputes the audio path. Everything speaks **MIDI** over a shared bus. Sources publish named events (\`{source, data, time}\`, raw MIDI bytes, optional scheduled time) onto \`midiBus\`: **keys** (pointer + computer-keyboard piano — the key binding is a plain \`keymap\` literal in its cell), **midiIn** (Web MIDI hardware), and every **seq**. Instruments pick their inputs with the **⌁ chooser** on their faceplate; the selection persists inside the same \`sticky\` patch as the knobs, so rewiring is a click yet the whole patch bay still lives in cell source. **Transformers** are both sink and source: **chord** expands each incoming note into a chord under its own bus name (\`keys1 → chord1 → synth\`) — arpeggiators, transposers and quantizers are the same shape. The bus also carries **audio taps**: \`master\` and every synth register their output node under their name, and a **scope** selects which tap it draws. The **song** cell is the arranger — the sequencer of sequencers. It reuses the persistence plane as the arrangement plane: sticky writes view values to *source*, a scene writes view values to *time*. **⊕** captures a snapshot of its ⌁ targets (patterns, synth patches, chord quality, anything with a value) as a scene with a bar count; while armed, the last tick of each bar applies the next scene's values — the events are marked *transient* so sticky does not commit playback moves to source. The scene list itself is a sticky value, so the whole arrangement survives export.`33:Tb4c,mkScope = (ctx, bus, { tap = 'master', label = 'scope', invalidation } = {}) => { const el = document.createElement('div'); el.style.cssText = 'display:inline-flex; flex-direction:column; gap:4px; background:#1c2529; border:1px solid #37474f; border-radius:6px; padding:6px 8px; width:max-content;'; const head = document.createElement('div'); head.style.cssText = 'display:flex; gap:8px; align-items:center; font:10px var(--sans-serif, sans-serif); color:#eceff1;'; const name = document.createElement('b'); name.textContent = label; const sel = document.createElement('select'); sel.style.cssText = 'font:10px inherit; margin-left:auto;'; head.append(name, sel); selfName(el, n => { if (n) { label = n; name.textContent = n; } }); const analyser = ctx.createAnalyser(); analyser.fftSize = 512; let want = tap; let cur = null; const connect = () => { if (cur) { try { cur.disconnect(analyser); } catch (e) { } cur = null; } const node = bus && bus.taps && bus.taps.get(want); if (node) { node.connect(analyser); cur = node; } }; const refresh = () => { const names = [...new Set([ ...bus && bus.taps ? bus.taps.keys() : [], want ])].filter(n => !n.startsWith('template_') || n === want); sel.innerHTML = ''; for (const n of names) { const o = document.createElement('option'); o.value = n; o.textContent = n; sel.appendChild(o); } sel.value = want; connect(); }; sel.addEventListener('input', () => { want = sel.value; connect(); }); if (bus) bus.addEventListener('taps', refresh); const c = document.createElement('canvas'); c.width = 320; c.height = 72; c.style.cssText = 'display:block; width:100%; height:72px; background:#111; border-radius:4px;'; const g = c.getContext('2d'); const buf = new Uint8Array(analyser.fftSize); let raf; const draw = () => { analyser.getByteTimeDomainData(buf); g.fillStyle = '#111'; g.fillRect(0, 0, c.width, c.height); g.strokeStyle = '#3ddc84'; g.lineWidth = 1.5; g.beginPath(); for (let i = 0; i < buf.length; i++) { const x = i / (buf.length - 1) * c.width; const y = buf[i] / 255 * c.height; i ? g.lineTo(x, y) : g.moveTo(x, y); } g.stroke(); raf = requestAnimationFrame(draw); }; el.append(head, c); refresh(); draw(); if (invalidation) invalidation.then(() => { cancelAnimationFrame(raf); if (bus) bus.removeEventListener('taps', refresh); if (cur) try { cur.disconnect(analyser); } catch (e) { } }); Object.defineProperty(el, 'value', { get: () => ({ tap: want }), set: p => { if (p && p.tap) { want = p.tap; refresh(); } } }); return el; }34:T99b,stepGrid = (rows, { steps = 16, labelWidth = 52, rowLabel = null } = {}) => { const wrap = document.createElement('div'); wrap.style.cssText = 'display:grid; gap:2px; font:10px var(--sans-serif, sans-serif); user-select:none; width:max-content;'; wrap.style.gridTemplateColumns = `${ labelWidth }px repeat(${ steps }, 18px)`; const value = Object.fromEntries(rows.map(r => [ r, Array(steps).fill(0) ])); const btns = {}; let ph = -1; const paint = () => { for (const r of rows) value[r].forEach((on, i) => { btns[r][i].style.background = on ? '#e7040f' : i % 4 === 0 ? 'var(--theme-foreground-faint, #ccc)' : 'var(--theme-foreground-faintest, #e5e5e5)'; btns[r][i].style.outline = i === ph ? '2px solid #3ddc84' : 'none'; btns[r][i].style.outlineOffset = '-2px'; btns[r][i].textContent = on > 1 ? on : ''; }); }; wrap.playhead = i => { if (i === ph) return; ph = i; paint(); }; for (const r of rows) { const lab = document.createElement('div'); if (rowLabel) lab.appendChild(rowLabel(r)); else lab.textContent = r; lab.style.cssText = 'align-self:center; overflow:hidden; text-overflow:ellipsis;'; wrap.appendChild(lab); btns[r] = []; for (let i = 0; i < steps; i++) { const b = document.createElement('div'); b.style.cssText = 'width:18px; height:18px; border-radius:3px; cursor:pointer; color:#fff; font:10px/18px var(--sans-serif, sans-serif); text-align:center;'; b.addEventListener('pointerdown', e => { const cur = +value[r][i] || 0; // shift-click ratchets: 2-4 sub-hits inside the step (drum rolls) value[r][i] = e.shiftKey ? (cur >= 4 ? 1 : (cur || 1) + 1) : cur ? 0 : 1; wrap.lastEdit = { row: r, col: i, on: value[r][i] }; paint(); wrap.dispatchEvent(new Event('input', { bubbles: true })); wrap.dispatchEvent(new Event('change', { bubbles: true })); }); btns[r].push(b); wrap.appendChild(b); } } Object.defineProperty(wrap, 'value', { get: () => value, set: v => { if (!v) return; for (const r of rows) if (Array.isArray(v[r])) value[r] = v[r].slice(0, steps).concat(Array(Math.max(0, steps - v[r].length)).fill(0)).map(x => typeof x === 'number' ? Math.max(0, Math.min(4, Math.round(x))) : x ? 1 : 0); paint(); } }); paint(); return wrap; }35:Tbfb,mkBus = (ctx, { out, bus = null, node = null, label = 'bus', gain = 0.9, invalidation } = {}) => { // a submix strip: units sum into .node -> glue compressor -> out. // pass the previous element's node back in to keep the audio graph immortal const g = node ?? (() => { const gg = ctx.createGain(); gg.gain.value = gain; const comp = ctx.createDynamicsCompressor(); comp.threshold.value = -18; comp.ratio.value = 4; comp.attack.value = 0.003; comp.release.value = 0.12; gg.connect(comp); comp.connect(out); gg.__comp = comp; return gg; })(); const comp = g.__comp; const el = document.createElement('div'); el.style.cssText = 'display:inline-flex; gap:8px; align-items:center; font:10px var(--sans-serif, sans-serif); background:#1c2529; color:#eceff1; border:1px solid #37474f; border-radius:6px; padding:6px 10px;'; const name = document.createElement('b'); name.textContent = label; const k = knob({ label: 'gain', min: 0, max: 1.5, value: g.gain.value, step: 0.01 }); k.addEventListener('input', () => { g.gain.value = k.value; }); if (!g.__an) { g.__an = ctx.createAnalyser(); g.__an.fftSize = 512; (comp ?? g).connect(g.__an); } const mc = document.createElement('canvas'); mc.width = 120; mc.height = 28; mc.style.cssText = 'width:60px; height:14px; background:#10181c; border-radius:2px;'; const mg = mc.getContext('2d'); const red = document.createElement('span'); red.style.cssText = 'color:#90a4ae; font-family:monospace; min-width:46px;'; red.title = 'glue compressor gain reduction'; const buf = new Float32Array(g.__an.fftSize); let raf = 0; const meter = () => { g.__an.getFloatTimeDomainData(buf); let s = 0; for (let i = 0; i < buf.length; i++) s += buf[i] * buf[i]; const rms = Math.sqrt(s / buf.length); mg.clearRect(0, 0, 120, 28); mg.fillStyle = rms > 0.5 ? '#e7040f' : '#3ddc84'; mg.fillRect(0, 0, Math.min(120, rms * 300), 28); red.textContent = comp && comp.reduction <= -0.5 ? comp.reduction.toFixed(1) + 'dB' : ''; raf = window.requestAnimationFrame(meter); }; raf = window.requestAnimationFrame(meter); const arrow = document.createElement('span'); arrow.style.cssText = 'color:#90a4ae;'; arrow.textContent = '\u2192 master'; el.append(name, k, mc, red, arrow); selfName(el, n => { if (n) { label = n; name.textContent = n; } if (bus && bus.registerTap) bus.registerTap(label, g); if (invalidation) invalidation.then(() => { if (bus && bus.taps && bus.taps.get(label) === g) { bus.taps.delete(label); bus.dispatchEvent(new window.CustomEvent('taps')); } }); }); if (invalidation) invalidation.then(() => window.cancelAnimationFrame(raf)); el.node = g; Object.defineProperty(el, 'value', { get: () => ({ gain: k.value }), set: v => { if (!v || typeof v.gain !== 'number') return; k.value = v.gain; g.gain.value = v.gain; } }); return el; }36:T170c,mkBass = (ctx, out, { label = 'bass', bus = null, inputs = [], invalidation } = {}) => { const NN = n => ['C','C#','D','D#','E','F','F#','G','G#','A','A#','B'][n % 12] + (Math.floor(n / 12) - 1); const el = document.createElement('div'); el.style.cssText = 'display:inline-flex; flex-direction:column; gap:4px; background:#1c2529; border:1px solid #37474f; border-radius:6px; padding:8px 10px; width:max-content;'; const head = document.createElement('div'); head.style.cssText = 'display:flex; gap:8px; align-items:center; font:10px var(--sans-serif, sans-serif); color:#eceff1;'; const led = document.createElement('span'); led.style.cssText = 'width:7px; height:7px; border-radius:50%; background:#37474f; flex:none;'; const name = document.createElement('b'); name.textContent = label; let selected = new Set(inputs); const picker = mkInputPicker(bus, { selected: inputs, onChange: v => { selected = new Set(v); } }); const tag = document.createElement('span'); tag.textContent = 'kit voice'; tag.title = 'el.voice is a playable voice function: the kit maps a note to it. The \u2301 also works directly (matches the note knob).'; tag.style.cssText = 'color:#90a4ae; margin-left:auto;'; head.append(led, name, picker, tag); const k = { note: knob({ label: 'note', min: 24, max: 60, value: 43, step: 1, fmt: NN }), cutoff: knob({ label: 'cutoff', min: 100, max: 5000, value: 800, step: 10, log: true }), res: knob({ label: 'res', min: 0.5, max: 20, value: 8, step: 0.1, log: true }), decay: knob({ label: 'decay', min: 0.05, max: 0.8, value: 0.25, step: 0.01, log: true }), sub: knob({ label: 'sub', min: 0, max: 1, value: 0.4, step: 0.01 }), gain: knob({ label: 'gain', min: 0, max: 1.5, value: 0.8, step: 0.01 }), pan: knob({ label: 'pan', min: -1, max: 1, value: 0, step: 0.01 }) }; const hit = document.createElement('div'); hit.textContent = 'hit'; hit.style.cssText = 'width:34px; height:34px; border-radius:5px; background:#263238; border:1px solid #37474f; cursor:pointer; display:flex; align-items:center; justify-content:center; font:9px monospace; color:#90a4ae; touch-action:none; align-self:center;'; const row = document.createElement('div'); row.style.cssText = 'display:flex; gap:2px; align-items:center;'; row.append(...Object.values(k), hit); el.append(head, row); const outNode = ctx.createGain(); const panner = ctx.createStereoPanner(); outNode.connect(panner); panner.connect(out); el.addEventListener('input', () => { panner.pan.value = k.pan.value; }); selfName(el, n => { if (n) { label = n; name.textContent = n; } if (bus) { bus.register(label); if (bus.registerTap) bus.registerTap(label, outNode); } if (invalidation) invalidation.then(() => { if (bus && bus.taps && bus.taps.get(label) === outNode) { bus.taps.delete(label); bus.dispatchEvent(new window.CustomEvent('taps')); } }); }); let fade = null; const flash = () => { led.style.background = '#3ddc84'; window.clearTimeout(fade); fade = window.setTimeout(() => { led.style.background = '#37474f'; }, 90); }; let cur = null; const voice = (t, vel = 0.8) => { ctx.resume(); if (cur) { cur.g.gain.cancelScheduledValues(t); cur.g.gain.setTargetAtTime(0.0001, t, 0.004); try { cur.o.stop(t + 0.05); } catch (err) {} try { cur.s.stop(t + 0.05); } catch (err) {} } const f0 = 440 * 2 ** ((k.note.value - 69) / 12); const cutoff = k.cutoff.value; const d = k.decay.value; const o = ctx.createOscillator(); o.type = 'sawtooth'; o.frequency.value = f0; const s = ctx.createOscillator(); s.type = 'sine'; s.frequency.value = f0 / 2; const sg = ctx.createGain(); sg.gain.value = k.sub.value; const f = ctx.createBiquadFilter(); f.type = 'lowpass'; f.frequency.setValueAtTime(cutoff, t); f.frequency.exponentialRampToValueAtTime(Math.max(80, cutoff / 8), t + d); f.Q.value = k.res.value; const g = ctx.createGain(); g.gain.setValueAtTime(0.6 * k.gain.value * Math.max(0.1, vel), t); g.gain.exponentialRampToValueAtTime(0.001, t + d); o.connect(f); s.connect(sg); sg.connect(f); f.connect(g); g.connect(outNode); o.start(t); s.start(t); o.stop(t + d + 0.05); s.stop(t + d + 0.05); cur = { o, s, g }; o.onended = () => { g.disconnect(); if (cur && cur.o === o) cur = null; }; flash(); }; el.voice = voice; hit.addEventListener('pointerdown', e => { e.preventDefault(); const t = ctx.currentTime + 0.003; voice(t, 0.9); if (bus) { bus.publish(label, [144, k.note.value, 110], t); bus.publish(label, [128, k.note.value, 0], t + 0.15); } }); const onBus = e => { if (e.detail.source === label || !selected.has(e.detail.source)) return; const [st, d1, d2] = e.detail.data; if ((st & 240) !== 144 || d2 === 0) return; if (d1 !== k.note.value) return; voice(e.detail.time ?? ctx.currentTime + 0.003, Math.max(0.05, d2 / 127)); }; if (bus) bus.addEventListener('midi', onBus); if (invalidation) invalidation.then(() => { if (bus) bus.removeEventListener('midi', onBus); outNode.disconnect(); }); Object.defineProperty(el, 'value', { get: () => ({ ...Object.fromEntries(Object.entries(k).map(([n, e]) => [n, e.value])), inputs: picker.value }), set: p => { if (!p) return; for (const [n, e] of Object.entries(k)) if (typeof p[n] === 'number') e.value = p[n]; panner.pan.value = k.pan.value; if (Array.isArray(p.inputs)) picker.value = p.inputs; } }); return el; }37:T12c0,extending = md`## Extending the studio 1. **＋ cell → ⊕ bass / drum / synth / sampler / pads / seq / roll / keys / scope / echo / verb / duck / tape / dub / slicer / note / sections** adds a fresh instance of that equipment. Each registers on the \`midiBus\` under its **cell name** — rename the cell and the faceplate, ⌁ entries and audio taps follow — and appears in every ⌁ input chooser. 2. **Wiring is notes.** Every seq row has a draggable note chip; drums, samplers and the bass have a matching \`note\` knob (pads: a chip per pad). An instrument plays a row when the notes match and the seq's name is ticked in its ⌁. The bass is also the **kit voice**: \`kit1\` maps G2 → \`bass_voice\`, which is just \`viewof bass1.voice\` — a faceplate exposing a function cell. 3. **Samples**: drop an audio file on a sampler's waveform or a pad (right-click a pad to browse). The bytes become file attachments, so an exported notebook still has them. 4. **Groove**: the *swing* slider (next to bpm) pushes every off-beat 16th late. **Rolls**: shift-click a step to ratchet it (2–4 sub-hits, rising velocity). **Starting points**: every seq has a ⋯ *groove* select (four-floor, breakbeat, dnb, trap…) — rows are matched by name, so it works on any drum seq — and a 🎲 that rolls a weighted-random pattern: kicks favor downbeats, snares the backbeat, hats run dense. Roll, listen, keep or re-roll. **Solo**: every seq has an **S** — mutes all *other* seqs (additive; live-only, like M). Keys and midiIn are not seqs, so you can solo a pattern and still jam over it. Clicking a step **on** auditions it through whatever listens to the seq. **＋** adds a track (hover a row label for × to remove); drag the new chip to pitch it. 5. **FX are patch cords**: an echo/verb's *from* select taps any instrument's output in parallel (dry path untouched — send/return). \`send\` = how much goes in, \`wet\` = how much comes back. FX register their own tap, so you can scope or duck them by name. 6. **Sidechain**: a duck unit listens for a \`note\` on its ⌁ sources and dips the *ducks* target's gain (\`depth\`, \`rel\`). Default: the kick ducks the reese — classic pump. 7. **Tape**: squashes its source through a tanh drive with *wow* (slow pitch wobble + fast flutter). Parallel by design — dry stays put, so it works like New-York-style saturation glue. Default: the drum bus. 8. **Dub**: a dirty delay — tone filter and a soft saturator live *inside* the feedback loop, so \`fb\` past 1.0 self-oscillates without blowing up, and riding \`time\` pitch-bends the tail, King-Tubby style. \`wob\` adds tape warble. 9. **Glide**: any synth's \`glide\` knob > 0 makes it mono — overlapping notes slide 303-style instead of retriggering. 10. **Pan**: every instrument has a \`pan\` knob. Spread the hats, keep kick and sub centred. 11. **Slice a break**: a demo break (\`break.flac\`, cut from the bundled kit) loads by default — or drop your own on the waveform. It — it chops into \`slices\` equal parts mapped upward from \`base\` (labels drawn on the waveform). Point seq row chips at those notes to resequence the chop; click a slice to audition. 12. **Arranging**: set the song's ⌁ to the cells that define a section, dial in a sound, **⊕** to capture it as a scene, change things, capture again. Set bar counts, press play — the song walks the scenes in a loop. ▶ auditions a scene, ⟳ re-captures into it. Un-tick *armed* to jam without the song moving values under you. Tick **morph** for automation: numeric knob values glide toward the next scene across its bars (patterns and note pitches still switch on the boundary). **sections1** arranges the other way \u2014 by muting a static graph: rows are seqs (its ⌁ picker), columns are sections with bar counts; tick a cell to let that seq play there. While *armed* it walks the columns with the clock, exactly on bar lines, and never touches a knob. It only constrains the seqs it manages (one sections unit drives the mix at a time); combine with song scenes when a section also needs a different sound. 13. Any view from anywhere can join: \`viewof myThing = sticky(anyView, undefined)\` remembers itself; **＋ cell** puts it on the rack. Template authors just name cells \`template_\`. 14. **roll1** is the piano roll — drag to draw notes, drag a note's right edge for length, drag vertically to repitch (auditions as you go), right-click deletes; positions and lengths snap to 1/32. **drumBus** is the drum submix strip the drum units sum into (gain + glue-compressor meter) before master; FX can tap it as \`drumBus\`. 15. **note** cells are markdown annotations for the rack \u2014 double-click to edit, blur to render; the text lives in the sticky value like any knob position.`38:Tb52,knob = ({ label = '', min = 0, max = 1, value = 0.5, step = 0.001, log = false, fmt } = {}) => { const initial = value; const clamp = v => Math.min(max, Math.max(min, v)); const dec = (String(step).split('.')[1] || '').length; const quant = v => +clamp(Math.round(clamp(v) / step) * step).toFixed(dec); const toPos = v => log ? Math.log(v / min) / Math.log(max / min) : (v - min) / (max - min); const fromPos = p => log ? min * Math.pow(max / min, p) : min + p * (max - min); let val = quant(value); const el = document.createElement('div'); el.style.cssText = 'display:inline-flex; flex-direction:column; align-items:center; width:44px; font:9px var(--sans-serif, sans-serif); color:#90a4ae; user-select:none; touch-action:none; cursor:ns-resize;'; const c = document.createElement('canvas'); c.width = 64; c.height = 64; c.style.cssText = 'width:32px; height:32px;'; const g = c.getContext('2d'); const lab = document.createElement('div'); lab.textContent = label; const out = document.createElement('div'); out.style.cssText = 'color:#3ddc84; font-family:monospace;'; const show = v => fmt ? fmt(v) : v >= 1000 ? (v / 1000).toFixed(1) + 'k' : String(+v.toPrecision(3)); const paint = () => { g.clearRect(0, 0, 64, 64); const a0 = Math.PI * 0.75; const a1 = Math.PI * 2.25; const a = a0 + toPos(val) * (a1 - a0); g.lineWidth = 6; g.lineCap = 'round'; g.strokeStyle = '#37474f'; g.beginPath(); g.arc(32, 32, 24, a0, a1); g.stroke(); g.strokeStyle = '#3ddc84'; g.beginPath(); g.arc(32, 32, 24, a0, a); g.stroke(); g.strokeStyle = '#eceff1'; g.lineWidth = 4; g.beginPath(); g.moveTo(32 + 12 * Math.cos(a), 32 + 12 * Math.sin(a)); g.lineTo(32 + 22 * Math.cos(a), 32 + 22 * Math.sin(a)); g.stroke(); out.textContent = show(val); }; const set = (v, notify) => { v = quant(v); const changed = v !== val; val = v; paint(); if (notify && changed) el.dispatchEvent(new window.Event('input', { bubbles: true })); }; let py = null; let p0 = 0; c.addEventListener('pointerdown', e => { c.setPointerCapture(e.pointerId); py = e.clientY; p0 = toPos(val); e.preventDefault(); }); c.addEventListener('pointermove', e => { if (py == null) return; const fine = e.shiftKey ? 0.1 : 1; set(fromPos(Math.min(1, Math.max(0, p0 + (py - e.clientY) / 130 * fine))), true); }); const done = () => { py = null; }; c.addEventListener('pointerup', done); c.addEventListener('pointercancel', done); c.addEventListener('dblclick', () => set(initial, true)); el.appendChild(c); el.appendChild(lab); el.appendChild(out); Object.defineProperty(el, 'value', { get: () => val, set: v => { if (typeof v === 'number' && !Number.isNaN(v)) set(v, false); } }); paint(); return el; }39:T153e,keys = ({ octaves = 2, base = 48, velocity = 100, bus = null, name = 'keys', keymap = { KeyA: 0, KeyW: 1, KeyS: 2, KeyE: 3, KeyD: 4, KeyF: 5, KeyT: 6, KeyG: 7, KeyY: 8, KeyH: 9, KeyU: 10, KeyJ: 11, KeyK: 12, KeyO: 13, KeyL: 14 } } = {}) => { const NAMES = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B']; const nn = n => NAMES[n % 12] + (Math.floor(n / 12) - 1); let oct = 0; const held = new Set(); const el = document.createElement('div'); el.tabIndex = 0; el.style.cssText = 'display:inline-flex; flex-direction:column; gap:3px; outline:none; user-select:none; width:max-content; font:9px var(--sans-serif, sans-serif); color:#90a4ae; border-radius:6px; padding:4px;'; const bar = document.createElement('div'); bar.style.cssText = 'display:flex; gap:6px; align-items:center;'; const octBtn = t => { const b = document.createElement('button'); b.textContent = t; b.style.cssText = 'font:9px monospace; padding:0 5px; cursor:pointer;'; return b; }; const downB = octBtn('−'); const upB = octBtn('+'); const octLab = document.createElement('span'); const status = document.createElement('span'); status.textContent = 'click to arm ⌨'; bar.append(downB, octLab, upB, status); const board = document.createElement('div'); board.style.cssText = 'position:relative; height:64px; width:max-content; touch-action:none;'; selfName(el, n => { if (n) name = n; if (bus) bus.register(name); }); const emit = (on, note, vel) => { const data = [on ? 144 : 128, note & 127, on ? vel : 0]; el.dispatchEvent(new window.CustomEvent('midi', { detail: { data } })); if (bus) bus.publish(name, data); }; const fire = () => el.dispatchEvent(new window.Event('input', { bubbles: true })); const paint = () => { for (const k of keyEls) k.style.background = held.has(base + oct * 12 + +k.dataset.i) ? '#3ddc84' : k.dataset.black ? '#263238' : '#eceff1'; }; const noteon = (note, vel = velocity) => { if (held.has(note)) return; held.add(note); emit(true, note, vel); paint(); fire(); }; const noteoff = note => { if (!held.delete(note)) return; emit(false, note, 0); paint(); fire(); }; const allOff = () => { for (const n of [...held]) noteoff(n); }; const codeFor = {}; for (const [code, off] of Object.entries(keymap)) codeFor[off] = code.replace(/^(Key|Digit)/, ''); const keyEls = []; let dragNote = null; const BLACK = [1, 3, 6, 8, 10]; let wx = 0; for (let i = 0; i < octaves * 12 + 1; i++) { const black = BLACK.includes(i % 12); const k = document.createElement('div'); k.dataset.i = i; if (black) k.dataset.black = '1'; k.style.cssText = black ? `position:absolute; left:${ wx - 7 }px; top:0; width:14px; height:38px; background:#263238; border:1px solid #111; border-radius:0 0 3px 3px; z-index:2; cursor:pointer;` : `position:absolute; left:${ wx }px; top:0; width:21px; height:62px; background:#eceff1; border:1px solid #78909c; border-radius:0 0 3px 3px; box-sizing:border-box; cursor:pointer;`; if (!black) { if (codeFor[i] != null) { const t = document.createElement('div'); t.textContent = codeFor[i].toLowerCase(); t.style.cssText = 'position:absolute; bottom:2px; width:100%; text-align:center; color:#78909c; pointer-events:none;'; k.appendChild(t); } wx += 21; } k.addEventListener('pointerdown', e => { e.preventDefault(); el.focus(); dragNote = base + oct * 12 + i; noteon(dragNote); }); k.addEventListener('pointerenter', e => { if (e.buttons & 1) { if (dragNote != null) noteoff(dragNote); dragNote = base + oct * 12 + i; noteon(dragNote); } }); keyEls.push(k); board.appendChild(k); } board.style.width = wx + 'px'; const endDrag = () => { if (dragNote != null) { noteoff(dragNote); dragNote = null; } }; board.addEventListener('pointerup', endDrag); board.addEventListener('pointerleave', endDrag); const paintOct = () => { octLab.textContent = nn(base + oct * 12) + '–' + nn(base + oct * 12 + octaves * 12); }; const shiftOct = d => { allOff(); oct = Math.max(-3, Math.min(3, oct + d)); paintOct(); }; downB.addEventListener('click', () => shiftOct(-1)); upB.addEventListener('click', () => shiftOct(1)); el.addEventListener('keydown', e => { if (e.repeat) return; const off = keymap[e.code]; if (off != null) { e.preventDefault(); noteon(base + oct * 12 + off); return; } if (e.code === 'KeyZ') shiftOct(-1); if (e.code === 'KeyX') shiftOct(1); }); el.addEventListener('keyup', e => { const off = keymap[e.code]; if (off != null) noteoff(base + oct * 12 + off); }); el.addEventListener('focus', () => { status.textContent = '⌨ armed (z/x octave)'; el.style.outline = '1px solid #3ddc84'; }); el.addEventListener('blur', () => { allOff(); status.textContent = 'click to arm ⌨'; el.style.outline = 'none'; }); el.append(bar, board); Object.defineProperty(el, 'value', { get: () => [...held].sort((a, b) => a - b), set: () => { } }); paintOct(); return el; }3a:Tb7a,midiIn = ({ label = 'MIDI in', bus = null, name = 'midi' } = {}) => { const el = document.createElement('div'); selfName(el, n => { if (n) { name = n; lab.textContent = n; } if (bus) bus.register(name); }); el.style.cssText = 'display:inline-flex; gap:6px; align-items:center; font:11px var(--sans-serif, sans-serif);'; const led = document.createElement('span'); led.style.cssText = 'width:8px; height:8px; border-radius:50%; background:#555; display:inline-block; flex:none;'; const lab = document.createElement('span'); lab.textContent = label; const slot = document.createElement('span'); el.append(led, lab, slot); Object.defineProperty(el, 'value', { get: () => attached.map(i => i.name), set: () => { } }); if (!window.navigator.requestMIDIAccess) { slot.textContent = 'Web MIDI unsupported'; return el; } let access = null; let attached = []; let fade = null; const flash = () => { led.style.background = '#3ddc84'; window.clearTimeout(fade); fade = window.setTimeout(() => { led.style.background = attached.length ? '#2e7d32' : '#555'; }, 120); }; const onMsg = e => { flash(); const data = [...e.data]; el.dispatchEvent(new window.CustomEvent('midi', { detail: { data } })); if (bus) bus.publish(name, data); }; const sel = document.createElement('select'); sel.style.cssText = 'font:11px inherit; max-width:150px;'; const attach = () => { attached.forEach(i => i.removeEventListener('midimessage', onMsg)); attached = []; for (const inp of access.inputs.values()) if (sel.value === '*' || inp.id === sel.value) { inp.addEventListener('midimessage', onMsg); attached.push(inp); } led.style.background = attached.length ? '#2e7d32' : '#555'; }; const rebuild = () => { const cur = sel.value || '*'; sel.innerHTML = ''; const all = document.createElement('option'); all.value = '*'; all.textContent = access.inputs.size ? 'all devices' : 'no devices'; sel.appendChild(all); for (const inp of access.inputs.values()) { const o = document.createElement('option'); o.value = inp.id; o.textContent = inp.name; sel.appendChild(o); } sel.value = [...sel.options].some(o => o.value === cur) ? cur : '*'; attach(); }; sel.addEventListener('input', e => e.stopPropagation()); sel.addEventListener('change', attach); const btn = document.createElement('button'); btn.textContent = 'connect'; btn.style.cssText = 'font:11px inherit; cursor:pointer;'; btn.addEventListener('click', async () => { try { access = await window.navigator.requestMIDIAccess(); access.addEventListener('statechange', rebuild); slot.replaceChildren(sel); rebuild(); } catch (e) { slot.textContent = 'MIDI access denied'; } }); slot.appendChild(btn); return el; }3b:T9c0,mkInputPicker = (bus, { selected = [], onChange } = {}) => { const sel = new Set(selected); const el = document.createElement('span'); el.style.cssText = 'display:inline-flex;'; const btn = document.createElement('button'); btn.style.cssText = 'font:9px monospace; cursor:pointer; padding:1px 5px; max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;'; const paint = () => { btn.textContent = '⌁ ' + (sel.size ? [...sel].join(',') : 'inputs'); }; let pop = null; const close = () => { if (pop) { pop.remove(); pop = null; } }; const open = () => { close(); pop = document.createElement('div'); pop.style.cssText = 'position:fixed; z-index:1000; background:#1c2529; color:#eceff1; border:1px solid #37474f; border-radius:6px; padding:6px 10px; font:10px var(--sans-serif, sans-serif); display:flex; flex-direction:column; gap:3px;'; const r = btn.getBoundingClientRect(); pop.style.left = r.left + 'px'; pop.style.top = r.bottom + 4 + 'px'; const names = [...new Set([ ...bus && bus.sources || [], ...sel ])].filter(n => !n.startsWith('template_') || sel.has(n)); if (!names.length) pop.textContent = 'no sources'; for (const n of names) { const lab = document.createElement('label'); lab.style.cssText = 'display:flex; gap:5px; align-items:center; cursor:pointer;'; const cb = document.createElement('input'); cb.type = 'checkbox'; cb.checked = sel.has(n); cb.addEventListener('input', () => { cb.checked ? sel.add(n) : sel.delete(n); paint(); if (onChange) onChange([...sel]); // popover lives on document.body, outside the faceplate — re-dispatch // from the picker so sticky (listening on the faceplate) hears it el.dispatchEvent(new window.Event('input', { bubbles: true })); }); lab.append(cb, document.createTextNode(n)); pop.appendChild(lab); } pop.addEventListener('pointerleave', close); document.body.appendChild(pop); }; btn.addEventListener('click', e => { e.stopPropagation(); pop ? close() : open(); }); el.appendChild(btn); Object.defineProperty(el, 'value', { get: () => [...sel], set: v => { if (!Array.isArray(v)) return; sel.clear(); v.forEach(n => sel.add(n)); paint(); if (onChange) onChange([...sel]); } }); paint(); return el; }3c:T1f88,mkSynth = (ctx, out, { label = 'synth', sources = [], bus = null, inputs = [], invalidation } = {}) => { const el = document.createElement('div'); el.style.cssText = 'display:inline-flex; flex-direction:column; gap:4px; background:#1c2529; border:1px solid #37474f; border-radius:6px; padding:8px 10px; width:max-content;'; const head = document.createElement('div'); head.style.cssText = 'display:flex; gap:8px; align-items:center; font:10px var(--sans-serif, sans-serif); color:#eceff1;'; const led = document.createElement('span'); led.style.cssText = 'width:7px; height:7px; border-radius:50%; background:#37474f; flex:none;'; const name = document.createElement('b'); name.textContent = label; const wave = document.createElement('select'); wave.style.cssText = 'font:10px inherit; margin-left:auto;'; for (const w of ['sawtooth', 'square', 'triangle', 'sine']) { const o = document.createElement('option'); o.value = w; o.textContent = w; wave.appendChild(o); } let selected = new Set(inputs); const picker = mkInputPicker(bus, { selected: inputs, onChange: v => { selected = new Set(v); } }); head.append(led, name, picker, wave); // per-instrument output: voices sum here so scopes can tap this synth alone const outNode = ctx.createGain(); const panner = ctx.createStereoPanner(); outNode.connect(panner); panner.connect(out); selfName(el, n => { if (n) { label = n; name.textContent = n; } if (bus && bus.registerTap) bus.registerTap(label, outNode); if (invalidation) invalidation.then(() => { if (bus && bus.taps && bus.taps.get(label) === outNode) { bus.taps.delete(label); bus.dispatchEvent(new window.CustomEvent('taps')); } }); }); const k = { gain: knob({ label: 'gain', min: 0, max: 1, value: 0.6, step: 0.01 }), cutoff: knob({ label: 'cutoff', min: 60, max: 14000, value: 3000, step: 1, log: true }), res: knob({ label: 'res', min: 0, max: 18, value: 2, step: 0.1 }), det: knob({ label: 'det', min: 0, max: 50, value: 0, step: 1 }), glide: knob({ label: 'glide', min: 0, max: 0.5, value: 0, step: 0.005 }), env: knob({ label: 'env', min: 0, max: 1, value: 0.35, step: 0.01 }), a: knob({ label: 'att', min: 0.002, max: 1.5, value: 0.005, step: 0.001, log: true }), d: knob({ label: 'dec', min: 0.02, max: 2, value: 0.18, step: 0.01, log: true }), s: knob({ label: 'sus', min: 0, max: 1, value: 0.5, step: 0.01 }), r: knob({ label: 'rel', min: 0.02, max: 4, value: 0.25, step: 0.01, log: true }), pan: knob({ label: 'pan', min: -1, max: 1, value: 0, step: 0.01 }) }; const row = document.createElement('div'); row.style.cssText = 'display:flex; gap:2px;'; row.append(...Object.values(k)); el.append(head, row); el.addEventListener('input', () => { panner.pan.value = k.pan.value; }); const patch = () => ({ wave: wave.value, ...Object.fromEntries(Object.entries(k).map(([n, e]) => [n, e.value])) }); const live = new Map(); let mv = null; let held = []; // fast choke (no release tail): same-note retrigger (rolls) and teardown const kill = (v, t) => { if (v.g.gain.cancelAndHoldAtTime) v.g.gain.cancelAndHoldAtTime(t); else v.g.gain.cancelScheduledValues(t); v.g.gain.setTargetAtTime(0.0001, t, 0.004); v.o.stop(t + 0.05); if (v.o2) v.o2.stop(t + 0.05); v.o.onended = () => v.g.disconnect(); }; const release = (v, t) => { const r = Math.max(0.02, k.r.value); if (v.g.gain.cancelAndHoldAtTime) v.g.gain.cancelAndHoldAtTime(t); else v.g.gain.cancelScheduledValues(t); v.g.gain.setTargetAtTime(0.0001, t, r / 3); v.o.stop(t + r * 3 + 0.1); if (v.o2) v.o2.stop(t + r * 3 + 0.1); v.o.onended = () => v.g.disconnect(); }; const mkVoice = (note, vel, t, p) => { const o = ctx.createOscillator(); o.type = p.wave; o.frequency.value = 440 * 2 ** ((note - 69) / 12); const f = ctx.createBiquadFilter(); f.type = 'lowpass'; f.Q.value = p.res; const peak = Math.min(16000, p.cutoff + p.env * 12000); f.frequency.setValueAtTime(peak, t); f.frequency.setTargetAtTime(p.cutoff, t + Math.max(0.002, p.a), Math.max(0.01, p.d / 3)); const g = ctx.createGain(); const amp = 0.25 * p.gain * (vel / 127) * (p.det > 0 ? 0.65 : 1); g.gain.setValueAtTime(0.0001, t); g.gain.linearRampToValueAtTime(Math.max(0.0002, amp), t + Math.max(0.002, p.a)); g.gain.setTargetAtTime(Math.max(0.0001, amp * p.s), t + Math.max(0.002, p.a), Math.max(0.01, p.d / 3)); let o2 = null; if (p.det > 0) { o.detune.setValueAtTime(-p.det / 2, t); o2 = ctx.createOscillator(); o2.type = p.wave; o2.frequency.value = o.frequency.value; o2.detune.setValueAtTime(p.det / 2, t); o2.connect(f); } o.connect(f); f.connect(g); g.connect(outNode); o.start(t); if (o2) o2.start(t); return { o, o2, g }; }; const noteoff = (note, at) => { const t = at ?? ctx.currentTime; if (mv) { // mono/glide: release only when the last held note lifts const i = held.indexOf(note); if (i >= 0) held.splice(i, 1); if (!held.length) { release(mv, t); mv = null; if (!live.size) led.style.background = '#37474f'; } return; } const v = live.get(note); if (!v) return; // ratchets overlap on/off pairs on one note: only the LAST open releases if (--v.opens > 0) return; live.delete(note); release(v, t); if (!live.size) led.style.background = '#37474f'; }; const noteon = (note, vel, at) => { ctx.resume(); const t = at ?? ctx.currentTime + 0.003; const p = patch(); if (p.glide > 0 || mv) { // glide > 0 = mono/legato: overlapping notes slide 303-style, no env retrigger held.push(note); const f = 440 * 2 ** ((note - 69) / 12); if (mv) { const gl = Math.max(0.005, p.glide); mv.o.frequency.cancelScheduledValues(t); mv.o.frequency.setTargetAtTime(f, t, gl / 3); if (mv.o2) { mv.o2.frequency.cancelScheduledValues(t); mv.o2.frequency.setTargetAtTime(f, t, gl / 3); } } else { mv = mkVoice(note, vel, t, p); } led.style.background = '#3ddc84'; return; } const prev = live.get(note); let opens = 1; if (prev) { kill(prev, t); opens = prev.opens + 1; } const v = mkVoice(note, vel, t, p); v.opens = opens; live.set(note, v); led.style.background = '#3ddc84'; }; const onMidi = e => { const [st, d1, d2] = e.detail.data; const c = st & 240; const t = e.detail.time; if (c === 144 && d2 > 0) noteon(d1, d2, t); else if (c === 128 || c === 144) noteoff(d1, t); }; sources.filter(Boolean).forEach(s => s.addEventListener('midi', onMidi)); const onBus = e => { if (selected.has(e.detail.source)) onMidi(e); }; if (bus) bus.addEventListener('midi', onBus); const allOff = () => { [...live.values()].forEach(v => kill(v, ctx.currentTime)); live.clear(); if (mv) kill(mv, ctx.currentTime); mv = null; held = []; led.style.background = '#37474f'; }; if (invalidation) invalidation.then(() => { sources.filter(Boolean).forEach(s => s.removeEventListener('midi', onMidi)); if (bus) bus.removeEventListener('midi', onBus); allOff(); outNode.disconnect(); }); Object.defineProperty(el, 'value', { get: () => ({ ...patch(), inputs: picker.value }), set: p => { if (!p) return; if (p.wave) wave.value = p.wave; for (const [n, e] of Object.entries(k)) if (typeof p[n] === 'number') e.value = p[n]; panner.pan.value = k.pan.value; if (Array.isArray(p.inputs)) picker.value = p.inputs; } }); return el; }3d:Tbfc,mkClock = (ctx, { playing, bpm, swing = null, stepsPerBar = 16, invalidation } = {}) => { const el = document.createElement('div'); el.style.cssText = 'display:inline-flex; gap:8px; align-items:center; font:11px var(--sans-serif, sans-serif); background:#1c2529; color:#eceff1; border:1px solid #37474f; border-radius:6px; padding:6px 10px;'; const led = document.createElement('span'); led.style.cssText = 'width:8px; height:8px; border-radius:50%; background:#37474f; flex:none;'; const pos = document.createElement('span'); pos.style.cssText = 'font-family:monospace; min-width:5ch;'; pos.textContent = '1.1'; el.append(led, pos); const secPerStep = () => 60 / (Number(bpm && bpm.value) || 120) / 4; let step = 0; let running = false; let gen = 0; const dispatchTick = t => { const bar = Math.floor(step / stepsPerBar); const stepInBar = step % stepsPerBar; // swing: off-beat 16ths land late; internal grid stays steady, only emitted time shifts const sw = swing ? Math.min(0.6, Math.max(0, Number(swing.value) || 0)) : 0; const ts = stepInBar % 2 ? t + sw * secPerStep() : t; el.dispatchEvent(new window.CustomEvent('tick', { detail: { t: ts, step, stepInBar, bar, stepsPerBar, secPerStep: secPerStep() } })); pos.textContent = `${ bar + 1 }.${ Math.floor(stepInBar / 4) + 1 }`; led.style.background = stepInBar % 4 === 0 ? '#3ddc84' : '#2e7d32'; }; const loop = (g, nextT) => { if (!running || g !== gen) return; dispatchTick(nextT); // audio-clock tick: a silent node ends just before the next step boundary // and onended schedules it — keeps time in background tabs const tick = ctx.createConstantSource(); const mute = ctx.createGain(); mute.gain.value = 0; tick.connect(mute); mute.connect(ctx.destination); tick.start(); tick.stop(Math.max(nextT - 0.04, ctx.currentTime + 0.005)); tick.onended = () => { tick.disconnect(); mute.disconnect(); if (!running || g !== gen) return; step++; let t = nextT + secPerStep(); if (t < ctx.currentTime + 0.02) t = ctx.currentTime + 0.02; // resync after jank loop(g, t); }; }; const start = () => { if (running) return; running = true; gen++; step = 0; ctx.resume(); loop(gen, ctx.currentTime + 0.1); }; const stop = () => { running = false; gen++; led.style.background = '#37474f'; pos.textContent = '1.1'; el.dispatchEvent(new window.CustomEvent('stop')); }; const sync = () => playing && playing.value ? start() : stop(); if (playing) playing.addEventListener('input', sync); sync(); el.seek = bar => { step = bar * stepsPerBar; }; if (invalidation) invalidation.then(() => { stop(); if (playing) playing.removeEventListener('input', sync); }); Object.defineProperty(el, 'value', { get: () => ({ running, step, bar: Math.floor(step / stepsPerBar) }), set: () => { } }); return el; }3e:T330c,mkSeq = (clock, { rows = [], steps = 16, velocity = 100, gate = 0.5, label, bus = null, name = 'seq', invalidation } = {}) => { const NN = n => ['C','C#','D','D#','E','F','F#','G','G#','A','A#','B'][n % 12] + (Math.floor(n / 12) - 1); // the wiring is the note: each row's pitch is live UI state (chip), not a source literal rows = rows.map(r => ({ ...r })); const notes = Object.fromEntries(rows.map(r => [r.name, r.note & 127])); const chips = {}; const isPitch = rn => /^[A-G]#?\d$/.test(rn); const rowLabel = rn => { const r = rows.find(x => x.name === rn); const box = document.createElement('span'); box.style.cssText = 'display:inline-flex; gap:4px; align-items:baseline;'; if (!isPitch(rn)) { const nm = document.createElement('span'); nm.textContent = rn; box.appendChild(nm); } const chip = document.createElement('span'); chip.style.cssText = 'color:#3ddc84; font-family:monospace; cursor:ns-resize; touch-action:none;'; chip.title = 'drag to transpose (shift = octaves); dblclick resets'; const paint = () => { chip.textContent = NN(notes[rn]); }; chips[rn] = paint; const bump = v => { v = Math.max(0, Math.min(127, v)); if (v === notes[rn]) return; notes[rn] = v; paint(); chip.dispatchEvent(new window.Event('input', { bubbles: true })); }; let py = null; let n0 = 0; chip.addEventListener('pointerdown', e => { chip.setPointerCapture(e.pointerId); py = e.clientY; n0 = notes[rn]; e.preventDefault(); }); chip.addEventListener('pointermove', e => { if (py == null) return; bump(n0 + Math.round((py - e.clientY) / 6) * (e.shiftKey ? 12 : 1)); }); const done = () => { py = null; }; chip.addEventListener('pointerup', done); chip.addEventListener('pointercancel', done); chip.addEventListener('dblclick', () => bump((r && r.note != null ? r.note : notes[rn]) & 127)); paint(); box.appendChild(chip); const del = document.createElement('span'); del.textContent = '\u00d7'; del.title = 'remove track'; del.style.cssText = 'color:#90a4ae; cursor:pointer; opacity:0; margin-left:2px;'; box.addEventListener('pointerenter', () => { del.style.opacity = 0.8; }); box.addEventListener('pointerleave', () => { del.style.opacity = 0; }); del.addEventListener('click', () => { const i = rows.findIndex(x => x.name === rn); if (i < 0 || rows.length <= 1) return; rows.splice(i, 1); const pat = { ...grid.value }; delete pat[rn]; rebuild(pat); commit(); }); box.appendChild(del); return box; }; let grid = null; // audition: turning a step on plays it immediately through whatever listens to this seq const onGridEdit = () => { const ed = grid.lastEdit; if (!ed || !ed.on || !bus) return; grid.lastEdit = null; const r = rows.find(x => x.name === ed.row); const note = notes[ed.row]; if (note == null) return; bus.publish(name, [144, note, Math.max(1, Math.min(127, (r && r.vel) ?? velocity))]); window.setTimeout(() => bus.publish(name, [128, note, 0]), 250); }; const rebuild = pat => { const old = grid; for (const r of rows) if (notes[r.name] == null) notes[r.name] = (r.note ?? 48) & 127; grid = stepGrid(rows.map(r => r.name), { steps, labelWidth: 64, rowLabel }); grid.addEventListener('input', onGridEdit); if (pat) grid.value = pat; if (old) old.replaceWith(grid); }; rebuild(null); const el = document.createElement('div'); el.style.cssText = 'display:inline-flex; flex-direction:column; gap:2px; width:max-content;'; const head = document.createElement('div'); head.style.cssText = 'display:flex; gap:6px; align-items:center; font:9px var(--sans-serif, sans-serif); color:#90a4ae;'; const lab = document.createElement('span'); lab.textContent = label || name; const muteBtn = document.createElement('button'); muteBtn.textContent = 'M'; muteBtn.title = 'mute (live, not persisted)'; muteBtn.style.cssText = 'font:8px monospace; padding:0 4px; cursor:pointer;'; let muted = false; muteBtn.addEventListener('click', () => { muted = !muted; muteBtn.style.background = muted ? '#e7040f' : ''; muteBtn.style.color = muted ? '#fff' : ''; }); const soloBtn = document.createElement('button'); soloBtn.textContent = 'S'; soloBtn.title = 'solo: mute all other seqs (additive; live, not persisted). Keys and midiIn stay live.'; soloBtn.style.cssText = 'font:8px monospace; padding:0 4px; cursor:pointer;'; if (bus && !bus.solo) bus.solo = new Set(); const soloPaint = () => { const on = bus && bus.solo.has(name); soloBtn.style.background = on ? '#fbc02d' : ''; soloBtn.style.color = on ? '#000' : ''; lab.style.opacity = bus && bus.solo.size && !on ? 0.35 : 1; }; soloBtn.addEventListener('click', () => { if (!bus) return; if (bus.solo.has(name)) bus.solo.delete(name); else bus.solo.add(name); bus.dispatchEvent(new window.CustomEvent('solo')); }); if (bus) { bus.addEventListener('solo', soloPaint); soloPaint(); } const PRESETS = { 'four-floor': { kick: '1000100010001000', snare: '0000100000001000', ghost: '0000000000000000', hat: '0010001000100010', bass: '0010001000100010' }, 'house': { kick: '1000100010001000', snare: '0000100000001000', ghost: '0000000100000010', hat: '0020102000201020', bass: '0010000100100001' }, 'breakbeat': { kick: '1010000000110100', snare: '0000100100101001', ghost: '0010000010000010', hat: '1010101010101010', bass: '1000000100000010' }, 'boom-bap': { kick: '1000000110000010', snare: '0000100000001000', ghost: '0000000001000001', hat: '1010101010101010', bass: '1000001000000100' }, 'dnb': { kick: '1000000000100000', snare: '0000100000001000', ghost: '0000000100000010', hat: '1010101110101011', bass: '1001000010010000' }, 'trap': { kick: '1000000100100000', snare: '0000000010000000', ghost: '0000000000000100', hat: '2010102010301020', bass: '1000000000100000' }, 'dembow': { kick: '1000100010001000', snare: '0001001000010010', ghost: '0000000000000000', hat: '1010101010101010', bass: '1001001010010010' }, 'clear': null }; const commit = () => el.dispatchEvent(new window.Event('input', { bubbles: true })); const preSel = document.createElement('select'); preSel.title = 'load a groove preset \u2014 rows are matched by name (kick / snare / ghost / hat / bass), other rows are left alone; clear zeroes every row'; preSel.style.cssText = 'font:9px inherit; max-width:78px;'; { const o = document.createElement('option'); o.value = ''; o.textContent = '\u22ef groove'; preSel.appendChild(o); } for (const nm of Object.keys(PRESETS)) { const o = document.createElement('option'); o.value = nm; o.textContent = nm; preSel.appendChild(o); } preSel.addEventListener('input', e => { e.stopPropagation(); const nm = preSel.value; if (!nm) return; const p = PRESETS[nm]; const pat = { ...grid.value }; for (const r of rows) { if (!p) { pat[r.name] = Array(steps).fill(0); continue; } const s = p[r.name.toLowerCase()]; if (s) pat[r.name] = Array.from({ length: steps }, (_, i) => +s[i % s.length] || 0); } grid.value = pat; preSel.value = ''; commit(); }); const dice = document.createElement('button'); dice.textContent = '\ud83c\udfb2'; dice.title = 'roll a random groove: kicks favor downbeats, snares the backbeat, hats run dense, melodic rows go sparse; hats and snares may ratchet'; dice.style.cssText = 'font:9px monospace; padding:0 4px; cursor:pointer;'; dice.addEventListener('click', () => { // weighted sample without replacement: musical positions get heavy weights const pick = (w, n) => { const out = Array(steps).fill(0); const ww = Array.from({ length: steps }, (_, i) => w[i % w.length]); for (let j = 0; j < n; j++) { const s = ww.reduce((a, b) => a + b, 0); if (s <= 0) break; let x = Math.random() * s; let i = 0; while (x >= ww[i] && i < steps - 1) { x -= ww[i]; i++; } out[i] = 1; ww[i] = 0; } return out; }; const at = pairs => { const w = Array(16).fill(0.4); for (const [i, v] of pairs) w[i] = v; return w; }; const pat = { ...grid.value }; for (const r of rows) { const rn = r.name.toLowerCase(); let cells; if (/kick/.test(rn)) cells = pick(at([[0, 12], [8, 6], [4, 3], [10, 2.5], [6, 1.5], [14, 1.5]]), 3 + Math.floor(Math.random() * 3)); else if (/snare|clap/.test(rn)) cells = pick(at([[4, 12], [12, 12], [7, 1.5], [15, 1.5], [9, 1]]), 2 + Math.floor(Math.random() * 2)); else if (/ghost/.test(rn)) cells = pick(Array(16).fill(1), Math.floor(Math.random() * 4)); else if (/hat|shak|cym/.test(rn)) cells = pick(Array(16).fill(1), 6 + Math.floor(Math.random() * 8)); else if (/bass/.test(rn)) cells = pick(at([[0, 6], [10, 4], [3, 2], [6, 2], [8, 2], [14, 2]]), 3 + Math.floor(Math.random() * 3)); else cells = pick(Array(16).fill(1), 2 + Math.floor(Math.random() * 4)); if (/hat|snare|clap/.test(rn)) cells = cells.map(v => v && Math.random() < 0.12 ? 2 + Math.floor(Math.random() * 2) : v); pat[r.name] = cells; } grid.value = pat; commit(); }); const addBtn = document.createElement('button'); addBtn.textContent = '+'; addBtn.title = 'add a track; drag its note chip to pitch it, hover its label for \u00d7 to remove'; addBtn.style.cssText = 'font:8px monospace; padding:0 4px; cursor:pointer;'; addBtn.addEventListener('click', () => { const nm = (window.prompt('track name', 'trk' + (rows.length + 1)) || '').trim(); if (!nm || rows.some(r => r.name === nm)) return; const pat = { ...grid.value }; pat[nm] = Array(steps).fill(0); rows.push({ name: nm, note: 48 }); rebuild(pat); commit(); }); head.append(lab, preSel, dice, addBtn, muteBtn, soloBtn); selfName(el, n => { if (n) { name = n; label = n; lab.textContent = n; } if (bus) bus.register(name); }); el.appendChild(head); el.appendChild(grid); const onTick = e => { const { t, step, secPerStep } = e.detail; const col = step % steps; grid.playhead(col); if (muted) return; if (bus && bus.solo && bus.solo.size && !bus.solo.has(name)) return; if (bus && bus.mix && bus.mix.managed.has(name)) { const on = bus.mix.at(Math.floor(step / 16)); if (!on || !on.has(name)) return; } const pat = grid.value; for (const r of rows) { const n = pat[r.name] ? +pat[r.name][col] || 0 : 0; if (!n) continue; const note = notes[r.name]; const hits = Math.min(4, n); for (let h = 0; h < hits; h++) { const ht = t + h * secPerStep / hits; const offT = ht + Math.max(0.02, secPerStep / hits * gate); const bv = Math.max(1, Math.min(127, r.vel ?? velocity)); const on = [144, note, hits > 1 ? Math.max(1, Math.round(bv * (0.55 + 0.45 * (h + 1) / hits))) : bv]; const off = [128, note, 0]; el.dispatchEvent(new window.CustomEvent('midi', { detail: { data: on, time: ht } })); el.dispatchEvent(new window.CustomEvent('midi', { detail: { data: off, time: offT } })); if (bus) { bus.publish(name, on, ht); bus.publish(name, off, offT); } } } }; const onStop = () => grid.playhead(-1); clock.addEventListener('tick', onTick); clock.addEventListener('stop', onStop); if (invalidation) invalidation.then(() => { clock.removeEventListener('tick', onTick); clock.removeEventListener('stop', onStop); if (bus) { bus.removeEventListener('solo', soloPaint); if (bus.solo && bus.solo.delete(name)) bus.dispatchEvent(new window.CustomEvent('solo')); } }); Object.defineProperty(el, 'value', { get: () => ({ ...grid.value, __notes: { ...notes }, __rows: rows.map(r => ({ ...r })) }), set: v => { if (!v) return; if (Array.isArray(v.__rows) && v.__rows.length) { const names = v.__rows.map(r => r.name).join('\u0000'); const had = rows.map(r => r.name).join('\u0000'); rows = v.__rows.map(r => ({ ...r })); if (names !== had) rebuild(null); } if (v.__notes) for (const [rn, n] of Object.entries(v.__notes)) if (typeof n === 'number' && notes[rn] != null) { notes[rn] = n & 127; if (chips[rn]) chips[rn](); } grid.value = v; } }); return el; }3f:T1f22,mkRoll = (clock, { bus = null, name = 'roll', steps = 16, div = 2, lo = 36, hi = 84, velocity = 100, gate = 0.9, invalidation } = {}) => { // piano roll: notes are { t, d, n } with t/d in 16th-steps; t and d snap to 1/div steps const NN = m => ['C','C#','D','D#','E','F','F#','G','G#','A','A#','B'][m % 12] + (Math.floor(m / 12) - 1); const CW = 26; const RH = 7; const GUT = 26; const W = GUT + steps * CW; const H = (hi - lo + 1) * RH; let data = []; let cur = null; let mode = null; let grab = 0; let lastD = 1; let ph = -1; const el = document.createElement('div'); el.style.cssText = 'display:inline-flex; flex-direction:column; gap:2px; width:max-content;'; const head = document.createElement('div'); head.style.cssText = 'display:flex; gap:6px; align-items:center; font:9px var(--sans-serif, sans-serif); color:#90a4ae;'; const lab = document.createElement('span'); lab.textContent = name; const hint = document.createElement('span'); hint.textContent = 'drag draws \u00b7 right edge sets length \u00b7 right-click deletes'; const muteBtn = document.createElement('button'); muteBtn.textContent = 'M'; muteBtn.title = 'mute (live, not persisted)'; muteBtn.style.cssText = 'font:8px monospace; padding:0 4px; cursor:pointer;'; let muted = false; muteBtn.addEventListener('click', () => { muted = !muted; muteBtn.style.background = muted ? '#e7040f' : ''; muteBtn.style.color = muted ? '#fff' : ''; }); const soloBtn = document.createElement('button'); soloBtn.textContent = 'S'; soloBtn.title = 'solo: mute all other seqs (additive; live, not persisted)'; soloBtn.style.cssText = 'font:8px monospace; padding:0 4px; cursor:pointer;'; if (bus && !bus.solo) bus.solo = new Set(); const soloPaint = () => { const on = bus && bus.solo.has(name); soloBtn.style.background = on ? '#fbc02d' : ''; soloBtn.style.color = on ? '#000' : ''; lab.style.opacity = bus && bus.solo.size && !on ? 0.35 : 1; }; soloBtn.addEventListener('click', () => { if (!bus) return; if (bus.solo.has(name)) bus.solo.delete(name); else bus.solo.add(name); bus.dispatchEvent(new window.CustomEvent('solo')); }); if (bus) { bus.addEventListener('solo', soloPaint); soloPaint(); } const c = document.createElement('canvas'); c.width = W * 2; c.height = H * 2; c.style.cssText = `width:${ W }px; height:${ H }px; touch-action:none; cursor:crosshair; border-radius:4px;`; const g = c.getContext('2d'); g.scale(2, 2); const BLACK = new Set([1, 3, 6, 8, 10]); const draw = () => { g.clearRect(0, 0, W, H); g.fillStyle = '#10181c'; g.fillRect(0, 0, W, H); for (let n = lo; n <= hi; n++) { const y = H - (n - lo + 1) * RH; if (BLACK.has(n % 12)) { g.fillStyle = 'rgba(255,255,255,0.045)'; g.fillRect(GUT, y, W - GUT, RH); } if (n % 12 === 0) { g.strokeStyle = 'rgba(255,255,255,0.12)'; g.beginPath(); g.moveTo(GUT, y + RH); g.lineTo(W, y + RH); g.stroke(); g.fillStyle = '#90a4ae'; g.font = '7px monospace'; g.fillText(NN(n), 2, y + RH - 1); } } for (let s = 0; s <= steps; s++) { const x = GUT + s * CW; g.strokeStyle = s % 4 === 0 ? 'rgba(255,255,255,0.18)' : 'rgba(255,255,255,0.06)'; g.beginPath(); g.moveTo(x, 0); g.lineTo(x, H); g.stroke(); } if (ph >= 0) { g.fillStyle = 'rgba(61,220,132,0.12)'; g.fillRect(GUT + ph * CW, 0, CW, H); } for (const nt of data) { const x = GUT + nt.t * CW; const y = H - (nt.n - lo + 1) * RH; g.fillStyle = nt === cur ? '#7effb2' : '#3ddc84'; g.fillRect(x, y + 0.5, Math.max(3, nt.d * CW - 1), RH - 1); } }; const snap = t => Math.round(t * div) / div; const at = e => { const r = c.getBoundingClientRect(); return { t: (e.clientX - r.left - GUT) / CW, n: lo + Math.max(0, Math.min(hi - lo, Math.floor((H - (e.clientY - r.top)) / RH))) }; }; const hitAt = p => data.find(nt => p.n === nt.n && p.t >= nt.t && p.t < nt.t + nt.d); const commit = () => el.dispatchEvent(new window.Event('input', { bubbles: true })); const audition = n => { if (!bus) return; bus.publish(name, [144, n & 127, Math.max(1, Math.min(127, velocity))]); window.setTimeout(() => bus.publish(name, [128, n & 127, 0]), 220); }; c.addEventListener('contextmenu', e => e.preventDefault()); c.addEventListener('pointerdown', e => { e.preventDefault(); try { c.setPointerCapture(e.pointerId); } catch (_) { } const p = at(e); if (p.t < 0) return; const h = hitAt(p); if (e.button === 2 || e.altKey) { if (h) { data = data.filter(x => x !== h); draw(); commit(); } return; } if (h) { cur = h; mode = p.t > h.t + h.d - Math.min(0.5, h.d / 3) ? 'size' : 'move'; grab = p.t - h.t; } else { cur = { t: Math.max(0, Math.min(steps - lastD, snap(p.t))), d: lastD, n: p.n }; data.push(cur); mode = 'size'; audition(cur.n); } draw(); }); c.addEventListener('pointermove', e => { if (!cur || !mode) return; const p = at(e); if (mode === 'move') { const t = Math.max(0, Math.min(steps - cur.d, snap(p.t - grab))); if (t !== cur.t || p.n !== cur.n) { if (p.n !== cur.n) audition(p.n); cur.t = t; cur.n = p.n; draw(); } } else { const d = snap(p.t) - cur.t; if (d >= 1 / div && d !== cur.d) { cur.d = Math.min(steps - cur.t, d); draw(); } } }); const up = () => { if (!cur) return; lastD = cur.d; cur = null; mode = null; draw(); commit(); }; c.addEventListener('pointerup', up); c.addEventListener('pointercancel', up); const onTick = e => { const { t, step, secPerStep } = e.detail; const col = step % steps; if (col !== ph) { ph = col; draw(); } if (muted) return; if (bus && bus.solo && bus.solo.size && !bus.solo.has(name)) return; if (bus && bus.mix && bus.mix.managed.has(name)) { const on = bus.mix.at(Math.floor(step / 16)); if (!on || !on.has(name)) return; } for (const nt of data) { if (nt.t >= col && nt.t < col + 1) { const note = nt.n & 127; const ht = t + (nt.t - col) * secPerStep; const offT = ht + Math.max(0.03, nt.d * secPerStep * gate); const on = [144, note, Math.max(1, Math.min(127, nt.v ?? velocity))]; el.dispatchEvent(new window.CustomEvent('midi', { detail: { data: on, time: ht } })); el.dispatchEvent(new window.CustomEvent('midi', { detail: { data: [128, note, 0], time: offT } })); if (bus) { bus.publish(name, on, ht); bus.publish(name, [128, note, 0], offT); } } } }; const onStop = () => { ph = -1; draw(); }; clock.addEventListener('tick', onTick); clock.addEventListener('stop', onStop); if (invalidation) invalidation.then(() => { clock.removeEventListener('tick', onTick); clock.removeEventListener('stop', onStop); if (bus) { bus.removeEventListener('solo', soloPaint); if (bus.solo && bus.solo.delete(name)) bus.dispatchEvent(new window.CustomEvent('solo')); } }); selfName(el, n => { if (n) { name = n; lab.textContent = n; } if (bus) bus.register(name); }); head.append(lab, hint, muteBtn, soloBtn); el.appendChild(head); el.appendChild(c); Object.defineProperty(el, 'value', { get: () => ({ notes: data.map(x => ({ ...x })) }), set: v => { if (!v || !Array.isArray(v.notes)) return; data = v.notes.map(x => ({ ...x })); draw(); } }); draw(); return el; }40:T5f5,mkNote = ({ text = 'double-click to edit \u2014 markdown' } = {}) => { // a rack annotation: renders markdown, double-click to edit, blur commits. // the text persists in the sticky value like any knob position const el = document.createElement('div'); el.style.cssText = 'display:block; max-width:420px; font:13px var(--serif, serif); cursor:text;'; let cur = text; const render = () => { el.innerHTML = ''; const t = [cur]; t.raw = [cur]; el.appendChild(md(t)); }; const edit = () => { const ta = document.createElement('textarea'); ta.value = cur; ta.style.cssText = 'width:380px; min-height:90px; font:12px monospace;'; el.innerHTML = ''; el.appendChild(ta); ta.focus(); ta.addEventListener('blur', () => { if (ta.value !== cur) { cur = ta.value; render(); el.dispatchEvent(new window.Event('input', { bubbles: true })); } else render(); }); ta.addEventListener('keydown', e => { if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') ta.blur(); if (e.key === 'Escape') { ta.value = cur; ta.blur(); } e.stopPropagation(); }); }; el.addEventListener('dblclick', e => { e.preventDefault(); if (!el.querySelector('textarea')) edit(); }); Object.defineProperty(el, 'value', { get: () => cur, set: v => { if (typeof v !== 'string' || v === cur) return; cur = v; render(); } }); render(); return el; }41:T1a7c,mkSections = (clock, { bus = null, name = 'sections', inputs = [], sections = null, armed = false, invalidation } = {}) => { // arrangement as mute automation: rows = seqs (the ⌁ picker), columns = // sections with bar counts. While armed it publishes bus.mix = {managed, at(bar)} // and every seq consults it per tick, so transitions land exactly on bar lines. let rows = [...inputs]; let secs = sections ? sections.map(s => ({ bars: Math.max(1, s.bars | 0), on: [...(s.on || [])] })) : [ { bars: 4, on: [...inputs] }, { bars: 4, on: [...inputs] } ]; let isArmed = armed; let active = -1; let myMix = null; let spans = []; let total = 0; const el = document.createElement('div'); el.style.cssText = 'display:inline-flex; flex-direction:column; gap:4px; background:#1c2529; color:#eceff1; border:1px solid #37474f; border-radius:6px; padding:8px 10px; width:max-content;'; const head = document.createElement('div'); head.style.cssText = 'display:flex; gap:8px; align-items:center; font:10px var(--sans-serif, sans-serif);'; const lab = document.createElement('b'); lab.textContent = name; const commit = () => el.dispatchEvent(new window.Event('input', { bubbles: true })); const publish = () => { spans = []; total = 0; for (const s of secs) { total += Math.max(1, s.bars | 0); spans.push({ end: total, on: new Set(s.on) }); } if (!bus) return; if (!isArmed || !rows.length || !secs.length) { if (bus.mix && bus.mix === myMix) bus.mix = null; return; } const managed = new Set(rows); const mySpans = spans; const myTotal = total; myMix = { managed, at: bar => { const b = ((bar % myTotal) + myTotal) % myTotal; for (const sp of mySpans) if (b < sp.end) return sp.on; return mySpans[mySpans.length - 1].on; } }; bus.mix = myMix; }; const picker = mkInputPicker(bus, { selected: inputs, onChange: v => { rows = [...v]; paint(); publish(); } }); const armLab = document.createElement('label'); armLab.style.cssText = 'display:flex; gap:3px; align-items:center; cursor:pointer; color:#90a4ae;'; const armCb = document.createElement('input'); armCb.type = 'checkbox'; armCb.checked = isArmed; armCb.addEventListener('input', () => { isArmed = armCb.checked; publish(); }); armLab.append(armCb, document.createTextNode('armed')); const addBtn = document.createElement('button'); addBtn.textContent = '+'; addBtn.title = 'add a section (copies the last one)'; addBtn.style.cssText = 'font:8px monospace; padding:0 4px; cursor:pointer;'; addBtn.addEventListener('click', () => { const last = secs[secs.length - 1]; secs.push(last ? { bars: last.bars, on: [...last.on] } : { bars: 4, on: [...rows] }); paint(); publish(); commit(); }); head.append(lab, picker, addBtn, armLab); const matrix = document.createElement('div'); matrix.style.cssText = 'display:grid; gap:2px; font:10px var(--sans-serif, sans-serif); user-select:none; width:max-content;'; const paint = () => { matrix.innerHTML = ''; matrix.style.gridTemplateColumns = `64px repeat(${ secs.length }, 48px)`; matrix.appendChild(document.createElement('div')); secs.forEach((s, i) => { const h = document.createElement('div'); h.style.cssText = 'display:flex; gap:2px; align-items:center; justify-content:center;' + (i === active ? ' outline:2px solid #fbc02d; outline-offset:-2px; border-radius:3px;' : ''); const b = document.createElement('input'); b.type = 'number'; b.min = 1; b.value = Math.max(1, s.bars | 0); b.title = 'bars'; b.style.cssText = 'width:30px; font:9px monospace;'; b.addEventListener('input', () => { s.bars = Math.max(1, +b.value | 0); publish(); }); const x = document.createElement('span'); x.textContent = '\u00d7'; x.title = 'remove section'; x.style.cssText = 'color:#90a4ae; cursor:pointer;'; x.addEventListener('click', () => { if (secs.length <= 1) return; secs.splice(i, 1); paint(); publish(); commit(); }); h.append(b, x); matrix.appendChild(h); }); for (const r of rows) { const rl = document.createElement('div'); rl.textContent = r; rl.style.cssText = 'align-self:center; overflow:hidden; text-overflow:ellipsis;'; matrix.appendChild(rl); secs.forEach((s, i) => { const cell = document.createElement('div'); const paintCell = () => { cell.style.cssText = 'height:16px; border-radius:3px; cursor:pointer; background:' + (s.on.includes(r) ? '#3ddc84' : 'var(--theme-foreground-faintest, #e5e5e5)') + ';' + (i === active ? ' outline:2px solid #fbc02d; outline-offset:-2px;' : ''); }; paintCell(); cell.addEventListener('click', () => { if (s.on.includes(r)) s.on = s.on.filter(n => n !== r); else s.on = [...s.on, r]; paintCell(); publish(); commit(); }); matrix.appendChild(cell); }); } }; const onTick = e => { const { step } = e.detail; if (!total) return; const bar = Math.floor(step / 16) % total; let idx = 0; for (let i = 0; i < spans.length; i++) if (bar < spans[i].end) { idx = i; break; } if (idx !== active) { active = idx; paint(); } }; const onStop = () => { if (active !== -1) { active = -1; paint(); } }; clock.addEventListener('tick', onTick); clock.addEventListener('stop', onStop); if (invalidation) invalidation.then(() => { clock.removeEventListener('tick', onTick); clock.removeEventListener('stop', onStop); if (bus && bus.mix && bus.mix === myMix) bus.mix = null; }); selfName(el, n => { if (n) { name = n; lab.textContent = n; } }); el.appendChild(head); el.appendChild(matrix); Object.defineProperty(el, 'value', { get: () => ({ inputs: [...rows], sections: secs.map(s => ({ bars: s.bars, on: [...s.on] })), armed: isArmed }), set: v => { if (!v) return; if (Array.isArray(v.sections) && v.sections.length) secs = v.sections.map(s => ({ bars: Math.max(1, s.bars | 0), on: [...(s.on || [])] })); if (typeof v.armed === 'boolean') { isArmed = v.armed; armCb.checked = v.armed; } if (Array.isArray(v.inputs)) picker.value = v.inputs; paint(); publish(); } }); paint(); publish(); return el; }42:T6a9,viewof prog = sticky(mkSeq(viewof clock, { bus: midiBus, steps: 64, gate: 5, rows: [ { name: 'G3', note: 55 }, { name: 'F3', note: 53 }, { name: 'D#3', note: 51 }, { name: 'D3', note: 50 }, { name: 'C3', note: 48 }, { name: 'A#2', note: 46 }, { name: 'G#2', note: 44 } ], invalidation }), {"G3":[1,0,0,0,0,0,1,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],"F3":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,1,0,0,0,1,0],"D#3":[1,0,0,0,0,0,1,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],"D3":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,1,0,0,0,1,0],"C3":[1,0,0,0,0,0,1,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],"A#2":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,1,0,0,0,1,0],"G#2":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],"trk8":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],"__notes":{"G3":55,"F3":53,"D#3":51,"D3":50,"C3":48,"A#2":46,"G#2":44,"trk8":49},"__rows":[{"name":"G3","note":55},{"name":"F3","note":53},{"name":"D#3","note":51},{"name":"D3","note":50},{"name":"C3","note":48},{"name":"A#2","note":46},{"name":"G#2","note":44},{"name":"trk8","note":48}]})43:T935,mkKit = (ctx, { voices = {}, sources = [], bus = null, inputs = [], label = 'kit', invalidation } = {}) => { const NN = n => ['C','C#','D','D#','E','F','F#','G','G#','A','A#','B'][n % 12] + (Math.floor(n / 12) - 1); const el = document.createElement('div'); el.style.cssText = 'display:inline-flex; gap:6px; align-items:center; font:10px var(--sans-serif, sans-serif); background:#1c2529; color:#eceff1; border:1px solid #37474f; border-radius:6px; padding:6px 10px;'; const led = document.createElement('span'); led.style.cssText = 'width:7px; height:7px; border-radius:50%; background:#37474f; flex:none;'; const name = document.createElement('b'); name.textContent = label; const map = document.createElement('span'); map.style.cssText = 'color:#90a4ae; font-family:monospace;'; map.textContent = Object.keys(voices).map(n => NN(+n)).join(' '); let selected = new Set(inputs); const picker = mkInputPicker(bus, { selected: inputs, onChange: v => { selected = new Set(v); } }); el.append(led, name, picker, map); selfName(el, n => { if (n) { label = n; name.textContent = n; } }); let fade = null; const flash = () => { led.style.background = '#3ddc84'; window.clearTimeout(fade); fade = window.setTimeout(() => { led.style.background = '#37474f'; }, 100); }; const onMidi = e => { const [st, note, vel] = e.detail.data; if ((st & 240) !== 144 || vel === 0) return; const v = voices[note]; if (!v) return; ctx.resume(); try { v(e.detail.time ?? ctx.currentTime + 0.003, Math.max(0.05, vel / 127)); flash(); } catch (err) { console.warn('daw: kit voice failed', note, err); } }; sources.filter(Boolean).forEach(s => s.addEventListener('midi', onMidi)); const onBus = e => { if (selected.has(e.detail.source)) onMidi(e); }; if (bus) bus.addEventListener('midi', onBus); if (invalidation) invalidation.then(() => { sources.filter(Boolean).forEach(s => s.removeEventListener('midi', onMidi)); if (bus) bus.removeEventListener('midi', onBus); }); Object.defineProperty(el, 'value', { get: () => ({ inputs: picker.value }), set: p => { if (p && Array.isArray(p.inputs)) picker.value = p.inputs; } }); return el; }44:Td71,mkChord = (bus, { name = 'chord', inputs = [], chord = 'min', invalidation } = {}) => { const CHORDS = { maj: [ 0, 4, 7 ], min: [ 0, 3, 7 ], '7': [ 0, 4, 7, 10 ], maj7: [ 0, 4, 7, 11 ], min7: [ 0, 3, 7, 10 ], sus4: [ 0, 5, 7 ], power: [ 0, 7 ], oct: [ 0, 12 ] }; const el = document.createElement('div'); el.style.cssText = 'display:inline-flex; gap:6px; align-items:center; font:10px var(--sans-serif, sans-serif); background:#1c2529; color:#eceff1; border:1px solid #37474f; border-radius:6px; padding:6px 10px;'; const led = document.createElement('span'); led.style.cssText = 'width:7px; height:7px; border-radius:50%; background:#37474f; flex:none;'; const title = document.createElement('b'); title.textContent = name; let selected = new Set(inputs); const picker = mkInputPicker(bus, { selected: inputs, onChange: v => { selected = new Set(v); } }); const sel = document.createElement('select'); sel.style.cssText = 'font:10px inherit;'; for (const c of Object.keys(CHORDS)) { const o = document.createElement('option'); o.value = c; o.textContent = c; sel.appendChild(o); } sel.value = chord; el.append(led, title, picker, sel); let fade = null; const flash = () => { led.style.background = '#3ddc84'; window.clearTimeout(fade); fade = window.setTimeout(() => { led.style.background = '#37474f'; }, 100); }; const active = new Map(); let emitting = false; const onBus = e => { // emitting guard breaks transformer cycles; source===name skips own echoes if (emitting || e.detail.source === name || !selected.has(e.detail.source)) return; const [st, n, v] = e.detail.data; const c = st & 240; emitting = true; try { if (c === 144 && v > 0) { const notes = (CHORDS[sel.value] || [0]).map(i => n + i).filter(x => x >= 0 && x <= 127); active.set(n, notes); for (const x of notes) bus.publish(name, [ 144, x, v ], e.detail.time); flash(); } else if (c === 128 || c === 144) { const notes = active.get(n) || [n]; active.delete(n); for (const x of notes) bus.publish(name, [ 128, x, 0 ], e.detail.time); } } finally { emitting = false; } }; selfName(el, n => { if (n) { name = n; title.textContent = n; } bus.register(name); }); bus.addEventListener('midi', onBus); const allOff = () => { for (const [n, notes] of [...active]) { active.delete(n); for (const x of notes) bus.publish(name, [ 128, x, 0 ]); } }; sel.addEventListener('input', allOff); if (invalidation) invalidation.then(() => { bus.removeEventListener('midi', onBus); allOff(); }); Object.defineProperty(el, 'value', { get: () => ({ chord: sel.value, inputs: picker.value }), set: p => { if (!p) return; if (p.chord && CHORDS[p.chord]) sel.value = p.chord; if (Array.isArray(p.inputs)) picker.value = p.inputs; } }); return el; }45:T29a5,mkArranger = (runtime, { clock, targets = [], label = 'song', invalidation } = {}) => { const song = { targets: [...targets], scenes: [] }; const el = document.createElement('div'); el.style.cssText = 'display:inline-flex; flex-direction:column; gap:4px; background:#1c2529; border:1px solid #37474f; border-radius:6px; padding:8px 10px; font:10px var(--sans-serif, sans-serif); color:#eceff1; width:max-content; min-width:230px;'; const resolve = n => { for (const v of runtime._variables) if ((v._name === 'viewof ' + n || v._name === 'viewof$' + n) && v._value instanceof window.Element) return v._value; return null; }; const candidates = () => { const names = new Set(); for (const v of runtime._variables) { const nm = v._name && v._name.match(/^viewof[ $](.+)$/); if (!nm) continue; const n = nm[1]; if (n === 'playing' || n === 'clock' || n === 'song' || n === 'dawModule' || n === 'station') continue; if (v._value instanceof window.Element) names.add(n); } return names; }; const picker = mkInputPicker({ get sources() { return candidates(); } }, { selected: song.targets, onChange: v => { song.targets = v; } }); const head = document.createElement('div'); head.style.cssText = 'display:flex; gap:6px; align-items:center;'; const name = document.createElement('b'); name.textContent = label; const armed = document.createElement('input'); armed.type = 'checkbox'; const armLab = document.createElement('label'); armLab.title = 'armed: apply scenes on bar boundaries (live, not persisted)'; armLab.style.cssText = 'display:flex; gap:3px; align-items:center; cursor:pointer; margin-left:auto;'; armLab.append(armed, document.createTextNode('armed')); const morph = document.createElement('input'); morph.type = 'checkbox'; const morphLab = document.createElement('label'); morphLab.title = 'morph: numeric knob values glide toward the next scene across its bars (automation); patterns and notes still switch on the boundary'; morphLab.style.cssText = 'display:flex; gap:3px; align-items:center; cursor:pointer;'; morphLab.append(morph, document.createTextNode('morph')); const capBtn = document.createElement('button'); capBtn.textContent = '⊕'; capBtn.title = 'capture current values of ⌁ targets as a new scene'; capBtn.style.cssText = 'font:9px monospace; cursor:pointer;'; head.append(name, picker, armLab, morphLab, capBtn); const list = document.createElement('div'); list.style.cssText = 'display:flex; flex-direction:column; gap:2px;'; el.append(head, list); const snapshot = () => { const set = {}; for (const n of picker.value) { const t = resolve(n); if (!t) continue; try { const v = JSON.parse(JSON.stringify(t.value)); if (v !== undefined) set[n] = v; } catch (e) { } } return set; }; let current = -1; const spans = () => song.scenes.map(s => Math.max(1, Math.round(+s.bars) || 1)); const sceneIndexAt = bar => { const sp = spans(); const total = sp.reduce((a, b) => a + b, 0); if (!total) return -1; let b = (bar % total + total) % total; for (let i = 0; i < sp.length; i++) { if (b < sp[i]) return i; b -= sp[i]; } return -1; }; const scenePos = bar => { const sp = spans(); const total = sp.reduce((a, b) => a + b, 0); if (!total) return null; let b = (bar % total + total) % total; for (let i = 0; i < sp.length; i++) { if (b < sp[i]) return { i, barInScene: b, bars: sp[i] }; b -= sp[i]; } return null; }; // morph rule: plain numbers lerp; note pitches, arrays (patterns) and __notes // hold the current scene until the boundary const morphValue = (a, b, f, key) => { if (typeof a === 'number' && typeof b === 'number' && key !== 'note') return a + (b - a) * f; if (a && b && typeof a === 'object' && !Array.isArray(a) && typeof b === 'object' && !Array.isArray(b) && key !== '__notes') { const o = {}; for (const k2 of Object.keys(a)) o[k2] = k2 in b ? morphValue(a[k2], b[k2], f, k2) : a[k2]; return o; } return a; }; const hasMorphDiff = (a, b, key) => { if (typeof a === 'number' && typeof b === 'number' && key !== 'note') return a !== b; if (a && b && typeof a === 'object' && !Array.isArray(a) && typeof b === 'object' && !Array.isArray(b) && key !== '__notes') return Object.keys(a).some(k2 => k2 in b && hasMorphDiff(a[k2], b[k2], k2)); return false; }; const paintActive = () => { [...list.children].forEach((row, i) => { row.style.background = i === current ? '#264d33' : 'transparent'; }); }; const apply = i => { const s = song.scenes[i]; if (!s) return; for (const [n, v] of Object.entries(s.set || {})) { const t = resolve(n); if (!t) continue; try { t.value = JSON.parse(JSON.stringify(v)); // transient: drive the view for playback without sticky committing it const ev = new window.Event('input', { bubbles: true }); ev.transient = true; t.dispatchEvent(ev); } catch (err) { console.warn('daw: scene apply failed', n, err); } } current = i; paintActive(); }; const changed = () => el.dispatchEvent(new window.Event('input', { bubbles: true })); const render = () => { list.innerHTML = ''; song.scenes.forEach((s, i) => { const row = document.createElement('div'); row.style.cssText = 'display:flex; gap:4px; align-items:center; border-radius:3px; padding:1px 3px;'; const play = document.createElement('button'); play.textContent = '▶'; play.title = 'apply this scene now (audition)'; play.style.cssText = 'font:8px monospace; cursor:pointer; padding:0 3px;'; play.addEventListener('click', () => apply(i)); const nm = document.createElement('input'); nm.type = 'text'; nm.value = s.name || ''; nm.placeholder = 'scene ' + (i + 1); nm.style.cssText = 'font:10px inherit; width:9ch; background:#111; color:#eceff1; border:1px solid #37474f; border-radius:3px; padding:0 3px;'; nm.addEventListener('input', () => { s.name = nm.value; }); const bars = document.createElement('input'); bars.type = 'number'; bars.min = 1; bars.value = Math.max(1, Math.round(+s.bars) || 1); bars.title = 'bars'; bars.style.cssText = 'font:10px inherit; width:4ch; background:#111; color:#eceff1; border:1px solid #37474f; border-radius:3px;'; bars.addEventListener('input', () => { s.bars = Math.max(1, Math.round(+bars.value) || 1); }); const tcount = document.createElement('span'); tcount.title = 'captured targets'; tcount.style.cssText = 'color:#90a4ae; font:8px monospace;'; tcount.textContent = String(Object.keys(s.set || {}).length); const recap = document.createElement('button'); recap.textContent = '⟳'; recap.title = 're-capture current values into this scene'; recap.style.cssText = 'font:8px monospace; cursor:pointer; padding:0 3px;'; recap.addEventListener('click', () => { s.set = snapshot(); render(); changed(); }); const del = document.createElement('button'); del.textContent = '✕'; del.style.cssText = 'font:8px monospace; cursor:pointer; padding:0 3px;'; del.addEventListener('click', () => { song.scenes.splice(i, 1); if (current === i) current = -1; render(); changed(); }); row.append(play, nm, bars, tcount, recap, del); list.appendChild(row); }); if (!song.scenes.length) { const hint = document.createElement('span'); hint.style.cssText = 'color:#90a4ae;'; hint.textContent = 'no scenes — ⊕ captures the ⌁ targets'; list.appendChild(hint); } paintActive(); }; capBtn.addEventListener('click', () => { song.scenes.push({ name: 'scene ' + (song.scenes.length + 1), bars: 1, set: snapshot() }); render(); changed(); }); const onTick = e => { if (!armed.checked || !song.scenes.length) return; const { stepInBar, stepsPerBar, bar } = e.detail; if (bar === 0 && stepInBar === 0 && current < 0) { // first tick: bring the rack to scene 0 (one-step glitch accepted) const first = sceneIndexAt(0); if (first >= 0) window.queueMicrotask(() => apply(first)); } else if (stepInBar === stepsPerBar - 1) { // last step of the bar: flip for bar+1 after the seqs handled this tick const next = sceneIndexAt(bar + 1); if (next >= 0 && next !== current) window.queueMicrotask(() => apply(next)); } if (morph.checked && current >= 0 && song.scenes.length > 1) { const pos = scenePos(bar); if (pos && pos.i === current) { const a = song.scenes[current].set || {}; const nb = song.scenes[(current + 1) % song.scenes.length].set || {}; const f = (pos.barInScene * stepsPerBar + stepInBar + 1) / (pos.bars * stepsPerBar); for (const [n, av] of Object.entries(a)) { if (!(n in nb) || !hasMorphDiff(av, nb[n], n)) continue; const t = resolve(n); if (!t) continue; try { t.value = JSON.parse(JSON.stringify(morphValue(av, nb[n], f, n))); const ev = new window.Event('input', { bubbles: true }); ev.transient = true; t.dispatchEvent(ev); } catch (err) { } } } } }; const onStop = () => { current = -1; paintActive(); }; if (clock) { clock.addEventListener('tick', onTick); clock.addEventListener('stop', onStop); } if (invalidation) invalidation.then(() => { if (clock) { clock.removeEventListener('tick', onTick); clock.removeEventListener('stop', onStop); } }); Object.defineProperty(el, 'value', { get: () => JSON.parse(JSON.stringify({ targets: picker.value, scenes: song.scenes, morph: morph.checked })), set: v => { if (!v) return; if (Array.isArray(v.targets)) picker.value = v.targets; if (Array.isArray(v.scenes)) song.scenes = JSON.parse(JSON.stringify(v.scenes)); morph.checked = !!v.morph; render(); } }); render(); return el; }46:Tf4f,viewof song = sticky(mkArranger(runtime, { clock: viewof clock, targets: [ 'drums', 'synthSeq', 'chordSeq', 'seq1', 'synth1', 'synth2', 'kit1', 'chord1', 'bass1' ], invalidation }), {"targets":["drums","synthSeq","chordSeq","seq1","synth1","synth2","kit1","chord1","bass1"],"scenes":[{"name":"intro","bars":2,"set":{"drums":{"kick":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],"snare":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],"ghost":[0,0,0,0,0,0,0,1,0,1,0,0,0,0,0,1],"hat":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],"bass":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]},"synthSeq":{"C4":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],"A#3":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],"G3":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],"F3":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],"D#3":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],"C3":[1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]},"chordSeq":{"Cm":[0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0],"A#":[0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0]},"seq1":{"kick":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],"snare":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],"hat":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]},"synth1":{"wave":"sawtooth","gain":0.4,"cutoff":1100,"res":1,"env":0.3,"a":0.06,"d":0.5,"s":0.4,"r":0.5,"det":8,"inputs":["chord1","midi1"]},"synth2":{"wave":"sawtooth","gain":0.7,"cutoff":300,"res":1.5,"env":0.15,"a":0.01,"d":0.4,"s":0.85,"r":0.15,"det":30,"inputs":["synthSeq","keys2"]},"kit1":{"inputs":["drums","seq1"]},"chord1":{"chord":"min7","inputs":["keys1","chordSeq"]},"bass1":{"note":43,"cutoff":900,"res":8,"decay":0.14,"sub":0.4,"gain":0.8,"pan":0,"inputs":[]}}},{"name":"drop","bars":4,"set":{"drums":{"kick":[1,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0],"snare":[0,0,0,0,1,0,0,0,0,0,0,0,1,0,0,0],"ghost":[0,0,0,0,0,0,0,1,0,1,0,0,0,0,0,1],"hat":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],"bass":[1,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0]},"synthSeq":{"C4":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],"A#3":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],"G3":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0],"F3":[0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0],"D#3":[0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0],"C3":[1,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0]},"chordSeq":{"Cm":[0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0],"A#":[0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0]},"seq1":{"kick":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],"snare":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],"hat":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]},"synth1":{"wave":"sawtooth","gain":0.4,"cutoff":1100,"res":1,"env":0.3,"a":0.06,"d":0.5,"s":0.4,"r":0.5,"det":8,"inputs":["chord1","midi1"]},"synth2":{"wave":"sawtooth","gain":0.7,"cutoff":500,"res":1.5,"env":0.15,"a":0.01,"d":0.4,"s":0.85,"r":0.15,"det":30,"inputs":["synthSeq","keys2"]},"kit1":{"inputs":["drums","seq1"]},"chord1":{"chord":"min7","inputs":["keys1","chordSeq"]},"bass1":{"note":43,"cutoff":900,"res":8,"decay":0.14,"sub":0.4,"gain":0.8,"pan":0,"inputs":[]}}},{"name":"roll","bars":2,"set":{"drums":{"kick":[1,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0],"snare":[0,0,0,0,1,0,0,0,0,0,0,0,1,0,0,0],"ghost":[0,0,0,0,0,0,0,1,0,1,0,0,0,0,0,1],"hat":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],"bass":[1,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0]},"synthSeq":{"C4":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],"A#3":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],"G3":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,0],"F3":[0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0],"D#3":[0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0],"C3":[1,0,0,0,0,0,2,0,0,0,0,0,0,0,0,0]},"chordSeq":{"Cm":[0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0],"A#":[0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0]},"seq1":{"kick":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],"snare":[0,0,0,0,0,0,0,0,0,0,2,0,2,0,4,0],"hat":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]},"synth1":{"wave":"sawtooth","gain":0.4,"cutoff":1100,"res":1,"env":0.3,"a":0.06,"d":0.5,"s":0.4,"r":0.5,"det":8,"inputs":["chord1","midi1"]},"synth2":{"wave":"sawtooth","gain":0.7,"cutoff":700,"res":1.5,"env":0.15,"a":0.01,"d":0.4,"s":0.85,"r":0.15,"det":30,"inputs":["synthSeq","keys2"]},"kit1":{"inputs":["drums","seq1"]},"chord1":{"chord":"min7","inputs":["keys1","chordSeq"]},"bass1":{"note":43,"cutoff":900,"res":8,"decay":0.14,"sub":0.4,"gain":0.8,"pan":0,"inputs":[]}}}]})47:T4ec,sampleStore = { // Resolve a sample name to an ArrayBuffer without a dynamic FileAttachment(name) call, // so this runs on plain Observable (which only allows literal FileAttachment args) as well // as the lopecode runtime. Preloaded module samples are declared as literals in sampleFiles; // user uploads (register) live in the attachments map as a blob url. const resolve = async name => { let entry; try { entry = getFileAttachmentsMap(FileAttachment).get(name); } catch (e) { entry = null; } if (entry && entry.url) return (await fetch(entry.url)).arrayBuffer(); const fa = sampleFiles.get(name); if (fa) return fa().arrayBuffer(); throw new Error("sample not found: " + name); }; const load = async name => daw_ctx.decodeAudioData((await resolve(name)).slice(0)); // register uploaded bytes as a module FileAttachment so export round-trips them const register = async f => { const ab = await f.arrayBuffer(); const buf = await daw_ctx.decodeAudioData(ab.slice(0)); const mime = f.type || 'audio/wav'; getFileAttachmentsMap(FileAttachment).set(f.name, { url: URL.createObjectURL(new Blob([ab], { type: mime })), mimeType: mime }); return buf; }; return { load, register }; }48:T2354,mkSampler = (ctx, out, { label = 'sampler', bus = null, inputs = [], invalidation } = {}) => { const NN = n => ['C','C#','D','D#','E','F','F#','G','G#','A','A#','B'][n % 12] + (Math.floor(n / 12) - 1); const el = document.createElement('div'); el.style.cssText = 'display:inline-flex; flex-direction:column; gap:4px; background:#1c2529; border:1px solid #37474f; border-radius:6px; padding:8px 10px; width:max-content;'; const head = document.createElement('div'); head.style.cssText = 'display:flex; gap:8px; align-items:center; font:10px var(--sans-serif, sans-serif); color:#eceff1;'; const led = document.createElement('span'); led.style.cssText = 'width:7px; height:7px; border-radius:50%; background:#37474f; flex:none;'; const name = document.createElement('b'); name.textContent = label; const fileLab = document.createElement('span'); fileLab.style.cssText = 'color:#90a4ae; font-family:monospace;'; fileLab.textContent = '\u2014'; let selected = new Set(inputs); const picker = mkInputPicker(bus, { selected: inputs, onChange: v => { selected = new Set(v); } }); const file = document.createElement('input'); file.type = 'file'; file.accept = 'audio/*'; file.style.display = 'none'; const open = document.createElement('button'); open.textContent = '\ud83d\udcc2'; open.title = 'load sample'; open.style.cssText = 'font:10px inherit; margin-left:auto; cursor:pointer;'; open.onclick = () => file.click(); head.append(led, name, fileLab, picker, open, file); const cv = document.createElement('canvas'); cv.width = 220; cv.height = 40; cv.style.cssText = 'width:220px; height:40px; border:1px solid #263238; border-radius:3px; cursor:pointer;'; cv.title = 'click to audition; drop audio to load'; const k = { note: knob({ label: 'note', min: 0, max: 127, value: 36, step: 1, fmt: NN }), rate: knob({ label: 'rate', min: 0.25, max: 4, value: 1, step: 0.01, log: true }), gain: knob({ label: 'gain', min: 0, max: 1.5, value: 1, step: 0.01 }), start: knob({ label: 'start', min: 0, max: 1, value: 0, step: 0.005 }), end: knob({ label: 'end', min: 0, max: 1, value: 1, step: 0.005 }), pan: knob({ label: 'pan', min: -1, max: 1, value: 0, step: 0.01 }) }; const track = document.createElement('input'); track.type = 'checkbox'; track.title = 'keytrack: any note plays, pitched around note knob'; const trkLab = document.createElement('label'); trkLab.style.cssText = 'display:inline-flex; flex-direction:column; align-items:center; font:9px var(--sans-serif, sans-serif); color:#90a4ae; justify-content:center;'; trkLab.append(track, document.createTextNode('trk')); const row = document.createElement('div'); row.style.cssText = 'display:flex; gap:2px; align-items:center;'; row.append(...Object.values(k), trkLab); el.append(head, cv, row); // audio: one-shots sum into a per-sampler gain so scopes can tap it const outNode = ctx.createGain(); const panner = ctx.createStereoPanner(); outNode.connect(panner); panner.connect(out); selfName(el, n => { if (n) { label = n; name.textContent = n; } if (bus && bus.registerTap) bus.registerTap(label, outNode); if (invalidation) invalidation.then(() => { if (bus && bus.taps && bus.taps.get(label) === outNode) { bus.taps.delete(label); bus.dispatchEvent(new window.CustomEvent('taps')); } }); }); let buffer = null; let fileName = null; let loadTok = 0; const draw = () => { const w = cv.width; const h = cv.height; const g2 = cv.getContext('2d'); g2.fillStyle = '#141b1e'; g2.fillRect(0, 0, w, h); if (!buffer) { g2.fillStyle = '#546e7a'; g2.font = '10px sans-serif'; g2.fillText('drop / \ud83d\udcc2 a sample', 8, h / 2 + 3); return; } const d = buffer.getChannelData(0); const step = Math.max(1, Math.floor(d.length / w)); g2.strokeStyle = '#3ddc84'; g2.beginPath(); for (let x = 0; x < w; x++) { let mn = 1; let mx = -1; for (let i = x * step, e = Math.min(d.length, i + step); i < e; i++) { const v = d[i]; if (v < mn) mn = v; if (v > mx) mx = v; } g2.moveTo(x + 0.5, h / 2 + mn * (h / 2 - 1)); g2.lineTo(x + 0.5, h / 2 + mx * (h / 2 - 1)); } g2.stroke(); g2.fillStyle = 'rgba(10,14,16,0.75)'; const x0 = Math.min(k.start.value, k.end.value) * w; const x1 = Math.max(k.start.value, k.end.value) * w; g2.fillRect(0, 0, x0, h); g2.fillRect(x1, 0, w - x1, h); }; let fade = null; const flash = () => { led.style.background = '#3ddc84'; window.clearTimeout(fade); fade = window.setTimeout(() => { led.style.background = '#37474f'; }, 100); }; let cur = null; const play = (t, vel = 100, noteIn = null) => { if (!buffer) return; ctx.resume(); const dur = buffer.duration; const s0 = Math.min(k.start.value, k.end.value) * dur; const s1 = Math.max(k.start.value, k.end.value) * dur; if (s1 - s0 < 0.001) return; // mono choke: overlapping copies of the same sample comb-filter into glitch. // cancelAndHold: the old voice's scheduled ramps must not re-raise its gain if (cur) { const gp = cur.g.gain; if (gp.cancelAndHoldAtTime) gp.cancelAndHoldAtTime(t); else gp.cancelScheduledValues(t); gp.setTargetAtTime(0.0001, t, 0.004); try { cur.s.stop(t + 0.05); } catch (err) {} } const s = ctx.createBufferSource(); s.buffer = buffer; let rate = k.rate.value; if (track.checked && noteIn != null) rate *= 2 ** ((noteIn - k.note.value) / 12); s.playbackRate.value = rate; const g = ctx.createGain(); // micro-envelope: a trimmed end (end < 1) cuts mid-ring, so hard stops click const lvl = k.gain.value * Math.max(0.05, vel / 127); const wall = (s1 - s0) / Math.max(0.05, rate); g.gain.setValueAtTime(0, t); g.gain.linearRampToValueAtTime(lvl, t + 0.002); g.gain.setValueAtTime(lvl, t + Math.max(0.003, wall - 0.01)); g.gain.linearRampToValueAtTime(0.0001, t + wall); s.connect(g); g.connect(outNode); s.start(t, s0, s1 - s0 + 0.02); cur = { s, g }; s.onended = () => { g.disconnect(); if (cur && cur.s === s) cur = null; }; flash(); }; const loadFile = async n => { const tok = ++loadTok; try { const buf = await sampleStore.load(n); if (tok !== loadTok) return; buffer = buf; fileName = n; fileLab.textContent = n; draw(); } catch (err) { if (tok === loadTok) { fileLab.textContent = n + ' ?'; console.warn('daw: sampler load failed', n, err); } } }; // the sticky slot only remembers the NAME; bytes live in the attachment map const upload = async f => { if (!f) return; try { const buf = await sampleStore.register(f); loadTok++; buffer = buf; fileName = f.name; fileLab.textContent = f.name; draw(); el.dispatchEvent(new window.Event('input', { bubbles: true })); } catch (err) { console.warn('daw: sampler upload failed', err); } }; file.addEventListener('change', e => { e.stopPropagation(); upload(file.files[0]); file.value = ''; }); cv.addEventListener('dragover', e => e.preventDefault()); cv.addEventListener('drop', e => { e.preventDefault(); upload(e.dataTransfer.files[0]); }); cv.addEventListener('click', () => play(ctx.currentTime + 0.01, 100, null)); el.addEventListener('input', () => { panner.pan.value = k.pan.value; draw(); }); const onMidi = e => { const [st, d1, d2] = e.detail.data; if ((st & 240) !== 144 || d2 === 0) return; if (!track.checked && d1 !== k.note.value) return; play(e.detail.time ?? ctx.currentTime + 0.003, d2, d1); }; const onBus = e => { if (selected.has(e.detail.source)) onMidi(e); }; if (bus) bus.addEventListener('midi', onBus); if (invalidation) invalidation.then(() => { if (bus) bus.removeEventListener('midi', onBus); outNode.disconnect(); }); draw(); Object.defineProperty(el, 'value', { get: () => ({ file: fileName, note: k.note.value, track: track.checked, rate: k.rate.value, gain: k.gain.value, start: k.start.value, end: k.end.value, pan: k.pan.value, inputs: picker.value }), set: p => { if (!p) return; for (const n of Object.keys(k)) if (typeof p[n] === 'number') k[n].value = p[n]; panner.pan.value = k.pan.value; if (typeof p.track === 'boolean') track.checked = p.track; if (Array.isArray(p.inputs)) picker.value = p.inputs; if (p.file && p.file !== fileName) loadFile(p.file); draw(); } }); return el; }49:T1fc4,mkPads = (ctx, out, { label = 'pads', bus = null, inputs = [], count = 8, invalidation } = {}) => { const NN = n => ['C','C#','D','D#','E','F','F#','G','G#','A','A#','B'][n % 12] + (Math.floor(n / 12) - 1); const DEFAULT_NOTES = [36, 38, 42, 46, 43, 45, 47, 49]; const el = document.createElement('div'); el.style.cssText = 'display:inline-flex; flex-direction:column; gap:4px; background:#1c2529; border:1px solid #37474f; border-radius:6px; padding:8px 10px; width:max-content;'; const head = document.createElement('div'); head.style.cssText = 'display:flex; gap:8px; align-items:center; font:10px var(--sans-serif, sans-serif); color:#eceff1;'; const led = document.createElement('span'); led.style.cssText = 'width:7px; height:7px; border-radius:50%; background:#37474f; flex:none;'; const name = document.createElement('b'); name.textContent = label; let selected = new Set(inputs); const picker = mkInputPicker(bus, { selected: inputs, onChange: v => { selected = new Set(v); } }); const gainK = knob({ label: 'gain', min: 0, max: 1.5, value: 1, step: 0.01 }); const panK = knob({ label: 'pan', min: -1, max: 1, value: 0, step: 0.01 }); head.append(led, name, picker); const body = document.createElement('div'); body.style.cssText = 'display:flex; gap:6px; align-items:flex-start;'; const grid = document.createElement('div'); grid.style.cssText = 'display:grid; grid-template-columns:repeat(4, 56px); gap:4px;'; body.append(grid, gainK, panK); el.append(head, body); // pads are a bus SOURCE (finger drumming publishes MIDI) and a sink (seqs drive them) const outNode = ctx.createGain(); const panner = ctx.createStereoPanner(); outNode.connect(panner); panner.connect(out); el.addEventListener('input', () => { panner.pan.value = panK.value; }); selfName(el, n => { if (n) { label = n; name.textContent = n; } if (bus) { bus.register(label); if (bus.registerTap) bus.registerTap(label, outNode); } if (invalidation) invalidation.then(() => { if (bus && bus.taps && bus.taps.get(label) === outNode) { bus.taps.delete(label); bus.dispatchEvent(new window.CustomEvent('taps')); } }); }); const file = document.createElement('input'); file.type = 'file'; file.accept = 'audio/*'; file.style.display = 'none'; el.appendChild(file); let target = null; const pads = Array.from({ length: count }, (_, i) => ({ note: (DEFAULT_NOTES[i % DEFAULT_NOTES.length] + 12 * Math.floor(i / DEFAULT_NOTES.length)) & 127, file: null, buffer: null, el: null, paint: null })); let loadTok = 0; const play = (p, vel = 110, t = null) => { if (!p.buffer) return; ctx.resume(); const tt = t ?? ctx.currentTime + 0.003; if (p.cur) { p.cur.g.gain.setTargetAtTime(0.0001, tt, 0.004); try { p.cur.s.stop(tt + 0.05); } catch (err) {} } const s = ctx.createBufferSource(); s.buffer = p.buffer; const g = ctx.createGain(); g.gain.value = gainK.value * Math.max(0.05, vel / 127); s.connect(g); g.connect(outNode); s.start(tt); p.cur = { s, g }; s.onended = () => { g.disconnect(); if (p.cur && p.cur.s === s) p.cur = null; }; p.el.style.background = '#2e7d32'; window.setTimeout(() => { p.el.style.background = p.buffer ? '#263238' : '#1c2529'; }, 90); led.style.background = '#3ddc84'; window.setTimeout(() => { led.style.background = '#37474f'; }, 90); }; const assign = async (p, f) => { if (!f) return; try { const buf = await sampleStore.register(f); p.file = f.name; p.buffer = buf; p.paint(); el.dispatchEvent(new window.Event('input', { bubbles: true })); } catch (err) { console.warn('daw: pad upload failed', err); } }; for (const p of pads) { const b = document.createElement('div'); p.el = b; b.style.cssText = 'height:46px; border-radius:5px; background:#1c2529; border:1px solid #37474f; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:3px 2px; font:8px monospace; color:#90a4ae; touch-action:none; overflow:hidden;'; b.title = 'tap to play; drop audio to load; right-click to browse'; const fileLab = document.createElement('div'); fileLab.style.cssText = 'overflow:hidden; text-overflow:ellipsis; max-width:52px; white-space:nowrap;'; const chip = document.createElement('span'); chip.style.cssText = 'color:#3ddc84; cursor:ns-resize; touch-action:none;'; chip.title = 'drag to transpose (shift = octaves)'; p.paint = () => { fileLab.textContent = p.file ? p.file.replace(/\.[^.]+$/, '') : '\u00b7'; chip.textContent = NN(p.note); b.style.background = p.buffer ? '#263238' : '#1c2529'; }; let py = null; let n0 = 0; chip.addEventListener('pointerdown', e => { e.stopPropagation(); chip.setPointerCapture(e.pointerId); py = e.clientY; n0 = p.note; e.preventDefault(); }); chip.addEventListener('pointermove', e => { if (py == null) return; const v = Math.max(0, Math.min(127, n0 + Math.round((py - e.clientY) / 6) * (e.shiftKey ? 12 : 1))); if (v !== p.note) { p.note = v; p.paint(); chip.dispatchEvent(new window.Event('input', { bubbles: true })); } }); const done = () => { py = null; }; chip.addEventListener('pointerup', done); chip.addEventListener('pointercancel', done); b.append(fileLab, chip); b.addEventListener('pointerdown', e => { e.preventDefault(); const t = ctx.currentTime + 0.003; play(p, 110, t); if (bus) { bus.publish(label, [144, p.note, 110], t); bus.publish(label, [128, p.note, 0], t + 0.15); } }); b.addEventListener('dragover', e => e.preventDefault()); b.addEventListener('drop', e => { e.preventDefault(); assign(p, e.dataTransfer.files[0]); }); b.addEventListener('contextmenu', e => { e.preventDefault(); target = p; file.click(); }); p.paint(); grid.appendChild(b); } file.addEventListener('change', e => { e.stopPropagation(); if (target) assign(target, file.files[0]); file.value = ''; }); const onBus = e => { if (e.detail.source === label || !selected.has(e.detail.source)) return; const [st, d1, d2] = e.detail.data; if ((st & 240) !== 144 || d2 === 0) return; for (const p of pads) if (p.note === d1) play(p, d2, e.detail.time ?? null); }; if (bus) bus.addEventListener('midi', onBus); if (invalidation) invalidation.then(() => { if (bus) bus.removeEventListener('midi', onBus); outNode.disconnect(); }); Object.defineProperty(el, 'value', { get: () => ({ pads: pads.map(p => ({ file: p.file || undefined, note: p.note })), gain: gainK.value, pan: panK.value, inputs: picker.value }), set: v => { if (!v) return; if (typeof v.gain === 'number') gainK.value = v.gain; if (typeof v.pan === 'number') panK.value = v.pan; panner.pan.value = panK.value; if (Array.isArray(v.inputs)) picker.value = v.inputs; if (Array.isArray(v.pads)) v.pads.slice(0, count).forEach((pv, i) => { const p = pads[i]; if (!pv) return; if (typeof pv.note === 'number') p.note = pv.note & 127; if (pv.file && pv.file !== p.file) { const tok = ++loadTok; p.file = pv.file; sampleStore.load(pv.file).then(buf => { if (tok === loadTok || p.file === pv.file) { p.buffer = buf; p.paint(); } }).catch(err => console.warn('daw: pad load failed', pv.file, err)); } p.paint(); }); } }); return el; }4a:T137c,mkDrum = (ctx, out, { label = 'drum', bus = null, inputs = [], invalidation } = {}) => { const NN = n => ['C','C#','D','D#','E','F','F#','G','G#','A','A#','B'][n % 12] + (Math.floor(n / 12) - 1); const el = document.createElement('div'); el.style.cssText = 'display:inline-flex; flex-direction:column; gap:4px; background:#1c2529; border:1px solid #37474f; border-radius:6px; padding:8px 10px; width:max-content;'; const head = document.createElement('div'); head.style.cssText = 'display:flex; gap:8px; align-items:center; font:10px var(--sans-serif, sans-serif); color:#eceff1;'; const led = document.createElement('span'); led.style.cssText = 'width:7px; height:7px; border-radius:50%; background:#37474f; flex:none;'; const name = document.createElement('b'); name.textContent = label; let selected = new Set(inputs); const picker = mkInputPicker(bus, { selected: inputs, onChange: v => { selected = new Set(v); } }); head.append(led, name, picker); const k = { note: knob({ label: 'note', min: 0, max: 127, value: 45, step: 1, fmt: NN }), pitch: knob({ label: 'pitch', min: 30, max: 800, value: 120, step: 1, log: true }), bend: knob({ label: 'bend', min: 1, max: 8, value: 2, step: 0.1 }), decay: knob({ label: 'decay', min: 0.05, max: 1.5, value: 0.3, step: 0.01, log: true }), gain: knob({ label: 'gain', min: 0, max: 1.5, value: 0.9, step: 0.01 }), pan: knob({ label: 'pan', min: -1, max: 1, value: 0, step: 0.01 }) }; const hit = document.createElement('div'); hit.textContent = 'hit'; hit.style.cssText = 'width:34px; height:34px; border-radius:5px; background:#263238; border:1px solid #37474f; cursor:pointer; display:flex; align-items:center; justify-content:center; font:9px monospace; color:#90a4ae; touch-action:none; align-self:center;'; const row = document.createElement('div'); row.style.cssText = 'display:flex; gap:2px; align-items:center;'; row.append(...Object.values(k), hit); el.append(head, row); const outNode = ctx.createGain(); const panner = ctx.createStereoPanner(); outNode.connect(panner); panner.connect(out); el.addEventListener('input', () => { panner.pan.value = k.pan.value; }); selfName(el, n => { if (n) { label = n; name.textContent = n; } if (bus) { bus.register(label); if (bus.registerTap) bus.registerTap(label, outNode); } if (invalidation) invalidation.then(() => { if (bus && bus.taps && bus.taps.get(label) === outNode) { bus.taps.delete(label); bus.dispatchEvent(new window.CustomEvent('taps')); } }); }); let fade = null; const flash = () => { led.style.background = '#3ddc84'; window.clearTimeout(fade); fade = window.setTimeout(() => { led.style.background = '#37474f'; }, 90); }; let cur = null; const play = (vel = 110, at = null) => { ctx.resume(); const t = at ?? ctx.currentTime + 0.003; if (cur) { cur.g.gain.cancelScheduledValues(t); cur.g.gain.setTargetAtTime(0.0001, t, 0.004); try { cur.o.stop(t + 0.05); } catch (err) {} } const p = k.pitch.value; const d = k.decay.value; const o = ctx.createOscillator(); const g = ctx.createGain(); o.frequency.setValueAtTime(p * k.bend.value, t); o.frequency.exponentialRampToValueAtTime(p, t + d * 0.6); g.gain.setValueAtTime(0.7 * k.gain.value * Math.max(0.05, vel / 127), t); g.gain.exponentialRampToValueAtTime(0.001, t + d); o.connect(g); g.connect(outNode); o.start(t); o.stop(t + d + 0.05); cur = { o, g }; o.onended = () => { g.disconnect(); if (cur && cur.o === o) cur = null; }; flash(); }; hit.addEventListener('pointerdown', e => { e.preventDefault(); const t = ctx.currentTime + 0.003; play(110, t); if (bus) { bus.publish(label, [144, k.note.value, 110], t); bus.publish(label, [128, k.note.value, 0], t + 0.15); } }); const onBus = e => { if (e.detail.source === label || !selected.has(e.detail.source)) return; const [st, d1, d2] = e.detail.data; if ((st & 240) !== 144 || d2 === 0) return; if (d1 !== k.note.value) return; play(d2, e.detail.time ?? null); }; if (bus) bus.addEventListener('midi', onBus); if (invalidation) invalidation.then(() => { if (bus) bus.removeEventListener('midi', onBus); outNode.disconnect(); }); Object.defineProperty(el, 'value', { get: () => ({ ...Object.fromEntries(Object.entries(k).map(([n, e]) => [n, e.value])), inputs: picker.value }), set: p => { if (!p) return; for (const [n, e] of Object.entries(k)) if (typeof p[n] === 'number') e.value = p[n]; panner.pan.value = k.pan.value; if (Array.isArray(p.inputs)) picker.value = p.inputs; } }); return el; }4b:Tfda,mkEcho = (ctx, out, { label = 'echo', bus = null, tap = '', invalidation } = {}) => { const el = document.createElement('div'); el.style.cssText = 'display:inline-flex; flex-direction:column; gap:4px; background:#1c2529; border:1px solid #37474f; border-radius:6px; padding:8px 10px; width:max-content;'; const head = document.createElement('div'); head.style.cssText = 'display:flex; gap:8px; align-items:center; font:10px var(--sans-serif, sans-serif); color:#eceff1;'; const name = document.createElement('b'); name.textContent = label; const from = document.createElement('span'); from.textContent = 'from'; from.style.cssText = 'color:#90a4ae; margin-left:auto;'; const sel = document.createElement('select'); sel.style.cssText = 'font:10px inherit;'; head.append(name, from, sel); const k = { send: knob({ label: 'send', min: 0, max: 1.5, value: 0.6, step: 0.01 }), time: knob({ label: 'time', min: 0.03, max: 1.5, value: 0.26, step: 0.005, log: true }), fb: knob({ label: 'fb', min: 0, max: 0.9, value: 0.35, step: 0.01 }), wet: knob({ label: 'wet', min: 0, max: 1.5, value: 0.5, step: 0.01 }) }; const row = document.createElement('div'); row.style.cssText = 'display:flex; gap:2px;'; row.append(...Object.values(k)); el.append(head, row); // send/return: taps the chosen instrument's output IN PARALLEL — dry path untouched const inG = ctx.createGain(); const dl = ctx.createDelay(2); const damp = ctx.createBiquadFilter(); damp.type = 'lowpass'; damp.frequency.value = 4500; const fbG = ctx.createGain(); const wetG = ctx.createGain(); inG.connect(dl); dl.connect(damp); damp.connect(fbG); fbG.connect(dl); dl.connect(wetG); wetG.connect(out); selfName(el, n => { if (n) { label = n; name.textContent = n; } if (bus && bus.registerTap) bus.registerTap(label, wetG); if (invalidation) invalidation.then(() => { if (bus && bus.taps && bus.taps.get(label) === wetG) { bus.taps.delete(label); bus.dispatchEvent(new window.CustomEvent('taps')); } }); }); const apply = () => { const t = ctx.currentTime; inG.gain.setTargetAtTime(k.send.value, t, 0.02); dl.delayTime.setTargetAtTime(k.time.value, t, 0.05); fbG.gain.setTargetAtTime(Math.min(0.92, k.fb.value), t, 0.02); wetG.gain.setTargetAtTime(k.wet.value, t, 0.02); }; apply(); el.addEventListener('input', apply); let want = tap; let cur = null; const connect = () => { if (cur) { try { cur.disconnect(inG); } catch (e) { } cur = null; } const node = bus && bus.taps && bus.taps.get(want); if (node && node !== wetG) { node.connect(inG); cur = node; } }; const refresh = () => { const names = [...new Set([ '', ...bus && bus.taps ? bus.taps.keys() : [], want ])].filter(n => (!n || !n.startsWith('template_') || n === want) && n !== label); sel.innerHTML = ''; for (const n of names) { const o = document.createElement('option'); o.value = n; o.textContent = n || '\u2014'; sel.appendChild(o); } sel.value = want; connect(); }; sel.addEventListener('input', () => { want = sel.value; connect(); }); if (bus) bus.addEventListener('taps', refresh); refresh(); if (invalidation) invalidation.then(() => { if (bus) bus.removeEventListener('taps', refresh); if (cur) try { cur.disconnect(inG); } catch (e) { } wetG.disconnect(); }); Object.defineProperty(el, 'value', { get: () => ({ tap: want, ...Object.fromEntries(Object.entries(k).map(([n, e]) => [n, e.value])) }), set: p => { if (!p) return; for (const [n, e] of Object.entries(k)) if (typeof p[n] === 'number') e.value = p[n]; if (typeof p.tap === 'string') want = p.tap; apply(); refresh(); } }); return el; }4c:T1346,mkTape = (ctx, out, { label = 'tape', bus = null, tap = '', invalidation } = {}) => { const el = document.createElement('div'); el.style.cssText = 'display:inline-flex; flex-direction:column; gap:4px; background:#1c2529; border:1px solid #37474f; border-radius:6px; padding:8px 10px; width:max-content;'; const head = document.createElement('div'); head.style.cssText = 'display:flex; gap:8px; align-items:center; font:10px var(--sans-serif, sans-serif); color:#eceff1;'; const name = document.createElement('b'); name.textContent = label; const from = document.createElement('span'); from.textContent = 'from'; from.style.cssText = 'color:#90a4ae; margin-left:auto;'; const sel = document.createElement('select'); sel.style.cssText = 'font:10px inherit;'; head.append(name, from, sel); const k = { drive: knob({ label: 'drive', min: 1, max: 10, value: 3, step: 0.1, log: true }), wow: knob({ label: 'wow', min: 0, max: 1, value: 0.3, step: 0.01 }), tone: knob({ label: 'tone', min: 500, max: 14000, value: 6000, step: 10, log: true }), wet: knob({ label: 'wet', min: 0, max: 1.5, value: 0.7, step: 0.01 }) }; const row = document.createElement('div'); row.style.cssText = 'display:flex; gap:2px;'; row.append(...Object.values(k)); el.append(head, row); // parallel tape: source -> drive -> tanh -> wow/flutter delay -> tone -> wet const inG = ctx.createGain(); const pre = ctx.createGain(); const sat = ctx.createWaveShaper(); const crv = new Float32Array(257); for (let i = 0; i <= 256; i++) { const x = i / 128 - 1; crv[i] = Math.tanh(2.5 * x) / Math.tanh(2.5); } sat.curve = crv; sat.oversample = '2x'; const dl = ctx.createDelay(0.06); dl.delayTime.value = 0.02; const wowLfo = ctx.createOscillator(); wowLfo.frequency.value = 0.5; const wowDepth = ctx.createGain(); wowDepth.gain.value = 0; const flutLfo = ctx.createOscillator(); flutLfo.frequency.value = 6.3; const flutDepth = ctx.createGain(); flutDepth.gain.value = 0; wowLfo.connect(wowDepth); wowDepth.connect(dl.delayTime); flutLfo.connect(flutDepth); flutDepth.connect(dl.delayTime); wowLfo.start(); flutLfo.start(); const toneF = ctx.createBiquadFilter(); toneF.type = 'lowpass'; toneF.Q.value = 0.7; const wetG = ctx.createGain(); inG.connect(pre); pre.connect(sat); sat.connect(dl); dl.connect(toneF); toneF.connect(wetG); wetG.connect(out); selfName(el, n => { if (n) { label = n; name.textContent = n; } if (bus && bus.registerTap) bus.registerTap(label, wetG); if (invalidation) invalidation.then(() => { if (bus && bus.taps && bus.taps.get(label) === wetG) { bus.taps.delete(label); bus.dispatchEvent(new window.CustomEvent('taps')); } }); }); const apply = () => { const t = ctx.currentTime; pre.gain.setTargetAtTime(k.drive.value, t, 0.02); // tanh holds peaks near 1; makeup keeps loudness steady as drive rises wetG.gain.setTargetAtTime(k.wet.value / Math.sqrt(k.drive.value), t, 0.02); wowDepth.gain.setTargetAtTime(k.wow.value * 0.006, t, 0.05); flutDepth.gain.setTargetAtTime(k.wow.value * 0.0012, t, 0.05); toneF.frequency.setTargetAtTime(k.tone.value, t, 0.02); }; apply(); el.addEventListener('input', apply); let want = tap; let cur = null; const connect = () => { if (cur) { try { cur.disconnect(inG); } catch (e) { } cur = null; } const node = bus && bus.taps && bus.taps.get(want); if (node && node !== wetG) { node.connect(inG); cur = node; } }; const refresh = () => { const names = [...new Set([ '', ...bus && bus.taps ? bus.taps.keys() : [], want ])].filter(n => (!n || !n.startsWith('template_') || n === want) && n !== label); sel.innerHTML = ''; for (const n of names) { const o = document.createElement('option'); o.value = n; o.textContent = n || '\u2014'; sel.appendChild(o); } sel.value = want; connect(); }; sel.addEventListener('input', () => { want = sel.value; connect(); }); if (bus) bus.addEventListener('taps', refresh); refresh(); if (invalidation) invalidation.then(() => { if (bus) bus.removeEventListener('taps', refresh); if (cur) try { cur.disconnect(inG); } catch (e) { } wetG.disconnect(); }); Object.defineProperty(el, 'value', { get: () => ({ tap: want, ...Object.fromEntries(Object.entries(k).map(([n, e]) => [n, e.value])) }), set: p => { if (!p) return; for (const [n, e] of Object.entries(k)) if (typeof p[n] === 'number') e.value = p[n]; if (typeof p.tap === 'string') want = p.tap; apply(); refresh(); } }); return el; }4d:T1607,mkDub = (ctx, out, { label = 'dub', bus = null, tap = '', invalidation } = {}) => { const el = document.createElement('div'); el.style.cssText = 'display:inline-flex; flex-direction:column; gap:4px; background:#1c2529; border:1px solid #37474f; border-radius:6px; padding:8px 10px; width:max-content;'; const head = document.createElement('div'); head.style.cssText = 'display:flex; gap:8px; align-items:center; font:10px var(--sans-serif, sans-serif); color:#eceff1;'; const name = document.createElement('b'); name.textContent = label; const from = document.createElement('span'); from.textContent = 'from'; from.style.cssText = 'color:#90a4ae; margin-left:auto;'; const sel = document.createElement('select'); sel.style.cssText = 'font:10px inherit;'; head.append(name, from, sel); const k = { send: knob({ label: 'send', min: 0, max: 1.5, value: 0.8, step: 0.01 }), time: knob({ label: 'time', min: 0.05, max: 1.5, value: 0.375, step: 0.005, log: true }), fb: knob({ label: 'fb', min: 0, max: 1.15, value: 0.55, step: 0.01 }), tone: knob({ label: 'tone', min: 300, max: 8000, value: 2500, step: 10, log: true }), wob: knob({ label: 'wob', min: 0, max: 1, value: 0.35, step: 0.01 }), wet: knob({ label: 'wet', min: 0, max: 1.5, value: 0.7, step: 0.01 }) }; const row = document.createElement('div'); row.style.cssText = 'display:flex; gap:2px;'; row.append(...Object.values(k)); el.append(head, row); // dub loop: delay -> tone LPF -> HPF -> tanh -> fb -> delay. The saturator // bounds the loop, so fb past 1.0 self-oscillates instead of blowing up const inG = ctx.createGain(); const dl = ctx.createDelay(3); const toneF = ctx.createBiquadFilter(); toneF.type = 'lowpass'; toneF.Q.value = 0.7; const hpF = ctx.createBiquadFilter(); hpF.type = 'highpass'; hpF.frequency.value = 120; hpF.Q.value = 0.5; const sat = ctx.createWaveShaper(); // unity slope at 0: echoes decay at exactly fb per repeat, only peaks // saturate. Normalizing by tanh(1.5) instead would give small signals a // 1.66x boost and every fb above ~0.6 runs away const crv = new Float32Array(257); for (let i = 0; i <= 256; i++) { const x = i / 128 - 1; crv[i] = Math.tanh(1.5 * x) / 1.5; } sat.curve = crv; sat.oversample = '2x'; const fbG = ctx.createGain(); const wetG = ctx.createGain(); inG.connect(dl); dl.connect(toneF); toneF.connect(hpF); hpF.connect(sat); sat.connect(fbG); fbG.connect(dl); const makeup = ctx.createGain(); makeup.gain.value = 1.65; sat.connect(makeup); makeup.connect(wetG); wetG.connect(out); const wobLfo = ctx.createOscillator(); wobLfo.frequency.value = 0.6; const wobDepth = ctx.createGain(); wobDepth.gain.value = 0; const flutLfo = ctx.createOscillator(); flutLfo.frequency.value = 5.2; const flutDepth = ctx.createGain(); flutDepth.gain.value = 0; wobLfo.connect(wobDepth); wobDepth.connect(dl.delayTime); flutLfo.connect(flutDepth); flutDepth.connect(dl.delayTime); wobLfo.start(); flutLfo.start(); selfName(el, n => { if (n) { label = n; name.textContent = n; } if (bus && bus.registerTap) bus.registerTap(label, wetG); if (invalidation) invalidation.then(() => { if (bus && bus.taps && bus.taps.get(label) === wetG) { bus.taps.delete(label); bus.dispatchEvent(new window.CustomEvent('taps')); } }); }); const apply = () => { const t = ctx.currentTime; inG.gain.setTargetAtTime(k.send.value, t, 0.02); // slow target = tape-style pitch bend when you ride the time knob dl.delayTime.setTargetAtTime(k.time.value, t, 0.08); fbG.gain.setTargetAtTime(k.fb.value, t, 0.02); toneF.frequency.setTargetAtTime(k.tone.value, t, 0.02); wobDepth.gain.setTargetAtTime(k.wob.value * 0.004, t, 0.05); flutDepth.gain.setTargetAtTime(k.wob.value * 0.0012, t, 0.05); wetG.gain.setTargetAtTime(k.wet.value, t, 0.02); }; apply(); el.addEventListener('input', apply); let want = tap; let cur = null; const connect = () => { if (cur) { try { cur.disconnect(inG); } catch (e) { } cur = null; } const node = bus && bus.taps && bus.taps.get(want); if (node && node !== wetG) { node.connect(inG); cur = node; } }; const refresh = () => { const names = [...new Set([ '', ...bus && bus.taps ? bus.taps.keys() : [], want ])].filter(n => (!n || !n.startsWith('template_') || n === want) && n !== label); sel.innerHTML = ''; for (const n of names) { const o = document.createElement('option'); o.value = n; o.textContent = n || '\u2014'; sel.appendChild(o); } sel.value = want; connect(); }; sel.addEventListener('input', () => { want = sel.value; connect(); }); if (bus) bus.addEventListener('taps', refresh); refresh(); if (invalidation) invalidation.then(() => { if (bus) bus.removeEventListener('taps', refresh); if (cur) try { cur.disconnect(inG); } catch (e) { } wetG.disconnect(); }); Object.defineProperty(el, 'value', { get: () => ({ tap: want, ...Object.fromEntries(Object.entries(k).map(([n, e]) => [n, e.value])) }), set: p => { if (!p) return; for (const [n, e] of Object.entries(k)) if (typeof p[n] === 'number') e.value = p[n]; if (typeof p.tap === 'string') want = p.tap; apply(); refresh(); } }); return el; }4e:T108a,mkVerb = (ctx, out, { label = 'verb', bus = null, tap = '', invalidation } = {}) => { const el = document.createElement('div'); el.style.cssText = 'display:inline-flex; flex-direction:column; gap:4px; background:#1c2529; border:1px solid #37474f; border-radius:6px; padding:8px 10px; width:max-content;'; const head = document.createElement('div'); head.style.cssText = 'display:flex; gap:8px; align-items:center; font:10px var(--sans-serif, sans-serif); color:#eceff1;'; const name = document.createElement('b'); name.textContent = label; const from = document.createElement('span'); from.textContent = 'from'; from.style.cssText = 'color:#90a4ae; margin-left:auto;'; const sel = document.createElement('select'); sel.style.cssText = 'font:10px inherit;'; head.append(name, from, sel); const k = { send: knob({ label: 'send', min: 0, max: 1.5, value: 0.6, step: 0.01 }), size: knob({ label: 'size', min: 0.3, max: 6, value: 1.8, step: 0.05, log: true }), wet: knob({ label: 'wet', min: 0, max: 1.5, value: 0.35, step: 0.01 }) }; const row = document.createElement('div'); row.style.cssText = 'display:flex; gap:2px;'; row.append(...Object.values(k)); el.append(head, row); const inG = ctx.createGain(); const conv = ctx.createConvolver(); const wetG = ctx.createGain(); inG.connect(conv); conv.connect(wetG); wetG.connect(out); selfName(el, n => { if (n) { label = n; name.textContent = n; } if (bus && bus.registerTap) bus.registerTap(label, wetG); if (invalidation) invalidation.then(() => { if (bus && bus.taps && bus.taps.get(label) === wetG) { bus.taps.delete(label); bus.dispatchEvent(new window.CustomEvent('taps')); } }); }); let lastSize = 0; const genImpulse = secs => { const sr = ctx.sampleRate; const len = Math.max(sr * 0.1, Math.floor(sr * secs)); const b = ctx.createBuffer(2, len, sr); for (let ch = 0; ch < 2; ch++) { const d = b.getChannelData(ch); for (let i = 0; i < len; i++) d[i] = (Math.random() * 2 - 1) * Math.pow(1 - i / len, 2.6); } conv.buffer = b; lastSize = secs; }; genImpulse(k.size.value); let regen = null; const apply = () => { const t = ctx.currentTime; inG.gain.setTargetAtTime(k.send.value, t, 0.02); wetG.gain.setTargetAtTime(k.wet.value, t, 0.02); if (k.size.value !== lastSize) { window.clearTimeout(regen); regen = window.setTimeout(() => genImpulse(k.size.value), 250); } }; apply(); el.addEventListener('input', apply); let want = tap; let cur = null; const connect = () => { if (cur) { try { cur.disconnect(inG); } catch (e) { } cur = null; } const node = bus && bus.taps && bus.taps.get(want); if (node && node !== wetG) { node.connect(inG); cur = node; } }; const refresh = () => { const names = [...new Set([ '', ...bus && bus.taps ? bus.taps.keys() : [], want ])].filter(n => (!n || !n.startsWith('template_') || n === want) && n !== label); sel.innerHTML = ''; for (const n of names) { const o = document.createElement('option'); o.value = n; o.textContent = n || '\u2014'; sel.appendChild(o); } sel.value = want; connect(); }; sel.addEventListener('input', () => { want = sel.value; connect(); }); if (bus) bus.addEventListener('taps', refresh); refresh(); if (invalidation) invalidation.then(() => { window.clearTimeout(regen); if (bus) bus.removeEventListener('taps', refresh); if (cur) try { cur.disconnect(inG); } catch (e) { } wetG.disconnect(); }); Object.defineProperty(el, 'value', { get: () => ({ tap: want, ...Object.fromEntries(Object.entries(k).map(([n, e]) => [n, e.value])) }), set: p => { if (!p) return; for (const [n, e] of Object.entries(k)) if (typeof p[n] === 'number') e.value = p[n]; if (typeof p.tap === 'string') want = p.tap; apply(); refresh(); } }); return el; }4f:T10e9,mkDucker = (ctx, bus, { label = 'duck', inputs = [], target = '', invalidation } = {}) => { const NN = n => ['C','C#','D','D#','E','F','F#','G','G#','A','A#','B'][n % 12] + (Math.floor(n / 12) - 1); const el = document.createElement('div'); el.style.cssText = 'display:inline-flex; flex-direction:column; gap:4px; background:#1c2529; border:1px solid #37474f; border-radius:6px; padding:8px 10px; width:max-content;'; const head = document.createElement('div'); head.style.cssText = 'display:flex; gap:8px; align-items:center; font:10px var(--sans-serif, sans-serif); color:#eceff1;'; const led = document.createElement('span'); led.style.cssText = 'width:7px; height:7px; border-radius:50%; background:#37474f; flex:none;'; const name = document.createElement('b'); name.textContent = label; let selected = new Set(inputs); const picker = mkInputPicker(bus, { selected: inputs, onChange: v => { selected = new Set(v); } }); const arrow = document.createElement('span'); arrow.textContent = 'ducks'; arrow.style.cssText = 'color:#90a4ae; margin-left:auto;'; const sel = document.createElement('select'); sel.style.cssText = 'font:10px inherit;'; head.append(led, name, picker, arrow, sel); selfName(el, n => { if (n) { label = n; name.textContent = n; } }); const k = { note: knob({ label: 'note', min: 0, max: 127, value: 36, step: 1, fmt: NN }), depth: knob({ label: 'depth', min: 0, max: 1, value: 0.55, step: 0.01 }), rel: knob({ label: 'rel', min: 0.05, max: 1, value: 0.22, step: 0.01, log: true }) }; const row = document.createElement('div'); row.style.cssText = 'display:flex; gap:2px;'; row.append(...Object.values(k)); el.append(head, row); let want = target; const refresh = () => { const names = [...new Set([ '', ...bus && bus.taps ? bus.taps.keys() : [], want ])].filter(n => (!n || !n.startsWith('template_') || n === want) && n !== 'master' && n !== label); sel.innerHTML = ''; for (const n of names) { const o = document.createElement('option'); o.value = n; o.textContent = n || '\u2014'; sel.appendChild(o); } sel.value = want; }; sel.addEventListener('input', () => { want = sel.value; }); if (bus) bus.addEventListener('taps', refresh); refresh(); let fade = null; const flash = () => { led.style.background = '#3ddc84'; window.clearTimeout(fade); fade = window.setTimeout(() => { led.style.background = '#37474f'; }, 90); }; // MIDI-keyed sidechain: the trigger time is known ahead (look-ahead clock), // so the dip is scheduled sample-accurately on the target's output gain const duck = t => { const node = bus && bus.taps && bus.taps.get(want); if (!node || !node.gain) return; const g = node.gain; const t0 = Math.max(ctx.currentTime, t - 0.012); g.cancelScheduledValues(t0); g.setValueAtTime(g.value, t0); g.linearRampToValueAtTime(Math.max(0, 1 - k.depth.value), t + 0.004); g.setTargetAtTime(1, t + 0.05, Math.max(0.02, k.rel.value) / 3); flash(); }; const onBus = e => { if (!selected.has(e.detail.source)) return; const [st, d1, d2] = e.detail.data; if ((st & 240) !== 144 || d2 === 0) return; if (d1 !== k.note.value) return; duck(e.detail.time ?? ctx.currentTime + 0.003); }; if (bus) bus.addEventListener('midi', onBus); if (invalidation) invalidation.then(() => { if (bus) { bus.removeEventListener('midi', onBus); bus.removeEventListener('taps', refresh); const node = bus.taps && bus.taps.get(want); if (node && node.gain) node.gain.setTargetAtTime(1, ctx.currentTime, 0.02); } }); Object.defineProperty(el, 'value', { get: () => ({ target: want, ...Object.fromEntries(Object.entries(k).map(([n, e]) => [n, e.value])), inputs: picker.value }), set: p => { if (!p) return; for (const [n, e] of Object.entries(k)) if (typeof p[n] === 'number') e.value = p[n]; if (typeof p.target === 'string') want = p.target; if (Array.isArray(p.inputs)) picker.value = p.inputs; refresh(); } }); return el; }50:T230b,mkSlicer = (ctx, out, { label = 'slicer', bus = null, inputs = [], invalidation } = {}) => { const NN = n => ['C','C#','D','D#','E','F','F#','G','G#','A','A#','B'][n % 12] + (Math.floor(n / 12) - 1); const el = document.createElement('div'); el.style.cssText = 'display:inline-flex; flex-direction:column; gap:4px; background:#1c2529; border:1px solid #37474f; border-radius:6px; padding:8px 10px; width:max-content;'; const head = document.createElement('div'); head.style.cssText = 'display:flex; gap:8px; align-items:center; font:10px var(--sans-serif, sans-serif); color:#eceff1;'; const led = document.createElement('span'); led.style.cssText = 'width:7px; height:7px; border-radius:50%; background:#37474f; flex:none;'; const name = document.createElement('b'); name.textContent = label; const fileLab = document.createElement('span'); fileLab.style.cssText = 'color:#90a4ae; font-family:monospace;'; fileLab.textContent = '\u2014'; let selected = new Set(inputs); const picker = mkInputPicker(bus, { selected: inputs, onChange: v => { selected = new Set(v); } }); const file = document.createElement('input'); file.type = 'file'; file.accept = 'audio/*'; file.style.display = 'none'; const open = document.createElement('button'); open.textContent = '\ud83d\udcc2'; open.title = 'load a breakbeat'; open.style.cssText = 'font:10px inherit; margin-left:auto; cursor:pointer;'; open.onclick = () => file.click(); head.append(led, name, fileLab, picker, open, file); const cv = document.createElement('canvas'); cv.width = 260; cv.height = 44; cv.style.cssText = 'width:260px; height:44px; border:1px solid #263238; border-radius:3px; cursor:pointer;'; cv.title = 'click a slice to audition; drop audio to load'; const k = { base: knob({ label: 'base', min: 0, max: 115, value: 60, step: 1, fmt: NN }), slices: knob({ label: 'slices', min: 2, max: 32, value: 8, step: 1 }), rate: knob({ label: 'rate', min: 0.5, max: 2, value: 1, step: 0.01, log: true }), gain: knob({ label: 'gain', min: 0, max: 1.5, value: 1, step: 0.01 }), pan: knob({ label: 'pan', min: -1, max: 1, value: 0, step: 0.01 }) }; const row = document.createElement('div'); row.style.cssText = 'display:flex; gap:2px;'; row.append(...Object.values(k)); el.append(head, cv, row); // slices map upward from base: base=C4, 8 slices -> C4..G#4 trigger chops const outNode = ctx.createGain(); const panner = ctx.createStereoPanner(); outNode.connect(panner); panner.connect(out); selfName(el, n => { if (n) { label = n; name.textContent = n; } if (bus) { bus.register(label); if (bus.registerTap) bus.registerTap(label, outNode); } if (invalidation) invalidation.then(() => { if (bus && bus.taps && bus.taps.get(label) === outNode) { bus.taps.delete(label); bus.dispatchEvent(new window.CustomEvent('taps')); } }); }); el.addEventListener('input', () => { panner.pan.value = k.pan.value; draw(); }); let buffer = null; let fileName = null; let loadTok = 0; let cur = null; let flashSlice = -1; const draw = () => { const w = cv.width; const h = cv.height; const g2 = cv.getContext('2d'); g2.fillStyle = '#141b1e'; g2.fillRect(0, 0, w, h); if (!buffer) { g2.fillStyle = '#546e7a'; g2.font = '10px sans-serif'; g2.fillText('drop / \ud83d\udcc2 a breakbeat', 8, h / 2 + 3); return; } const d = buffer.getChannelData(0); const step = Math.max(1, Math.floor(d.length / w)); g2.strokeStyle = '#3ddc84'; g2.beginPath(); for (let x = 0; x < w; x++) { let mn = 1; let mx = -1; for (let i = x * step, e = Math.min(d.length, i + step); i < e; i++) { const v = d[i]; if (v < mn) mn = v; if (v > mx) mx = v; } g2.moveTo(x + 0.5, h / 2 + mn * (h / 2 - 1)); g2.lineTo(x + 0.5, h / 2 + mx * (h / 2 - 1)); } g2.stroke(); const n = Math.max(2, Math.round(k.slices.value)); for (let i = 0; i < n; i++) { const x = i / n * w; if (i) { g2.strokeStyle = 'rgba(236,239,241,0.35)'; g2.beginPath(); g2.moveTo(x + 0.5, 0); g2.lineTo(x + 0.5, h); g2.stroke(); } if (i === flashSlice) { g2.fillStyle = 'rgba(61,220,132,0.25)'; g2.fillRect(x, 0, w / n, h); } g2.fillStyle = '#90a4ae'; g2.font = '7px monospace'; g2.fillText(NN(k.base.value + i), x + 2, 8); } }; let fade = null; const flash = i => { flashSlice = i; draw(); led.style.background = '#3ddc84'; window.clearTimeout(fade); fade = window.setTimeout(() => { flashSlice = -1; led.style.background = '#37474f'; draw(); }, 120); }; const play = (slice, vel = 100, t = null) => { if (!buffer) return; const n = Math.max(2, Math.round(k.slices.value)); if (slice < 0 || slice >= n) return; ctx.resume(); const tt = t ?? ctx.currentTime + 0.003; // mono choke: each chop cuts the last, like classic hardware slicing. // cancelAndHold first: the old chop has scheduled ramps that would // otherwise re-raise the gain after the choke if (cur) { const gp = cur.g.gain; if (gp.cancelAndHoldAtTime) gp.cancelAndHoldAtTime(tt); else gp.cancelScheduledValues(tt); gp.setTargetAtTime(0.0001, tt, 0.004); try { cur.s.stop(tt + 0.05); } catch (err) {} } const dur = buffer.duration / n; const s = ctx.createBufferSource(); s.buffer = buffer; s.playbackRate.value = k.rate.value; const g = ctx.createGain(); // micro-envelope: chops start/end mid-waveform, so hard cuts click const lvl = k.gain.value * Math.max(0.05, vel / 127); const wall = dur / Math.max(0.05, k.rate.value); g.gain.setValueAtTime(0, tt); g.gain.linearRampToValueAtTime(lvl, tt + 0.002); g.gain.setValueAtTime(lvl, tt + Math.max(0.003, wall - 0.01)); g.gain.linearRampToValueAtTime(0.0001, tt + wall); s.connect(g); g.connect(outNode); s.start(tt, slice * dur, dur + 0.02); cur = { s, g }; s.onended = () => { g.disconnect(); if (cur && cur.s === s) cur = null; }; flash(slice); }; const loadFile = async n => { const tok = ++loadTok; try { const buf = await sampleStore.load(n); if (tok !== loadTok) return; buffer = buf; fileName = n; fileLab.textContent = n; draw(); } catch (err) { if (tok === loadTok) { fileLab.textContent = n + ' ?'; console.warn('daw: slicer load failed', n, err); } } }; const upload = async f => { if (!f) return; try { const buf = await sampleStore.register(f); loadTok++; buffer = buf; fileName = f.name; fileLab.textContent = f.name; draw(); el.dispatchEvent(new window.Event('input', { bubbles: true })); } catch (err) { console.warn('daw: slicer upload failed', err); } }; file.addEventListener('change', e => { e.stopPropagation(); upload(file.files[0]); file.value = ''; }); cv.addEventListener('dragover', e => e.preventDefault()); cv.addEventListener('drop', e => { e.preventDefault(); upload(e.dataTransfer.files[0]); }); cv.addEventListener('pointerdown', e => { if (!buffer) return; const n = Math.max(2, Math.round(k.slices.value)); const slice = Math.floor(e.offsetX / cv.getBoundingClientRect().width * n); const t = ctx.currentTime + 0.003; play(slice, 110, t); if (bus) { bus.publish(label, [144, (k.base.value + slice) & 127, 110], t); bus.publish(label, [128, (k.base.value + slice) & 127, 0], t + 0.15); } }); const onBus = e => { if (e.detail.source === label || !selected.has(e.detail.source)) return; const [st, d1, d2] = e.detail.data; if ((st & 240) !== 144 || d2 === 0) return; play(d1 - k.base.value, d2, e.detail.time ?? null); }; if (bus) bus.addEventListener('midi', onBus); if (invalidation) invalidation.then(() => { if (bus) bus.removeEventListener('midi', onBus); outNode.disconnect(); }); draw(); Object.defineProperty(el, 'value', { get: () => ({ file: fileName, ...Object.fromEntries(Object.entries(k).map(([n, e]) => [n, e.value])), inputs: picker.value }), set: p => { if (!p) return; for (const [n, e] of Object.entries(k)) if (typeof p[n] === 'number') e.value = p[n]; panner.pan.value = k.pan.value; if (Array.isArray(p.inputs)) picker.value = p.inputs; if (p.file && p.file !== fileName) loadFile(p.file); draw(); } }); return el; }51:T1737,mkChordPad = (bus, { name = 'chordpad', root = 0, mode = 'minor', octave = 3, latch = true, velocity = 100, invalidation } = {}) => { const NOTES = ['C','C#','D','D#','E','F','F#','G','G#','A','A#','B']; const QUAL = { maj: [0,4,7], min: [0,3,7], dim: [0,3,6], maj7: [0,4,7,11], m7: [0,3,7,10], dom7: [0,4,7,10], m7b5: [0,3,6,10], sus2: [0,2,7], sus4: [0,5,7] }; const SUF = { maj: '', min: 'm', dim: '°', maj7: 'maj7', m7: 'm7', dom7: '7', m7b5: 'ø7', sus2: 'sus2', sus4: 'sus4' }; const LAYOUT = { major: [ [['I',0,'maj'],['ii',2,'min'],['iii',4,'min'],['IV',5,'maj'],['V',7,'maj'],['vi',9,'min'],['vii°',11,'dim']], [['Imaj7',0,'maj7'],['ii7',2,'m7'],['iii7',4,'m7'],['IVmaj7',5,'maj7'],['V7',7,'dom7'],['vi7',9,'m7'],['viiø7',11,'m7b5']], [['iv',5,'min'],['♭III',3,'maj'],['♭VI',8,'maj'],['♭VII',10,'maj'],['Isus2',0,'sus2'],['Isus4',0,'sus4'],['Vsus4',7,'sus4']] ], minor: [ [['i',0,'min'],['ii°',2,'dim'],['III',3,'maj'],['iv',5,'min'],['v',7,'min'],['VI',8,'maj'],['VII',10,'maj']], [['i7',0,'m7'],['iiø7',2,'m7b5'],['IIImaj7',3,'maj7'],['iv7',5,'m7'],['v7',7,'m7'],['VImaj7',8,'maj7'],['VII7',10,'dom7']], [['V',7,'maj'],['V7',7,'dom7'],['♭II',1,'maj'],['IV',5,'maj'],['I',0,'maj'],['isus2',0,'sus2'],['isus4',0,'sus4']] ] }; let state = { root, mode, octave, latch }; let sounding = []; let activePad = null; const el = document.createElement('div'); el.style.cssText = 'display:inline-flex; flex-direction:column; gap:5px; background:#1c2529; color:#eceff1; border:1px solid #37474f; border-radius:6px; padding:8px 10px; width:max-content; user-select:none;'; const commit = () => el.dispatchEvent(new window.Event('input', { bubbles: true })); const off = () => { for (const n of sounding) bus.publish(name, [128, n, 0]); sounding = []; if (activePad) { activePad.style.outline = ''; activePad = null; } }; const notesOf = (offset, qual) => { const base = 12 * (state.octave + 1) + ((state.root + offset) % 12); return QUAL[qual].map(iv => base + iv); }; const head = document.createElement('div'); head.style.cssText = 'display:flex; gap:8px; align-items:center; font:10px var(--sans-serif, sans-serif);'; const lab = document.createElement('b'); lab.textContent = name; const sel = (opts, value, onchange, title) => { const s = document.createElement('select'); s.title = title; s.style.cssText = 'font:10px monospace; background:#263238; color:#eceff1; border:1px solid #37474f; border-radius:3px;'; for (const [v, txt] of opts) { const o = document.createElement('option'); o.value = v; o.textContent = txt; s.appendChild(o); } s.value = value; s.addEventListener('input', e => { e.stopPropagation(); onchange(s.value); off(); paint(); commit(); }); return s; }; const rootSel = sel(NOTES.map((n, i) => [i, n]), String(state.root), v => state.root = +v, 'key root'); const modeSel = sel([['major','major'],['minor','minor']], state.mode, v => state.mode = v, 'mode'); const octSel = sel([[2,'oct 2'],[3,'oct 3'],[4,'oct 4']], String(state.octave), v => state.octave = +v, 'octave'); const latchLab = document.createElement('label'); latchLab.style.cssText = 'display:flex; gap:3px; align-items:center; cursor:pointer; color:#90a4ae;'; const latchCb = document.createElement('input'); latchCb.type = 'checkbox'; latchCb.checked = state.latch; latchCb.addEventListener('input', e => { e.stopPropagation(); state.latch = latchCb.checked; off(); paint(); commit(); }); latchLab.append(latchCb, document.createTextNode('latch')); head.append(lab, rootSel, modeSel, octSel, latchLab); const grid = document.createElement('div'); grid.style.cssText = 'display:grid; grid-template-columns:repeat(7, 64px); gap:3px;'; const paint = () => { grid.innerHTML = ''; for (const row of LAYOUT[state.mode]) { for (const [roman, offset, qual] of row) { const pad = document.createElement('div'); const chordName = NOTES[(state.root + offset) % 12] + SUF[qual]; pad.style.cssText = 'display:flex; flex-direction:column; align-items:center; justify-content:center; height:38px; border-radius:4px; cursor:pointer; background:#263238; border:1px solid #37474f; font:9px var(--sans-serif, sans-serif); color:#90a4ae;'; const r = document.createElement('span'); r.textContent = roman; r.style.cssText = 'font-size:8px; opacity:0.7;'; const c = document.createElement('b'); c.textContent = chordName; c.style.cssText = 'color:#eceff1; font-size:10px;'; pad.append(r, c); const start = e => { e.preventDefault(); const wasActive = activePad === pad; off(); if (state.latch && wasActive) return; sounding = notesOf(offset, qual); for (const n of sounding) bus.publish(name, [144, n, velocity]); activePad = pad; pad.style.outline = '2px solid #3ddc84'; }; pad.addEventListener('pointerdown', start); if (!state.latch) { pad.addEventListener('pointerup', off); pad.addEventListener('pointerleave', () => { if (activePad === pad) off(); }); } grid.appendChild(pad); } } }; selfName(el, n => { if (n) { name = n; lab.textContent = n; bus.register(n); } }); el.append(head, grid); Object.defineProperty(el, 'value', { get: () => ({ ...state }), set: v => { if (!v) return; if (typeof v.root === 'number') { state.root = v.root; rootSel.value = String(v.root); } if (v.mode === 'major' || v.mode === 'minor') { state.mode = v.mode; modeSel.value = v.mode; } if (typeof v.octave === 'number') { state.octave = v.octave; octSel.value = String(v.octave); } if (typeof v.latch === 'boolean') { state.latch = v.latch; latchCb.checked = v.latch; } paint(); } }); if (invalidation) invalidation.then(off); paint(); return el; }52:[{"id":"7de5e2a712d556e4ee8404c50c1720be92e125497c0c1dab46c8bdc0364448c15a251f21098e51428b4fcb1cd5fd118fed45e56c1c5cd303f19098b9ec25603a","href":"https://static.observableusercontent.com/files/7de5e2a712d556e4ee8404c50c1720be92e125497c0c1dab46c8bdc0364448c15a251f21098e51428b4fcb1cd5fd118fed45e56c1c5cd303f19098b9ec25603a","name":"break.flac","type":"audio/x-flac","lastModified":1784976168174.517,"size":86183},{"id":"e55af8a594ef8792f1badbd9fcdb8f1f047f1d556fb593a700ce0854fba0c0db95e40e99135efa922d9509eb6324c232b7d04118f955685a751b41cc24077c40","href":"https://static.observableusercontent.com/files/e55af8a594ef8792f1badbd9fcdb8f1f047f1d556fb593a700ce0854fba0c0db95e40e99135efa922d9509eb6324c232b7d04118f955685a751b41cc24077c40","name":"snare.wav","type":"audio/vnd.wave","lastModified":1784976175017.29,"size":17854},{"id":"b57109c8e90cc7b414739022665d2a6ef3e168bd29f978748563e8d697744144c13e56b3427d7346ac8dfc60edb863effe252e1a120277384632bf7e7d84e5a1","href":"https://static.observableusercontent.com/files/b57109c8e90cc7b414739022665d2a6ef3e168bd29f978748563e8d697744144c13e56b3427d7346ac8dfc60edb863effe252e1a120277384632bf7e7d84e5a1","name":"hats.wav","type":"audio/vnd.wave","lastModified":1784985266217.852,"size":12942},{"id":"48ab8d7479963d95fd9426e7c4f6e4a2f9ce3965cf66c69cf57984a08b88b36aa32c078c48205349710cdec3f8b93888cd82a9567abda56b02533529f8f552cb","href":"https://static.observableusercontent.com/files/48ab8d7479963d95fd9426e7c4f6e4a2f9ce3965cf66c69cf57984a08b88b36aa32c078c48205349710cdec3f8b93888cd82a9567abda56b02533529f8f552cb","name":"kick.flac","type":"audio/x-flac","lastModified":1784976160577.819,"size":17509}] 2f:{"title":"DAW","cells":[{"id":4800,"value":"md`# DAW`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4801,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":4802,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":4803,"value":"viewof dawModule = thisModule()","pinned":false,"hidden":false,"mode":"ojs"},{"id":4804,"value":"daw_ctx = {\n // `this` = previous value: the context survives any recompute and is never closed\n return this ?? new (window.AudioContext || window.webkitAudioContext)();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4805,"value":"master = {\n const g = this ?? daw_ctx.createGain();\n if (!this) {\n g.gain.value = 0.8;\n g.connect(daw_ctx.destination);\n }\n midiBus.registerTap('master', g);\n return g;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4806,"value":"viewof masterVol = sticky(Inputs.range([\n 0,\n 1\n], {\n label: 'master',\n step: 0.01,\n value: 0.8\n}), 0.56)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4807,"value":"masterVolBind = {\n master.gain.value = masterVol;\n return masterVol;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4808,"value":"analyser = {\n const a = this ?? daw_ctx.createAnalyser();\n if (!this) {\n a.fftSize = 512;\n master.connect(a);\n }\n return a;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4809,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":4810,"value":"viewof scope = sticky(mkScope(daw_ctx, midiBus, {\n tap: 'master',\n invalidation\n}), undefined)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4811,"value":"viewof template_scope = sticky(mkScope(daw_ctx, midiBus, {\n tap: 'master',\n invalidation\n}), undefined)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4812,"value":"viewof bpm = sticky(Inputs.range([\n 60,\n 180\n], {\n label: 'bpm',\n step: 1,\n value: 120\n}), 126)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4813,"value":"viewof swing = sticky(Inputs.range([\n 0,\n 0.6\n], {\n label: 'swing',\n step: 0.01,\n value: 0\n}), 0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4814,"value":"viewof playing = Inputs.toggle({ label: '\\u25B6 play' })","pinned":false,"hidden":false,"mode":"ojs"},{"id":4815,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":4816,"value":"viewof drums = sticky(mkSeq(viewof clock, {\n bus: midiBus,\n rows: [\n { name: 'kick', note: 36 },\n { name: 'snare', note: 38, vel: 112 },\n { name: 'ghost', note: 38, vel: 38 },\n { name: 'hat', note: 42, vel: 48 },\n { name: 'bass', note: 43 }\n ],\n invalidation\n}), {\"kick\":[1,0,0,0,1,0,0,0,1,0,0,0,1,0,0,0],\"snare\":[0,0,0,0,1,0,0,0,0,0,0,0,1,0,0,0],\"ghost\":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],\"hat\":[0,0,1,0,0,0,1,0,0,0,1,0,0,0,1,0],\"__notes\":{\"kick\":36,\"snare\":38,\"ghost\":38,\"hat\":42,\"bass\":43},\"__rows\":[{\"name\":\"kick\",\"note\":36},{\"name\":\"snare\",\"note\":38,\"vel\":112},{\"name\":\"ghost\",\"note\":38,\"vel\":38},{\"name\":\"hat\",\"note\":42,\"vel\":48}]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4817,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":4818,"value":"viewof drumBus = sticky(mkBus(daw_ctx, {\n out: master,\n bus: midiBus,\n node: this?.node,\n invalidation\n}), {\"gain\":0.25})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4819,"value":"bass_voice = viewof bass1.voice","pinned":false,"hidden":false,"mode":"ojs"},{"id":4820,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":4821,"value":"viewof bass1 = sticky(mkBass(daw_ctx, master, {\n bus: midiBus,\n invalidation\n}), {\"note\":43,\"cutoff\":210,\"res\":6,\"decay\":0.32,\"sub\":0.6,\"gain\":0.8,\"pan\":0,\"inputs\":[]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4822,"value":"viewof template_bass = sticky(mkBass(daw_ctx, master, {\n bus: midiBus,\n invalidation\n}), {\"note\":43,\"cutoff\":800,\"res\":8,\"decay\":0.25,\"sub\":0.4,\"gain\":0.8,\"pan\":0,\"inputs\":[]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4823,"value":"viewof template_knob = sticky(Inputs.range([\n 0,\n 1\n], {\n label: 'knob',\n step: 0.01,\n value: 0.5\n}), 0.5)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4824,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":4825,"value":"controls = gridControls()","pinned":false,"hidden":false,"mode":"ojs"},{"id":4826,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":4827,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":4828,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":4829,"value":"midiBus = {\n // `this` idiom: the bus is immortal, so name-based subscriptions survive remounts\n if (this)\n return this;\n const bus = new window.EventTarget();\n bus.sources = new Set();\n bus.register = name => {\n if (!name || bus.sources.has(name))\n return;\n bus.sources.add(name);\n bus.dispatchEvent(new window.CustomEvent('sources'));\n };\n bus.publish = (name, data, time) => {\n bus.register(name);\n bus.dispatchEvent(new window.CustomEvent('midi', { detail: { source: name, data, time } }));\n };\n // audio taps: named AudioNodes that scopes/meters can listen to\n bus.taps = new Map();\n bus.registerTap = (name, node) => {\n if (!name || !node || bus.taps.get(name) === node)\n return;\n bus.taps.set(name, node);\n bus.dispatchEvent(new window.CustomEvent('taps'));\n };\n return bus;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4830,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":4831,"value":"selfName = (el, apply) => {\n // resolve the cell name that owns el (sticky returns the same element, so\n // v._value === el finds the viewof variable). fires apply(name) once;\n // bus registration happens inside apply so bus names always equal cell names\n let tries = 0;\n const look = () => {\n for (const v of runtime._variables)\n if (v._value === el && v._name)\n return v._name.replace(/^viewof[ $]/, '');\n return null;\n };\n const tick = () => {\n const n = look();\n if (n != null)\n apply(n);\n else if (++tries < 60)\n window.setTimeout(tick, 100);\n else\n apply(null);\n };\n window.setTimeout(tick, 0);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4832,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":4833,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs"},{"id":4834,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs"},{"id":4835,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs"},{"id":4836,"value":"viewof roll1 = sticky(mkRoll(viewof clock, {\n bus: midiBus,\n invalidation\n}), {\"notes\":[{\"t\":0,\"d\":1.5,\"n\":48},{\"t\":2,\"d\":0.5,\"n\":51},{\"t\":3,\"d\":1,\"n\":55},{\"t\":5.5,\"d\":0.5,\"n\":58},{\"t\":8,\"d\":1.5,\"n\":60},{\"t\":10,\"d\":0.5,\"n\":58},{\"t\":11,\"d\":1,\"n\":55},{\"t\":13.5,\"d\":2,\"n\":51}]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4837,"value":"viewof template_roll = sticky(mkRoll(viewof clock, {\n bus: midiBus,\n invalidation\n}), {\"notes\":[]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4838,"value":"$40","pinned":false,"hidden":false,"mode":"ojs"},{"id":4839,"value":"viewof template_note = sticky(mkNote(), undefined)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4840,"value":"$41","pinned":false,"hidden":false,"mode":"ojs"},{"id":4841,"value":"viewof sections1 = sticky(mkSections(viewof clock, {\n bus: midiBus,\n invalidation\n}), {\"inputs\":[\"drums\",\"synthSeq\",\"prog\",\"roll1\"],\"sections\":[{\"bars\":4,\"on\":[\"drums\"]},{\"bars\":4,\"on\":[\"drums\",\"synthSeq\"]},{\"bars\":4,\"on\":[\"drums\",\"synthSeq\",\"prog\"]},{\"bars\":4,\"on\":[\"drums\",\"synthSeq\",\"prog\",\"roll1\"]},{\"bars\":4,\"on\":[\"prog\",\"roll1\"]},{\"bars\":8,\"on\":[\"drums\",\"synthSeq\",\"prog\",\"roll1\"]}],\"armed\":true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4842,"value":"viewof template_sections = sticky(mkSections(viewof clock, {\n bus: midiBus,\n invalidation\n}), undefined)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4843,"value":"$42","pinned":false,"hidden":false,"mode":"ojs"},{"id":4844,"value":"viewof pad1 = sticky(mkSynth(daw_ctx, master, {\n bus: midiBus,\n invalidation\n}), {\"wave\":\"sawtooth\",\"gain\":0.26,\"cutoff\":313,\"res\":18,\"det\":14,\"glide\":0.055,\"env\":0.24,\"a\":0.006,\"d\":0.6,\"s\":0.95,\"r\":2.48,\"pan\":-0.1,\"inputs\":[\"prog\",\"chordpad1\"]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4845,"value":"viewof note_tour = sticky(mkNote({ text: \"# progressive house, one cell at a time\\n\\nPress **\\u25b6** (top left). `sections1` un-mutes one part every 4 bars: kick \\u2192 arp \\u2192 chords \\u2192 lead, then a breakdown, then the drop. Everything you hear is a cell; every knob edit rewrites source. This note is a cell too \\u2014 double-click it.\" }), undefined)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4846,"value":"viewof note_pump = sticky(mkNote({ text: \"**The pump.** Four-on-the-floor kick; hats and a C2 bass answer on the offbeats. `duck1` hears the kick on the MIDI bus and dips `pad1` just before each hit \\u2014 sidechain compression as a visible patch cord.\" }), \"**The beat.** Four-on-the-floor kick; hats and a C2 bass answer on the offbeats. `duck1` hears the kick on the MIDI bus and dips `pad1` just before each hit — sidechain compression as a visible patch cord.\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":4847,"value":"viewof note_arp = sticky(mkNote({ text: \"**The arp is a broken chord** \\u2014 C, E\\u266d, G, C in 16ths (`synthSeq` \\u2192 `synth2`, 5 ms attack + short decay = pluck). Every note is a chord tone of C minor, so nothing it plays can clash with the progression.\" }), undefined)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4848,"value":"viewof note_chords = sticky(mkNote({ text: \"**The progression** is Cm \\u2192 A\\u266d \\u2192 E\\u266d \\u2192 B\\u266d (i\\u2013VI\\u2013III\\u2013VII): genre grammar, not a melody. One chord per bar, voiced in `prog` (a 64-step seq) and held by `pad1`'s slow attack. Listen for it pumping against the kick.\" }), undefined)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4849,"value":"viewof note_lead = sticky(mkNote({ text: \"**The lead** lives in a piano roll: notes have fractional positions (1/32 snap). Drag one \\u2014 it auditions as you move. The line is C-minor pentatonic, so it sits on every chord.\" }), undefined)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4850,"value":"viewof note_sections = sticky(mkNote({ text: \"**The song is mute automation.** Rows are seqs, columns are 4-bar sections; the amber outline is *now*. No knob moves during playback \\u2014 the graph is static, sections only decide who is audible. Un-arm to jam with everything on.\" }), undefined)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4851,"value":"$43","pinned":false,"hidden":false,"mode":"ojs"},{"id":4852,"value":"$44","pinned":false,"hidden":false,"mode":"ojs"},{"id":4853,"value":"viewof keys1 = keys({\n octaves: 2,\n base: 48,\n bus: midiBus,\n keymap: {\n KeyA: 0,\n KeyW: 1,\n KeyS: 2,\n KeyE: 3,\n KeyD: 4,\n KeyF: 5,\n KeyT: 6,\n KeyG: 7,\n KeyY: 8,\n KeyH: 9,\n KeyU: 10,\n KeyJ: 11,\n KeyK: 12,\n KeyO: 13,\n KeyL: 14\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4854,"value":"viewof midi1 = midiIn({\n bus: midiBus,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4855,"value":"viewof clock = mkClock(daw_ctx, {\n playing: viewof playing,\n bpm: viewof bpm,\n swing: viewof swing,\n invalidation\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4856,"value":"viewof kit1 = sticky(mkKit(daw_ctx, {\n bus: midiBus,\n inputs: [\n 'drums'\n ],\n voices: {\n 43: bass_voice\n },\n invalidation\n}), {\"inputs\":[\"drums\",\"seq1\"]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4857,"value":"viewof synthSeq = sticky(mkSeq(viewof clock, {\n bus: midiBus,\n gate: 3,\n rows: [\n { name: 'C4', note: 60 },\n { name: 'A#3', note: 58 },\n { name: 'G3', note: 55 },\n { name: 'F3', note: 53 },\n { name: 'D#3', note: 51 },\n { name: 'C3', note: 48 }\n ],\n invalidation\n}), {\"C4\":[0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,0],\"A#3\":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],\"G3\":[0,0,1,0,1,0,0,0,1,0,1,0,0,0,1,0],\"F3\":[0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0],\"D#3\":[0,1,0,0,0,1,0,1,0,0,0,1,0,0,0,0],\"C3\":[1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0],\"__notes\":{\"C4\":60,\"A#3\":58,\"G3\":55,\"F3\":53,\"D#3\":51,\"C3\":48},\"__rows\":[{\"name\":\"C4\",\"note\":60},{\"name\":\"A#3\",\"note\":58},{\"name\":\"G3\",\"note\":55},{\"name\":\"F3\",\"note\":53},{\"name\":\"D#3\",\"note\":51},{\"name\":\"C3\",\"note\":48}]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4858,"value":"viewof chord1 = sticky(mkChord(midiBus, {\n inputs: [\n 'keys1'\n ],\n chord: 'min',\n invalidation\n}), {\"chord\":\"min7\",\"inputs\":[\"keys1\",\"chordSeq\"]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4859,"value":"viewof synth1 = sticky(mkSynth(daw_ctx, master, {\n bus: midiBus,\n inputs: [\n 'chord1',\n 'midi1'\n ],\n invalidation\n}), {\"wave\":\"sawtooth\",\"gain\":1,\"cutoff\":101,\"res\":3.4,\"det\":17,\"glide\":0.22,\"env\":0.3,\"a\":0.007,\"d\":0.22,\"s\":0.42,\"r\":0.4,\"pan\":0,\"inputs\":[\"chord1\",\"midi1\",\"roll1\"]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4860,"value":"viewof template_keys = keys({\n octaves: 2,\n base: 48,\n bus: midiBus,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4861,"value":"viewof template_synth = sticky(mkSynth(daw_ctx, master, {\n bus: midiBus,\n inputs: [],\n invalidation\n}), undefined)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4862,"value":"viewof template_seq = sticky(mkSeq(viewof clock, {\n bus: midiBus,\n rows: [\n { name: 'kick', note: 36 },\n { name: 'hat', note: 42 },\n { name: 'bass', note: 43 }\n ],\n invalidation\n}), undefined)","pinned":false,"hidden":false,"mode":"ojs"},{"id":4863,"value":"$45","pinned":false,"hidden":false,"mode":"ojs"},{"id":4864,"value":"$46","pinned":false,"hidden":false,"mode":"ojs"},{"id":4865,"value":"viewof synth2 = sticky(mkSynth(daw_ctx, master, {\n bus: midiBus,\n inputs: [\n 'synthSeq',\n 'keys2'\n ],\n invalidation\n}), {\"wave\":\"sawtooth\",\"gain\":0.7,\"cutoff\":538,\"res\":9.2,\"det\":10,\"glide\":0,\"env\":0.72,\"a\":0.006,\"d\":0.18,\"s\":0.12,\"r\":0.18,\"pan\":0.1,\"inputs\":[\"synthSeq\",\"keys2\"]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4866,"value":"viewof keys2 = keys({\n octaves: 2,\n base: 36,\n bus: midiBus,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4867,"value":"viewof seq1 = sticky(mkSeq(viewof clock, {\n bus: midiBus,\n rows: [\n { name: 'kick', note: 36 },\n { name: 'snare', note: 38 },\n { name: 'hat', note: 42, vel: 60 }\n ],\n invalidation\n}), {\"kick\":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],\"snare\":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],\"hat\":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],\"__notes\":{\"kick\":36,\"snare\":38,\"hat\":42}})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4868,"value":"viewof chordSeq = sticky(mkSeq(viewof clock, {\n bus: midiBus,\n gate: 1.4,\n rows: [\n { name: 'Cm', note: 60, vel: 72 },\n { name: 'A#', note: 58, vel: 72 }\n ],\n invalidation\n}), {\"Cm\":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],\"A#\":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4869,"value":"sampleFiles = new Map([\n [\"kick.flac\", () => FileAttachment(\"kick.flac\")],\n [\"break.flac\", () => FileAttachment(\"break.flac\")],\n [\"snare.wav\", () => FileAttachment(\"snare.wav\")],\n [\"hats.wav\", () => FileAttachment(\"hats.wav\")]\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":4870,"value":"$47","pinned":false,"hidden":false,"mode":"ojs"},{"id":4871,"value":"$48","pinned":false,"hidden":false,"mode":"ojs"},{"id":4872,"value":"viewof kick1 = sticky(mkSampler(daw_ctx, drumNode, {\n bus: midiBus,\n invalidation\n}), {\"file\":\"kick.flac\",\"note\":36,\"track\":false,\"rate\":1,\"gain\":1,\"start\":0,\"end\":1,\"inputs\":[\"drums\",\"seq1\"]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4873,"value":"viewof snare1 = sticky(mkSampler(daw_ctx, drumNode, {\n bus: midiBus,\n invalidation\n}), {\"file\":\"snare.wav\",\"note\":38,\"track\":false,\"rate\":1.11,\"gain\":1.28,\"start\":0,\"end\":1,\"pan\":0,\"inputs\":[\"drums\",\"seq1\"]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4874,"value":"viewof hat1 = sticky(mkSampler(daw_ctx, drumNode, {\n bus: midiBus,\n invalidation\n}), {\"file\":\"hats.wav\",\"note\":42,\"track\":false,\"rate\":1,\"gain\":0.8,\"start\":0.19,\"end\":1,\"pan\":0,\"inputs\":[\"drums\",\"seq1\"]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4875,"value":"viewof template_sampler = sticky(mkSampler(daw_ctx, master, {\n bus: midiBus,\n invalidation\n}), {\"note\":36,\"track\":false,\"rate\":1,\"gain\":1,\"start\":0,\"end\":1,\"inputs\":[]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4876,"value":"$49","pinned":false,"hidden":false,"mode":"ojs"},{"id":4877,"value":"viewof pads1 = sticky(mkPads(daw_ctx, drumNode, {\n bus: midiBus,\n invalidation\n}), {\"pads\":[{\"file\":\"kick.flac\",\"note\":36},{\"file\":\"snare.wav\",\"note\":38},{\"file\":\"hats.wav\",\"note\":42},{\"note\":46},{\"note\":43},{\"note\":45},{\"note\":47},{\"note\":49}],\"gain\":1.5,\"pan\":1,\"inputs\":[]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4878,"value":"viewof template_pads = sticky(mkPads(daw_ctx, master, {\n bus: midiBus,\n invalidation\n}), {\"pads\":[{\"note\":36},{\"note\":38},{\"note\":42},{\"note\":46},{\"note\":43},{\"note\":45},{\"note\":47},{\"note\":49}],\"gain\":1,\"inputs\":[]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4879,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs"},{"id":4880,"value":"viewof template_drum = sticky(mkDrum(daw_ctx, master, {\n bus: midiBus,\n invalidation\n}), {\"note\":45,\"pitch\":120,\"bend\":2,\"decay\":0.3,\"gain\":0.9,\"inputs\":[]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4881,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs"},{"id":4882,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs"},{"id":4883,"value":"viewof tape1 = sticky(mkTape(daw_ctx, master, {\n bus: midiBus,\n invalidation\n}), {\"tap\":\"drumBus\",\"drive\":2.5,\"wow\":0.16,\"tone\":2780,\"wet\":0.9})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4884,"value":"viewof template_tape = sticky(mkTape(daw_ctx, master, {\n bus: midiBus,\n invalidation\n}), {\"tap\":\"\",\"drive\":3,\"wow\":0.3,\"tone\":6000,\"wet\":0.7})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4885,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs"},{"id":4886,"value":"viewof dub1 = sticky(mkDub(daw_ctx, master, {\n bus: midiBus,\n invalidation\n}), {\"tap\":\"drumBus\",\"send\":0.8,\"time\":0.375,\"fb\":0.22,\"tone\":2500,\"wob\":0.35,\"wet\":0.7})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4887,"value":"viewof template_dub = sticky(mkDub(daw_ctx, master, {\n bus: midiBus,\n invalidation\n}), {\"tap\":\"\",\"send\":0.8,\"time\":0.375,\"fb\":0.55,\"tone\":2500,\"wob\":0.35,\"wet\":0.7})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4888,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs"},{"id":4889,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs"},{"id":4890,"value":"viewof echo1 = sticky(mkEcho(daw_ctx, master, {\n bus: midiBus,\n invalidation\n}), {\"tap\":\"synth1\",\"send\":0.5,\"time\":0.375,\"fb\":0.43,\"wet\":0.35})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4891,"value":"viewof verb1 = sticky(mkVerb(daw_ctx, master, {\n bus: midiBus,\n invalidation\n}), {\"tap\":\"snare1\",\"send\":0.6,\"size\":1.8,\"wet\":0.35})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4892,"value":"viewof duck1 = sticky(mkDucker(daw_ctx, midiBus, {\n invalidation\n}), {\"inputs\":[\"drums\"],\"target\":\"pad1\",\"note\":36,\"depth\":0.6,\"rel\":0.25})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4893,"value":"viewof template_echo = sticky(mkEcho(daw_ctx, master, {\n bus: midiBus,\n invalidation\n}), {\"tap\":\"\",\"send\":0.6,\"time\":0.26,\"fb\":0.35,\"wet\":0.5})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4894,"value":"viewof template_verb = sticky(mkVerb(daw_ctx, master, {\n bus: midiBus,\n invalidation\n}), {\"tap\":\"\",\"send\":0.6,\"size\":1.8,\"wet\":0.35})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4895,"value":"viewof template_duck = sticky(mkDucker(daw_ctx, midiBus, {\n invalidation\n}), {\"inputs\":[],\"target\":\"\",\"note\":36,\"depth\":0.55,\"rel\":0.22})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4896,"value":"$50","pinned":false,"hidden":false,"mode":"ojs"},{"id":4897,"value":"viewof slicer1 = sticky(mkSlicer(daw_ctx, drumNode, {\n bus: midiBus,\n invalidation\n}), {\"file\":\"break.flac\",\"base\":60,\"slices\":8,\"rate\":1,\"gain\":1,\"pan\":0,\"inputs\":[]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4898,"value":"viewof template_slicer = sticky(mkSlicer(daw_ctx, master, {\n bus: midiBus,\n invalidation\n}), {\"file\":\"break.flac\",\"base\":60,\"slices\":8,\"rate\":1,\"gain\":1,\"pan\":0,\"inputs\":[]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4899,"value":"$51","pinned":false,"hidden":false,"mode":"ojs"},{"id":4900,"value":"viewof chordpad1 = sticky(mkChordPad(midiBus, {\n invalidation\n}), {\"root\":0,\"mode\":\"minor\",\"octave\":3,\"latch\":false})","pinned":false,"hidden":false,"mode":"ojs"},{"id":4901,"value":"import { gridContainer, gridControls } from \"@tomlarkworthy/grid-container\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":4902,"value":"import { sticky } from \"@tomlarkworthy/sticky\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":4903,"value":"import { runtime, thisModule } from \"@tomlarkworthy/runtime-sdk\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":4904,"value":"import { getFileAttachmentsMap } from \"@tomlarkworthy/fileattachments\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":5040,"value":"import { exporter } from \"@tomlarkworthy/exporter-3\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":5015,"value":"drumNode = viewof drumBus.node","pinned":false,"hidden":false,"mode":"ojs"},{"id":5035,"value":"viewof note1 = sticky(mkNote(), \"# Press play ➡️\\n\\n\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":5051,"value":"export_ui = exporter()","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W52","stdlib":"1","titling":"auto"}