It's been a pretty good week so far for me! On Monday, I traveled to Mozilla's new Toronto offices to get started on a two day "hackfest". The purpose of this event was to help CBC create an HTML5 audio puzzle game to go with their upcoming Marshall McLuhan programming. It wasn't a particularly large event, with only four coders (Scott Downe, Dave Seifried (here's his post about the event), Bob Richter, and myself) with support from CBC employees Angela, Lily and Sean and facilitation of the event provided by Allen Gunn of Aspiration.
After introductions, we dove right into discussion about what we all thought we needed to do, and sketched a few thoughts onto the windows (yes, we drew on the windows). What we were creating was a small puzzle game that allows the player to drag and drop mixed up words to form Marshall McLuhan quotes. Each word was to represent a section of an audio recording of McLuhan saying the quote. If the user were to click the word, they'd hear McLuhan speak the word, and as they lined up words they could play the words in the order they had lined up. For example, take the following sequence of words: "one two three four". Organizing them as "two", "one", "four", "three" and hitting play will play each word from left to right, seeking to the appropriate clip-in times based on their order.
I started out by experimenting with seeking through audio. We wanted to make sure that random seeks through an audio file were a viable way to approach creating this game ( if it was not possible we'd have to split up the audio files into chunks..) luckily, my quick test showed that there weren't any issues, as long as the audio was fully loaded. From there, Bob and I took on the task of creating an editing tool that could be used to create JSON information that the game could use to generate its puzzles. This task was unlike any I've undertaken before with JavaScript so I figured it'd be a rocky road. Surprisingly, by doing things one feature at a time, we were able to create a pretty cool little tool for creating puzzles in the game. Check out this prototype/demo thingy we threw together. It's pretty crude and the controls need some serious work. Once the audio waveform is generated, you can mark different parts of the audio by holding down the 'z' key and releasing when its played back to the correct spot. you can drag the marker and re-size it using your mouse. When a marker is selected, press enter to associate a piece of text with it using the textbox. Pressing enter confirms the text. Pressing the render output button will show you a data representation of the different clips you have made.
Scott and Dave were working on the game's logic, enabling drag and drop for the words and creating logic that would play back clips of the audio in any order, based on the position of the words. Being developers, they threw together this "beautiful" test page. Be nice, this code was written in a short period of time and still has a few kinks that need to be worked out. if it messes up, just refresh. You can find a prettier looking one here :D
All in all, I learned a lot of new stuff and had a great time collaborating with Mozilla and CBC to create something new and original. Can't wait to see the finished product!