Animated Lyrics
posted: October 04, 2009 at 03:00 PM categories: audio, animation, interactive view comments
Download Video: WebM | MP4 | OGG
This example illustrates the use of the following features:
- Depending on the implementation, SVG or HTML 5 <audio> in a <foreignObject>
- Web fonts
- Text on a path
- Scripted animation
Note that the demo uses setTimer to synchronize the lyrics with the audio because the new audio timeupdate event is not supported in all the browsers yet. However, as explained on Silvia Pfeiffer's site it would be a better way to synchronize the lyrics in a pure HTML5 context.
See attributions about the song and fonts used in this demo (also showing at the end of the demo). The code leverages the YUI library with an extension to allow animation of SVG transform attributes.
Running the demo
Click on the "Start SVG Demo" at the top of this page. When the demo has loaded, click in the center of the image. Then, once the menu has settled, click on the "ancient sun" item.