Drumkit

by Ben Gillbanks

JavaScript

// Step 1: Set up the Audio Context
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
let noiseSource;

// Step 2: Create an Audio Buffer
function createDrumSound() {
	const sampleRate = audioContext.sampleRate;
	const bufferSize = sampleRate * 1; // 1 second buffer
	const buffer = audioContext.createBuffer(1, bufferSize, sampleRate);
	const data = buffer.getChannelData(0);

	// Step 3: Generate Noise and Decay
	for (let i = 0; i < bufferSize; i++) {
		data[i] = (Math.random() * 2 - 1) * Math.exp(-i / (bufferSize / 10)); // Exponential decay
	}

	// Apply a lowpass filter to make it sound more like a drum
	noiseSource = audioContext.createBufferSource();
	noiseSource.buffer = buffer;

	const filter = audioContext.createBiquadFilter();
	filter.type = 'lowpass';
	filter.frequency.setValueAtTime(150, audioContext.currentTime); // Lowpass filter frequency
    
    // Create a GainNode to control the volume
	const gainNode = audioContext.createGain();
	gainNode.gain.setValueAtTime(10, audioContext.currentTime); // Increase the gain to make it louder


	noiseSource.connect(filter);
    filter.connect(gainNode);
    gainNode.connect(audioContext.destination);
    //gainNode.connect(audioContext.destination);
    
    noiseSource.start();
}

// Call the function to create and play the drum sound
document.addEventListener(
    'click',
    () => {
    createDrumSound();
    }
);