Piano synth · deepseek-chat
Using the pre-provided tone.min.js (global Tone), build a playable piano keyboard controlled by mouse and computer keys that synthesizes notes with an ADSR envelope and visual key feedback.
This one-shot run produced no runnable artifact.
agent produced no index.html
The transcript below shows what the model did — read it to see why the one shot fell short.
transcript · 2 messages
Using the pre-provided tone.min.js (global Tone), build a playable piano keyboard controlled by mouse and computer keys that synthesizes notes with an ADSR envelope and visual key feedback.
Here’s the complete `index.html` file with a playable piano keyboard using `tone.min.js`. The piano includes: 1. Visual keyboard with mouse control. 2. Computer key bindings for playing notes. 3. ADSR envelope for sound shaping. 4. Visual feedback for pressed keys. html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Piano with Tone.js</title> <style> body { margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f0f0; font-family: Arial, sans-serif; } .piano { display: flex; position: relative; } .key { border: 1px solid #000; box-sizing: border-box; cursor: pointer; } .white-key { width: 50px; height: 200px; background: #fff; z-index: 1; } .black-key { width: 30px; height: 120px; background: #000; position: absolute; margin-left: -15px; z-index: 2; } .active { background: #4CAF50; } </style> </head> <body> <div class="piano" id="piano"></div> <script src="tone.min.js"></script> <script> document.addEventListener('DOMContentLoaded', () => { const piano = document.getElementById('piano'); const keys = [ { note: 'C4', type: 'white', key: 'a' }, { note: 'C#4', type: 'black', key: 'w' }, { note: 'D4', type: 'white', key: 's' }, { note: 'D#4', type: 'black', key: 'e' }, { note: 'E4', type: 'white', key: 'd' }, { note: 'F4', type: 'white', key: 'f' }, { note: 'F#4', type: 'black', key: 't' }, { note: 'G4', type: 'white', key: 'g' }, { note: 'G#4', type: 'black', key: 'y' }, { note: 'A4', type: 'white', key: 'h' }, { note: 'A#4', type: 'black', key: 'u' }, { note: 'B4', type: 'white', key: 'j' }, { note: 'C5', type: 'white', key: 'k' }, ]; const synth = new Tone.PolySynth(Tone.Synth).toDestination(); synth.set({ envelope: { attack: 0.02, decay: 0.1, sustain: 0.3, release: 0.4, }, }); keys.forEach((key, index) => { const keyElement = document.createElement('div'); keyElement.className = `key ${key.type}-key`; keyElement.dataset.note = key.note; keyElement.dataset.type = key.type; if (key.type === 'white') { keyElement.style.left = `${index * 50}px`; } else { keyElement.style.left = `${index * 50 - 15}px`; } piano.appendChild(keyElement); // Mouse events keyElement.addEventListener('mousedown', () => playNote(key.note, keyElement)); keyElement.addEventListener('mouseup', () => stopNote(key.note, keyElement)); keyElement.addEventListener('mouseleave', () => { if (keyElement.classList.contains('active')) { stopNote(key.note, keyElement); } }); }); // Keyboard events document.addEventListener('keydown', (e) => { const key = keys.find(k => k.key === e.key); if (key) { const keyElement = document.querySelector(`[data-note="${key.note}"]`); if (!keyElement.classList.contains('active')) { playNote(key.note, keyElement); } } }); document.addEventListener('keyup', (e) => { const key = keys.find(k => k.key === e.key); if (key) { const keyElement = document.querySelector(`[data-note="${key.note}"]`); stopNote(key.note, keyElement); } }); function playNote(note, element) { element.classList.add('active'); synth.triggerAttack(note, Tone.now()); } function stopNote(note, element) { element.classList.remove('active'); synth.triggerRelease(note, Tone.now()); } }); </script> </body> </html> ### Features: - **Visual Keyboard**: White and black keys with proper styling. - **Mouse Control**: Click or hold keys to play notes. - **Keyboard Control**: Use keys like `a`, `s`, `d`, etc., for white keys and `w`, `e`, etc., for black keys. - **ADSR Envelope**: Configured for a natural piano sound. - **Visual Feedback**: Keys light up (`green`) when pressed.
TAKE IT TO CODE
This run produced no artifact — reuse the prompt with a different model or your own pi-agent run.