読者です 読者をやめる 読者になる 読者になる

ただの風邪。

音楽のことを中心にいろいろと書いています。

HTML5 + SVG + Javascriptでアニメーション付きメトロノームをつくる

study in pink: metronome

 たいしたものでもないけれど、アニメーション付きメトロノームをひとつ。BPMはスライダーかテキストボックスで入力。拍子は2/4、3/4、4/4、6/8から選べる(けど6/8のタイム感ってこれでいいのか?)。基本的には入力されたBPMと拍子に基いて一拍ごとのタイムを割り出してsetIntervalに放り込み、読み込んでおいたwavファイルをトリガーしているだけ。ついでに、円がしゅるっと消えていくSVGのアニメーションもjavascriptからトリガーしている。プログラムというよりもCSSの扱い方(アニメーションするSVGを背景にしたり、要素の配置を相対的に指定したり)の勉強という感じだった。

 あらかじめ用意したサンプルを鳴らすだけの簡単なドラムマシン的なヤツだったらすぐできそう。ブラウザ上でどのくらいの精度の時間制御ができるのか知らないが…。