Hey everyone welcome back to our web audio series! This week we’re going to have some fun playing around with Web Audio API and the HTML5 Canvas element! Remember a few weeks back we did a tutorial on visualising waveforms with Web Audio API? We’ve barely scratched the surface of how amazingly powerful the HTML5 Canvas can be. This article has several great examples. For this week, we’re going to learn on how we can integrate Web Audio API with simple web animations created using the HTML5 Canvas element.
Hello again from the Sonoport team! Last week we did a tutorial on the AudioKeys library, utilizing it to make a qwerty keyboard synthesizer. Now, let’s turn that synthesizer into a sampler, and add a delay effect to it. While simple in theory, we will see that audio playback in with the webaudio API is a bit more involved than creating oscillators.
Welcome to another segment on web audio! Previously we posted a simple tutorial on how to use oscillators, filters and gain nodes. That tutorial will come in handy here as we’re about to go one step further, which is to have basic visualisation of waveforms using web audio. A good reference would be this, however when we first started it was difficult to understand most of that because we basically dived in straight into web audio without really understanding any of the basics yet. So to prevent that, you might want to read our previous web audio articles here before moving on.
To help guide you on your web audio journey this segment will be about the Audio Context, how to create Oscillators, Filters, and Gain nodes. Previously we have complied a bunch of information that would be useful for anyone to start on web audio here, then we went through through the basics of making sound and the brief history of Web Audio API here, now for this post, we are going to talk more about…nodes!