AudioファイルとImageファイルをローカルストレージに保存

Posted by dab | 2012年3月5日 月曜日 3:52:08 < JavaScript, コンピュータ >

AudioファイルとImageファイルをローカルストレージに保存するサンプルを公開。
http://home.wi-wi.jp/lab/00s/

Audioは上手く行ってないけど、画像(canvas経由)は問題なく保存できる。


追記。

うまくいったっぽい。
http://home.wi-wi.jp/lab/00t/

動作検証はSafari5.1、Chrome17、Opera11.6、Firefox10です。
IE8以下は不可。audioとlocalStorageが必要なので。
IE9は不明。当方、WindowsXPなので。

残念ながらiPhone/iOS5ではAudioだけ無理でした。
上手く動いていたら、onloadでAudioを再生することもできるかもしれませんが、、、


簡単に解説すると、XHRで受け取ったデータをBASE64エンコードして、ローカルストレージに保存するだけ。

localStorage[key]=base64encode(tag+req.responseText);

再生はsrcに入れるだけ。

image.src=localStorage[key];
new Audio(localStorage[key]);

tagはimageやaudioのヘッダです。
実際のコードは実験室を見てください。

XHRのバイナリデータ通信に付いて調べてみると、バイトコードの一部だけ欠損するらしいです。
(全部が消えると受信できないとはっきりわかっていいんですけどねぇ)
そこで、overrideMimeType()を使うと、この欠損がなくなるらしい。

req.overrideMimeType('text/plain; charset=x-user-defined');

https://developer.mozilla.org/en/XMLHttpRequest
ここによると、
送信部分

req.responseType='blob';

受信部分

someFunc( req.response );

とするのが正式らしいけど、responseがnullになります。。。

ということで、実験室のようなコードになりました。


videoはファイルサイズ的に無理、、、

TrackBack URI : https://home.wi-wi.jp/blog/wp-trackback.php?p=720

Leave a comment

:mrgreen: :neutral: :twisted: :shock: :smile: :???: :cool: :evil: :grin: :oops: :razz: :roll: :wink: :cry: :eek: :lol: :mad: :sad: