This “Puzzle to Unlock” concept came to me straight from Manchester Orchestra’s wonderful label/management team, and we were able to pull it together very quickly with SoundCloud, jQuery, and SoundManager2.
The band wanted to build a bit of excitement around the premiere of their new single “Simple Math.” So we developed a way to tease the song with dialogue from the artist and actual clips of audio released as “pieces” to a puzzle that will unlock both the album cover and track. Cool, right?
Interaction was created using these basic jQuery commands: draggable and droppable.
Every time you drag the puzzle piece from it’s container at the bottom a hidden droppable div moves to the right pixel location where the piece will fit. If you find that location, the piece will glow and dropping it will lock the piece into place.
A successful drop will queue up a SoundManager2 powered / SoundCloud hosted track and morph the piece’s container into a nice little play/pause button for replaying purposes.
Once all of these pieces are released and placed correctly, you’ll be able to hear the full version of “Simple Math,” and trust me – it’s worth building a puzzle for. Enjoy!