This document describes how to build a simple drum machine using React and the Web Audio API. It discusses: 1. Initializing state in React to track the pattern, current step, and playback status. 2. Rendering the state values. 3. Using the Web Audio API for precise audio timing by initializing an AudioContext and WAAClock on mount. 4. Implementing play/stop logic by starting/stopping the clock and scheduling the tick callback. 5. Advancing the step and triggering sounds on each tick via the deadline parameter.

1. Sequencing Audio Using
React and the Web Audio API
Roland TR-808
@vincentriemer

2. Roland TR-808

5. Lets Build a Simple Drum
Machine

7. function trigger(context, deadline) {
const oscillator = context.createOscillator();
const amplifier = context.createGain();
oscillator.frequency.setValueAtTime(200, deadline);
amplifier.gain.setValueAtTime(0, deadline)
oscillator.frequency.linearRampToValueAtTime( 50, deadline + 0.15);
amplifier.gain.linearRampToValueAtTime(1, deadline + 0.02);
amplifier.gain.linearRampToValueAtTime(0, deadline + 0.2);
oscillator.connect(amplifier);
amplifier.connect(context.destination);
oscillator.start(deadline);
setTimeout(() => {
amplifier.disconnect();
}, 3000);
}
componentDidMount() {
this.context = new AudioContext();
this.clock = new waaclock(this.context);
}
handleTick({ deadline }) {
const { currentStep, steps } = this.state;
const newCurrentStep = currentStep + 1;
if (steps[newCurrentStep % steps.length]) {
trigger(this.context, deadline);
}
this.setState({ currentStep: newCurrentStep });
}
handlePlayPress() {
if (this.state.playing) {
// stop
this.setState(
{ playing: false },
() => {
this.clock.stop();
this.tickEvent = null;
}
);
} else {
//play
this.setState({
currentStep: -1,
playing: true
}, () => {
this.clock.start();
this.tickEvent = this.clock.callbackAtTime(
this.handleTick.bind(this),
this.context.currentTime
).repeat(0.47);
});
}
}
render() {
const { currentStep, playing, steps } = this.state;
return (
<div className="sequencer-wrapper">
<div className="step-display">
{`Current Step: ${currentStep % steps.length}`}
</div>
<button
className="play-button"
onClick={() => this.handlePlayPress()}
>
{playing ? 'Stop' : 'Play'}
</button>
</div>
);
}
}
ReactDOM.render(
<DrumMachine />,
document.getElementById(‘root')
);
class DrumMachine extends React.Component {
Lets Start With State
• Pattern
• Current step in the pattern
• Is the drum machine currently
playing

8. function trigger(context, deadline) {
const oscillator = context.createOscillator();
const amplifier = context.createGain();
oscillator.frequency.setValueAtTime(200, deadline);
amplifier.gain.setValueAtTime(0, deadline)
oscillator.frequency.linearRampToValueAtTime( 50, deadline + 0.15);
amplifier.gain.linearRampToValueAtTime(1, deadline + 0.02);
amplifier.gain.linearRampToValueAtTime(0, deadline + 0.2);
oscillator.connect(amplifier);
amplifier.connect(context.destination);
oscillator.start(deadline);
setTimeout(() => {
amplifier.disconnect();
}, 3000);
}
componentDidMount() {
this.context = new AudioContext();
this.clock = new waaclock(this.context);
}
handleTick({ deadline }) {
const { currentStep, steps } = this.state;
const newCurrentStep = currentStep + 1;
if (steps[newCurrentStep % steps.length]) {
trigger(this.context, deadline);
}
this.setState({ currentStep: newCurrentStep });
}
handlePlayPress() {
if (this.state.playing) {
// stop
this.setState(
{ playing: false },
() => {
this.clock.stop();
this.tickEvent = null;
}
);
} else {
//play
this.setState({
currentStep: -1,
playing: true
}, () => {
this.clock.start();
this.tickEvent = this.clock.callbackAtTime(
this.handleTick.bind(this),
this.context.currentTime
).repeat(0.47);
});
}
}
render() {
const { currentStep, playing, steps } = this.state;
return (
<div className="sequencer-wrapper">
<div className="step-display">
{`Current Step: ${currentStep % steps.length}`}
</div>
<button
className="play-button"
onClick={() => this.handlePlayPress()}
>
{playing ? 'Stop' : 'Play'}
</button>
</div>
);
}
class DrumMachine extends React.Component {
}
ReactDOM.render(
<DrumMachine />,
document.getElementById(‘root')
);
constructor(props) {
super(props);
this.state = {
steps: [0, 0, 0, 0],
currentStep: 0,
playing: false
};
}
Lets Start With State
• Pattern
• Current step in the pattern
• Is the drum machine currently
playing

9. }
ReactDOM.render(
currentStep: 0,
playing: false
};
} Rendering the State
render() {
const { currentStep, playing, steps } = this.state;
return (
<div className="sequencer-wrapper">
<div className="step-display">
{`Current Step: ${currentStep % steps.length}`}
</div>
<button
className="play-button"
onClick={() => this.handlePlayPress()}
>
{playing ? 'Stop' : 'Play'}
</button>
</div>
);
}

10. function trigger(context, deadline) {
const oscillator = context.createOscillator();
const amplifier = context.createGain();
oscillator.frequency.setValueAtTime(200, deadline);
amplifier.gain.setValueAtTime(0, deadline)
oscillator.frequency.linearRampToValueAtTime( 50, deadline + 0.15);
amplifier.gain.linearRampToValueAtTime(1, deadline + 0.02);
amplifier.gain.linearRampToValueAtTime(0, deadline + 0.2);
oscillator.connect(amplifier);
amplifier.connect(context.destination);
oscillator.start(deadline);
setTimeout(() => {
amplifier.disconnect();
}, 3000);
}
componentDidMount() {
this.context = new AudioContext();
this.clock = new waaclock(this.context);
}
handleTick({ deadline }) {
const { currentStep, steps } = this.state;
const newCurrentStep = currentStep + 1;
if (steps[newCurrentStep % steps.length]) {
trigger(this.context, deadline);
}
this.setState({ currentStep: newCurrentStep });
}
handlePlayPress() {
if (this.state.playing) {
// stop
this.setState(
{ playing: false },
() => {
this.clock.stop();
this.tickEvent = null;
}
);
} else {
//play
this.setState({
currentStep: -1,
playing: true
}, () => {
this.clock.start();
this.tickEvent = this.clock.callbackAtTime(
this.handleTick.bind(this),
this.context.currentTime
).repeat(0.47);
});
}
}
}
ReactDOM.render(
currentStep: 0,
playing: false
};
}
render() {
const { currentStep, playing, steps } = this.state;
return (
<div className="sequencer-wrapper">
<div className="step-display">
{`Current Step: ${currentStep % steps.length}`}
</div>
<button
className="play-button"
onClick={() => this.handlePlayPress()}
>
{playing ? 'Stop' : 'Play'}
</button>
</div>
);
}
Rendering the State

11. function trigger(context, deadline) {
const oscillator = context.createOscillator();
const amplifier = context.createGain();
oscillator.frequency.setValueAtTime(200, deadline);
amplifier.gain.setValueAtTime(0, deadline)
oscillator.frequency.linearRampToValueAtTime( 50, deadline + 0.15);
amplifier.gain.linearRampToValueAtTime(1, deadline + 0.02);
amplifier.gain.linearRampToValueAtTime(0, deadline + 0.2);
oscillator.connect(amplifier);
amplifier.connect(context.destination);
oscillator.start(deadline);
setTimeout(() => {
amplifier.disconnect();
}, 3000);
}
componentDidMount() {
this.context = new AudioContext();
this.clock = new waaclock(this.context);
}
handleTick({ deadline }) {
const { currentStep, steps } = this.state;
const newCurrentStep = currentStep + 1;
if (steps[newCurrentStep % steps.length]) {
trigger(this.context, deadline);
}
this.setState({ currentStep: newCurrentStep });
}
handlePlayPress() {
if (this.state.playing) {
// stop
this.setState(
{ playing: false },
() => {
this.clock.stop();
this.tickEvent = null;
}
);
} else {
//play
this.setState({
currentStep: -1,
playing: true
}, () => {
this.clock.start();
this.tickEvent = this.clock.callbackAtTime(
this.handleTick.bind(this),
this.context.currentTime
).repeat(0.47);
});
}
}
}
ReactDOM.render(
currentStep: 0,
playing: false
};
}
render() {
const { currentStep, playing, steps } = this.state;
return (
<div className="sequencer-wrapper">
<div className="step-display">
{`Current Step: ${currentStep % steps.length}`}
</div>
<button
className="play-button"
onClick={() => this.handlePlayPress()}
>
{playing ? 'Stop' : 'Play'}
</button>
</div>
);
}
Rendering the State

12. Audio Timing in the Web
…or why setInterval isn’t enough

13. setInterval AudioContext
• Inaccurate
• Gets locked up by other JS
on the main thread
• Extremely accurate
• Runs on dedicated audio
thread
• Can only schedule audio-
related events ahead of
time
Timing Options

14. Audio Events

15. Audio Events
Scheduling

16. Audio Events
Scheduling

17. Audio Events
Scheduling
WAAClock
https://github.com/sebpiq/WAAClock
Tale of Two Clocks
https://www.html5rocks.com/en/tutorials/audio/scheduling/

18. render() {
const { currentStep, playing, steps } = this.state;
return (
<div className="sequencer-wrapper">
<div className="step-display">
{`Current Step: ${currentStep % steps.length}`}
</div>
<button
className="play-button"
class DrumMachine extends React.Component {
constructor(props) {
super(props);
this.state = {
steps: [0, 0, 0, 0, 0, 0, 0, 0],
currentStep: 0,
playing: false
};
}
componentDidMount() {
this.context = new window.AudioContext();
this.clock = new WAAClock(this.context);
}
Web Audio Initialization

19. constructor(props) {
super(props);
this.state = {
steps: [0, 0, 0, 0, 0, 0, 0, 0],
currentStep: 0,
playing: false
};
}
Starting/Stopping the
Clock
} else {
}
}
handlePlayPress() {
if (!this.state.playing) {
render() {
const { currentStep, playing, steps } = this.state;
componentDidMount() {
this.context = new window.AudioContext();
this.clock = new WAAClock(this.context);
}

20. Starting the Clock
this.setState({
currentStep: -1,
playing: true
}, () => {
this.clock.start();
this.tickEvent = this.clock.callbackAtTime(
this.handleTick.bind(this),
this.context.currentTime
).repeat(0.47);
});
} else {
}
}
handlePlayPress() {
if (!this.state.playing) {
steps: [0, 0, 0, 0, 0, 0, 0, 0],
currentStep: 0,
playing: false
};
}
componentDidMount() {
this.context = new window.AudioContext();

21. function trigger(context, deadline) {
const oscillator = context.createOscillator();
const amplifier = context.createGain();
oscillator.frequency.setValueAtTime(200, deadline);
amplifier.gain.setValueAtTime(0, deadline)
oscillator.frequency.linearRampToValueAtTime( 50, deadline + 0.15);
amplifier.gain.linearRampToValueAtTime(1, deadline + 0.02);
amplifier.gain.linearRampToValueAtTime(0, deadline + 0.2);
oscillator.connect(amplifier);
amplifier.connect(context.destination);
oscillator.start(deadline);
setTimeout(() => {
amplifier.disconnect();
}, 3000);
}
handleTick({ deadline }) {
const { currentStep, steps } = this.state;
const newCurrentStep = currentStep + 1;
if (steps[newCurrentStep % steps.length]) {
trigger(this.context, deadline);
}
this.setState({ currentStep: newCurrentStep });
}
Starting the Clock
} else {
}
}
this.setState(
{ playing: false },
() => {
this.clock.stop();
this.tickEvent = null;
}
);
handlePlayPress() {
if (!this.state.playing) {
steps: [0, 0, 0, 0, 0, 0, 0, 0],
currentStep: 0,
playing: false
};
}
componentDidMount() {
this.context = new window.AudioContext();
Start the clock
this.setState({
currentStep: -1,
playing: true
}, () => {
this.clock.start();
this.tickEvent = this.clock.callbackAtTime(
this.handleTick.bind(this),
this.context.currentTime
).repeat(0.47);
});

22. function trigger(context, deadline) {
const oscillator = context.createOscillator();
const amplifier = context.createGain();
oscillator.frequency.setValueAtTime(200, deadline);
amplifier.gain.setValueAtTime(0, deadline)
oscillator.frequency.linearRampToValueAtTime( 50, deadline + 0.15);
amplifier.gain.linearRampToValueAtTime(1, deadline + 0.02);
amplifier.gain.linearRampToValueAtTime(0, deadline + 0.2);
oscillator.connect(amplifier);
amplifier.connect(context.destination);
oscillator.start(deadline);
setTimeout(() => {
amplifier.disconnect();
}, 3000);
}
handleTick({ deadline }) {
const { currentStep, steps } = this.state;
const newCurrentStep = currentStep + 1;
if (steps[newCurrentStep % steps.length]) {
trigger(this.context, deadline);
}
this.setState({ currentStep: newCurrentStep });
}
Starting the Clock
} else {
}
}
this.setState(
{ playing: false },
() => {
this.clock.stop();
this.tickEvent = null;
}
);
handlePlayPress() {
if (!this.state.playing) {
steps: [0, 0, 0, 0, 0, 0, 0, 0],
currentStep: 0,
playing: false
};
}
componentDidMount() {
this.context = new window.AudioContext();
Execute handleTick
callback immediately
this.setState({
currentStep: -1,
playing: true
}, () => {
this.clock.start();
this.tickEvent = this.clock.callbackAtTime(
this.handleTick.bind(this),
this.context.currentTime
).repeat(0.47);
});

23. function trigger(context, deadline) {
const oscillator = context.createOscillator();
const amplifier = context.createGain();
oscillator.frequency.setValueAtTime(200, deadline);
amplifier.gain.setValueAtTime(0, deadline)
oscillator.frequency.linearRampToValueAtTime( 50, deadline + 0.15);
amplifier.gain.linearRampToValueAtTime(1, deadline + 0.02);
amplifier.gain.linearRampToValueAtTime(0, deadline + 0.2);
oscillator.connect(amplifier);
amplifier.connect(context.destination);
oscillator.start(deadline);
setTimeout(() => {
amplifier.disconnect();
}, 3000);
}
handleTick({ deadline }) {
const { currentStep, steps } = this.state;
const newCurrentStep = currentStep + 1;
if (steps[newCurrentStep % steps.length]) {
trigger(this.context, deadline);
}
this.setState({ currentStep: newCurrentStep });
}
Starting the Clock
} else {
}
}
this.setState(
{ playing: false },
() => {
this.clock.stop();
this.tickEvent = null;
}
);
handlePlayPress() {
if (!this.state.playing) {
steps: [0, 0, 0, 0, 0, 0, 0, 0],
currentStep: 0,
playing: false
};
}
componentDidMount() {
this.context = new window.AudioContext();
Repeat callback at a
given interval
(~128bpm)
this.setState({
currentStep: -1,
playing: true
}, () => {
this.clock.start();
this.tickEvent = this.clock.callbackAtTime(
this.handleTick.bind(this),
this.context.currentTime
).repeat(0.47);
});

24. function trigger(context, deadline) {
const oscillator = context.createOscillator();
const amplifier = context.createGain();
oscillator.frequency.setValueAtTime(200, deadline);
amplifier.gain.setValueAtTime(0, deadline)
oscillator.frequency.linearRampToValueAtTime( 50, deadline + 0.15);
amplifier.gain.linearRampToValueAtTime(1, deadline + 0.02);
amplifier.gain.linearRampToValueAtTime(0, deadline + 0.2);
oscillator.connect(amplifier);
amplifier.connect(context.destination);
oscillator.start(deadline);
setTimeout(() => {
amplifier.disconnect();
}, 3000);
}
handleTick({ deadline }) {
const { currentStep, steps } = this.state;
const newCurrentStep = currentStep + 1;
if (steps[newCurrentStep % steps.length]) {
trigger(this.context, deadline);
}
this.setState({ currentStep: newCurrentStep });
}
Stopping the Clock
}, () => {
this.clock.start();
this.tickEvent = this.clock.callbackAtTime(
this.handleTick.bind(this),
this.context.currentTime
).repeat(0.47);
});
} else {
}
}
componentDidMount() {
this.context = new window.AudioContext();
this.clock = new WAAClock(this.context);
}
this.setState(
{ playing: false },
() => {
this.clock.stop();
this.tickEvent.clear();
this.tickEvent = null;
});

25. function trigger(context, deadline) {
const oscillator = context.createOscillator();
const amplifier = context.createGain();
oscillator.frequency.setValueAtTime(200, deadline);
amplifier.gain.setValueAtTime(0, deadline)
oscillator.frequency.linearRampToValueAtTime( 50, deadline + 0.15);
amplifier.gain.linearRampToValueAtTime(1, deadline + 0.02);
amplifier.gain.linearRampToValueAtTime(0, deadline + 0.2);
oscillator.connect(amplifier);
amplifier.connect(context.destination);
oscillator.start(deadline);
setTimeout(() => {
amplifier.disconnect();
}, 3000);
}
handleTick({ deadline }) {
const { currentStep, steps } = this.state;
const newCurrentStep = currentStep + 1;
if (steps[newCurrentStep % steps.length]) {
this.triggerSound(this.context, deadline);
}
this.setState({ currentStep: newCurrentStep });
}
Clock Tick Handler
this.clock.stop();
this.tickEvent.clear();
this.tickEvent = null;
});
}
}
render() {
const { currentStep, playing, steps } = this.state;
componentDidMount() {
this.context = new window.AudioContext();
this.clock = new WAAClock(this.context);
}

26. function trigger(context, deadline) {
const oscillator = context.createOscillator();
const amplifier = context.createGain();
oscillator.frequency.setValueAtTime(200, deadline);
amplifier.gain.setValueAtTime(0, deadline)
oscillator.frequency.linearRampToValueAtTime( 50, deadline + 0.15);
amplifier.gain.linearRampToValueAtTime(1, deadline + 0.02);
amplifier.gain.linearRampToValueAtTime(0, deadline + 0.2);
oscillator.connect(amplifier);
amplifier.connect(context.destination);
oscillator.start(deadline);
setTimeout(() => {
amplifier.disconnect();
}, 3000);
}
handleTick({ deadline }) {
const { currentStep, steps } = this.state;
const newCurrentStep = currentStep + 1;
if (steps[newCurrentStep % steps.length]) {
this.triggerSound(this.context, deadline);
}
this.setState({ currentStep: newCurrentStep });
}
Clock Tick Handler
this.clock.stop();
this.tickEvent.clear();
this.tickEvent = null;
});
}
}
render() {
const { currentStep, playing, steps } = this.state;
componentDidMount() {
this.context = new window.AudioContext();
this.clock = new WAAClock(this.context);
}

27. function trigger(context, deadline) {
const oscillator = context.createOscillator();
const amplifier = context.createGain();
oscillator.frequency.setValueAtTime(200, deadline);
amplifier.gain.setValueAtTime(0, deadline)
oscillator.frequency.linearRampToValueAtTime( 50, deadline + 0.15);
amplifier.gain.linearRampToValueAtTime(1, deadline + 0.02);
amplifier.gain.linearRampToValueAtTime(0, deadline + 0.2);
oscillator.connect(amplifier);
amplifier.connect(context.destination);
oscillator.start(deadline);
setTimeout(() => {
amplifier.disconnect();
}, 3000);
}
handleTick({ deadline }) {
const { currentStep, steps } = this.state;
const newCurrentStep = currentStep + 1;
if (steps[newCurrentStep % steps.length]) {
this.triggerSound(this.context, deadline);
}
this.setState({ currentStep: newCurrentStep });
}
Clock Tick Handler
this.clock.stop();
this.tickEvent.clear();
this.tickEvent = null;
});
}
}
render() {
const { currentStep, playing, steps } = this.state;
componentDidMount() {
this.context = new window.AudioContext();
this.clock = new WAAClock(this.context);
}

28. Basic Bass Drum Synthesis

29. Bass Drum Structure
Oscillator
Ampli!er
Pitch
Modulation
Gain
Modulation

30. Oscillator

31. Oscillator
const oscillator = context.createOscillator();
oscillator.frequency.setValueAtTime(200, deadline);
oscillator.start(deadline);

32. Pitch Modulation

33. Pitch Modulation
oscillator.frequency.linearRampToValueAtTime(
50, // target frequency (50Hz)
deadline + 0.15 // time of ramp (150ms)
);

34. Ampli!er

35. Ampli!er
const amplifier = context.createGain();
oscillator.connect(amplifier);
amplifier.gain.setValueAtTime(0, deadline);

36. Gain Modulation

37. Gain Modulation
amplifier.gain.linearRampToValueAtTime(
1.0, // target gain
deadline + 0.02 // time of ramp (20ms)
);
amplifier.gain.linearRampToValueAtTime(
0.0,
deadline + 0.20
);

38. Sending to Speakers
amplifier.connect(context.destination);

39. Cleanup
setTimeout(() => {
amplifier.disconnect();
}, 3000);

40. Demo

42. • Move React state to Redux
• Use seamless-immutable for Redux store
• Make heavy use of reselect for computed/derived state

43. • 16 steps per pattern
• 16 patterns
• 2 Parts of each pattern
• 2 Variations of each part
• 12 instruments/sounds
• 12,288 total steps!

44. Complex Problems

45. Simple Problems

47. Twitter: @vincentriemer
Site: vincentriemer.com
Demo: codepen.io/vincentriemer/pen/BpbXMo
iO-808: io808.com