Web Audio API – Sound on the Web

Posted in JavaScript

Sound on the web. I know. Historically, these two things haven’t gone together very well. But now, things have changed a bit, since we don’t have to rely on Flash anymore.

With the arrival of the <audio> tag and with more and more browsers implementing the Web Audio API we can produce sound natively in the browser with zero lag and with more control than we’ve ever had before.

We don’t even have to use audio files if we don’t want to. The Web Audio API allows us the create sound on the client, much like we do when creating images from scratch by painting to the canvas element.

Audio comes with the added burden of being potentially extremely irritating. Sometimes it’s the sound itself, other times it’s down to it being repeated. Sometimes it’s both.
Luckily, we can reduce the chance of this happening by doing a few things:

  • Make the sound short. Less than a second is preferable, half a second is even better.
  • Make sure the notes that make up your sound are harmonic, and that the timbre is pleasant.
  • Only repeat the sound if absolutely necessary.

Depending on how long it is, a snippet of audio could have a file size larger than most images on your t affect anything visually, or block any functionality. So, instead of downloading audio files alongside your HTML and images, consider loading it in the background after the page has loaded, while the user is happily interacting with your page.

Better still, consider using the Web Audio API where you can. The Web Audio API is a high-level way of manipulating sound in the browser using JavaScript. While it’s not currently implemented in all major browsers, it’s definitely worth thinking about using it along with the audio element as a fallback.

The API allows you to create sound in the browser from scratch without using pre-existing audio files and is supported in current versions of Chrome, Safari or Firefox.

Reference: https://developer.mozilla.org/en-US/docs/Web_Audio_API

Leave a Reply

Your email address will not be published. Required fields are marked *