Published
Edited
Sep 18, 2021
4 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
hihat = new Tone.Player (hihatUrl).toMaster();
Insert cell
Insert cell
{
// use a mutable to avoid re-executing when they modify the volume
if (mutable hiHatEn) {
if (beat % 2 == 1) hihat.restart()
}
}
Insert cell
Insert cell
s1 = getSynth(new Tone.Synth())
Insert cell
Insert cell
n1 = Tone.Frequency("C4").harmonize([0, 4, 7, 11])
Insert cell
Insert cell
{
beat;
s1.triggerAttackRelease(n1[Math.floor(Math.random()*n1.length)], oneBeatSecs/2);
}
Insert cell
Insert cell
s2 = getSynth(new Tone.Synth(), 7)
Insert cell
Insert cell
{
if (beat == 0) {
s2.triggerAttackRelease('E3', oneBeatSecs*2);
} else if (beat == 3) {
s2.triggerAttackRelease('C3', oneBeatSecs*2);
} else if (beat == 6) {
s2.triggerAttackRelease('A2', oneBeatSecs*2);
}
}
Insert cell
s3 = getSynth(new Tone.FMSynth(), 2)
Insert cell
md`For s3 we will play a C2 for 4 beats and then a G1 for 4 beats`
Insert cell
{
if (beat == 0) {
s3.triggerAttackRelease('C2', oneBeatSecs*4);
}
if (beat == 4) {
s3.triggerAttackRelease('G1', oneBeatSecs*4);
}
}
Insert cell
s4 = getSynth(new Tone.FMSynth, -2)
Insert cell
{
if (beat == 1) {
s4.triggerAttackRelease('A4', oneBeatSecs);
} else if (beat == 3) {
s4.triggerAttackRelease('G4', oneBeatSecs*2);
}
}
Insert cell
import {form} from '@mbostock/form-input'
Insert cell
renderScale('Eb')
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
convertBpmToSpb = (bpm)=> {
return convertBpmToMspb(bpm) / 1000;
}
Insert cell
getSynth = (synthType, volume=1) => {
const synth = synthType.toMaster();
invalidation.then(() => synth.dispose());
synth.volume.value = volume;
return synth;
}
Insert cell
oneBeatSecs = convertBpmToSpb(config.bpm)
Insert cell
hihatUrl = 'https://raw.githubusercontent.com/ArunMichaelDsouza/javascript-30-course/master/src/01-javascript-drum-kit/sounds/hihat-close.wav'
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more