JavaScript is a wild place. It feels like there a million different frontend frameworks (btw the reason js was invented in the first place: for stuff in the browser). But times changed and today you can build 3D Worlds, VR experiences, machine-learning models or full video editors in javascript.
Should we really be doing everything in JS? Probably not. Will we? Absolutely yes.
So today we’re looking at a framework that lets you code music. The original idea behind the project is called TidalCycles and is written in Haskell, but I haven’t touched Haskell since my bachelor so let's stick with struddle. To start it it is really convinient, since it is JS based it is no surprise that it runs entirely in your browser. Try it out: https://strudel.cc/
The basics are very easy. Strudel is functional so all you samples and utilities are functions that you call in js. Your code loops automatically, to set the foundation of you song - the tempo - simply use:
setcpm(84) // sets your BPM
To load a basic sample use the s() function. Inside you can define tones like this s(“bd sd hh”).
Here: bd – bass drum, sd – snare, rim – rimshot, hh – hi-hat, oh – open hi-hat, lt / mt / ht – toms, rd – ride cymbal or cr – crash
Depending on your samples pack you maybe have more or less.
Repeat patterns using a multiplication like this:
s("bd*4") // four bass drums on one note
To play a note randomly, just put a ? Behind
To run patterns at the same time:
stack( s("bd sd"), s("hh*4") )
Or via a comma
s("bd sd, ht*4")
Now to add effect to you sample just chain methods like you would do in JS
Example: s("bd*2").gain(0.7).pan(0.2).room(0.3)
Here gain controls the loudness. With pan you set the center of the stereo effect and with room you add a reverb effect.
If you prefer to use notes or frequencies use:
note("a3 c#4 e4 a4") or freq("220 275 330 440")
And if you want Silence, simply use a dash —
You can even visualize you tracks using: note("c a f e").color("white") ._punchcard() .color("cyan")
So if you are now curios and want to dive deeper, then I really recommand the struddle documentation (it's really good) https://strudel.cc/learn
To round this post up here is a small version of Still D.r.e. Have Fun!:
setcpm(84) $: note(` <c5 e5 a5 c5@2 e5 a5 e5 b4 e5 a5 b4@2 e5 g5 e5 c5 e5 a5 c5@2 e5 a5 e5 b4 e5 a5 b4@2 e5 g5 e5 c5 e5 a5 c5@2 e5 a5 e5 b4 e5 a5 b4@2 e5 g5 e5 c5 e5 a5 c5@2 e5 a5 e5 b4 e5 a5 b4@2 e5 g5 e5
[b4,e5,a5]!3 [b4,e5,g5]!5 [c5,e5,a5]!8 [b4,e5,a5]!3 [b4,e5,g5]!5 [c5,e5,a5]!8 [b4,e5,a5]!3 [b4,e5,g5]!5 [c5,e5,a5]!8>
`).sound("piano").fast(2).color("white").punchcard()