ReelMusic JavaScript MP3 Player

2012 - after viewing a great promo site for "Simple Song" by The Shins I decided I wanted to try the same, but with one key difference - No Flash.

Yes the site is primarily HTML and CSS but the core audio mechanism is based in Flash (for the real-time audio processing I'm guessing). I wanted to find out if it was possible to use HTML5 audio in place of Flash while still retaining the core functionality.

After some initial tests I realised an audio framework would come in extremely handy, and was pleased to find that Jay Salvat had already been busy at work creating the Buzz JavaScript audio framework. I combined this in a MooTools class and sub-class structure with public methods that could be called via mouse events. The 'tapes' are objects that as well as containing links to the audio, also contain the song metadata to be displayed on the front of the machine while a tape is loaded.

The next step was to make the reel to reel machine actually work. The trickiest part of this was the illusion that tape is moving between the two reels, especially working out how the tape angle changes with the amount left on the reel as the song progresses.

The end result is hopefully a fun new take on some old skool' technology. Best viewed in webkit browsers but others supported (not tested in Internet Explorer but I suspect probably 10+ to be in with a chance).