A Short Introduction to the Web Audio API

If you ever tried creating audio content for the mobile web, you probably ran into a number of issues. Let’s face it, HTML5 audio isn’t all that great. In reality, the audio format was oversold by Apple in an effort to obliterate the Flash plugin.

Once the initial dust settled, programmers were left with an extremely limited audio tag that’s not supported well enough in most web browsers. Google Chrome, Mozilla Firefox, and Safari all have huge problems loading HTML5 audio files.

Common HTML5 Audio Problems

But that’s not all, here are some of the most common problems associated with HTML5 audio:

Lack of precise timing control
Lack of ability to pre-buffer sounds
Lack of ability to have real-time effects
Lack of ability to analyze the sound
Single playing audio (can’t stream two sounds at the same time)

What’s more, when dealing with Safari, Apple created some new rules. That makes it difficult to create an app-like experience with HTML5 audio. Some people even suspect that the company created the rules intentionally in order to force the users to buy apps from the iTunes store.

The HTML5 audio stems don’t have an “auto-playing mode.” That means the audio won’t play until the page fully loads. Instead, the action has to be linked directly to a user-touch event. This is a huge disadvantage for gaming apps and micro-website that rely on audio.

While there are some “hacks” that can help you bypass the aforementioned limitations, every time Apple rolls out a new version of Safari, these hacks stop working. Moreover, certain iOS updates caused all types of additional problems for HTML5 audio.

So what can we do? Are we going to be forced to use this audio tag for the next few years? Isn’t there an alternative? Luckily, there actually is a great alternative – the amazing Web Audio API.

An Introduction to Web Audio API

We have to admit – the API has a rather generic name – which is why so many people think the name refers to the act of playing audio online. However, that’s simply not the case. The Web Audio is actually a JavaScript API that allows you to process and synthesize audio in web apps.

Web Audio API’s main objective is to transfer up-to-date audio capabilities, usually found in modern games into web and desktop applications. Although the API has been around for quite some time at this point, we’re only now seeing the browser support we need to rely on it.

Needless to say, if you want to use the Web Audio API properly, you need to familiarize yourself with Canvas. If you’re not familiar with it, we recommend reading this article right here. After you learn how to use it, you’ll be able to seamlessly access and modify different HTML elements through JavaScript.

Also, if you’re working on an API of your own and you’re looking for a solution that will streamline your workflow, you should definitely take a look at Stoplight.io. The platform gives users a new way to look at the API lifecycle – a perspective that spans across multiple dimensions, including visualization, design, and testing, just to name a few.

Web Audio API Features, Pros, and Cons

These days, the API is available on almost all widely-used web browsers on both desktop and mobile devices. It doesn’t even require an import. You can use the API to synthesize and manipulate sounds. For instance, you can create an authentic gun sound without relying on an audio file.

The Web Audio API gives a big opportunity for programmers across the globe to deliver better content than ever. In addition to all the advanced sound processing the API can do, it also allows you to create and mix some simple audio tracks.

And now, let’s look at some of the biggest benefits – as well as a few downsides – of the Web Audio API.

Web Audio API Pros

It has microphone support that allows you to record your own sounds
The frequency response allows you to create real-time audio graphs
The built-in Oscillator lets you create basic music sounds
You can create basic rhythms with the accurate timing model
2D modeling feature allows you to position the sound relative to the listener

Web Audio API Cons

The API is certainly not easy to understand and even use
It will probably take you a few weeks to get a hang of things
It requires a ton of code to play a stripped-down music track
Some browsers still don’t support the Web Audio API

The Bottom Line on Web Audio API

To sum up, here are some of the key benefits of the Web Audio API:

The API allows you to play multiple sounds at the same time
It has reliable cross-platform support between desktop and mobile
Last but not least, it has real-time sound manipulation

And there you have it, that’s just a short introduction to the Web Audio API. If you’re looking to start a music-related project or you want to improve the sound of your game, we strongly recommend using Web Audio API.

With that, we’re done. We hope you found the article helpful. Of course, if you have any questions regarding the article or you feel like we didn’t mention something crucial, feel free to leave a comment in the comment section below.