Irritant Creative

  • June 18, 2015

Introducing WebX0X

WebX0X is a drum synthesizer and sequencer built using the Web Audio API. All sound generation is performed entirely in the browser without the use of samples.

Web Audio promises to bring high performance, low latency audio playback, processing and synthesis to the web. It's an intriguing prospect, since web browsers' audio capabilities have historically been limited to playback of pre-recorded files. Simple playback is important - it's easily the most common way that most people experience digital audio on the web - but without tools to generate and modify sound our creative options are restricted. Web Audio gives us those tools. WebX0X is a demonstration of some of its possibilities.

WebX0X takes its name from the classic drum machines made by Roland in the 1980s, most notably the TR-606, TR-707, TR-808 and TR-909. Like the 606 and 808, WebX0X synthesizes all its sounds using simple oscillators, noise generators, filters and envelope generators (the 909 used a mix of analog synthesis and digital samples, while the later 707 was entirely sample based), and has an integrated step sequencer to control patterns. WebX0X has 4 synthesizers, or ‘voices’. Unlike most classic analog drum machines, WebX0X uses the same algorithm for all voices. Each voice is tuned to resemble a different kind of drum by default (kick, snare, hihat and cowbell), but is also capable of a wide variety of other percussive sounds. This makes WebX0X very flexible.

Voice Architecture

Each voice has two signal paths, Tone and Noise that are combined at the Mix stage.

Tone

The Tone signal path consists of an oscillator, a filter and an amplifier. It can be used to give a sound ‘body’, like the ringing of a snare drum or the booming sound of a kick drum.

Oscillator

  • Waveform: Selects the oscillator's waveform (triangle, sawtooth or square).
  • Initial Pitch: Controls the oscillator's frequency at the onset of a sound.
  • Final Pitch: Controls the oscillator's resting frequency.
  • Pitch Decay: Controls the time it takes to transition from Initial Pitch to Final Pitch.
  • Decay Curve: Selects the curve used by the pitch envelope generator (linear or exponential).

Filter

  • Type: Selects the filter's algorithm (lowpass, highpass or bandpass).
  • Initial Cutoff: Controls the filter's cutoff frequency at the onset of a sound.
  • Final Cutoff: Controls the filter's resting cutoff frequency.
  • Cutoff Decay: Controls the time it takes to transition from Initial Cutoff to Final Cutoff.
  • Q: Controls the filter's resonance or bandwidth.
  • Decay Curve: Selects the curve used by the filter cutoff envelope generator (linear or exponential).

Amp

  • Level: Controls the tone's volume at the onset of a sound.
  • Decay: Controls the time it takes to transition from Level to silence. This determines the perceived length of the tone.
  • Decay Curve: Controls the curve used by the amp envelope generator (linear or exponential).

Noise

The Noise signal path consists of a noise generator, a filter and an amplifier. It can be used to give a sound ‘snap’, like the snares on a snare drum or the attack of a kick drum. It is also the main component of hihat and cymbal sounds.

Oscillator

  • Color: Controls the quality of the noise source. Lower settings generate a more stable, ‘pure’ sound. Higher settings reduce fidelity.

Filter

  • Similar to the Tone Filter section.

Amp

  • Similar to the Tone Amp section.

Mix

  • Level: Controls the voice's overall volume.
  • Mute: Mutes or unmutes the voice.

Sequencer

Each voice has a 32 step sequencer. Each step represents one sixteenth note. Turn steps on or off by clicking them. The voice will play when the sequencer's playback position reaches a step that is on (highlighted).

All four sequencers are synced and controlled by the global transport buttons (Play/Pause and Stop) and tempo input.

Browser Compatibility

WebX0X supports recent versions of Chrome, Firefox and Safari on desktop (Chrome works best). It has also been tested in Mobile Safari (iOS 8).

Feedback

I would love to know what you think of WebX0X! Tweet me your comments and questions.