Web Audio API; A Basic Tutorial

The Web Audio API is a powerful tool that allows developers to make interactive musical websites. The API can be used for relatively simple tasks, like playing back sounds, but is equally capable of advanced DSP and synthesis. The comprehensive documentation is well-written, but can sometimes be a hard to swallow for someone who's just starting out. This tutorial will show you how to get started with the web audio API, in its most basic, readily digestable implementation.

To get the most from this tutorial, you'll want to be familiar with HTML and Javascript fundamentals. You also need some sort of development environment set up so that you can serve the directory.

If you're on macOS, use the command line in Terminal to cd into the directory you want to serve. Then, execute the command “python -m SimpleHTTPServer 8000”. Now, you should be able to see the hosted files by visiting ‘127.0.0.1:8000’ in your browser.

The following tutorial will explain how to use the Web Audio API with HTML and Javascript to load and play an audio file. The general setup is simple: when the page initializes, your Javascript code will create a new instance of the web audio context, then load and prepare an audio file from your server. Then, an HTML button will call a function that plays the loaded sound. Here's the step-by-step.


1. Navigate to the directory that you want to serve, and create a new file called “index.html”. Now you need an audio sample; you can download an example sound here, or you can use any other audio file at your disposal. Congrats! You just implemented everything that you need to create a website that will trigger your sample when the user clicks the button.


2. Start with a basic HTML template; something like this.


3. Add a button to your HTML to call a function, “playSound()” which we will create in our JavaScript code.


4. Add the Javascript, and then take a look at the comments to get a better understandign of where we're at.


5. Well done! Visit the site and tap the button to play back the sound you selected! Visit the Working Demo here

.