Making The Catbug Soundboard
Head over here for the soundboard!
I had built something like this back on my old site, nbwright.net. But I lost that some time ago so I started out by gathering all of the source material for samples of Catbug, or Sam Lavagnino that I could find.
In the end I had 16 raw audio clips:
While the actual Bravest Warrior episodes had nice equalized audio levels the other few files had a lot of variance. So first I took those and ran them through Audacity to get them pretty close to the actual episode volume.
Once I had them at a reasonable volume I could start the tedious process of watching each episode, pausing on good Catbug lines, taking the time from the video and clipping that bit of the audio track out in Audacity as well.
Actually it wasn't that bad, it was an excuse to go re-watch everything...
After a solid Saturday of watching cartoons I had about 89 good clips!
Since I had taken care to export them in the pretty much universally supported WAVE audio format I was 90% done!
Finally I needed to set up the actual soundboard page. This was the easiest part, since I already have a nice place to host it all it took was creating some simple audio elements and buttons:
<button>Some text for the button</button> <audio src="/path/to/some/audio.wav"></audio>
Now by default that will just give you a button that doesn't do anything and an audio tag you can't even see. The next step is to tie those together with a little javascript. I prefer to keep things simple and I'm not super interested in supporting every version of every browser so long as the latest versions of Chrome, Firefox, and Safari work on Mac, Linux, Windows, iOS and Android. That's good enough for me and my little toy.
The way I prefer to do this is to write a little function like:
function play(id) {
document.getElementById(id).play();
}
Which you can toss into a sript tag somewhere in your document. This function accepts an element id (which is required to be unique), finds that element, and then plays it.
This let's us modify our initial snippet like so:
<button onclick="play('some-id')">Some text for the button</button>
<audio id="some-id" src="/path/to/some/audio.wav"></audio>
Now we're getting close, we have a button, and when you click it it will play the audio clip! On modern browsers this will handle all the basics like loading only when clicking play on mobile browsers, only playing once even if you click while it's currently playing, etc.
We still have one small issue though, if you have a ton of clips like I do it is a hassle to create and link all these buttons and audio tags with correct id's and everything. This is where you make your server work for you. For me it made sense to simply have a template that I could feed a file name and description and it would automatically set up everything for me and generate the static HTML I need for this simple site, but there are a million other technologies you could use to load a list of files from the file system and generate the HTML you need.
And that's it! I was inspired by this page a long time ago and they have some good solutions for handling older browsers and browsers with javascript disabled so you should check it out seeing as mine is basically the minimum-viable-product.