HTML5 File API の readAsDataURL を使ってファイルを Data URI scheme に変換するツール作ってみました.

というのも, 以前書いた「HTML5 Audio ピアノ制作 : Return – 読み込みによる遅延を解消!」で 音楽ファイルを Data URI scheme に変換する必要がありました. 1個1個変換するツールはいくつかあったのですが, ドレミ… のファイル全部をいちいち1個ずつ変換していくのは面倒だったので, 複数のファイルを簡単に Data URI scheme に変換できるツールを作った次第です.

image タグに指定していたファイル名を Data URI scheme に変換して埋め込めばページの読み込み速度が上がったりもするので, よければ使ってみてください.

HTML5 localStorage を File っぽく使えるクラスを作ってみました.

名前は WebFile. 使用方法は Python の File クラスに似ています.

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

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

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

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

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

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

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

チャーンチャーーンチャンチャチャチャーンチャーンチャンチャチャチャーンチャンチャンチャチャーン♪♪

ってことで CSS3 でスターウォーズのあのシーンを再現してみました. Safari の専売特許だった perspective が, つい最近 Chrome でも使えるようになったので早速使ってみた次第です.

webkit のみ, つまり chrome と safari で動きます. あと音楽が流れるのでご注意ください.

最近暑いですねぇ. ってことで雪を降らしてみました. 去年は, JavaScript と Canvas エレメントでこんなのを作りました.

今回は CSS3 とほんのちょっとの JavaScript コードで簡単にできます.

WebGL は OpenGL ES 2.0 をベースとしているため, glVertex3f や glColor といった機能をサポートしていません. さらにちまたにある WebGL の入門は, いきなり行列や頂点バッファを使う前提だったりシェーダをガリガリ書く入門サイトが目立ちます.

そのせいで WebGL にたいする敷居がかなり高くなっているように感じたので, このブログサイトでは 2D から始めて徐々に WebGL に慣れていけるよう サンプルをつくっていこうと思っています.お付き合い下さい.

Windows 版の OpenGL では大抵 glVertex3f を使って2D描画をするところから始まります. そこで今回は glVertex3f もどきを作成してポンポン 2D 描画できるようにしたいと思います.

とはいってもまぁサポートされていたとしても内部的に効率が良くないのでがっつり 3D ゲームを作ったりする際には使用しないのですが, あくまで勉強用ということで…

以前作ったサンプルに関数を追加するだけで確認できます.