Simple 4x4 beat in the browser

Scribbletune can be used to generate beats made from sampled sounds right in your browser

Desktop browser only

As you can imagine, this can easily be done in any DAW but when you do it with JavaScript, you can get a little bit more out of your loops than simply pointing and clicking in a piano roll (which can be time consuming over time for simple beats). I’ll lay down the basics for the beat—you can use your creativity to make the patterns intricate.

We'll have a simple 4x4 kick drum along with a simple bass line, closed hat, open hats and a clap sound.

Since we are going to use sample wav files, we will depend on Scribbletune's clip method which allows us to use patterns. There are two aspects to Scribbletune: one is a Node module for exporting MIDI files, or you can use it directly in the browser, which we'll do here.

Kick

By default a single x implies a quarter note. Four of these make up the common kick drum pattern:

scribble.clip({
  pattern: 'xxxx', // simple 4x4 kick
  sample: 'https://scribbletune.com/sounds/kick.wav'
}).start();

Subdivide

You can subdivide the last hit using square braces. For example `xxx[xx]` splits the 4th hit into two eighth notes:

scribble.clip({
  pattern: 'xxx[xx]',
  sample: 'https://scribbletune.com/sounds/kick.wav'
}).start();

Nest braces for deeper subdivisions: `xxx[x[xx]]`

scribble.clip({
  pattern: 'xxx[x[xx]]',
  sample: 'https://scribbletune.com/sounds/kick.wav'
}).start();

Bass

A common bassline uses a single low note on the third downbeat of a 16-beat bar: `[-x]`

scribble.clip({
  pattern: '[-x]', // bass on every quarter note
  sample: 'https://scribbletune.com/sounds/bass.wav'
}).start();

All together now

Bring in closed hats, open hats and a clap/snare to complete the loop:

// kick
scribble.clip({
  pattern: 'x',
  sample: 'https://scribbletune.com/sounds/kick.wav'
}).start();
 
// bass
scribble.clip({
  pattern: '[-x]',
  sample: 'https://scribbletune.com/sounds/bass.wav'
}).start();
 
// closed hats
scribble.clip({
  pattern: '[xx][xx][xxx][xx]',
  sample: 'https://scribbletune.com/sounds/ch.wav'
}).start();
 
// open hats
scribble.clip({
  pattern: '[-x][-x][-x][xx]',
  sample: 'https://scribbletune.com/sounds/oh.wav'
}).start();
 
// clap/snare
scribble.clip({
  pattern: '-x',
  sample: 'https://scribbletune.com/sounds/snare.wav'
}).start();
 
// start transport
Tone.Transport.bpm.value = 135;
Tone.context.resume().then(() => Tone.Transport.start());