javascriptで音声波形表示サンプルプログラム(wavesurfer.js)

音声ファイルの波形が表示したい！！！

ということで、音声ファイルの波形を表示できるライブラリ「wavesurfer.js」と、HTML5 File APIを使って、ローカル音声ファイルの波形を表示するプログラムを作ってみました。

→サンプルプログラムのみを大きく表示

＜使い方＞
お手持ちの音声ファイルをFinder/Exploerから選択し、緑の枠部分にドラッグ＆ドロップしてください。波形が表示され、音声が再生されます。
各ボタンで再生の操作ができます。
start：現在の位置から再生します。
pause：再生を停止します。
restart：先頭位置から再生します。

＜おことわり＞
mac版＆windows版firefox/chromeでwav/mp3/ogg、mac版safariでwav/mp3の動作を確認しています。
wavファイルはビットレートによっては波形描画・再生できない場合があります。

ブラウザ上でもがっつり音声ファイルが使えるものなんだなあと、時代の流れをしみじみ感じました。
今回は使用していませんが、波形のズームや音声処理もできるようです。
いろいろ試していきたいと思います！！