WebDrum

A WebAudio drum synthesizer.

Installation

WebDrum requires WebNoise and WebAHDSR, which are included in this repository.
Include src/web-noise.js, src/web-ahdsr.js and src/web-drum.js in your HTML document:

<script type="text/javascript" src="<path-to-web-noise>/src/web-noise.js"></script>
<script type="text/javascript" src="<path-to-web-noise>/src/web-ahdsr.js"></script>
<script type="text/javascript" src="<path-to-web-noise>/src/web-drum.js"></script>

Usage:

WebDrum requires an AudioContext:

// Create an AudioContext:
var context = null;
if (typeof window.AudioContext != 'undefined') {
	context = new AudioContext();
} else if (typeof window.webkitAudioContext != 'undefined') {
	context = new webkitAudioContext();
}

if (!context) {
	console.log('Web Audio API is not supported.');
	return;
}

// Create a WebDrum instance and call connect() to connect it to context.destination:
var drum = new WebDrum(context);
drum.connect();

If you don't want to connect a WebDrum instance directly to its context.destination, you can pass another AudioNode object to connect(). For example, connect a lowpass filter between a WebDrum and context.destination:

// Create a lowpass filter:
var filter = context.createBiquadFilter();
filter.type = 'lowpass';
filter.frequency.value = 1000.0;

// Connect WebDrum to the filter, then connect the filter to context.destination:
drum.connect(filter);
filter.connect(context.destination);

Call disconnect() to disconnect a WebDrum instance from whatever node it is currently connected to:

drum.disconnect();

Call trigger() to play the drum:

drum.trigger();

Sound Configuration:

A WebDrum instance consists of two signal chains:

• A tone oscillator with pitch, filter frequency and amplitude modulation via AHDSR envelopes.
• A noise generator with filter frequency and amplitude modulation via AHDSR envelopes.

The tone chain consists of the following objects:

• drum.tone - OscillatorNode
• drum.toneAmp - GainNode
• drum.toneFilter - BiquadFilterNode
• drum.tonePitchEnv - WebAHDSR
• drum.toneAmpEnv - WebAHDSR
• drum.toneFilterEnv - WebAHDSR

The noise chain consists of the following objects:

• drum.noise - WebNoise
• drum.noiseAmp - GainNode
• drum.noiseFilter - BiquadFilterNode
• drum.noiseAmpEnv - WebAHDSR
• drum.noiseFilterEnv - WebAHDSR

The tone and noise chains are joined by the mix object, which is a GainNode:

// Set the overall level:
drum.mix.gain.value = 0.5;

View /demo/index.html for example configurations for common drum sounds.

License:

WebDrum is made available under the MIT License. See LICENSE.txt for details.

Credits:

WebDrum was created by Tony Wallace.