Web Audio API lets us make sound right in the browser. It makes your sites, apps, and games more fun and engaging. You can even build music-specific applications like drum machines and synthesizers. In this article, we’ll learn about working with the Web Audio API by building some fun and simple projects.
Let’s do some terminology. All audio operations in Web Audio API are handled inside an audio context. Each basic audio operation is performed with audio nodes that are chained together, forming an audio routing graph. Before playing any sound, you’ll need to create this audio context. It is very similar to how we would create a context to draw inside with the
<canvas> element. Here’s how we create an audio context:
var context = new (window.AudioContext || window.webkitAudioContext)();
Safari requires a webkit prefix to support AudioContext, so you should use that line instead of
Normally the Web Audio API workflow looks like this: