Introduction

[00:00:00]
>> Welcome to Web Audio Synthesis and Visualization. My name is Matt DesLauriers and today's class is gonna be about web audio and how to use audio in the browser with JavaScript. We're gonna be talking quite a lot about using the library itself, the web audio API. Then we're gonna also get into some other libraries like Tone.js to be able to help us in a bit of a more convenient way.

[00:00:24]
The first part of the workshop is gonna be just pure JavaScript, pure Web Audio, some of the lower level concepts, but also talking about how audio works. What is digital audio and sort of the basics of that. And then in the second part of the workshop, we're gonna get more into synthesizing audio, how to make music just with code and using libraries like Tone.js to make things a little bit easier.

[00:00:49]
So to talk about some of the tools and libraries, so we're gonna be using a few different things. I'm going to show a little bit of Glitch, we might not end up using it for the coding. It'll be there, it's something that you can always refer to later.

[00:01:05]
Just for today, just for the sake of being offline and making sure everything works properly, I'm gonna be doing most of the coding without the Internet and just using a local sort of server. But especially for those of you who have never used Node.js or those of you who are kinda new to local web development, you might rather use some of the examples that I've posted on Glitch.

[00:01:25]
And that's gonna be a place where you can edit the code, you can see the results of the code. You can hear it, and you can also remix it and sort of build up your own little sketches in your own little projects. We're also obviously gonna be using the Web Audio API which you don't need to install anything, it's just built into the browser, it's already there.

[00:01:45]
And so that's that's gonna allow us to do all these things. And then later in the afternoon, we're gonna be using Tone.js. And that's gonna be specifically for synthesizing audio and using a more convenient, more helpful library for playing audio in a way that's using synths and using musical notes and things like that and layering them to create something interesting.

[00:02:09]
And for rendering, I like to instead of just looking at a screen with a button on it or instead of just looking at a blank page, I like to use p5.js to try and visualize this in a simple way. Just with circles, lines, rectangles, nothing too complicated. But this might be new to you if you've never done any sort of creative coding or you've never done any sort of graphics programming.

[00:02:30]
That might be a bit of a new thing and you might just have to sort of try and follow along. Or if you really want to start from the basics, I also have that Creative Coding Workshop with Frontend Masters where you can learn all about how to draw shapes, draw those kinda things with Canvas API.

[00:02:48]
So to start off, this is where you can go and just this will be our sort of home base for the workshop. It's github.com/mattdesl/workshop-web-audio. And this includes all of the notes, it includes links to the different demos, which I'll open in a second. It includes a list of some of the tools and also links to the API documentation.

[00:03:16]
Some of the versions I've just decided to use here. Also links, if you're new to JavaScript I have a few references here that I often suggest. Presumably I think most of the audience here is familiar with JavaScript. It's gonna be very code heavy, I'm gonna be showing code examples with ES6 and things like that.

[00:03:35]
So you might need to be familiar with JavaScript to really follow along some of the code examples I'll be talking about today. And then also some code snippets. So a lot of this will just be sort of taking little bits of code, and I have a few snippets here that you can reference instead of having to always reference it within a big file.

[00:03:56]
Within a big sketch, you can just see the snippets here. And then also just some further reading here. And if you go all the way up to the top, you can go into the source, and you can see all the different demos that I'm gonna sort of showing here.

[00:04:13]
And then also you might, if you wanna run this locally, you can clone it or download it as a zip. Or if you're not wanting to run it locally, you can just open up these links here. So I've already got one open here. This is Web Audio demos and this one is just showing a few of the different demos that are using pure Web Audio.

[00:04:37]
We'll go in later to some other demos, like the Tone.js demo, that'll be in the afternoon. But for now, let's just focus on this one. This is just pure Web Audio, which is like the lowest level you can get with this kind of library in this kind of system.

[00:04:52]
This is what's gonna allow us to play mp3 files, like this piano track that's in the background. [SOUND] Or some very loud sort of chime sound, which is played immediately on a tap, instead of it being sort of streamed in the background, like background music. And also affecting the audio, such as changing the volume in real time, based on some user interaction.

[00:05:25]
And then we'll talk about visualization. So visualizing a waveform. [SOUND] I'll talk about what is a waveform as well, I'll explain those things. But I'll just run through these.

[00:05:40]
[MUSIC]

[00:05:43]
Just another waveform demo. And then metering, so just getting the levels of a track as well.

[00:05:49]
[MUSIC]

[00:05:53]
And splitting those levels up into different frequency bands so that we can start to analyze the different tones, whether it's high pitch or low pitch

[00:06:01]
[MUSIC]

[00:06:09]
And similar, just listening to kick drums so that we can start to create these interesting maybe visualizers based on electronic type of music.

[00:06:18]
[MUSIC]

[00:06:22]
Or creating something that's more like a generative artwork that's ever changing, something that's a little bit more calming and more contemplative maybe. So those are there, the Web Audio demos, and we'll come back to that in just a second. Then I'll go back to this for now.