HTML5 Audio ピアノ制作 : Return – 読み込みによる遅延を解消!!

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

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

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

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

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

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

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

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

Read More

HTML5 Audio ピアノ制作 : Step2 – アニメーションさせよう!

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

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

Read More

HTML5 Audio ピアノ制作 : Step1 – クリックで音を鳴らそう!

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

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

Read More