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>