by Indrek Lasn

All you need to know about the Web Audio API

“Apple desktop computer with editing software on the screen with keyboard and printer” by Jakob Owens on Unsplash

Did you know Javascript has a constantly evolving high-level API for processing and synthesizing audio? How cool is that!

This blog was published at Strilliant.com — I publish content 2 weeks before publishing on Medium. Give it some love! ❤

The goal of the audio API is to replicate features found in desktop audio production applications. Some of the most prominent features are mixing, processing, filtering, etc.

The web audio API has a lot of potential and can do awesome stuff. But first — how well is the API supported across the board?

green across all boards

Cool, worth digging into. 👍

What is the web audio API capable of doing?

Good question! Here are couple examples demonstrating the capabilities of the Web Audio API. Make sure you have sound on.

Most of the basic use cases covered: https://webaudioapi.com/samples/
Complicated synthesizer example: https://tonejs.github.io/examples/#buses

The web audio API handles audio operation through an audio context. Everything starts from the audio context. With the audio context you can hook up different audio nodes.

Audio nodes are linked by their inputs and outputs. The chain of inputs and outputs going through a node create a destination — destination being the audio frequency which we pick up with our ears.

Audio context schema

If you’re the type of person who wants to know all the tiny details, here’s a sweet link to get you started.

If you’re more into visual learning, here’s a great introduction talk about the Web Audio — check it out!

One of the most interesting features of the Web Audio API is the ability to extract frequency, waveform, and other data from your audio source, which can then be used to create visualizations.

https://webaudioapi.com/samples/visualizer/
https://tonejs.github.io/examples/#analysis
https://tonejs.github.io/examples/#meter
Show HN: Randomly generated metal riffs using Web Audio API and React

This article explains how, and provides a couple of basic use cases.

If you’re keen on learning the audio API in depth — here’s a great series.

Here’s a free book about the Web Audio API— by Boris_Smus (interaction engineer at Google).

https://webaudioapi.com/book/Web_Audio_API_Boris_Smus.pdf

A glance at the API

The web audio API is relatively intuitive to understand. Here’s an abstract example how to use the API.

Breakdown of the steps:

  • We create a new AudioContext object by calling it with new keyword.
  • We bind our oscillator and volume controller to the audio context.
  • We connect our oscillators and volume controller to our sound system.
  • Set our frequency type and value (tuning)
  • Start our oscillator — The start method of the OscillatorNode interface specifies the exact time to start playing the tone.

Using the Web Audio API
The Web Audio API provides a simple yet powerful mechanism to implement and manipulate audio content inside web…developer.mozilla.org

Big potential, room to grow

Of course, as with all great things, there’s always room to grow and improve. Here’s some healthy feedback from much smarter people than I.

I don't know who the Web Audio API is designed for | Hacker News
Also, due to the re-decoding every time, and the asynchronous nature of such, I've now introduced a weird bug where…news.ycombinator.comI don't know who the Web Audio API is designed for
WebGL is, all things considered, a pretty decent API. It's not a great API, but that's just because OpenGL is also not…blog.mecheye.net

Making music with the browser

Wrap up

If you’re unsure about the use cases for such API — think about all the music composition software out there which is desktop only. Converting those desktop apps to web apps would be a very workable business idea.

Why is web better in this case? Well, for starters — saving and closing your workspace and continuing from another workspace. Musicians travel a lot, so this approach would benefit artists by a huge margin.

Another example would be enhancing our user experience with sound. (Careful not to over-do this!)

It would deliver new solutions and better experiences for visually impaired people who use screen readers for websites leading to better accessibility.

What else can we do with the Web Audio API?Christoph Guttandin

If you’re interested in staying up to date, the Web Audio Conf is an excellent event to take part in.

https://webaudioconf.com/

alemangui/web-audio-resources
web-audio-resources - :musical_keyboard: A list of curated web audio resourcesgithub.com

Thanks for reading, stay awesome! ❤

The secret to being a top developer is building things! Here’s a list of fun apps to build!
You can only become a great developer by putting the effort in. Imagine for a moment — You can’t become fit physically…medium.freecodecamp.orgSupercharge your debugging experience for Node.js
You see this, what do you do?medium.comHow to set-up a powerful API with Nodejs, GraphQL, MongoDB, Hapi, and Swagger
Separating your frontend and backend has many advantages:medium.freecodecamp.orgWant to be a top developer? You should build things. Here’s another list to get you started.
Due to high demand I’m extending the list of fun apps to build. 😁medium.freecodecamp.org Indrek Lasn (@lasnindrek) | Twitter
The latest Tweets from Indrek Lasn (@lasnindrek). Helping you reach your maximum heights. Collaboration/Questions @…twitter.comThe best front-end hacking cheatsheets — all in one place.
It’s rather impossible to remember all the APIs by heart. This is when cheatsheets jump in! Here are the best front-end…medium.freecodecamp.org