Sequencer

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pulse-16 — Drum Machine</title>
<style>
/* ── css: base ── */
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#0a0c0d;color:#d9e1db;font-family:Arial,Helvetica,sans-serif}body{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(ellipse at 50% 0%,#19201e 0,#0a0c0d 55%)}button,input{font:inherit}button{cursor:pointer}#machine{width:min(1120px,100%);background:linear-gradient(145deg,#282d2c,#111415);border:1px solid #4c5650;border-radius:13px;box-shadow:0 24px 70px #000b, inset 0 1px #58615b;overflow:hidden}.topbar{height:104px;padding:20px 27px;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(#323937,#1b201f);border-bottom:1px solid #090b0b}.brand{display:flex;align-items:center;gap:13px}.brand-dot,.status-led{width:12px;height:12px;border-radius:50%;background:#ff633f;box-shadow:0 0 12px #ff5534}.brand h1{letter-spacing:4px;font-size:24px;margin:0;color:#edf5ef}.brand p{margin:5px 0 0;font-size:9px;letter-spacing:2.2px;color:#8d9a91}.transport{display:flex;gap:18px;align-items:center}.play-btn{width:122px;height:53px;border-radius:6px;border:1px solid #6e7c73;background:linear-gradient(#4c5851,#26302c);color:#edf5ef;font-weight:bold;letter-spacing:1.5px;box-shadow:inset 0 1px #77867d,0 3px 0 #080a09}.play-btn:hover,.play-btn.playing{background:linear-gradient(#f06a43,#b43d28);border-color:#ff9d7d;text-shadow:0 1px #632015}.play-icon{margin-right:8px;font-size:13px}.readout{min-width:94px;text-align:center;border:2px solid #383d3a;border-radius:5px;background:#050807;padding:5px 10px;color:#ff6f48;box-shadow:inset 0 0 15px #000}.readout span{display:block;font-size:8px;letter-spacing:2px;color:#9b4d38}.readout strong{font-family:monospace;font-size:24px;letter-spacing:2px}.control-strip{padding:17px 27px;display:flex;align-items:center;gap:34px;background:#1a1e1d;border-bottom:1px solid #3b423e}.knob-control{display:grid;grid-template-columns:auto 135px auto;gap:10px;align-items:center;color:#aeb8b0;font-size:10px;letter-spacing:1.2px}.knob-control input{accent-color:#ef6743}.knob-control output{font-size:11px;color:#e6ece7;min-width:45px}.actions{margin-left:auto;display:flex;gap:9px}.actions button{background:#252b28;border:1px solid #545f57;color:#c5cec6;border-radius:4px;font-size:10px;letter-spacing:1.2px;padding:10px 13px}.actions button:hover{color:#ff875f;border-color:#ff875f}.sequencer{padding:18px 25px 23px;background:repeating-linear-gradient(90deg,#171b1a,#171b1a 3px,#161a19 3px,#161a19 5px)}.grid-head,.track-row{display:grid;grid-template-columns:174px repeat(16,minmax(26px,1fr));gap:6px}.grid-head{margin-bottom:8px;align-items:end}.track-head{font-size:10px;color:#7f8b83;letter-spacing:1.6px}.step-labels{display:contents}.step-num{text-align:center;font-family:monospace;font-size:11px;color:#758078;padding-bottom:3px}.step-num.beat{color:#ff805c}.track-row{align-items:center;margin:9px 0}.voice{height:47px;padding:0 13px;display:flex;align-items:center;justify-content:space-between;border-radius:5px;background:linear-gradient(90deg,#303735,#242927);border-left:3px solid var(--voice);color:#e1e7e2}.voice-name{font-size:12px;font-weight:bold;letter-spacing:1px}.voice-sub{display:block;color:#89958d;font-size:8px;letter-spacing:1.3px;margin-top:3px}.voice-controls{display:flex;align-items:center;gap:7px}.track-vol{width:48px;accent-color:var(--voice)}.mute{width:23px;height:23px;border:1px solid #59635c;background:#171b1a;color:#aeb8b0;border-radius:3px;font-size:9px;font-weight:bold}.mute.active{background:#a83e31;color:#fff;border-color:#ff7860}.pad{position:relative;height:47px;border:1px solid #46514b;border-radius:5px;background:linear-gradient(145deg,#303836,#1c2220);box-shadow:inset 0 2px 3px #59655e33,0 2px 2px #050706;transition:background .08s,transform .08s,border-color .08s}.pad.beat-start{border-left:3px solid #7e8b82}.pad.active{background:radial-gradient(circle at 50% 37%,#ffaf73,#e55335 45%,#8e2e25 100%);border-color:#ffbb91;box-shadow:0 0 13px #ef563880,inset 0 1px #ffe0bd;transform:translateY(1px)}.pad.accent::after{content:'+';position:absolute;right:4px;top:2px;color:#fff3d8;font-size:12px;font-weight:bold}.pad.now{outline:2px solid #d7ff91;outline-offset:2px;z-index:2}.track-row.muted .voice{filter:saturate(.25);opacity:.65}.track-row.muted .pad{opacity:.38}.track-row.muted .pad.now{opacity:.75}footer{min-height:44px;padding:13px 27px;display:flex;align-items:center;gap:9px;background:#0d100f;border-top:1px solid #3f4843;color:#90a097;font-size:9px;letter-spacing:1px}.status-led{width:7px;height:7px;background:#6a756d;box-shadow:none}.playing~*{}#statusText{color:#bac6bc}.hint{margin-left:auto;color:#69756d}@media(max-width:760px){body{padding:0}#machine{border-radius:0}.control-strip{gap:14px;flex-wrap:wrap}.knob-control{grid-template-columns:auto 100px auto}.actions{margin-left:0}.grid-head,.track-row{grid-template-columns:112px repeat(16,minmax(18px,1fr));gap:3px}.voice{padding:0 6px}.voice-sub,.track-vol{display:none}.pad{height:40px}.sequencer{padding:14px 8px}.topbar{padding:16px}.hint{display:none}footer{padding:12px}.brand h1{font-size:18px}}
</style>
</head>
<body>
<main id="machine" aria-label="Pulse 16 drum machine"><header class="topbar"><div class="brand"><span class="brand-dot"></span><div><h1>PULSE-16</h1><p>ANALOG RHYTHM COMPUTER</p></div></div><div class="transport"><button id="playBtn" class="play-btn" aria-label="Start playback"><span class="play-icon">▶</span><span class="play-text">PLAY</span></button><div class="readout"><span>BPM</span><strong id="bpmDisplay">118</strong></div></div></header><section class="control-strip" aria-label="Global controls"><label class="knob-control"><span>TEMPO</span><input id="tempo" type="range" min="60" max="200" value="118"><output id="tempoValue">118 BPM</output></label><label class="knob-control"><span>SWING</span><input id="swing" type="range" min="0" max="60" value="12"><output id="swingValue">12%</output></label><label class="knob-control master"><span>MASTER</span><input id="master" type="range" min="0" max="100" value="78"><output id="masterValue">78%</output></label><div class="actions"><button id="randomBtn">RANDOM</button><button id="clearBtn">CLEAR</button></div></section><section class="sequencer"><div class="grid-head"><div class="track-head">VOICE</div><div id="stepLabels" class="step-labels"></div></div><div id="tracks" class="tracks"></div></section><footer><span class="status-led"></span><span id="statusText">READY · CLICK PLAY TO ARM AUDIO</span><span class="hint">CLICK: ON / ACCENT / OFF &nbsp;·&nbsp; RIGHT CLICK: ACCENT &nbsp;·&nbsp; DRAG TO PAINT</span></footer></main>
<script>
(function () {
'use strict';
var __mods = {};
var __cache = {};
var __map = {};
function __require(id) {
  if (__cache[id]) return __cache[id].exports;
  var module = __cache[id] = { exports: {} };
  var factory = __mods[id];
  if (!factory) throw new Error("Module not found: " + id);
  factory(module.exports, function (spec) {
    var target = (__map[id] && __map[id][spec]) || spec;
    return __require(target);
  }, module);
  return module.exports;
}

// ── module: src/main.ts ──
__mods["src/main.ts"] = function (exports, require, module) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
/* PULSE-16 — clocked Web Audio drum machine */
const C = { MIN_BPM: 60, MAX_BPM: 200, LOOKAHEAD_MS: 25, AHEAD: 0.12, STEPS: 16, SAVE: 'pulse16-state-v1' };
const tracks = [
    { id: 'kick', name: 'KICK', sub: 'LOW PULSE', color: '#ef6b4b', volume: .86, muted: false },
    { id: 'snare', name: 'SNARE', sub: 'NOISE SNAP', color: '#e5af58', volume: .72, muted: false },
    { id: 'hat', name: 'CLOSED HAT', sub: 'METAL TICK', color: '#8fc7c0', volume: .57, muted: false },
    { id: 'openhat', name: 'OPEN HAT', sub: 'AIR WASH', color: '#8ec0e9', volume: .5, muted: false },
    { id: 'clap', name: 'CLAP', sub: 'HAND BURST', color: '#c39be7', volume: .62, muted: false },
    { id: 'tom', name: 'TOM', sub: 'TUNED DROP', color: '#e58dba', volume: .6, muted: false }
];
let pattern = [
    [2, 0, 0, 0, 1, 0, 0, 0, 2, 0, 0, 0, 1, 0, 0, 0],
    [0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0],
    [1, 0, 1, 0, 1, 0, 1, 1, 1, 0, 1, 0, 1, 0, 1, 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, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0]
];
const $ = (s) => document.querySelector(s);
const tempo = $('#tempo'), swing = $('#swing'), master = $('#master');
const playBtn = $('#playBtn'), tracksEl = $('#tracks'), labels = $('#stepLabels');
let ctx = null, masterGain = null, noise = null;
let playing = false, timer = 0, origin = 0, nextAbs = 0, visualRAF = 0, lastLit = -1;
// Clock anchors make tempo changes continuous while positions remain absolute step numbers.
let clockAnchorAbs = 0, clockAnchorTime = 0, activeTempo = 118, activeSwing = 12;
let scheduled = [];
// Persistence ---------------------------------------------------------------
function restore() { try {
    const s = JSON.parse(localStorage.getItem(C.SAVE) || 'null');
    if (!s)
        return;
    if (s.pattern?.length === 6)
        pattern = s.pattern;
    tempo.value = String(s.tempo || 118);
    swing.value = String(s.swing || 0);
    master.value = String(s.master ?? 78);
    s.tracks?.forEach((v, i) => { if (tracks[i])
        Object.assign(tracks[i], v); });
}
catch { /* fresh pattern */ } }
function save() { const s = { pattern, tempo: +tempo.value, swing: +swing.value, master: +master.value, tracks: tracks.map(x => ({ volume: x.volume, muted: x.muted })) }; localStorage.setItem(C.SAVE, JSON.stringify(s)); }
function valueLabels() { $('#tempoValue').textContent = `${tempo.value} BPM`; $('#bpmDisplay').textContent = tempo.value; $('#swingValue').textContent = `${swing.value}%`; $('#masterValue').textContent = `${master.value}%`; }
// Audio voices: every path begins/ends at silence --------------------------
function audio() { if (ctx)
    return; ctx = new AudioContext(); masterGain = ctx.createGain(); masterGain.gain.value = (+master.value / 100) * .72; masterGain.connect(ctx.destination); noise = ctx.createBuffer(1, ctx.sampleRate * 1.2, ctx.sampleRate); const d = noise.getChannelData(0); for (let i = 0; i < d.length; i++)
    d[i] = Math.random() * 2 - 1; }
function gain(t, a, end) { const g = ctx.createGain(); g.gain.setValueAtTime(.0001, t); g.gain.exponentialRampToValueAtTime(Math.max(.0002, a), t + .003); g.gain.exponentialRampToValueAtTime(.0001, end); g.connect(masterGain); return g; }
function osc(type, f, t, d, a, slide) { const o = ctx.createOscillator(), g = gain(t, a, t + d); o.type = type; o.frequency.setValueAtTime(f, t); if (slide)
    o.frequency.exponentialRampToValueAtTime(slide, t + Math.min(.09, d)); o.connect(g); o.start(t); o.stop(t + d + .02); }
function nse(t, d, a, filter, freq) { const s = ctx.createBufferSource(), f = ctx.createBiquadFilter(), g = gain(t, a, t + d); s.buffer = noise; f.type = filter; f.frequency.value = freq; f.Q.value = filter === 'bandpass' ? 1.2 : .7; s.connect(f).connect(g); s.start(t); s.stop(t + d + .025); }
function trigger(v, t, vel, volume) { const a = vel === 2 ? 1.35 : 1; const x = a * volume; if (v === 'kick') {
    osc('sine', 155, t, .32, .9 * x, 48);
    osc('sine', 54, t, .12, .17 * x);
} if (v === 'snare') {
    nse(t, .17, .56 * x, 'highpass', vel === 2 ? 2100 : 1550);
    osc('triangle', 185, t, .12, .22 * x, 120);
} if (v === 'hat')
    nse(t, .065, .32 * x, 'highpass', 6800); if (v === 'openhat')
    nse(t, .36, .27 * x, 'highpass', 5900); if (v === 'clap') {
    [0, .018, .039, .063].forEach((q, i) => nse(t + q, .045 + (i === 3 ? .10 : 0), .24 * x, 'bandpass', 1500));
} if (v === 'tom')
    osc('sine', 138, t, .34, .52 * x, 76); }
// Absolute clock scheduler --------------------------------------------------
function stepDur() { return 60 / (activeTempo * 4); }
function timeFor(abs) { const d = stepDur(), i = ((abs % C.STEPS) + C.STEPS) % C.STEPS; return clockAnchorTime + (abs - clockAnchorAbs) * d + (i % 4 === 2 ? d * (activeSwing / 100) : 0); }
function retime() { if (!playing || !ctx)
    return; const now = ctx.currentTime; let a = Math.max(0, Math.floor((now - clockAnchorTime) / stepDur()) + clockAnchorAbs); while (timeFor(a + 1) <= now)
    a++; clockAnchorAbs = a; clockAnchorTime = now; activeTempo = +tempo.value; activeSwing = +swing.value; nextAbs = Math.max(nextAbs, a + 1); schedule(); }
function schedule() { if (!ctx || !playing)
    return; const horizon = ctx.currentTime + C.AHEAD; while (timeFor(nextAbs) < horizon) {
    const t = timeFor(nextAbs), step = nextAbs % C.STEPS;
    tracks.forEach((tr, i) => { const v = pattern[i][step]; if (v && !tr.muted)
        trigger(tr.id, t, v, tr.volume); });
    scheduled.push({ abs: nextAbs, time: t });
    if (scheduled.length > 160)
        scheduled.shift();
    nextAbs++;
} window.setTimeout(() => { }, 0); }
function start() { audio(); ctx.resume(); if (playing)
    return; masterGain.gain.cancelScheduledValues(ctx.currentTime); masterGain.gain.setValueAtTime((+master.value / 100) * .72, ctx.currentTime); playing = true; clockAnchorAbs = 0; clockAnchorTime = ctx.currentTime + .055; activeTempo = +tempo.value; activeSwing = +swing.value; nextAbs = 0; scheduled = []; timer = window.setInterval(schedule, C.LOOKAHEAD_MS); schedule(); playBtn.classList.add('playing'); $('.play-text').textContent = 'STOP'; $('.play-icon').textContent = '■'; $('#statusText').textContent = 'RUNNING · CLOCK LOCKED'; $('.status-led').style.background = '#82df78'; $('.status-led').style.boxShadow = '0 0 10px #82df78'; visual(); }
function stop() { if (!playing)
    return; playing = false; clearInterval(timer); cancelAnimationFrame(visualRAF); if (masterGain && ctx) {
    masterGain.gain.cancelScheduledValues(ctx.currentTime);
    masterGain.gain.setTargetAtTime(.0001, ctx.currentTime, .004);
    setTimeout(() => { if (masterGain && ctx)
        masterGain.gain.setValueAtTime((+master.value / 100) * .72, ctx.currentTime); }, 30);
} lastLit = -1; paintPlayhead(-1); playBtn.classList.remove('playing'); $('.play-text').textContent = 'PLAY'; $('.play-icon').textContent = '▶'; $('#statusText').textContent = 'STOPPED · STEP 01 READY'; $('.status-led').style.background = '#6a756d'; $('.status-led').style.boxShadow = 'none'; }
function visual() { if (!ctx || !playing)
    return; let abs = Math.floor((ctx.currentTime - clockAnchorTime) / stepDur()) + clockAnchorAbs; while (abs >= 0 && timeFor(abs + 1) <= ctx.currentTime)
    abs++; paintPlayhead(abs < 0 ? -1 : abs % C.STEPS); visualRAF = requestAnimationFrame(visual); }
// Grid interaction ----------------------------------------------------------
function render() { labels.innerHTML = ''; for (let s = 0; s < 16; s++) {
    const e = document.createElement('div');
    e.className = 'step-num ' + (s % 4 === 0 ? 'beat' : '');
    e.textContent = String(s + 1).padStart(2, '0');
    labels.append(e);
} tracksEl.innerHTML = ''; tracks.forEach((tr, r) => { const row = document.createElement('div'); row.className = 'track-row' + (tr.muted ? ' muted' : ''); row.dataset.row = String(r); const voice = document.createElement('div'); voice.className = 'voice'; voice.style.setProperty('--voice', tr.color); voice.innerHTML = `<div><span class="voice-name">${tr.name}</span><span class="voice-sub">${tr.sub}</span></div><div class="voice-controls"><input class="track-vol" aria-label="${tr.name} volume" type="range" min="0" max="100" value="${Math.round(tr.volume * 100)}"><button class="mute ${tr.muted ? 'active' : ''}" title="Mute ${tr.name}">M</button></div>`; row.append(voice); for (let s = 0; s < 16; s++) {
    const p = document.createElement('button');
    p.className = 'pad ' + (s % 4 === 0 ? 'beat-start ' : '');
    p.dataset.step = String(s);
    p.setAttribute('aria-label', `${tr.name} step ${s + 1}`);
    row.append(p);
} tracksEl.append(row); }); updatePads(); }
function updatePads() { tracksEl.querySelectorAll('.track-row').forEach((row, r) => row.querySelectorAll('.pad').forEach((p, s) => { p.classList.toggle('active', pattern[r][s] > 0); p.classList.toggle('accent', pattern[r][s] === 2); })); }
function paintPlayhead(step) { if (step === lastLit)
    return; tracksEl.querySelectorAll('.pad.now').forEach(x => x.classList.remove('now')); if (step >= 0)
    tracksEl.querySelectorAll(`.pad[data-step="${step}"]`).forEach(x => x.classList.add('now')); lastLit = step; }
let painting = false, paintValue = 1;
function changePad(el, accent = false) { const row = +(el.closest('.track-row').getAttribute('data-row')), s = +el.dataset.step; pattern[row][s] = accent ? 2 : (pattern[row][s] === 0 ? 1 : pattern[row][s] === 1 ? 2 : 0); paintValue = pattern[row][s] || 1; updatePads(); save(); }
tracksEl.addEventListener('pointerdown', e => { const el = e.target.closest('.pad'); if (!el)
    return; painting = true; changePad(el, e.button === 2); e.target.setPointerCapture?.(e.pointerId); });
tracksEl.addEventListener('pointerover', e => { if (!painting)
    return; const el = e.target.closest('.pad'); if (el) {
    const r = +el.closest('.track-row').getAttribute('data-row'), s = +el.dataset.step;
    pattern[r][s] = paintValue;
    updatePads();
    save();
} });
window.addEventListener('pointerup', () => painting = false);
tracksEl.addEventListener('contextmenu', e => e.preventDefault());
tracksEl.addEventListener('input', e => { const input = e.target; if (input.classList.contains('track-vol')) {
    const r = +input.closest('.track-row').getAttribute('data-row');
    tracks[r].volume = +input.value / 100;
    save();
} });
tracksEl.addEventListener('click', e => { const b = e.target.closest('.mute'); if (b) {
    const r = +b.closest('.track-row').getAttribute('data-row');
    tracks[r].muted = !tracks[r].muted;
    render();
    save();
} });
restore();
valueLabels();
render();
playBtn.onclick = () => playing ? stop() : start();
[tempo, swing, master].forEach(i => i.addEventListener('input', () => { if (i === tempo || i === swing)
    retime(); valueLabels(); if (i === master && masterGain && ctx)
    masterGain.gain.setTargetAtTime((+master.value / 100) * .72, ctx.currentTime, .01); save(); }));
$('#clearBtn').addEventListener('click', () => { pattern = pattern.map(() => Array(16).fill(0)); updatePads(); save(); });
$('#randomBtn').addEventListener('click', () => { pattern = pattern.map((row, r) => row.map(() => Math.random() < (r === 2 ? .58 : .19) ? (Math.random() < .2 ? 2 : 1) : 0)); updatePads(); save(); });
window.sequencerDebug = { get scheduled() { return scheduled.slice(); }, get playing() { return playing; }, get pattern() { return pattern; } };
};

// ── entry ──
__require("src/main.ts");
})();
</script>
</body>
</html>
<!-- agent-meta {"model":"openai/gpt-5.6-terra","provider":"openrouter","persona":"typescript","sessionId":"9f505ce5-a387-459e-924d-8b32060cce8d","tokensIn":245311,"tokensOut":9008,"tokensTotal":254319,"turns":22,"toolCalls":23,"failedToolCalls":0,"timestamp":"2026-07-31T18:11:13.637Z"} -->