HTML5 Audio と JavaScript でピアノ制作

※ phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

このエントリーをはてなブックマークに追加
Pocket

先日, HTML5 Audio の使い方について書きました. その際勉強ついでにピアノを作ったので公開します. 作り方もざっくりとまとめたのでよかったら参考にしてください. webkit-animation や display:box など css3 についても少し触れています.

SAMPLE And DATA

今回作るWebピアノはこちらで遊べます.

ダウンロードはここからできます. 音データの読み込みは遅いので, ダウンロードしてローカルで実行するのがオススメです.

FLOW

HTML5 Audio と JavaScript を使ったピアノを作る流れです. それぞれの解説ページへのリンクにつながっています.

  1. Step0 – ピアノを表示しよう!
  2. Step1 – クリックで音を鳴らそう!
  3. Step2 – アニメーションさせよう!
  4. Step3 – キー入力で音を鳴らそう!
  5. Complete – 自動再生させよう!!
  6. Return – 読み込みによる遅延を解消!!
  7. Final – Audio 要素をキャッシュして連続再生対応!!

分からない所やアドバイス, 指摘等ありましたら気軽に Twitter などでメッセージくれると嬉しいです.

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT