Skip to content


HTML5でメトロノームを作ってみた

HTML5を使ってメトロノームを作ってみたのでご紹介します。

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

動作確認はChrome12、Firefox4、Safari5、Opera10で行いました。iOS4のSafari、Android2.3の標準ブラウザでも音は出ないけど動くことは確認しています。

使ったHTML5関連テクノロジーは

  • Application Cache
  • CSS3 transform, transition, box-shadow
  • Web Audio API
  • Audioエレメント
  • Drag
  • WebFonts

といったところでしょうか。画像は一切使っていません。Chrome12の場合、Omnibox(URLの欄)にabout:flagsと入力してWeb Audio APIを有効にすることで、割と安定した動作をするはずです。無効な場合はAudioエレメントを使うようフォールバックしますが、Chromeだと不安定なようです。

トリックは単純で、transformとtransitionを組み合わせてメトロノームの棒を左右に揺らすアニメーションを一定間隔で繰り返しているだけです。反転するタイミングでWeb Audio APIまたはAudioエレメントを使ってクリック音を鳴らしています。

ボタンをクリックまたはスペースキーでメトロノームをスタート・ストップできます。重石を上下に動かせば、スピードを調節できます。

Enjoy!

Comments

comments

Powered by Facebook Comments

Posted in HTML5.

Tagged with , , .


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

  2. Eiji Kitamura says

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

  3. Eiji Kitamura says

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

  4. Teruichi says

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

  5. 羽田野太巳/Futomi Hatano says

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

  6. 豊田有@MightyWorks says

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

  7. yoshi krsw says

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

  8. nins hsu says

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

  9. Yoichi Utsunomiya says

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

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.