Note: There are no new demos added at this point and this site is in maintenance mode
start svg demo download
cr4.0 sa4.0 ff3.5 o10.5

Animated Lyrics

author: Vincent Hardy 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.

blog comments powered by Disqus