Week 4 Lessons: Introduction to the Web Audio API

Learn the basics of the Web Audio API: how to play a sound file, how to play a tone, and how to change the volume and other attributes of the sound. There's a wide variety of information sources to help you do that. Which one you prefer depends on your preferred way of learning. I recommend three sources, below, in order of my own preference, starting of course with my own explanation and examples, then followed by two others. Study as many of these as you need to in order to feel confident that you understand the Web Audio API paradigm and syntax. Replicate some of the examples yourself, and make changes to the code to alter or elaborate the example, as a way to get experience with it and test your understanding of it. And ask questions on the Discussions board.

1. Go to the Examples page from the 2016 iteration of this course. On that page, work through examples 1-8. In the case of the HTML/JavaScript examples, open the source code of each example Web page (ideally in a text editor such as Atom that will show you the code structure nicely) and study how the page works—especially the JavaScript that implements the Web Audio API.

2. Use the video lessons made for this class by former TA Mark Micchelli. Start with Max vs. Web Audio API Links to an external site.. Then look at the page on Building a Synthesizer with Web Audio API Links to an external site., notably lessons 1. Oscillators Links to an external site., 2. LFOs Links to an external site., and 4. Envelopes Links to an external site.. Then, in the page on Sample Recording and Playback with Web Audio API Links to an external site., read the lesson on Loading and Playing Sound Files Links to an external site.. A more advanced lesson, if you feel you understand those other lessons, is Building a Granulator Links to an external site..

3. Read "Chapter 1. Fundamentals" in the book Web Audio API Links to an external site. by Boris Smus. You can skip the first two pages of that chapter, and begin on the page The Audio Context. The UCI Library enables you to read this book online by clicking the link above, but you must be logged on with your UCI NetID via VPN tunnel using vpn.uci.edu and with the Group setting UCIFull. A substantially similar tutorial by the same author, is available as a website titled Getting Started with Web Audio API Links to an external site..

Two canonical and authoritative sources of technical information about the Web Audio API are the Mozilla Developer Network (MDN) Web Audio API Links to an external site. site, and the official specification of Web Audio API Links to an external site. by the World Wide Web Consortium (W3C).