JavaScriptでwavファイルを読み込んで波形表示するサンプル

動画でリッチなことできるんなら音声でもできるんじゃね？　と思ったので書いてみました。

http://yanagiatool.appspot.com/jsaudio/load.html　（FireFox3.6系列のみ）

ローカルからwavファイルを画面にドラッグアンドドロップしてみてください。ゆっくり波形が表示されます。
読み込めるwavファイルの形式は16bitステレオのみです。

仕組み

File APIを使ってます。
FileReaderでファイルの中身をStringとして読み込んで、ヘッダをチェックして、データ部を適当にエンディアン変換しながら表示してます。

File APIの使い方やバイナリの扱い方などは

W3C File APIを使ってJavaScriptでファイル加工 - しばそんノート
http://d.hatena.ne.jp/shibason/20100111/1263191021

が参考になりました。thx！

作ってて思ったこと

JavaScriptだと、波形と音声が繋がらないなーと。
今回作ったスクリプトは波形のデータを全部配列に持っていて、それを直接編集することができます。
でも加工した波形データを再生するうまい手段がHTML5/JavaScriptにはなくて*1、こういうことをやる旨みって少ないのかなあと思ったりしました。

var speaker = new SoundOutputUnit();
speaker.renderCallback = function(time){
 ...
}

speaker.start();

みたいなことができるようになると、すごく面白くなるとは思うんですが。

*1:audioタグにdataスキームで渡すという方法はあるけど、50MBのwavを毎回出力するわけにはいかないし。