音楽データを連続再生した際に出る遅延についての解決策について書きました.

以前 「HTML5 Audio と JavaScript でピアノ制作」という内容の記事を書いたのですが, たまに音ズレが起きるという指摘を何人かの方から頂きました.

たしかに, どうしても音楽ファイルの読み込みにはコストがかかるのでバンバン鍵盤を叩いているとどうしても音ズレが起きます. 今ネット上で公開されている HTML5 Auido についてのサンプルのほとんどに同じような現象が起きています.

そこで解決法はないかと色々探したところ, Data URI scheme ってやつで遅延を解消することができました!!

画像ではお馴染みの, URL にリソースのデータも埋め込んじゃおうってやつですね. 詳しく知りたい方はこちら.

画像では読み込み速度を上げるために最近よく使われてたりするのですが, 今回はそれを音楽データでもやっちゃおうって話です.

下に遅延を解消した ピアノのサンプルをアップしています.

この Step で完成です! テキストエリアに入力した文字に合わせて自動再生します.

この Step ではキーボード入力でも音が鳴るようにします.

この Step は webkit つまり, Chrome と Safari 限定の Step です. 鍵盤を押すと凹んで色が変わるアニメーションを追加します.

鍵盤をクリックした際に音が鳴るようにします. この Step が今回のプログラムで最も重要です. ここをクリアすればほぼ完成です. っというより完成です.

まずは CSS を駆使してピアノを表示します. 結構コードは多めですが, やってることはシンプルです.