Here’s a demonstration of metronome using HTML5.
I’ve confirmed it works on Chrome12, Firefox4, Safari5, Opera10. iOS4 Safari and browser on Android2.3 also works without sound.
HTML5 technologies used:
- Application Cache
- CSS3 transform, transition, box-shadow
- Web Audio API
- Audio Element
No images used. For Chrome12, I recommend to turn Web Audio API on. Type about:flags on Ominibox on Chrome and enter, then relaunch Chrome after enabling Web Audio API. It should work better than without the flag on. If it’s disabled, the program falls back to use Audio element, but is not as stable as with Web Audio API apparently.
The trick is very simple. CSS3 transform and transition enables movement of the bar in specific intervals. When the bar flipping back, Web Audio API or Audio element makes sound of click.
You can start / stop by either clicking on the button or pressing space bar. You can change interval by moving the weight on the bar.
Powered by Facebook Comments