9 libraries to kickstart your Web Audio stuff
Tags: javascript, webdev, libraries, webapi
Published: 2019-02-13 15:54:30

**This post is taken from [my blog](https://areknawo.com), so be sure to check it out for more up-to-date content 😉**

As a web developer, you most likely should crave to create better and better **experiences** for your targeted users. Since the release of **HTML5**, it became easier than ever before. In contrast, the demand for even better and thus even **more immersive** web experiences 🔥. That's mainly because of the new web standards which have arisen with HTML5 and later, that allow everybody to do this kind of stuff. One of which being Web API or more specifically (for the purpose of this article), **Web Audio API**. Using this toolset you can complete your web experience's visual setup with extensive audio effects.

Now, why I'm using the word "experience" so often? Because there's no better word to describe this kind of product. You don't need any kind of advanced audio or visual effects for a standard website or even a web app (unless it's some kind of interactive one). By "experience" I mean something like a **game** or any other kind of **visual content presentation**. In these scenarios, Web Audio may prove to be a valuable addition. I think everybody agrees on the fact of how influential sound effects can be. And that's what brings us to the main focal point of this article. Let's first learn something more about this API and then check out some libraries and tools that can be useful when using it. Enjoy 🦄!

# What were we talking about?

Web Audio API is one of the most popular and wide-used Web APIs. It provides an advanced system for working with audio data (**files**, **streams** etc.) in almost any required way (that means you shouldn't need more in a web browser based environment 😉). That means support for different audio sources, **effects** (even spatial ones), **visualizations** and more. But on the base level, you would probably use it mostly for playing/pausing audio tracks. So, let's stick with that and see, how it can be done in JS style! ⚡

```javascript
const context = new AudioContext();
```

Starting at the beginning (because where else?) we need to create a new instance of the audio context. It basically allows us to access the underlying functionality.

Next, we need to have some kind of input/audio source. For this we can include our audio file in HTML with `<audio/>` element.

```html
<audio id="track" src="track.mp3" type="audio/mpeg"></audio>
```

Of course, using pure HTML you also have access to some audio controls (like autoplay and etc.), but it's definitely not as broad as when using JS.

Then you need to load your audio source using these `AudioContext` methods:

```javascript
const audioElement = document.getElementById("track");
const source = context.createMediaElementSource(audioElement);
```

Lastly you need to connect your source to destination to actually play it, with:

```javascript
source.connect(context.destination);
```

Where `context.destination` is a reference to default audio output hardware. To sum it up, a little diagram from [**MDN**](https://developer.mozilla.org/) visualizes this whole process in a nice, simple package:

![img](https://areknawo.com/content/images/2019/02/audio-context_.png)

You can also see that in the middle of input and destination, there's a place for effects. With this in mind, you can apply custom effects to your audio data, naturally, using the same API set.

If you're working in **NodeJS** environment or you just keep HTML separate from this technical stuff, you can always retrieve your data using **AJAX**, **input file** (NodeJS/file upload) or even microphone (**WebRTC** API)! Just to remind you tho, here's an example of AJAX request:

```javascript
const source = context.createBufferSource();
const request = new XMLHttpRequest();
request.open('GET', 'track.mp3', true);
request.responseType = 'arraybuffer';
request.onload = () => {
    context.decodeAudioData(request.response, (buffer) => {
        source.buffer = buffer;
        // ...
    });
}
request.send();
```

In this example, we use 2 more utility functions that are provided to us by `AudioContext`, these being `createBufferSource()` and `decodeAudioData()`. I think their names stands for what these are for pretty well. After that, you obviously have to connect your source to the destination just like before with HTML version.

Lastly, to play your audio you can play your audio using the following code:

```javascript
if (context.state === 'suspended') {
    context.resume();
}
audioElement.play() // HTML
source.start(); // buffer
```

The preceding `if` clause just checks if the context isn't suspended due to e.g. autoplay policy, thus making sure that your audio will definitely be played. Next, there's a difference in the calling syntax depending on the type of data. If you're using HTML `<audio/>` element, you can use its [**own API**](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio). If not, you can use the [**buffer source API**](https://developer.mozilla.org/en-US/docs/Web/API/AudioBufferSourceNode). I can assure you that you can achieve similar effects in any way you'll choose. But, in my opinion, the buffer/JS-only way provides a bit lower-level API. The choice is yours (unless you can't use HTML 🙃)!

![landscape photography of forest](https://images.unsplash.com/photo-1487525219605-eadb39ae229c?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjExNzczfQ)

# Going deeper

With the code above, we've barely scratched the surface of Web Audio API. Keep in mind, that it's one of the biggest there is! With that said, basics are basics and other use-cases of this API (audio effects, **generation**, and **visualization**) definitely require a bit more of these precious LOCs 😀! You can always go now and explore the API in its full glory or... you can stay, read this article till the very end and make your life much easier (with less LOCs to write) with the following list of Web Audio API libraries and tools!

![img](https://areknawo.com/content/images/2019/02/Screenshot-from-2019-02-11-19-12-47.png)

# [Howler.js](https://howlerjs.com/)

Starting with the most popular and wide-spread library, here comes **Howler.js**! This library is most likely the go-to tool when it comes to JS audio. Besides **super-simple API**, this lightweight tool (**7KB**) gives you full control over your audio with features like **sprites** (for segmenting your audio data) or **auto-caching** being built-in. It also has HTML5 Audio fallback (for older browsers) and support for a number of audio encodings. And with its modular, **pluggable architecture** it comes with optional **spatial effects** plugin 🤯 (for 3D audio effects). What more would you want? 👍

![img](https://areknawo.com/content/images/2019/02/Screenshot-from-2019-02-11-19-14-05.png)

# [Tone.js](https://tonejs.github.io/)

With **Tone.js** were going into a whole another level of Web Audio! This library provides its user with advanced functionalities to actually **create your own music** in the browser! Here you're becoming a composer, a conductor with **code as a baton**. 😀 You get easy access to configuring timing, effects, sources and much, much more. Libraries like that always remind me that coding is art too. 🤔 Anyway, check it our if your interested in this kind of stuff.

![img](https://areknawo.com/content/images/2019/02/Screenshot-from-2019-02-11-19-27-41.png)

# [SoundJS](https://createjs.com/soundjs)

**SoundJS** is part of the suite of JS libraries under name of [**CreateJS**](http://createjs.com/) by **GSkinner**. It's a set of tools that simplify your creative workflow in JS. SoundJS' main purpose is to make **loading** and **managing** your audio assets easier. So what are its main selling points? Well, a number of audio loaders (for cross-browser compatibility) and the level of integration with other libraries in the suite. It also has support for **sprites**, so it is similar to Howler.js in its API set.

![img](https://areknawo.com/content/images/2019/02/Screenshot-from-2019-02-11-19-36-33.png)

# [Tuna](https://github.com/Theodeus/tuna)

**Tuna** is a simple library with equally simple API. Its main goal is to provide easy-to-use **audio effects** for Web Audio API. With this in mind, its API is built to be compatible/interact with the standard WA API. It's meant to just create overlaying effects and it does it pretty well. 👍

![img](https://areknawo.com/content/images/2019/02/Screenshot-from-2019-02-11-19-58-30.png)

# [Wad](https://github.com/rserota/wad)

**Wad** is an audio manipulator library based on WA API. At its basics, you can use Wad to simplify loading audio assets and their basic management, but it can do a lot more than that! With Wad you can easily apply effects, filters and panning to make your audio sound better.🔈 It also has support for **sprites**, various **custom-defined FX**, **microphone input** 🎙 and, surprisingly, all of Tuna's effects (which it's built upon)!

![img](https://areknawo.com/content/images/2019/02/Screenshot-from-2019-02-11-20-10-20.png)

# [Pizzicato.js](https://alemangui.github.io/pizzicato/)

**Pizzicato.js** has the same purpose as many other libraries in this list - to make WA API **simpler to use**, as it should be. And with its API it definitely achieves its goal. Like really, it's nice, clean and short. It also has a bunch of different **audio effects** built-in. If you don't believe me, then check out some examples on the project's main page. 😉

![img](https://areknawo.com/content/images/2019/02/Screenshot-from-2019-02-11-20-28-22.png)

# [Virtual-audio-graph](https://virtual-audio-graph.netlify.com/)

**Virtual-audio-graph** (later VAG for short) provides developers with a **declarative API** overlay. It doesn't simplify stuff much, but it truly changes the way of thinking and writing your WA API code. But, under the hood, it manages the WA API **state** and takes care of smaller details (inspired by ideas behind React). In addition to that, it's really small - **2.4KB** minzipped!

![img](https://areknawo.com/content/images/2019/02/Screenshot-from-2019-02-11-20-29-12.png)

# **Theresas-sound-world**

With its modular system, **TSW** is a set of WA API related methods, that provide nice, but a **low-level abstraction**. Great control combined with a bit easier API combined into one, can easily suit the needs of many developers. 😉

![img](https://areknawo.com/content/images/2019/02/Screenshot-from-2019-02-11-20-34-27.png)

# [XSound](https://korilakkuma.github.io/XSound/)

**XSound** is a batteries-included library for everything audio. From basic **management** and **loading** through **streaming**, **effects**, ending with **visualizations** and **recording**, this libraries provides almost everything! It also has nice, semi-chainable API with **solid documentation**.

# Is there more?

Finding the best tools for a particular workflow/task can be hard. That's the main reason why lists like this one even exist. But in the Web Audio field, there aren't many choices. While selecting the best libraries for you (the ones you've just seen) I was always looking at how **good** its **API** and **functionality** set is and how is the situation with its **maintainability**. So, I hope you like my picks and at least found this list to be useful. 😀

That's all for now! If you like this post, consider **sharing it** and checking out my [**personal blog**](https://areknawo.com) for the latest content. Also, follow me on [**Twitter**](https://twitter.com/areknawo) and on my [**Facebook page**](https://www.facebook.com/Areknawos-Blog-770620059945105) for more! 📣