Platform
Resources
Pricing
Sign in
Get started
Dan Brickley
broken account, please ignore - migrating
Workspace
Fork
Published
By
Dan Brickley
Edited
Sep 18, 2021
Fork of
Coding with Music
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.
Try it for free
Learn more
Compare fork
Fork
View
Export
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
config
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
beat
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
hihatConfig
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
hihat
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
s1
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
n1
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
s2
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
s3
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
s4
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
norm
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Tone
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
cMajorScale
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Vex
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
renderNotes
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
renderScale
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
convertBpmToMspb
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
convertBpmToSpb
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
getSynth
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
oneBeatSecs
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
hihatUrl
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
hiHatEn
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML