If/when you know, you know.

Lane Garner
4 min readOct 19, 2020

--

Photo by Alfons Morales on Unsplash

Repetition, Eloquent JavaScript for Kids & Web Audio API

One thing that I’ve found incredibly helpful while learning to code is to approach learning content repeatedly and from multiple angles. The more times I revisit a topic, the better it sticks and I may even find a description of a concept that can be paradigm-shifting. For this very reason, I’m starting to work ahead a bit and have even watched some videos on React. I don’t want a concept to be completely foreign when presented to me for the “first time” in class. Likewise, I’m working through beginner JavaScript material for the nth time and some of it is finally beginning to stick. Earlier this year I watched numerous YouTube videos on JS, worked through some material by FreeCodeCamp, Udemy, and even JS boot camp prep from Flatiron school.

When I first started reading Eloquent JavaScript a lot of it was frankly over my head at the time. That said, it has been reassuring to revisit this masterpiece with a more well-informed eye. Concepts are described incredibly clearly even while it may seem somewhat confusing if you aren’t already familiar with the topic. If you know, you know.

To humble myself along with Eloquent JavaScript (and thanks to the suggestion of a classmate) I also picked up JavaScript for Kids. This book doesn’t get into the weeds but does describe the basics of the language in a very straightforward way. While it may have initially been intended for children, the Amazon reviews alone will let you in on the secret that it is a choice read for adults as well. (After purchasing JS for Kids, I even noticed that my paper copy of Eloquent JS happens to recommend the prior in its final pages.) This book is incredibly useful and I’ve already filled a lengthy portion of my Moleskine with notes. The path that led me to JS for Kids also had an exciting detour in the form of a random recommendation in the book: the Web Audio API.

The Web Audio API

This is by far the most exciting thing I’ve found in a very long time. It is essentially a four-voice synthesizer/sequencer with any possibility of effects routing. This is my stuff. I’ve spent countless hours routing effects in DAWs and on my various pedalboards. With my very basic understanding of JavaScript I can already see countless uses for the Web Audio API and even how to implement them.

The MDN documentation states:

The Web Audio API can seem intimidating to those that aren’t familiar with audio or music terms, and as it incorporates a great deal of functionality it can prove difficult to get started if you are a developer.

It can be used to simply incorporate audio into your website or application, by providing atmosphere like futurelibrary.no, or auditory feedback on forms. However, it can also be used to create advanced interactive instruments. With that in mind, it is suitable for both developers and musicians alike.

We have a simple introductory tutorial for those that are familiar with programming but need a good introduction to some of the terms and structure of the API.

There’s also a Basic Concepts Behind Web Audio API article, to help you understand the way digital audio works, specifically in the realm of the API. This also includes a good introduction to some of the concepts the API is built upon.

Learning coding is like playing cards — you learn the rules, then you play, then you go back and learn the rules again, then you play again. So if some of the theory doesn’t quite fit after the first tutorial and article, there’s an advanced tutorial which extends the first one to help you practise what you’ve learnt, and apply some more advanced techniques to build up a step sequencer.

We also have other tutorials and comprehensive reference material available that covers all features of the API. See the sidebar on this page for more.

If you are more familiar with the musical side of things, are familiar with music theory concepts, want to start building instruments, then you can go ahead and start building things with the advance tutorial and others as a guide (the above linked tutorial covers scheduling notes, creating bespoke oscillators and envelopes, as well as an LFO among other things.)

Like before: if you know, you know. These are things that I’m already very familiar with and in many ways, it just makes sense. Similarly, I am still learning JavaScript and this will be an exciting way to use something I already know to help me learn JS. From simple ideas like tuners and metronomes to more robust ideas like interactive/reactive play-alongs, effects design (I have the ultimate octave pedal in my brain), drum machines… the possibilities are endless and only go deeper when you consider linking on additional APIs. The geolocation API could allow a user to change any parameter based on their location. As you walk to one area of your house you could do a filter sweep of a chord and even change the tonality/tambre/chord quality or anything else imaginable. Now link this to an API that allows MIDI integration and suddenly you can control this from an instrument and have it affect anything you play as well. This inspiration will likely shape my capstone project and I’m extremely excited to see where it may lead me.

--

--

Lane Garner
Lane Garner

No responses yet