Yesterday I read a thread where somebody asked for a soundboard with sounds from typical montage parodies. Just asking for this I would probably skipped the thread but he also asked for an option for distorting the sound and this which got me interested.
I asked myself:
Is it possible to do this with HTML5 & JS alone?
At first I thought we need compression instead of overdrive, for some reason. So I looked around a bit and stumbled upon the Web Audio API. There’s a great tutorial about the Web Audio API out there which I would recommend you to check out. At first, I found it a bit confusing with all the nodes but the basic idea is pretty simple.
You have a source (e.g. audio file) and a destination (output). Now you can connect nodes between them. For example, gain nodes or compression nodes, etc. which is pretty cool.
It was a long way to…
In the beginning I just experimented a bit with the Web Audio API and tried to get it to work. This took me about 30 minutes or so then I experimented with nodes and tried different settings. Then it actually struck me that I don’t need compression but distortion, i.e. overdrive. Thankfully, there is a overdrive module for the Web Audio API. Which I added quickly and the audio part worked fine.
Let’s do the thing I hate the most
I build my last GUI about 2 or 3 years ago because I always hated it. I preferred to just make some command line interface and was happy with it. Nonetheless, I decided to try it and for the first time with bootstrap because I heard a lot of good about it.
So I downloaded the files and included the bootstrap-theme and … holy cow this is easy. I created my web interface in less than 10 minutes. Sure, it looks like every bootstrap application but it’s super easy. I really like it. For me it broke this spell that I just write my command line application and don’t publish it because I’m too lazy to build a GUI for it.
Results
You can test the soundboard for yourself (WARNING: It’s probably loud and lots of screaming). It works fine in Chrome, the newest Firefox and Safari. Opera doesn’t seem to work and IE doesn’t work.
I posted it 20 hours ago and since then I got about 1400 visits which is pretty nice for a four-hour project.