Drum machine · deepseek-chat
Build a 16-step drum machine with a clickable grid for kick, snare, hi-hat, and clap, all sounds synthesized with the Web Audio API, plus play/stop and an adjustable BPM.
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
Build a 16-step drum machine with a clickable grid for kick, snare, hi-hat, and clap, all sounds synthesized with the Web Audio API, plus play/stop and an adjustable BPM.
Here’s the complete `index.html` file for a self-contained 16-step drum machine with synthesized sounds for kick, snare, hi-hat, and clap, featuring a clickable grid, play/stop controls, and adjustable BPM: html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>16-Step Drum Machine</title> <style> body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background: #f0f0f0; } .drum-machine { background: #ffffff; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); padding: 20px; width: 400px; } h1 { text-align: center; margin-top: 0; color: #333; } .controls { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .bpm-control { display: flex; align-items: center; } .bpm-control input { width: 60px; margin-left: 10px; } button { background: #4CAF50; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-size: 16px; } button:hover { background: #45a049; } .grid { display: grid; grid-template-columns: repeat(16, 1fr); gap: 5px; margin-bottom: 20px; } .cell { width: 20px; height: 50px; background: #ddd; border-radius: 3px; cursor: pointer; } .cell.active { background: #4CAF50; } .instrument-label { font-weight: bold; margin-right: 10px; } .instrument-row { display: flex; align-items: center; margin-bottom: 10px; } </style> </head> <body> <div class="drum-machine"> <h1>16-Step Drum Machine</h1> <div class="controls"> <button id="playButton">Play</button> <div class="bpm-control"> <span>BPM:</span> <input type="number" id="bpmInput" min="40" max="200" value="120"> </div> </div> <div id="drumGrid"></div> </div> <script> document.addEventListener('DOMContentLoaded', () => { const audioContext = new (window.AudioContext || window.webkitAudioContext)(); const playButton = document.getElementById('playButton'); const bpmInput = document.getElementById('bpmInput'); const drumGrid = document.getElementById('drumGrid'); let isPlaying = false; let tempo = 120; let stepInterval; let currentStep = 0; let gridData = { kick: Array(16).fill(false), snare: Array(16).fill(false), hihat: Array(16).fill(false), clap: Array(16).fill(false) }; // Initialize grid UI function initGrid() { drumGrid.innerHTML = ''; const instruments = ['kick', 'snare', 'hihat', 'clap']; instruments.forEach(instrument => { const row = document.createElement('div'); row.className = 'instrument-row'; const label = document.createElement('span'); label.className = 'instrument-label'; label.textContent = `${instrument}:`; row.appendChild(label); const grid = document.createElement('div'); grid.className = 'grid'; for (let i = 0; i < 16; i++) { const cell = document.createElement('div'); cell.className = 'cell'; cell.dataset.instrument = instrument; cell.dataset.step = i; cell.addEventListener('click', () => { gridData[instrument][i] = !gridData[instrument][i]; cell.classList.toggle('active', gridData[instrument][i]); }); grid.appendChild(cell); } row.appendChild(grid); drumGrid.appendChild(row); }); } // Generate drum sounds function playKick() { const oscillator = audioContext.createOscillator(); const gain = audioContext.createGain(); oscillator.type = 'sine'; oscillator.frequency.value = 100; gain.gain.value = 1; gain.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.5); oscillator.connect(gain); gain.connect(audioContext.destination); oscillator.start(); oscillator.stop(audioContext.currentTime + 0.5); } function playSnare() { const noise = audioContext.createBufferSource(); const buffer = audioContext.createBuffer(1, 44100 * 0.2, 44100); const data = buffer.getChannelData(0); for (let i = 0; i < data.length; i++) { data[i] = Math.random() * 2 - 1; } const noiseGain = audioContext.createGain(); noiseGain.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.2); noise.buffer = buffer; noise.connect(noiseGain); noiseGain.connect(audioContext.destination); noise.start(); const oscillator = audioContext.createOscillator(); const oscillatorGain = audioContext.createGain(); oscillator.type = 'sine'; oscillator.frequency.value = 200; oscillatorGain.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.1); oscillator.connect(oscillatorGain); oscillatorGain.connect(audioContext.destination); oscillator.start(); oscillator.stop(audioContext.currentTime + 0.1); } function playHihat() { const bufferSize = 2 * audioContext.sampleRate; const noiseBuffer = audioContext.createBuffer(1, bufferSize, audioContext.sampleRate); const output = noiseBuffer.getChannelData(0); for (let i = 0; i < bufferSize; i++) { output[i] = Math.random() * 2 - 1; } const filter = audioContext.createBiquadFilter(); filter.type = "highpass"; filter.frequency.value = 7000; const noise = audioContext.createBufferSource(); noise.buffer = noiseBuffer; noise.connect(filter); const noiseGain = audioContext.createGain(); noiseGain.gain.setValueAtTime(1, audioContext.currentTime); noiseGain.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.1); filter.connect(noiseGain); noiseGain.connect(audioContext.destination); noise.start(); noise.stop(audioContext.currentTime + 0.1); } function playClap() { const noise = audioContext.createBufferSource(); const buffer = audioContext.createBuffer(1, 44100 * 0.1, 44100); const data = buffer.getChannelData(0); for (let i = 0; i < data.length; i++) { data[i] = Math.random() * 2 - 1; } const noiseGain = audioContext.createGain(); noiseGain.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.1); noise.buffer = buffer; noise.connect(noiseGain); noiseGain.connect(audioContext.destination); noise.start(); setTimeout(() => { const noise2 = audioContext.createBufferSource(); noise2.buffer = buffer; noise2.connect(noiseGain); noise2.start(); }, 50); } // Sequencer function playStep() { if (gridData.kick[currentStep]) playKick(); if (gridData.snare[currentStep]) playSnare(); if (gridData.hihat[currentStep]) playHihat(); if (gridData.clap[currentStep]) playClap(); currentStep = (currentStep + 1) % 16; } function startSequencer() { if (isPlaying) return; isPlaying = true; playButton.textContent = 'Stop'; const stepLength = 60 / tempo / 4 * 1000; // 16th notes stepInterval = setInterval(() => { playStep(); }, stepLength); } function stopSequencer() { if (!isPlaying) return; isPlaying = false; playButton.textContent = 'Play'; clearInterval(stepInterval); currentStep = 0; } // Event listeners playButton.addEventListener('click', () => { if (isPlaying) stopSequencer(); else startSequencer(); }); bpmInput.addEventListener('input', () => { tempo = parseInt(bpmInput.value) || 120; if (isPlaying) { stopSequencer(); startSequencer(); } }); // Initialize initGrid(); }); </script> </body> </html>
TAKE IT TO CODE
This run produced no artifact — reuse the prompt with a different model or your own pi-agent run.