OK Go play with HTML5

By Keiko Hirayama, Google Tokyo


All is Not Lost is a new HTML5 music experience based on a three-way collaboration between the band OK Go, dance troupe and choreographers Pilobolus, and Google. In this music experience, you can embed your message in a music video, and have the band dance it out. The band and Pilobolous dancers are filmed through a clear floor, making increasingly complex shapes and eventually words – and messages you can write yourself.



This project principally employs HTML5’s <audio> and <video> tags, along with an event listener to ensure the correct sync of audio and visual components. A challenge, however, was balancing and syncing load, with the potential of too high a load and thus corresponding delays. As a result, we store movies with the <video> tag as a buffer, using the image object in Canvas 2D. The canvas image object allows us to draw the videos in perfect timing with the music and create a smooth experience throughout.



All is Not Lost is best experienced in Chrome -- check it out at allisnotlo.st.

Keiko Hirayama is a Senior Marketing Manager on the Google Chrome team in Tokyo. When she is not at work, she enjoys playing with her 2-year-old boy (but sometimes wishes she has her own time!)

Posted by Scott Knaster, Editor