While working on a tool in Ruby to make sampler tracks out of several album components, I realized I did not yet know enough about how to manipulate audio to do what I wanted. I needed to approach it from a different vantage point, and a different language altogether. So, I decided to see what the state of audio on the web was, having not done much beyond hosting and downloading MP3s years ago.
Spoiler: it’s pretty frickin’ cool now, guys.
Further Spoiler: I haven’t quite got everything I need figured out, uh, figured out yet.
My initial aim was to create a web app that could take random chunks of multiple audio files and combine them into a single, longer file, making a “sampler” of sorts. I even have a name: Audio Hash. Unfortunately, I’ve run into some issues in the low-level audio manipulation that’s kept it in a non-working state for a while. However, I’ve learned a bunch and the Web Audio API can do some neat things.
As Easy as Code
<audio src="audio.mp3" /> can’t do.
You could also use a
<input type="file" /> control to upload the audio into a usable state, if you desired.
Now, add a button to stop the
For a much more thorough explanation, check out Josh On Design’s Deep Dive into Web Audio, which I’ve cribbed/paraphrased a bit above to give you the simplest example.
With another couple lines, you can route that audio file through a gain node to change its volume.
There are a bunch of other kinds of nodes for effects (visual ones, as well), and CreativeJS has a great article on all of them.
Down the Audio Hole
As you can see, this can be pretty flexible and awesome if you want to get into the nitty-gritty of audio, rather than just playing a song in an embed. For Audio Hash, I needed to be able to actually create audio, not just play it, so I had to go deeper. This means I’ve been staring at code like the following for a bit, poring over why it doesn’t do what I want it to do (yet).
I’ve even gone as far as finding someone who figured out the code to put the raw audio data as HEX into an HTML div. Both exercises are about as low-level as I’ve gotten in the development world, and it feels cool, if overwhelming. Regardless, the exported audio files I’ve been creating are too short and completely silent, so it’s currently a failure for now. I’ll most likely end up using some kind of existing audio library, as I don’t need to write bytes from scratch, but I wanted to try my hand at low-level audio futzing to see how it worked.
For the Road
Despite not succeeding at making the tool I envisioned, I’ve made progress and spent some time on the UI and getting a modular system to load sounds on a page, so check out Audio Hash on Github if you want to root around in the source.
I later experimented with a custom Windows app (and third-party audio library ;P) after much frustration with the web app version, and I’ve gotten a lot farther, but I’m not done getting it to work on the web just yet. More on all that in a later post.