Wax Developer
WAX Developer
Example index.html file:
<!DOCTYPE html> <html lang=”en”> <head> <metacharset=”UTF-8″/> <metaname=”viewport”content=”width=device-width, initial-scale=1.0″/> <title>Simple Drum Machine with MIDI Support</title> </head> <body> <h1>Simple Drum Machine with MIDI Support</h1> <div> <buttonid=”kickButton”>Kick Drum</button> <buttonid=”snareButton”>Snare Drum</button> <buttonid=”hihatButton”>Hi-Hat</button> </div> <script> // Declare the AudioContext and Master Gain Node globally letaudioContext = null; letmasterGainNode = null; // Initialize AudioContext on user interaction document.body.addEventListener(“click”, () => { if (!audioContext) { audioContext = new (window.AudioContext || window.webkitAudioContext)(); masterGainNode = audioContext.createGain(); masterGainNode.connect(audioContext.destination); // Connect master gain node to the output console.log(“AudioContext initialized”); } // Resume AudioContext if it is suspended if (audioContext.state === “suspended”) { audioContext.resume().then(() => { console.log(“AudioContext resumed”); }); } }); // MIDI Setup functionsetupMIDI() { if (navigator.requestMIDIAccess) { navigator .requestMIDIAccess() .then((midiAccess) => { midiAccess.inputs.forEach((input) => { input.onmidimessage = handleMIDIMessage; }); }) .catch((error) => { console.error(“MIDI access failed”, error); }); } else { console.error(“Web MIDI API not supported in this browser.”); } } // Handle MIDI Messages functionhandleMIDIMessage(event) { const [command, note, velocity] = event.data; if (command === 144 && velocity > 0) { // Note On event // Map MIDI note numbers to drum sounds switch (note) { case36: // MIDI note 36 is commonly used for Kick drum playKick(); break; case38: // MIDI note 38 is commonly used for Snare drum playSnare(); break; case42: // MIDI note 42 is commonly used for Hi-Hat playHiHat(); break; default: console.log(`Unmapped note: ${note}`); break; } } else if (command === 128 || (command === 144 && velocity === 0)) { // Note Off event // Handle note off if necessary (for example, stop the sound immediately) console.log(`Note off: ${note}`); } } // Function to play a kick drum sound functionplayKick() { constoscillator = audioContext.createOscillator(); constgainNode = audioContext.createGain(); oscillator.type = “sine”; // Sine wave for the kick drum oscillator.frequency.setValueAtTime(150, audioContext.currentTime); // Low frequency for the kick drum oscillator.connect(gainNode); gainNode.connect(masterGainNode); // Connect to master gain node gainNode.gain.setValueAtTime(1, audioContext.currentTime); gainNode.gain.exponentialRampToValueAtTime( 0.001, audioContext.currentTime + 0.2 ); // Quick decay oscillator.start(); oscillator.stop(audioContext.currentTime + 0.2); // Stop after 200ms } // Function to play a snare drum sound functionplaySnare() { constnoise = audioContext.createBufferSource(); constbufferSize = audioContext.sampleRate * 2; constnoiseBuffer = audioContext.createBuffer( 1, bufferSize, audioContext.sampleRate ); constoutput = noiseBuffer.getChannelData(0); // Generate white noise for (leti = 0; i < bufferSize; i++) { output[i] = Math.random() * 2 – 1; } noise.buffer = noiseBuffer; constgainNode = audioContext.createGain(); noise.connect(gainNode); gainNode.connect(masterGainNode); // Connect to master gain node gainNode.gain.setValueAtTime(0.5, audioContext.currentTime); gainNode.gain.exponentialRampToValueAtTime( 0.001, audioContext.currentTime + 0.1 ); // Quick decay noise.start(); noise.stop(audioContext.currentTime + 0.1); // Stop after 100ms } // Function to play a hi-hat sound functionplayHiHat() { constoscillator = audioContext.createOscillator(); constgainNode = audioContext.createGain(); oscillator.type = “sine”; // Sine wave for the hi-hat oscillator.frequency.setValueAtTime(1000, audioContext.currentTime); // High frequency for the hi-hat oscillator.connect(gainNode); gainNode.connect(masterGainNode); // Connect to master gain node gainNode.gain.setValueAtTime(0.7, audioContext.currentTime); gainNode.gain.exponentialRampToValueAtTime( 0.001, audioContext.currentTime + 0.05 ); // Quick decay oscillator.start(); oscillator.stop(audioContext.currentTime + 0.05); // Stop after 50ms } // Event listeners for drum buttons document.getElementById(“kickButton”).addEventListener(“click”, playKick); document .getElementById(“snareButton”) .addEventListener(“click”, playSnare); document .getElementById(“hihatButton”) .addEventListener(“click”, playHiHat); // Set up MIDI input setupMIDI(); </script> </body> </html>
