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.
- 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.
Compatibility as of 12/31/2012
- 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?)
- Chrome, Safari all features OK
Pshhh… Yea, right! Firefox and Opera on my Android are close but are missing key features.
Used Ceaser CSS Easing Tool to create the custom
easing function for the wand “return to center” animation.