Programming blog by Ezekiel Victor

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.

Old Fashioned Metronome App

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.

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.

5 Comments

  1. Jonas /

    Thanks for this. Helpful for a fellow musician and also great for me code wise too as I am just starting with AngularJS

  2. Oliver /

    Hi Zeke.

    Love this metronome mate… but I can’t get it to render in WordPress (I’m not a web programmer, but I have basic knowledge).

    Any tips or tricks? I would iframe your page but I don’t want the code windows included.

    Cheers,

    Oliver

    • Hi, Oliver, thank you. The way it’s designed you would probably have to do a little bit of gutting to get it into an element on the page if you don’t want to iframe it. If you go to that trouble, you could easily remove the code windows. Are you just looking for an embeddable widget-like version? I could probably drum up something fitting for your blog if that’s the case… Let me know.

  3. Bonjour,
    Je serais intéressé par la proposition de Zeke pour faire un code intégrable à mon site …
    J’ai déjà mis le métronome en iframe sur cette page :
    http://marcusguitare.fr/?Outils
    A bientôt,
    Marcus

    • En utilisant Google Translate – désolé, je ne parle pas français. 🙂 J’ai ajouté quelques rembourrage à l’ de la page de métronome. Maintenant, vous pouvez ajouter “overflow: hidden” à votre

Leave a Reply

Solve this equation to prove you're human:
Time limit is exhausted. Please reload CAPTCHA.