Skip to content

Metronome demo using HTML5

Here’s a demonstration of metronome using HTML5.

http://demo.agektmr.com/metronome/

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
  • Drag
  • WebFonts

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.

Enjoy!

Comments

Powered by Facebook Comments

Posted in HTML5.

Tagged with , , .

16 comments

By Eiji – 2011/4/9 土曜日

16 Responses

Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.

  1. tzmtk_reader says

    HTML5でメトロノームを作ってみた http://ff.im/-AIGP0

    2011/4/9 土曜日, 6:07:41
  2. Eiji Kitamura says

    久々にブログ書きました | HTML5でメトロノームを作ってみた http://devlog.agektmr.com/ja/archives/721

    2011/4/9 土曜日, 6:12:23
  3. Eiji Kitamura says

    久々にブログ書きました | HTML5でメトロノームを作ってみた http://goo.gl/GI2Pd

    2011/4/9 土曜日, 6:13:50
  4. Teruichi says

    RT @agektmr: 久々にブログ書きました | HTML5でメトロノームを作ってみた http://goo.gl/GI2Pd

    2011/4/9 土曜日, 6:32:09
  5. 羽田野太巳/Futomi Hatano says

    Web Audio API とは粋ですね。 RT @agektmr: 久々にブログ書きました | HTML5でメトロノームを作ってみた http://goo.gl/GI2Pd

    2011/4/9 土曜日, 7:29:21
  6. 豊田有@MightyWorks says

    RT @futomi: Web Audio API とは粋ですね。 RT @agektmr: 久々にブログ書きました | HTML5でメトロノームを作ってみた http://goo.gl/GI2Pd

    2011/4/9 土曜日, 7:30:29
  7. yoshi krsw says

    RT @agektmr: 久々にブログ書きました | HTML5でメトロノームを作ってみた http://goo.gl/GI2Pd

    2011/4/9 土曜日, 7:43:32
  8. nins hsu says

    HTML5でメトロノームを作ってみた http://bit.ly/f75GU8

    2011/4/26 火曜日, 6:36:00
  9. Yoichi Utsunomiya says

    @hkato193 @poohneko 私がビックリ&感動したのは、この２つ http://bit.ly/kqnGHy http://bit.ly/j8vcHk 。同期とはシンクロするものなり。2人ともミュージシャンだし。しかも、汎用OS上で作る難しさに挑むのは技術屋っぽい。

    2011/5/19 木曜日, 10:21:48

Continuing the Discussion

  1. Eiji Kitamura linked to this post on 2011/4/9 土曜日

    Metronome demo using HTML5 http://goo.gl/OPXfg

  2. fumiko kurano linked to this post on 2011/4/9 土曜日

    RT @agektmr: Metronome demo using HTML5 http://goo.gl/OPXfg

  3. Fumiko Kurano linked to this post on 2011/4/9 土曜日

    RT @agektmr: Metronome demo using HTML5 http://goo.gl/OPXfg

  4. junichi_y linked to this post on 2011/4/12 火曜日

    Metronome demo using HTML5 – Tender Surrender: http://bit.ly/hFoBqa

  5. わかめにゅーす(HTML/CSS) linked to this post on 2011/4/12 火曜日

    Metronome demo using HTML5 – Tender Surrender http://bit.ly/dKfOjX

  6. chromedevrel linked to this post on 2011/4/12 火曜日

    From our blogs: Metronome demo using HTML5 http://goo.gl/fb/l2O7s

  7. junichi_y linked to this post on 2011/4/14 木曜日

    Metronome demo using HTML5 – Tender Surrender: http://bit.ly/gwRjoV



Some HTML is OK

or, reply to this post via trackback.

« »