One of my hobbies is Audio Engineering, and on some weekends I volunteer at my local church to run the sound system for the service. Occasionally as part of the greeting they'll invite a few attendees on to the stage for a little trivia quiz/game show, and that is what this project was born out of.

Even if you never noticed it before, in a game show there is a lot in the way of audio effects that get added. A bumper might be playing in the background while the host is just talking with the contestant, and then when they actually start to ask the question it changes to a more serious track to highlight the transition. This continues until the contestant gives their answer, which is then followed by a slight pause and then either a "Right" or a "Wrong" track. Pretty basic stuff, and usually you'll never consciously notice it while you're watching the show, but it definitely adds a lot to the atmosphere and helps you connect with the person playing the game.

Now, all of that is fairly easy to manage when you can edit the audio and video after the show since you have plenty of time. Or, in the case of a live show, they might have several people working to make sure that everything flows smoothly and the transitions are seamless. Unfortunately, it is next to impossible for a one-man sound tech to do on his own with a standard media player, because in addition to juggling all of the tracks you also have to make sure that the audience can hear the microphones that people are speaking in to, that the volume of the tracks is consistent, etc. The Bumper Board aims to fix that problem by having as much as possible defined beforehand, so the software can handle going back to the bumper track after playing the buzzer so the tech doesn't have to. Of course, there are other use cases where such a predefined board would come in handy, so I designed a solution that is general enough to be flexible to various use cases.

I started working on this project a couple of months before I started posting on this website again, so it is actually significantly complete at this point. It is definitely in a usable (if not pretty) state, and can be found on GitHub here: https://github.com/maciel310/bumper-board. It is written as a JavaScript web application using AngularJS. It relies on the HTML5 Web Audio APIs and the FileSystem APIs, which are both Chrome-only at the moment. Firefox is currently in the process of implementing the Web Audio API, so assuming there are no cross browser bugs that crop up once they finish implementing that and start on the FileSystem APIs then it should work in Firefox too.

An offshoot of this project was to implement a wrapper around the FileSystem APIs for AngularJS. This was written as an Angular Service and lets you use the APIs with Promises instead of having to deal with 5 layers of nested callbacks. While doing this I "flattened" the FileSystem API a bit, so while it makes it a little less flexible and removes some potential for performance improvement it makes it much easier to do basic operations versus the standard API. This was implemented as a separate GitHub project so it can be easily forked and used in other projects, and to force true separation of the Service logic from this specific use case. The project can be found here: https://github.com/maciel310/angular-filesystem.

I'll be following up this post with some more details about how the project was implemented and various improvements that I make over time. For now though you can take a look by downloading the projects above and serving it from any web server. Feel free to comment below or contact me if you have any questions or suggestions.