JavaScriptでバイナリデータ（MP3のID3タグ）を読んでみる

大変ごぶさたしています。
気づけば、最後にブログを書いてから、１年近く経ちました。
この間、たくさんの出来事があり、
ともかく、十数年暮らした東京を離れ、Ｕターン直前の時期だったりします。

その話はまた別の機会として、本題です。

超久しぶりにブログを書こうという気持ちが生まれたところで、
今まで本や音楽の記事しか書いていませんでしたが、初めてJavaScriptの内容にしてみました。

さて、今さらなのですが・・・
数ヶ月前、JavaScriptで、Javaのbyte[]とほぼ同じカタチで、
バイナリデータを操作できることを知りました。(^^;)

とうとうJavaScriptでそこまでできるようになったか～と感慨に耽りつつ、
ぜひ何か読み取ってみたいと思い、そこで思い当たったのが、MP3。
MP3に埋め込んだID3タグのデータ（楽曲名やジャケット写真）が抜き出せるなあ、と。
（ただ単純に自分の楽しみとして書いてみたいと）

その後もいろいろそれどころじゃない状態が続いていましたが、
先日ようやくちょっと時間ができ、気分転換にJavaScript書きたい！と、
ID3仕様を拾い読みしながら、もろもろ決め打ちしながら書いた次第です。

動かせる状態で公開してみました。
（装飾していないので、見栄え良くないですが・・・>< ）

四角の枠内に、MP3ファイルをドラッグ＆ドロップすると、
画面下部に、楽曲名やジャケット写真が表示される、というものです。
（そのMP3に、ID3v2.3で、それらのデータが埋め込まれていたら）

JavaScriptで処理しているだけなので、
つまりサーバーに送信したりはなく、ブラウザ上での処理なので、
また、MP3を更新したりもないので、
手元にMP3があったら気軽にドロップしてみて下さい。

制約がもろもろあったり、Chromeでしか動作確認していなかったり、なので、
うまくいかない場合も多々あると思いますが・・・m(__)m
（特に、邦楽曲はShift_JISで書かれていたりして、文字化けします）
（あと、少なくとも IE9以下では動かないです。。(^^;) ）

以下のような流れで、ドロップしたMP3ファイルのバイナリデータを、bytesから読みました。

    (略)
  var reader = new FileReader();
    (略)
  reader.readAsArrayBuffer(file);
    (略)
  var bytes = new Uint8Array(arrayBuffer);

とりあえず、決め打ちながらも読めたぞ、というところで書くのをやめました。。

＜今回の話に関係する本＞

読みたいなあと横目で見つつ、読めずにいたこの本、数ヶ月前にようやく読みました。
とても読み易い内容で、楽しみながら読みました。
JavaScriptパターンの著者だと後から気づきました。
最近、JavaScriptの本が多く出ているので、それらも全部読みたいのですが・・・。

こちらも、各種の情報が１冊に凝集されていて、とても楽しく拝見し、大変ためになりました。

ただただ沁みます。

というわけで、ブログを日常的に再開できるのはまだ先になりそうですが、
ひとまずは約１年ぶりの投稿まで。

kiritterのブログ