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.
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.
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.
5. Well done! Visit the site and tap the button to play back the sound you selected! Visit the Working Demo here.