Tenacious D's Fenix rizes with SoundCloud
This is not The Greatest Website in the World, no. This is just a tribute.
I was approached by Tenacious D a week ago with an incredible quest: raising a phallus shaped phoenix onto the internet (oh and the first clip of audio from their new record.) How could I raise this majestic beast with the power of SoundCloud’s legendary API? The answer was simple: Have the sound itself rize the phoenix from its ashes.
The Journey Begins
I started my journey by creating a Photoshop layered version of the then flat painting. Using the ever faithful polygonal lasso tool, I sliced out all the typography. Next I reached for my eraser tool and carefully removed the background around all the fenixs’ curvatures. Finally, using the sorcery power of the stamp and patch tools, I was able to create backgrounds where they did not exist. Black magic? Yes sir.
With the fenix now in ashes (layers), I quickly jumped into my Textmate editor in an effort to raise him. In addition to jQuery, I included the great knight, Johannes Wagener’s, powerful SoundCloud Javascript SDK which now includes the ability to stream sound. Incredible! I also chose to quicken my pursuits by relying on the genius of such great libraries as Stylus, Nib, and Jade.
Each fenix layer was placed into the painting frame as an absolutely positioned DIV. I was able to initially hide each of these layers out of view, because this was no ordinary frame - it had the magical CSS property of overflow equals hidden.
The Fenix Rizes
I then called on the power of the Javascript SDK, uttering:
SC.get('/tracks/35303281')In a second, my website was filled with the glorious sounds of Tenacious D, but if I was going to control it I needed SoundManager2’s aide.
Using the whileplaying function of SoundManager2, I created a percent played property that I would reference to raise each part of the fenix perfectly in sync with the sounds of the D. However, the wings were out of control, falling each time I attempted to revive the bird.
All hope was lost, until I remembered SoundManager2’s ability to use the peak data of both the left and right channel of the incoming sound. I applied the fix as quickly as possible and soon the wings were glowing as if Jables were singing right through them.
The Fenix had Rizen.
The Journey Ends
In an effort to let the kingdom know what had transpired I used another great feature of our Javascript SDK: Favoriting. With as little as three lines of coded runes, users were able to favorite the track on SoundCloud without ever having to leave the website.
As so concludes my tale. If you yield a modern browser, you can rize the fenix for yourself at rizeofthefenix.com. If it’s not rizing quite right you can journey to SoundCloud to listen to the track instead.
Until next time. Go with Courage and the SoundCloud API.