How to sync MP3 music and lyrics to css3 animations.


Got bored so decided to play around with 2D css3 animation. The goal was to sync lyrics and css3 animation to an mp3 file.

Take note: the syncing requires HTML5’s Audio currentTime (audio.currentTime). It will only work in the latest desktop browsers.

On Android mobile it only works in Chrome version 52 or higher (August 2016). It took Chrome 2+ years to fix the broken currentTime in Chrome for Android. In older Chrome for Android versions, the currentTime was always stuck on zero time. Thus, the earth just spun around and no animation are triggered in the switch statements.

Other Android mobile browser screw up in layering and other things. I don’t own an iPhone, so have no idea what happen there.

Recorded my own goofy song in my apartment on a broken Martin and midi drums using Adobe Audition, $50 mike plugged into a M-Audio Fast Track. As I say to my Facebook friend’s “Best heard on Fentanyl and Bath Salts”.

Down to Business:

requestAnimFrame: handles the timing triggers. It fires every 1/10th of a second.
JavaScript switch: handles when to start an animation (can be fractional 8.2).
Someone.css: handles all the ccs3 2d animation (I tried to include most transitions and keyframes).
prefixfree.min.js: Plugin by Lea Verou saves the time of having write older browser css3 prefixs. (however, since it only works in modern browser there is no need for it).

AudioControls.js: You don’t need this if your audio is in a tag. However, when working on a long mp3 file it helps to jump to a section be clicking or dragging the time-line. (Swapping left or right will show or hide the audio control).

Note: this is not Adobe Flash, so forwarding or rewinding will not hide layers (z-index) that are already triggered.

On line 56 I was going to use:
$(“div”).each(function(){ if ($(this).data(“run”)==”true” );
to track all animation then someday reset all css3 animations, etc, etc. The key word is ‘someday’ means ‘never’.

The zip file is 12 MB (the mp3 being 10 MB).


About torontographic

looking for work since 2009
This entry was posted in Sync CCs Animation and tagged , , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s