Old Fashioned Metronome in AngularJS, HTML5, and CSS3

This went from a fun Saturday project inspired by a suggestion from my brother to a weekend-long, no-holds-barred tapping into some of the more powerful browsers’ HTML5 and CSS3 feature sets within the context of AngularJS. Check out the full screen app here.

Features

• Responsive
• Can update the tempo while metronome is on (try tabbing focus to the bob, then using arrow keys to move it while it is swinging)
• HTML5 Audio API
• CSS animation
• Fancy but not very practical source code view buttons to the right. (Just View Source or see the fiddle, it’s much easier lol.)

Libraries, frameworks, etc.

• AngularJS
• jQuery, jQuery UI (draggable)
• BuzzJs for HTML5 Audio

Compatibility as of 12/31/2012

Windows

• Chrome 23.0 all features OK
• Firefox 17.0 all features OK
• Safari 5.1.7 all features except audio OK
• Opera 12.12 all features OK
• IE 10 nothing appears (due to use of background-size + background-position?)

OS X

• Chrome, Safari all features OK

Mobile

Pshhh… Yea, right! Firefox and Opera on my Android are close but are missing key features.

Other

Used Ceaser CSS Easing Tool to create the custom
easing function for the wand “return to center” animation.