Audio and Music
Here’s a collection of some of my musical projects from over the years.
Audio Programming
I’ve always loved making music, and when I learned to program as an adult I was excited to find a way to combine the two. Luckily, the Web Audio API came along and my dreams came true.
Sine
As I learned the Web Audio API I realized that the API was way too low level to be usable for everyday use. I created this library as a way to raise the level of abstraction, making it easier to create audio nodes and combine them together, and adding a clock and scheduler that make it possible to interactively schedule sounds.
When I was writing my book I decided to opt for the more popular Tone.js library for my music chapter, as it basically does everything Sine does and more, but I’m still pleased with how Sine came out, and have used it for all my personal audio projects since I wrote it.
Sine on Github
September
This has got to be one of my favorite things I’ve made. It started off as an experiment in making music with the Web Audio API. I wanted to make an entire song using the Audio API and my Sine library. I found an a cappella version of Earth, Wind & Fire’s September and set out to make my own cover in September 2016.
The song uses samples from Le Freak by Chic, Cissy Strut by the Meters, and a set of woodwind Mellotron samples.
I was experimenting with different ways of declaratively writing music in JavaScript. For example, the code for “Cissy Beat” (a drum beat made from chopping up parts of Cissy Strut) looks like this:
patterns = [
["H H H H H H H Hh", "H H H H H H H Hh", "H H H H H H H Hh", "H H H H H H H Hh"],
["k S k k S s", "k S k k S k", "k S sk k S ", "k S k k S Sk"],
["j j j ", "j j j ", "j j j ", "j j j "]
];
Here, H
denotes a hihat sample, h
is the same sample but with a lower gain,
S
is a snare hit, and k
and j
are both kick hits. Each string represents a
bar of music, and the three patterns are played at once.
Meanwhile, the Mellotron part looks like this:
// | | | | | | | | | | | | | | | | |
versePattern = "A-----B-C---D---A---B---C-----D-A-----B-C---D---A---B---C-------"
chorusPattern = "E---F---G---H-I-"
where each letter maps to a different three note chord, and bars are just four characters (as shown by the pipes in the comment). Sidenote: I absolutely love the Mellotron part in this track. Sometimes I’ll just solo that part and listen to it.
I ended up using these techniques again for the music project in JavaScript Crash Course.
Listen to September
Read the Code
Chord Machine
This is a little musical toy I made. It takes a chord sequence and randomly plays notes from those chords across several octaves. The range of octaves, how many notes to play at once, and how often to play them are all configurable. You can switch between a harmonic synth with a couple of controls that affect its timbre and an FM Synth with more controls, and you can configure the ADSR envelope of the chosen synth. Finally, everything goes through an FX chain with distortion, delay, reverb, and a low-pass filter, all of which are configurable again, of course.
The four chord sequences are:
- Hotel California by the Eagles
- Wicked Game by Chris Isaak
- Folia, a renaissance/baroque chord progression
- Pachelbel’s Canon
Play with Chord Machine
Read the code
Menagerie
This is another musical toy I made, this time to showcase a Mellotron keyboard and a pad-based sampler, with a bunch of preset effects over the top of everything. The sampler works pretty well - you can click to select a spot in the audio file and fine-tune the parameters above. All the notes can be triggered by the keyboard so you can just jam out. It’s not useful but it’s fun and was a good showcase for my Sine library.
Play with Menagerie
Read the code
SHA Sounds
Since I was at university and first learned to make audio with code in Matlab, I’ve been obsessed with the idea of computer-generated music. The idea behind SHA sounds was to create a unique piece of music per git SHA. Each character in the SHA could be used to modify some aspect of the generation, such as the scale, the rhythm, the effects, etc. The configuration looks like this:
return {
sha: sha,
scaleName: scale.name,
scale: scale.scale,
tune,
rhythm,
transposes,
distortion,
delayAmount,
delayTime,
delayDistortion
};
I never completed the project - I only ended up using the first 20 characters from the 40 character SHA. Some of the “music” it generates is kinda interesting, and some is plain awful! Still, it was a fun project and an area I’d love to explore more in the future.
Play SHA Sounds
Read the code
Web Audio Talk
In 2015 I gave a talk at WaffleJS in San Francisco on using the Web Audio API to make music. I recreated the start of Cissy, So What, Superstition, Papa, Chameleon (mentioned below) to showcase some techniques for making sample-based music in JavaScript. Interactive slides here!
Cissy Video
While creating the talk above I got inspired and made a JavaScript video for Cissy, So What, Superstition, Papa, Chameleon out of cat gifs. It’s completely ridiculous and doesn’t work on phones but I kind of love it.
Watch Cissy Video
Tonegame
When I was first messing about with the Web Audio API I made this little game. The idea is that you have to figure out which notes make up the chord that’s being played. Each level of the game has a different set of active notes, and as it gets harder the notes get more and more dissonant. I tried to make the UI as intuitive and simple as possible, and not to presume any music knowledge.
Play Tonegame
Soundcloud
I used to make music all the time. I’ve put almost everything up on Soundcloud. These are some of my favorites.
Cissy, So What, Superstition, Papa, Chameleon
This came about from experimenting with trackers, specifically Renoise. I loved how easy it was to slice and dice samples. This track is made entirely from samples from some of my favorite jazz and funk songs: Cissy Strut by the Meters, So What by Miles Davis, Superstition by Stevie Wonder, Papa Was a Rollin’ Stone by The Temptations, and Chameleon by Herbie Hancock.
Boom
I was working for a music editing company at this time and needed to find some samples on Freesound for some project or other. One of them was this Boom sound, which I ended up making a song around. My favorite part is when the heavily effected strings slowly crossfade to their uneffected versions, revealing that they were Mellotron samples all along. I played bass on this.
Bassoon
This one has a couple of samples from The Mighty Boosh (the “bassoon” bit, and the bubbling that lasts throughout the whole song). I really love the drums on this track.
Distortion and random chords
This is based around modem sounds and a snippet of a random chord generator I wrote in Matlab while doing my degree in Music & Sound Recording. It all goes a bit haywire at the end, with a lot of help from iZotope Trash.
Noise, distortion, and other sounds mix
This is a mix I made of a bunch of songs I wrote while at university. I really like a lot of stuff in here. The bit that makes me smile the most is where Distortion and random chords has its big meltdown (32:10) as mentioned above, and abruptly ends and goes into the super chill Not a care in the world.
I also really like My robot loves the summer (8:00) which has a two part harmony bass line, panned between the left and right channels.
The individual songs are available as a set here.
To the end
I wrote this one much earlier, when I was 16-ish. I loved the kind of lead guitar sound I got with distortion/delay/tremolo (I think it was just a simple sine wave before all that), and the drum/percussion parts are fun.