読者です 読者をやめる 読者になる 読者になる

kiritterのブログ

IT業種。好きなもの 音楽(Rock,House,Trance,etc) 読書(実用書) 歩くこと 日本史 スノボー など。現代社会がこの先どう進んでいくのか興味津々の今日この頃。(Twitter : kiritter)

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

JavaScript

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

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


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

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

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

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


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

http://kiritter.github.io/jsID3/


四角の枠内に、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

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


プログラマのための文字コード技術入門 (WEB+DB PRESS plus) (WEB+DB PRESS plusシリーズ)

プログラマのための文字コード技術入門 (WEB+DB PRESS plus) (WEB+DB PRESS plusシリーズ)

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


<最近のお気に入り楽曲>

Dinka - Constant Sorrow (original mix) - YouTube

ただただ沁みます。


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