We need respond by creating index.html self-contained. Need inspect current dir maybe tone.min.js present. Need build single-page web app with CSS/JS inline, use pre-provided tone.min.js global Tone. Need playable piano keyboard controlled by mouse and computer keys, synthesizes notes with ADSR envelope and visual key feedback. Need no external resources. We need create index.html in /tmp/ws. Need maybe inspect.

Need write index.html. Need use Tone library. Need understand Tone usage. We can write app. Need consider browser audio needs user gesture. Mouse and keyboard. ADSR envelope. Visual key feedback. Self-contained.

Need perhaps use Tone.Sampler? No external samples. Better use Tone.Synth with oscillator/voice. Need piano-like synthesis. Tone.Synth with ADSR. We can create one Synth per note? Or one synth with mono poly? Tone.Synth default has one voice? Let's recall Tone.js: Tone.Synth is monophonic? Actually Tone.Synth combines Envelope, Filter, Amplifier, Oscillator. It is monophonic? Tone.Synth docs: "The synth is monophonic by default, only allowing a single note at a time." There is Tone.PolySynth for multiple. We can use Tone.PolySynth with voiceCount maybe 16, synth.set({oscillator:{type:'triangle'}, envelope: ADSR...})? PolySynth voice per note. ADSR per voice. Good.

Need synthesize notes with ADSR envelope. Could use Tone.PolySynth(Tone.Synth, {envelope:{attack:0.01, decay:0.18, sustain:0.45, release:0.8}, oscillator:{type:"triangle"}, filter:{...}}). Piano timbre can be triangle/sine plus lowpass, maybe add second oscillator? Tone.Synth supports oscillator only one. Could use Tone.Sampler with web audio? But no samples. Could build custom synth per note using OscillatorNode + GainNode + ADSR, with PolySynth? Better for piano: per-key voices using Tone.Oscillator and Tone.Gain and Tone.Filter? But use Tone global. Need maybe create voices manually with Tone or Web Audio. But user asked using pre-provided tone.min.js (global Tone), build synth notes with ADSR. Tone.PolySynth is straightforward. Could use Tone.PolySynth(Tone.Synth, {envelope: ...}) and optional Tone.StereoPanner.

Need visual key feedback. Keyboard mapping: C3 to maybe C5. Use 25 keys: 18 white, 7 black? Need mapping. Need mouse click/touch. Computer keys: set keyboard map. Need visual highlight active notes. Need handle keydown repeat. Need start audio on first user gesture. Need release on keyup/mouseup. Need perhaps sustain? Not required. Could implement mouse drag. Need visual active class.

Need create file. Need maybe test no external. Could use Tone context resume. Need maybe "Load Tone script first". Use <script src="tone.min.js"></script> then script.

Need maybe include accessibility. Need no network. Need maybe if Tone not loaded? But file present.

Need decide note set. A playable piano keyboard maybe 2 octaves. Let's do 3 octaves? Could be too much but manageable. White keys: C4-B4 (13 white), C5-B5 (13 white), plus A3? Maybe 2.5 octaves. Better 25 keys from C3 to B5. White keys: C3,D3,E3,F3,G3,A3,B3,C4,D4,E4,F4,G4,A4,B4,C5,D5,E5,F5,G5,A5,B5 (25 white). Black keys 14. Visual.

Need keyboard mapping. Standard PC keys maybe row and QWERTY. Need use computer keys. Could map:
White keys:
Z S X D C V G B H N J M
, .? Wait we need 25 white keys. Maybe use lower keyboard:
Z S X D C V G B H N J M, comma period
1 2 3 4 5 6 7 8 9 0 - =
But if using Z row and top row. Need avoid conflict? We'll map:
Z S X D C V G B H N J M = C3-B3 (12 notes)
1 2 3 4 5 6 7 8 9 0 - = = C4-B4 (13 notes)
Then maybe [ ] for C5-D5? But if 2 octaves enough? Could map one octave white + top row. Let's do 2 octaves from C3 to B4 plus maybe C5,D5? Hmm.

Maybe more classic:
C4-D4-E4-F4-G4-A4-B4-C5-D5-E5-F5-G5-A5-B5-C6 = 20 white keys.
Keyboard:
Z S X D C V G B H N J M = C4-B4 (12)
1 2 3 4 5 6 7 8 9 0 = C5-B5 (12)
[ ] = C6,D6? Actually 24 white total, black 17. Maybe too many.

Simpler 2 octaves C3-B4: 24 white keys. Map:
Z S X D C V G B H N J M = C3-B3
1 2 3 4 5 6 7 8 9 0 = C4-B4
Black keys:
Q W E R T Y U I O P = C#3-F#4? Need 12 black keys. Good. This is intuitive: Z-row whites, top-row whites, QWERTY black keys. But black keys overlap with top-row? QWERTY black keys are Q W E R T Y U I O P, while top row whites are 1 2 3 4 5 6 7 8 9 0. Fine. Need labels.

Note frequencies:
C3 130.81, C#3 138.59, D3 146.83, D#3 155.56, E3 164.81, F3 174.61, F#3 185, G3 196, G#3 207.65, A3 220, A#3 233.08, B3 246.94, C4 261.63, C#4 277.18, D4 293.66, D#4 311.13, E4 329.63, F4 349.23, F#4 369.99, G4 392, G#4 415.3, A4 440, A#4 466.16, B4 493.88.
Could include C5 523.25 maybe by [ maybe not.

Need implement black key positions. Could use CSS grid. For white keys flex row, black absolute. Simpler: use .keyboard relative, .white-keys display flex, .white-key flex: 1, width; black-key position absolute with left percentages. Need compute left based on white index and width. Since white keys equal width, black key left = (whiteIndex * 100 / whiteCount + 70/whiteCount?) Actually black key width = 6.5%, height 60%, top. For black between white i and i+1: left = (i + 0.55)/whiteCount*100? In CSS with left percent of keyboard. Use JS to set left. Good.

Need perhaps keyboard row with white and black overlay. The black keys should be above white keys.

Need visual feedback: .active for white/black with transform/box-shadow. For black active, maybe add class and maybe label.

Need sound. Use Tone.PolySynth. Need note triggering. Tone.PolySynth can trigger note with duration? For ADSR release on release, if duration undefined and release set, it should release on stop. Tone.PolySynth.triggerAttack(note, now, velocity, time?) It starts voice. triggerRelease(note, now). We can use note string or frequency. Need maybe use Tone.Frequency? Use note string. PolySynth has triggerAttack(note, time=now, velocity=0.75, duration?) and triggerRelease(note, time=now). If multiple same note pressed, duplicate? Keyboard repeat ignored.

Need maybe use Tone.Transport? Not necessary.

Need ADSR envelope. Tone.PolySynth(Tone.Synth, {envelope: {attack: 0.01, decay: 0.12, sustain: 0.35, release: 0.65}}). But piano ADSR should quick attack, short decay, sustain low, release. For piano-like, maybe attack 0.005, decay 0.2, sustain 0.22, release 0.75. Need maybe per frequency adjust decay/release? ADSR envelope per synth same. Could have release based on note? But no.

Need maybe create "piano" timbre by setting filter frequency envelope? Tone.Synth envelope only controls amplitude. Could use Tone.PolySynth with Tone.Synth and maybe filter. Need "synthesizes notes with an ADSR envelope" not necessarily acoustic. We can use oscillator triangle/sine, filter. Maybe add Tone.Filter with frequency 2800, Q 0.8, gain. Could use Tone.PolySynth(Tone.Synth, {
envelope: { attack: 0.005, decay: 0.16, sustain: 0.28, release: 0.75 },
oscillator: { type: "triangle" },
filter: { type: "lowpass", frequency: 3200, Q: 1.2, gain: 0 }
}).
But Tone.Synth envelope controls amplitude after filter? It creates envelope -> filter -> amp? Let's recall Tone.Synth chain: Envelope -> Filter -> Amplifier -> Oscillator? Actually synth has envelope, filter, amplifier, oscillator. Envelope controls filter frequency? Wait Tone.Synth: "The synth is a monophonic synthesizer with an ADSR envelope, a filter and an oscillator." The envelope controls filter frequency? Hmm in Tone.Synth, envelope is used to control filter frequency, not amplitude? Let's recall: Tone.Synth is "synthesizer that uses a single oscillator and an ADSR envelope" maybe envelope controls amplitude? Actually Tone.Part? Let's check docs? We can inspect minified? But not necessary. In Tone.Synth, I think envelope controls filter frequency? Wait Tone.Sampler? Let's recall Tone.Synth code:
class Synth extends Voice {
constructor(options={}) {
super();
this.options = Tone.createOptions(...);
this.envelope = new Tone.ADSR(options.envelope);
this.filter = new Tone.Filter(options.filter);
this.amplifier = new Tone.Gain(options.output);
this.oscillator = new options.oscillator();
this.voices = new Tone.VoiceCollection();
this._voices = {};
this.connect(this.envelope, this.filter, this.amplifier, this.output);
this.oscillator.connect(this.envelope);
this.envelope.connect(this.filter.frequency);
}
triggerAttack(freq, time, velocity, duration) {
return this._triggerVoice(freq, time, velocity, duration);
}
_triggerVoice(freq,time,velocity,duration) {
const envelope = this.envelope.clone();
const oscillator = this.oscillator.clone();
const filter = this.filter.clone();
const amplifier = this.amplifier.clone();
oscillator.connect(envelope);
envelope.connect(filter.frequency);
filter.connect(amplifier);
amplifier.connect(this.output);
oscillator.frequency.setValueAtTime(freq,...);
envelope.triggerAttack(...);
filter.frequency.setValueAtTime(... maybe 10000);
filter.frequency.exponentialRampToValueAtTime(this.filter.frequency,...);
...
}
So ADSR controls filter frequency, not amplitude. The amplifier gain maybe constant. Hmm. For amplitude ADSR, we'd need custom synth. Or use Tone.PolySynth(Tone.Sampler) with sample? No. Could use Tone.Sampler with Tone.Sampler has envelope? It may have no ADSR. Better implement custom ADSR with Web Audio or Tone. But need use Tone global. Could use Tone.ToneToGain? Let's recall Tone.Gain has setTargetAtTime etc. Could create per-note oscillator nodes with Tone.Oscillator and Tone.Gain, use Tone.ADSR envelope to control gain.gain? Tone.ADSR can trigger attack/release and connect to gain.gain. This is better. We can use Tone.Oscillator with type, Tone.Filter maybe, Tone.Gain. Need polyphony. We'll create a "piano voice" per note using Tone.Oscillator, Tone.Filter, Tone.Gain, Tone.StereoPanner maybe. Use Tone.ADSR to control the gain.gain. This allows ADSR envelope. Need oscillator frequency set. Tone.Oscillator.start(time); Tone.ADSR.triggerAttack(velocity, time); triggerRelease(time). Need stop oscillator at release + release tail. Could connect oscillator -> filter -> gain -> output. Use Tone.Scheduler? Not needed. Tone.Oscillator can be started/stopped. Tone.ADSR envelope can be used as control source to gain.gain. Need set gain.gain.value? If gain.gain is controlled by ADSR. In Tone, AudioParam can be connected to ADSR output. ADSR output starts 0 and releases. Need perhaps set gain.gain.value = 0.0001 before. Then connect. But Tone.ADSR output maybe 0 at rest. Good. Need set attack, decay, sustain, release. Need velocity scaling. For ADSR, triggerAttack(velocity, time), release(time). Sustain is level. Decay after attack.

Need maybe add second oscillator harmonic for piano. But ADSR controls final gain. Could create two oscillators per note: fundamental triangle/sine and a bright sine at octave/harmonic with low gain. Both through same ADSR. Use Tone.Oscillator. For each note:
- oscillator = new Tone.Oscillator({type:"triangle", frequency: freq});
- harmonic = new Tone.Oscillator({type:"sine", frequency: freq*2.01, gain: 0.15});
- filter = new Tone.Filter({type:"lowpass", frequency: 2800, Q: 0.8});
- gain = new Tone.Gain({gain: 0.0001});
- panner = new Tone.StereoPanner({pan: pan});
connect osc/harmonic to filter, filter to gain, gain to panner, panner to output.
- adsr = new Tone.ADSR({attack:0.004, decay:0.18, sustain:0.28, release:0.8});
adsr.connect(gain.gain);
adsr.triggerAttack(velocity, toneTime);
triggerRelease(toneTime).
Need start oscillators at time. Tone.Oscillator.start(time); Tone.Oscillator.stop(time + attack + decay + sustain + release + 0.05). But Tone.ADSR release time should align with stop. Since ADSR release duration 0.8. We can stop oscillator at now+0.9. Use Tone.now() perhaps.

Need release on mouseup/key up. Need if keyup missed? Need document listeners.

Need maybe implement "Poly" max voices and stop oldest if exceeded. Tone.Oscillator.stop will stop. Need track activeVoices array. If > 24, stop oldest.

Need maybe "computer keys" with keydown. Need prevent default for mapped keys. Need handle if Tab? okay.

Need "mouse controlled" click/touch. Need pointerdown start note, pointerup/leave cancel. Need maybe pointer capture. But if pointer moves out while held, note should maybe continue or release? Usually release on pointerup. For dragging, we can use pointer capture. On pointerdown, call startNote. pointerup/cancel release. pointerleave? If capture, pointerleave not needed. But if not capture, release. We'll set el.setPointerCapture(e.pointerId). Need release on pointercancel. If pointerup outside, capture triggers. Need for mouse. Also touch? pointer events.

Need maybe "visual key feedback" for mouse and keyboard. On pointerdown, mark active. On pointerup release. For keyboard, keydown active if not already, keyup inactive. Need keyboard repeat: if event.repeat, don't start duplicate. But if repeat from keydown and active false? We can ignore repeats. Need also handle lost focus release all.

Need maybe "audio context resume" on first gesture. Need user gesture. Function initAudio: if Tone.context.state === 'suspended' await resume. Need if Tone not loaded show error. Tone.context.resume is promise. Tone started. Need maybe Tone.start? Tone.context.resume enough.

Need maybe add "Start / resume audio" button. But if no user gesture, audio won't start. We can include button. Need maybe "Click/tap anywhere or press a key to enable audio". Could be.

Need maybe no external resources. Need include <script src="tone.min.js"></script> exact. Good.

Need maybe "Tone" global after script. But if file missing? It exists. Use exact filename. Good.

Need maybe set CSS. Need single page. Need maybe dynamic generation in JS. Need maybe labels. Need maybe display current note, active count.

Need maybe "piano keyboard controlled by mouse and computer keys" - yes.

Need maybe maybe "using pre-provided tone.min.js (global Tone)" - include script. Need maybe not use CDN. Good.

Need maybe maybe "build a playable piano keyboard" - should include UI. Need maybe "visual key feedback" - active class. Need maybe "ADSR envelope" - actual Tone.ADSR.

Need maybe ensure Tone.ADSR API. Let's verify minified? Could search docs? But not necessary. But need exact Tone.ADSR constructor. In Tone.js, new Tone.ADSR(options). Methods triggerAttack(value,time), triggerRelease(time). Good.

Potential issue: Tone.Oscillator type options. Tone.Oscillator({type:'sine', frequency: freq}) works. Tone.Gain({gain:0.0001}) maybe. Tone.StereoPanner({pan: pan})? In Tone, pan property works. Good.

Potential issue: Tone.ADSR.connect(gain.gain) maybe to AudioParam. Good.

Potential issue: Tone.Oscillator.stop(time) requires time >= now. Good. Need stop at time + release + 0.05. Need release = 0.75. Good.

Potential issue: if start note called before Tone context resume, Tone.now works? Probably. But init on gesture before start. Need call resume in startNote? We can call async initAudio then start. But if keydown triggers start, await inside event. It may start after. Good. But if audio context suspended, startNote awaits context.resume then start. Need not block. For mouse, pointerdown triggers. Need maybe if context suspended, button.

Potential issue: if user presses keyboard before init, startNote async. Need active visual immediate? We can mark active before await. Sound after. Good.

Need maybe voice active for same note? If keydown repeated ignored. If pointerdown while same note active? release first? startNote checks activeVoices maybe duplicate. Need handle.

Need maybe active state per note. ActiveVoices Map note -> voice. If same note already active, no duplicate. If note pressed again while active, maybe retrigger? Keyboard repeat ignored. Mouse pointerdown on active maybe ignore. Could release and restart? Not needed.

Need maybe note names and frequencies. Need compute semitone.

Need maybe "piano keyboard" black key overlay. Need maybe use CSS .key.active. For black key transform maybe translateY(2px). Need active class.

Need maybe "click-to-play" audio button. But if no external. Good.

Need maybe maybe user expects "all in one file named index.html" only. We can write file. Need maybe no explanation? Final concise.

Let's craft index.html. Need maybe include meta viewport, style. Need maybe no external fonts. Need maybe ARIA. Need maybe "no network requests". Use script src local.

Let's design:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"...>
<title>ADSR Piano - Tone.js</title>
<style>
:root {...}
* {box-sizing:border-box}
body {margin:0; min-height:100vh; font-family: system-ui...; background radial-gradient...; color}
.app {max-width:1100px; margin:0 auto; padding:32px 18px 48px}
.hero {text-align:center; margin-bottom:24px}
h1...
.panel {display:flex...}
.status-pill...
.keyboard-shell {position:relative; padding:22px 16px 28px; border-radius:28px; background...; box-shadow...}
.keyboard {position:relative; height:300px; user-select:none; touch-action:none}
.white-keys {display:flex; height:100%; position:relative; z-index:1}
.white-key {flex:1; height:100%; border:1px solid #c7c7d6; background:linear-gradient(...); border-radius:0 0 14px 14px; position:relative; cursor:pointer; box-shadow: inset ...; transition...; display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:18px}
.white-key:hover:not(.active) {background...}
.white-key.active {background:linear-gradient(#fff,#e7f7ff); transform:translateY(2px); box-shadow: inset 0 -8px 18px rgba(...), 0 8px 18px ...; border-color:#9eeaff}
.white-key .label {font-weight:800; font-size:13px; color...}
.white-key .key-name {font-size:12px; opacity:.65; margin-bottom:6px}
.black-keys {position:absolute; inset:0; pointer-events:none; z-index:3}
.black-key {position:absolute; width:6.8%; height:62%; top:0; transform:translateX(-50%); background:linear-gradient(...); border-radius:0 0 10px 10px; cursor:pointer; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; padding-bottom:18px; box-shadow...; pointer-events:auto; transition...}
.black-key::before maybe label. .black-key.active {background... transform:translateX(-50%) translateY(3px);}
.black-key .key-name {font-size:12px; margin-bottom:8px; color:#fff}
.black-key .label {font-size:11px; color:#c7d7ff}
.control-row {display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:center; margin-top:18px}
button { ... }
button.secondary...
.info {margin...}
kbd { ...}
@media max-width...
</style>
</head>
<body>
<div class=app>
<header>...
<div class=status><span id=statusDot></span><span id=statusText>Audio ready when you start</span></div>
<div class=keyboard-shell>
<div id=keyboard class=keyboard aria-label="Playable piano keyboard"></div>
</div>
<div class=control-row>
<button id=audioButton>Enable audio</button>
<span class=hint>Mouse/touch: click and hold keys. Computer keys: Z S X... and 1 2 3...</span>
</div>
<p class=info>ADSR: attack ...</p>
</div>
<script src="tone.min.js"></script>
<script>
(() => {
'use strict';
const keyboardEl = document.getElementById('keyboard');
const audioButton = document.getElementById('audioButton');
const statusText = document.getElementById('statusText');
const statusDot = document.getElementById('statusDot');
const octaveRange = {min: 3, max: 4}; // C3 to B4
const whiteKeys = ['C','D','E','F','G','A','B'];
const blackKeys = ['#'];
function midiToFreq(midi) { return 440 * Math.pow(2, (midi - 69) / 12); }
function noteNameFromMidi(midi) { const names = ['C','C#','D','D#','E','F','F#','G','G#','A','A#','B']; return names[((midi % 12)+12)%12] + Math.floor(midi/12 -1); }
function buildKeyboard() {
const notes = [];
for (let midi=39; midi<=71; midi++) {
const name = noteNameFromMidi(midi);
const isBlack = name.includes('#');
const whiteIndex = whiteKeys.indexOf(name[0]); // C=0...
notes.push({midi, name, freq: midiToFreq(midi), isBlack, whiteIndex});
}
const whiteNotes = notes.filter(n=>!n.isBlack);
whiteNotes.forEach(n => {
const key = document.createElement('button');
key.type='button'; key.className='white-key'; key.dataset.note = n.name; key.dataset.midi = n.midi; key.dataset.whiteIndex=n.whiteIndex;
key.innerHTML = `<span class="key-name">${n.name.replace('#','♯')}</span><span class="label">${n.whiteIndex < 12 ? keyboardMap[n.name] : ''}</span>`;
keyboardEl.appendChild(key);
});
const blackWrap = document.createElement('div'); blackWrap.className='black-keys'; keyboardEl.appendChild(blackWrap);
notes.filter(n=>n.isBlack).forEach(n => {
const key = document.createElement('button');
key.type='button'; key.className='black-key'; key.dataset.note=n.name; key.dataset.midi=n.midi; key.dataset.whiteIndex=n.whiteIndex;
key.style.left = ((n.whiteIndex + 0.55) / whiteNotes.length * 100) + '%';
key.innerHTML = `<span class="key-name">${n.name.replace('#','♯')}</span><span class="label">${keyboardMap[n.name] || ''}</span>`;
blackWrap.appendChild(key);
});
}
Need keyboardMap includes C3 etc. Could compute by index. For black labels. Need assign map.
const whiteLabels = 'ZSXD C V G B H N J M'; Need no spaces. const topLabels = '1234567890'; blackLabels='QWERTYUIOP'.
const keyboardMap = {};
whiteNotes.forEach((n, i)=> keyboardMap[n.name] = whiteLabels[i]);
topWhiteNotes.forEach((n, i)=> keyboardMap[n.name] = topLabels[i]);
blackNotes.forEach((n,i)=> keyboardMap[n.name] = blackLabels[i]);
Need topWhiteNotes = notes.filter(!black && n.midi>=60). Good.
But keyboardMap object keys names C3 etc. Good.
Need maybe if note C4 appears after B3, top row. Good.

Need event delegation for pointer and keyboard. Could add listeners to keyboardEl. For pointerdown, find key. For keyup keydown, use document.

Need activeNotes = new Map(); activeVoices = [];
function getActiveByMidi(midi) { return activeNotes.get(String(midi)); }
function releaseNote(midi) { const voice = activeNotes.get(String(midi)); if (!voice) return; voice.release(); activeNotes.delete(String(midi)); voice.el.classList.remove('active'); }
function stopVoice(voice) {
const release = 0.75; const stopTime = Tone.now() + release + 0.05;
try { voice.adsr.triggerRelease(Tone.now()); } catch {}
try { voice.oscillator.stop(stopTime); } catch {}
try { voice.harmonic.stop(stopTime); } catch {}
}
But if releaseNote called after stopTime? It will trigger release again maybe. Fine.

Need initAudio:
let audioReady = false;
async function initAudio() {
if (!window.Tone) { setStatus('Tone.js did not load from tone.min.js', true); return false; }
try {
if (Tone.context.state === 'suspended') await Tone.context.resume();
audioReady = true;
updateStatus('Audio enabled — play with mouse or keys');
return true;
} catch (err) { setStatus('Audio could not start: ' + err.message, true); return false; }
}
function setStatus(msg, error=false) { ... }
Need maybe statusDot class error.

Need startNote(noteOrMidi, velocity=0.85):
async function startNote(midi, velocity=0.85) {
if (!audioReady) { await initAudio(); if (!audioReady) return; }
if (activeNotes.has(String(midi))) return;
const freq = midiToFreq(midi);
const pan = Math.min(0.45, Math.max(-0.45, (midi - 55) / 55 * 0.7));
const osc = new Tone.Oscillator({ type: 'triangle', frequency: freq });
const harmonic = new Tone.Oscillator({ type: 'sine', frequency: freq * 2.01 });
const harmonicGain = new Tone.Gain({ gain: 0.18 });
const filter = new Tone.Filter({ type: 'lowpass', frequency: 3200, Q: 0.9 });
const amp = new Tone.Gain({ gain: 0.0001 });
const panner = new Tone.StereoPanner({ pan });
osc.connect(filter); harmonic.connect(harmonicGain).connect(filter); filter.connect(amp); amp.connect(panner); panner.connect(Tone.Destination);
const adsr = new Tone.ADSR({ attack: 0.004, decay: 0.16, sustain: 0.24, release: 0.75 });
adsr.connect(amp.gain);
const now = Tone.now();
osc.start(now); harmonic.start(now);
adsr.triggerAttack(velocity, now);
// maybe filter frequency:
const filterFreq = Math.min(6500, Math.max(1800, freq * 18)); filter.frequency.setValueAtTime(filterFreq, now); filter.frequency.exponentialRampToValueAtTime(Math.max(800, filterFreq * 0.45), now + 0.18);
activeNotes.set(String(midi), {midi, els:[...], oscillator:osc, harmonic, harmonicGain, filter, amp, adsr, pan, stopped:false});
activeVoices.push(voice); if > max stop oldest
}
Need maybe Tone.StereoPanner pan range [-1,1]. Good.
Need maybe harmonicGain connected to filter. Good.
Need maybe filter frequency ramp maybe not necessary but nice. Need maybe if Tone.Filter.frequency.setValueAtTime? yes.

Need release:
function releaseNote(midi) {
const key = document.querySelector(`[data-midi="${midi}"]`);
const voice = activeNotes.get(String(midi));
if (!voice) return;
if (key) key.classList.remove('active');
const now = Tone.now();
try { voice.adsr.triggerRelease(now); } catch {}
const stopTime = now + voice.adsr.release + 0.06; // Tone.ADSR.release property? Does ADSR have release property? likely yes. Could use 0.75 constant. To avoid property maybe const release = 0.75.
try { voice.oscillator.stop(stopTime); } catch {}
try { voice.harmonic.stop(stopTime); } catch {}
activeNotes.delete(String(midi));
}
Need maybe if start after release before stop, could duplicate. activeNotes deletes so if keydown after release before stop, duplicate with old voice still ringing. Could be okay? But maybe active old still plays. Could stop old immediately? If release, old voice release tail. If key pressed again quickly, duplicate. Fine.

Need maybe after stop, remove from activeVoices. Could in releaseNote splice. But if releaseNote called while stopTime. We can remove. Need cleanup after stop? Could use setTimeout(() => { try disconnect... }, (release+0.2)*1000). Need not.

Need maybe maxVoices = 24. When over, stop oldest:
function trimVoices() {
while (activeVoices.length > 24) {
const old = activeVoices.shift();
releaseNote(old.midi);
}
}
But releaseNote removes from activeVoices by splice, not exactly. Could use activeVoices.splice(0,1)[0].
Need avoid releaseNote removes from activeVoices while iterating. Fine.

Potential issue: activeVoices stores voices, releaseNote removes. Good.

Need pointer event:
keyboardEl.addEventListener('pointerdown', (event) => {
const key = event.target.closest('.white-key, .black-key');
if (!key) return;
event.preventDefault();
const midi = Number(key.dataset.midi);
key.classList.add('active');
startNote(midi);
});
Need keyboardEl pointerup:
keyboardEl.addEventListener('pointerup', ... release)
keyboardEl.addEventListener('pointercancel', ...)
keyboardEl.addEventListener('pointerleave', e => { if (e.buttons) maybe release? But pointer capture. Could release if !e.pointerCapture? Hmm.
Need for mouse drag: If pointerdown on key and pointer moves to another, maybe should play new? But not necessary. Could implement pointermove if pointer is captured? Maybe if pointerdown on key, pointer capture, pointermove over other keys, no new notes. But "controlled by mouse" click/hold. Fine. Could release on pointerup anywhere in keyboard? Good.

Need maybe pointerdown on black key, release. Good.

Need keyboard event:
const keyMap = new Map();
whiteNotes.forEach((n,i)=> keyMap.set(whiteLabels[i], n.midi));
topWhiteNotes.forEach((n,i)=> keyMap.set(topLabels[i], n.midi));
blackNotes.forEach((n,i)=> keyMap.set(blackLabels[i], n.midi));
Need case-insensitive.
document.addEventListener('keydown', (event) => {
const key = event.key.length ===1 ? event.key.toLowerCase() : event.key;
if (!keyMap.has(key)) return;
event.preventDefault();
if (event.repeat) return;
const midi=keyMap.get(key);
if (!activeNotes.has(String(midi))) {
const el = document.querySelector(`[data-midi="${midi}"]`);
if (el) el.classList.add('active');
}
startNote(midi);
});
document.addEventListener('keyup', (event)=> { ... release; });
Need if keydown starts note async, if keyup before audio ready, releaseNote sees no voice but still removes visual. Good.

Need maybe "audioButton.addEventListener('click', async () => { await initAudio(); });"
Need maybe "window.addEventListener('blur', () => { Array.from(activeNotes.keys()).forEach(m=> releaseNote(Number(m))); });"
Need maybe "visibilitychange hidden" release.

Need maybe "set status" when startNote called: "Playing C4". Need maybe status.

Need maybe "note display" id. Could update.

Need maybe "ADSR controls" not necessary. But could show values.

Need maybe "piano keyboard" with 24 white keys. Black keys overlay. Need maybe black key width and left. Good.

Need maybe note labels. Need maybe for black keys, QWERTY labels. Good.

Need maybe no external network. Good.

Potential issue: Button elements inside keyboard; keydown document on key may trigger button focus and maybe space/enter? We prevent default only mapped. Good.

Potential issue: Tone may not be loaded due to script order? We include script src before inline. Good.

Need maybe maybe Tone.ADSR can only connect to AudioParam, but if gain.gain.value = 0.0001 and adsr output is 0, connecting adds? Tone AudioParam sum? Tone.ADSR output maybe 0, gain.gain.value 0.0001, so initial audible hum? Need set gain.gain.value = 0.00001. ADSR output at rest 0, param value 0.00001. Good. On triggerAttack, ADSR output goes to velocity. Gain is sum? Tone AudioParam sum of scheduled values? Need maybe if no gain set, output 0. Good.

Need maybe Tone.ADSR output may be 0 at rest, but gain.gain.value = 0.00001, slight. Fine.

Need maybe oscillator start and adsr trigger. Good.

Potential issue: Tone.Oscillator.stop(stopTime) if stopTime < now due to now. Fine.

Need maybe "Tone.ADSR" release property maybe yes. But if not, not use. Use const RELEASE = 0.75. Good.

Need maybe "Tone.Gain({gain: 0.00001})" property name? Tone.Gain options maybe gain: 1. Good.

Need maybe "Tone.Filter({type:'lowpass', frequency: 3200, Q: 0.9})" In Tone, Q option maybe q not Q? Tone.Filter options include frequency, Q, gain? Tone.Filter has Q. Good.

Need maybe "Tone.StereoPanner({ pan: pan })" In Tone, StereoPanner options pan. Good.

Need maybe "Tone.Destination" exists. Good.

Need maybe "Tone.context.state" can be 'closed'? If closed, resume error. Fine.

Need maybe "Tone.context.resume()" is not a function? In Tone, Tone.context is AudioContext, resume method. Good.

Need maybe "Tone.start()" not necessary. But maybe Tone.Transport? no.

Need maybe "playable piano keyboard" maybe should include "two octave piano". Good.

Need maybe "ADSR envelope" actual controls. Could maybe include controls to adjust ADSR? Not required. But maybe nice to show. The user didn't ask controls. Need keep concise.

Need maybe "visual key feedback" with active class. Good.

Need maybe "mouse and computer keys" yes.

Need maybe "End with index.html present" final mention. Need maybe no extra files. We only create index.html. Good.

Need write file.

Need review file for issues. I see whiteNotes.forEach innerHTML uses whiteNotes.indexOf(note) inside loop; indexOf by object reference returns current index? In JS indexOf uses strict equality, objects unique, so returns index. Fine but inefficient. Better use forEach with index. Also blackLabels length 10, blackNotes in C3-B4 = 10. Good. But topLabels length 10, whiteNotes.filter midi>=60 C4-B4 = 12, topLabels has 10. Oops top row "1234567890" only 10, but C4-B4 has 12 notes. Actually top row has 12 keys C4-D4-E4-F4-G4-A4-B4-C5-D5-E5-F5-G5? Need "1234567890-=" maybe 12. I used 10 and C5/D5/E5 missing labels. That's fine maybe not all white keys labeled. But keyboardMap missing D5-E5? Actually whiteNotes.filter midi>=60: C4..B4 (12) + C5,D5,E5? Wait notes 39-71 includes C3 (39) to B4 (71). WhiteNotes >=60 includes C4 (60) through B4 (71): 12. topLabels 10, missing C5/D5. Fine. But whiteLabels length 12 covers C3-B3. Good.

Potential issue: keyboardMap for blackLabels length 10, blackNotes C3# through B4# = 10. Good.

Potential issue: lostpointercapture event: When pointerup triggers releaseNote, then releaseNote stops oscillator and maybe voice. lostpointercapture event target key? It will release again, no voice. Fine. But pointer capture lost after pointerup may fire after pointerup. Good.

Potential issue: Tone.ADSR release property not used. Good.

Potential issue: Tone context state "suspended" if not user gesture. Button click calls initAudio async but doesn't await, okay. startNote awaits. Good.

Potential issue: keyboardMap object topLabels missing. Not fatal.

Potential issue: black key left calculation: black note whiteIndex for C# is 0, left = 5.5/24=22.9%; black key width 6.8%, covers between C and D. Good. For F# whiteIndex 3, left = 3.55/24=14.8%; white key widths 1/24=4.17%, covers between F and G. Good.

Potential issue: CSS .black-key transform active overrides hover. Good.

Potential issue: "Tone.Oscillator" start/stop. Good.

Potential issue: ADSR envelope controlling gain. Need Tone.ADSR output maybe 0 at rest and triggerAttack value. Good.

Potential issue: "filter.frequency.exponentialRampToValueAtTime" can't ramp to <=0, we ensure >700. Good.

Potential issue: "Tone.StereoPanner({ pan })" maybe pan should be number not object? Tone options yes.

Potential issue: "Tone.Filter({ Q: 0.9 })" maybe Tone.Filter option is "Q" or "q"? Let's verify? Tone.Filter docs maybe new Tone.Filter(options={}) with options.frequency, Q, gain, type. It uses Tone.createOptions(options, {frequency: 1000, Q: 1, gain: 0, type: "lowpass"}). Good.

Potential issue: "Tone.Gain({ gain: 0.00001 })" yes.

Potential issue: "whiteNotes.forEach((note) => { ... whiteNotes.indexOf(note) })" okay but weird. Could improve. Also blackNotes.indexOf(note). Fine. But not necessary. Could maybe use forEach index to avoid weird. Need maybe update file. Also topLabels should include 12 keys? Let's maybe include top row labels "1234567890-=" to map all 12 C4-E5? Wait notes C3-B4 includes top row C4-B4 (12). Top row keys are 1 2 3 4 5 6 7 8 9 0 - =. So use topLabels = "1234567890-=". Then labels for C4-B4. Good. But the hint currently shows only 1-0, maybe could include - =. Better. Need update.

Need maybe note range C3-B4 maybe two octaves. Good.

Potential issue: In buildKeyboard, blackLabels length 10, blackNotes = 10. Good.

Need maybe if topLabels length 12, labels for all. Good.

Need maybe keyboard map event keys '-' and '='. Good.

Need maybe hint update. Good.

Need maybe "ADSR values" okay.

Need maybe "use NO external resources, CDNs or network requests: load each with script src NAME exact" We do. Good.

Need maybe "End with index.html present." yes.

Need maybe inspect file or run validation. Use maybe node? But no browser. Could run grep. Maybe no syntax errors. But we can run `node --check` on inline script? Need extract? Could use bash with grep? Maybe not. We can use `node --check index.html` not valid. We can maybe use `python` to extract script? But not needed. Could use `node --check` by extracting second script. But better not. We can use `node -e` maybe. Need maybe if syntax issue with backticks? We can run `node --check <(sed...)` not in Node? Simpler use `python` to extract script and `node --check`. But no need maybe. Let's do quick.

Python not available. Could use node to extract.

Maybe regex didn't match because script src? It should. But inline script has `</script>` inside? no. Maybe HTML has `<script src...></script>` and `<script>...`. Regex matches both but doesn't include attributes. For inline, `/<script>([\s\S]*?)<\/script>/g` should match. But code maybe no? Let's inspect.

Regex with `<script>` after attributes didn't match. Need extract.

Maybe script has `<script>\n    (() => {` yes. Why null? Maybe html contains `</script>`? Let's search.

Why regex null? Maybe because there are non-ascii? Let's run better.

Regex anchored at end maybe because after closing there is whitespace? It should. Maybe `</script>` has no? It does. Maybe because `?` lazy and `[\s\S]*?` stops at first `</script>`? There is only one. But maybe HTML parser? Let's not. Use slice.

Syntax ok. Need maybe remove temp files? We created /tmp/ws/inline1.js, inline2.js. User requested build single-page app and write it all into one self-contained file named index.html; "do not create separate .css/.js files" We created temp inline*.js in current directory. Need remove them.

Need maybe edit topLabels and forEach index. Also maybe improve black key label. Let's use edit. Need oldText exact. Could do multiple edits. Need maybe include topLabels = "1234567890-="; hint. Also buildKeyboard. Let's inspect relevant lines.

Need edit.

Need check syntax again.

Need maybe inspect for no temp. Good.

Need maybe consider possible issue with lostpointercapture: For pointerdown on key, releaseNote on lostpointercapture may run after pointerup and release. Fine. But if pointerdown then pointerup outside keyboard? Capture to key, pointerup listener on keyboard? Does pointerup event target key due capture? I think pointerup bubbles to keyboardEl, event.target key, so release. Good. If pointerup on key but not keyboard? yes.

Need maybe issue with pointerleave? Not needed.

Potential issue: "button action" inside body no type? yes type.

Potential issue: "Tone" global in browser. Good.

Potential issue: "ADSR" with `new Tone.ADSR({ ...ADSR });` if Tone.ADSR expects attack/decay/sustain/release. Good.

Potential issue: "filter.frequency.exponentialRampToValueAtTime" scheduled after start. Good.

Potential issue: "Tone.context.state" maybe property can be "closed", not suspended. If closed, resume throws. Fine.

Potential issue: "audioReady" false after context suspended? If user leaves tab, context may suspend, startNote calls initAudio and resume. Good.

Potential issue: If initAudio fails due no user gesture? startNote called from keyboard/mouse so user gesture. Good.

Potential issue: If user clicks Enable audio, button listener calls initAudio but doesn't await. It will set audioReady. Good.

Potential issue: The app uses no external resources except tone.min.js. Good.

Need maybe final answer concise, mention index.html present. Could include paths. Since user asked build, final "Done — created /tmp/ws/index.html". No need to include code. But maybe mention uses Tone.PolySynth? Actually we used custom voices with Tone.Oscillator, Tone.ADSR. Good.

Need maybe maybe "single-page web app" yes.

Before final, maybe maybe run `wc -c index.html`. Not needed.

Need maybe maybe "current directory /tmp/ws" final. Good.

Need ensure no hidden external. We can grep for http.