This post is part of a series about Webaudiox.js. Check It Out

Last week we started talking about webaudiox. In this first post, we talked about the project and started to explain the helpers webaudiox.shim.js and webaudiox.loadbuffer.js. This week we are gonna focus on webaudiox.jsfx.js. This helper provides you an easy way to use jsfx.js with your Web Audio API games.

webaudiox.jsfx.js

jsfx.js is a library to generate procedural sound, very 8-bit kindof sound. See jsfx demo page for details on this fun library by @egonelbre. It is useful because you can generate lots of different sound easily without downloading anything.

Show Don’t Tell

• webaudiox.jsfx.js the source itself.
• examples/jsfx.html [view source] : It shows a basic usage of this helper
• examples/jsfx-basic.html [view source] : It shows a basic usage of this helper

Show It Live

How To Use It ?

Let’s see how to use it. First you create a Audio Context like this.

1

var context  = new AudioContext()

Now you get the famous lib parameter from jsfx. You can generate some on its demo page. From lib, you will generate a Audio Buffer .

1
2
3

var lib        = ["square",0.0000,0.4000,0.0000,0.3200,0.0000,0.2780,20.0000,496.0000,2400.0000,0.4640,0.0000,0.0000,0.0100,0.0003,0.0000,0.0000,0.0000,0.0235,0.0000,0.0000,0.0000,0.0000,1.0000,0.0000,0.0000,0.0000,0.0000]
// generate the audio buffer from jsfx.js lib
var buffer    = WebAudiox.getBufferFromJsfx(context, lib)

Now we are all ready to play a sound! So let’s do that.

1
2
3
4

var source = context.createBufferSource()
source.buffer  = buffer
source.connect(context.destination)
source.start(0)

Conclusion

So now you can easily generate procedural 8bit sound for Web Audio API. jsfx.js is a very nice library with a retro theme that i love :) Somehow, it seems a bit strange to do retro sounds with a modern web audio api. So now you can play NES kind of sound with the dopler and localisation of the webaudio api. Go For it!

Next week, i will be talk about sound analysis and how your programm can get to know about what is being played. so we will talk about webaudiox.analyser2canvas.js and webaudiox.analyser2volume.js.

That’s all for today folks! Have Fun :)