君、しにたもう事なかれ　Base64について

あいつはいいやつだったよ。
最近、こんなのとかこんなのとかこんなのとか作ったので、技術的成果物をここに残しておこうと思います。技術的っていうか、どうみてもゲテモノなのですが。

Base64とは何か

ぼくもあまりよくは知りません。とりあえずバイナリファイルを謎の文字列にしたのがBase64みたいです。

Base64の生成

ブラウザでBase64を生成する場合、だいたい以下の手順を踏みます

  1. input type="file"などでFileオブジェクトを取得
  2. FileReaderクラスのインスタンス(以下reader)を生成する
  3. reader.onloadendにコールバック関数を代入する。
  4. reader.readAsDataURL()メソッドの引数にFileオブジェクトを入れる
  5. 処理が成功するとreader.onloadendのコールバック関数が呼ばれるので、reader.resultでBase64を取得する


Fileオブジェクトの生成には三種類あります。
普通は

    • HTMLInputElement.files
    • ドロップイベントのコールバック関数の第一引数.dataTransfer.files


から取得します。
どちらのfilesにも配列が格納されています。


もう一つはXMLHttpRequestで取得する方法です。詳しくはこちらを参照してください。
ちなにXMLHttpRequestで生成した場合、頭に文字列を少し追加する必要があります。
だいたい「data:audio/mp3;base64,」みたいな文字列を頭に足します。
ファイルがmp3ならaudio/mp3、ファイルがpngならimage/pngという情報を頭にくっつける必要があります。これがついてないと駄目っぽいです。

で、Base64は何に使えるの？

いい質問ですねぇ。
たとえば、音楽ファイルのBase64をaudioタグのsrc属性に入れて再生ボタンやplay()を使うと、その音楽が再生できます*1。
たとえば、画像ファイルのBase64をimgタグのsrc属性に入れると、画像を表示する事が出来ます。


ブラウザはWeb画面上で可能な限りローカルファイルを認識しないようになってるので、ぼくが作った音楽プレイヤーはファイルをドロップしてBase64に変換してから再生するようにしてます。Base64に変換すればもうローカルファイルの扱いにはならないのです。


ただしBase64をHTMLで使うのには問題があります。詳しく計測したわけではないのですが、Base64をaudio.srcに入れて再生すると、とたんにPCのメモリを数百MB使用します(Chromeの場合)。jsでHTMLにBase64を書き込むだけでも相当メモリを消費します。
ローカルファイルをjsの中だけで扱いたい時にはBase64は有効ですが、サーバサイドでPHPやJavaが動いてるなら、ファイルの処理は素直にそちらに任せた方がいいと思います。





*1:音楽ファイルが再生できるかどうかはブラウザ依存です