Applying Web Audio API with the HTML5 Canvas Element
Part I: Drawing and animating a bouncing ball
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.
Audio Sampling and the Delay Node
Turning AudioKeys into a sampler and learning effects with the delay node
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.
AudioKeys
Prototyping Synth designs using Kyle Stetz AudioKeys library
Welome to another segment on web audio! We here at Sonoport hope you have found our previous tutorials fun and informative! Today, we will showcase a great new library that will take a lot of the nitty gritty of JavaScript and allow us musicians faster access to sound experimentation!
Visualising Waveforms with Web Audio
Introducing the Analyser Node and the HTML5 canvas element
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.
Onwards with our Web Audio Journey
Oscillators, Filters and Gain Nodes
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!