[JavaScript] data scheme 全盛時代の到来か!?

JavaScript の data スキーム を使った興味深いデモ2本。
 

data:audio/wav で演奏できるドラムマシーン



事前に base64 エンコードした wav 形式の音声データ を利用して、再生しています。
JS のデモなのに、見た目も格好いいのが◎。
data:audio/wav;base64,UklGRhwMAABXQVZFZm10IBAAAAABAAEAgD4AAIA+AA
ABAAgAZGF0Ya4LAACAgICAgICAgICAgICAgICAgICAgICAgICAf3hxeH+AfXZ1eH
x6dnR5fYGFgoOKi42aloubq6GOjI2Op7ythXJ0eYF5aV1AOFFib32HmZSHhpCalI
iYi4SRkZaLfnhxaWptb21qaWBea2BRYmZTVmFgWFNXVVVhaGdbYGhZbXh1gXZ1go
eIlot1k6yxtKaOkaWhq7KonKCZoaCjoKWuqqmurK6ztrO7tbTAvru/vb68vbW6vL
       :
moriyoshi さんの のように動的生成ではなくて、同時発音しているみたい。
しかし、これだけ、ぴったりタイミング制御できるもんなんですね。
Flash は使っていません。Firefox で再生できました。
Chrome では、Quicktime が必要と言われてしまいました。

data:image/bmp で動的に BMP 画像を生成するアニメーション



JavaScript でビットマップ画像をピクセル単位で動的に生成して、
data スキーマ経由でアニメーション表示しています。
data:image/bmp;charset=iso-8859-7,%42%4d%36%30%00%00%00%00%00%00
%36%00%00%00%28%00%00%00%40%00%00%00%c0%ff%ff%ff%01%00%18%00%00%
00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%00%0
0%00%53%85%ce%53%85%ce%53%85%ce%53%85%ce%53%85%ce%53%85%ce%53%85
%ce%53%85%ce%53%85%ce%53%85%ce%53%85%c6%53%85%c6%53%85%c6%53%85%
       :
base64 でなくて、%HH の URL エンコードを使っているのは珍しい。
JavaScript で使い捨てするには、この方が早いんでしょうね。
UTF-8 でなくするために charset=iso-8859-7 を指定するのもポイントか。
 
この仕組みを使うと、レイトレーシングでも何でもできます。
でも、本当にやっている人がいたのは、驚きました。w

data スキームを使うと、ファイルフォーマットと MIME タイプが分かっていれば、
PDF でも、PPT でも、どんなファイルも生成可能です。
(ただし、ローカルに保存させる場合はファイル名を付けられない)

ブログ気持玉

クリックして気持ちを伝えよう!

ログインしてクリックすれば、自分のブログへのリンクが付きます。

→ログインへ

なるほど(納得、参考になった、ヘー)
驚いた
面白い
ナイス
ガッツ(がんばれ!)
かわいい

気持玉数 : 4

驚いた
面白い 面白い 面白い

この記事へのコメント

namae
2009年03月22日 13:44
>Flash は使っていません。Firefox で再生できました。Chrome では、Quicktime が必要と言われてしまいました。

Firefox もプラグインは必要だと思われます。

この記事へのトラックバック