This post is part of a series about Webaudiox.js. Check It Out
Webaudiox.js is a bunch of helpers for WebAudio API. I wrote them a while back. Now I would like to make a series of posts about it. This post is the first. I plan to publish one post per week explaining WebAudiox the marvels you can do with WebAudio API. I hope we will enjoy yourselves in the process :)
What is a DRY library ?
Webaudiox.js is a DRY library, as in Dont Repeat Yourself library. It isn’t a library per se. I took the tasks I kept repeating when doing Web Audio API and put each of them in its own little helper file. WebAudiox has more than 10 of them. Each of them got a single pupose and try to do it well. Most of them are very small, 50 lines on average, so you can easily look at the code. Additionaly, they have no dependancies so it is easier and faster to understand.
You can use any of them independantly. It makes it very light to include these in your own code. There is a webaudiox build which bundles them though. This is provided for convenience. It is just the concatenation of all the helpers.
Let’s get Started
Here is a simple example which loads a sound and plays it.
It initializes the AudioContext, downloads a sound with
WebAudiox.loadBuffer() and plays it with
1 2 3 4 5 6 7 8 9 10 11 12 13
How To Install It ?
You can download the build with a usual
The easiest is to get
bower is supported if you want. Just use
This helper does a shim which handles the vendor prefix, so you don’t have to. Typically it contains code like
Show Don’t Tell
- webaudiox.shim.js the source itself.
- examples/jsfx.html [view source] : It shows a basic usage of this helper.
This helper loads sound.
It is a function which loads the sound from an
url and decodes it.
Show Don’t Tell
- webaudiox.loadbuffer.js the source itself.
- examples/lineout.html [view source] : It shows a basic usage of this helper.
1 2 3 4 5
In real-life cases, like games, you want to be sure all your sounds
are ready to play before the user starts playing.
So here is a way to schedule your sound downloads simply.
There is global onLoad callback
This function is notified everytime .loadBuffer() load something.
You can overload it to fit your need.
Go here for an
1 2 3 4 5 6 7
Additionally there is
It is counter of all the .loadBuffer in progress.
It is useful to know that all your sounds have been loaded.
So, now we know how to easily load sounds for web audio api. We can even schedule the download. We got rid of the interoperativity issues with the shim. Rather cool for a first post. Next post will be about webaudiox.jsfx.js, a helper to use jsfx.js with Web Audio API. jsfx.js is a very fun library which generates retro games sounds. The type of sounds heard in 80’s arcades :)
That’s all folk, have fun!