APIというものがあります。これは、mp3やwavなどの音声データを扱い、エフェクトをかけたり他の音声データと合成したりと、かなり高度なことができるAPIとなる予定です。APIを利用して、ファイルフォームにセットした音声ファイルの再生と同時に周波数データを取得し、棒グラフに描画してみるサンプルを作ったので解説していきます。サンプル作ったものを下に表示しています。APIに対応していないので動作しません。mp3やwavファイルを選択すると、再生と同時に棒グラフが描画されます。別タブで開くhttps://kray.jp/projects/webaudio/index.htmlHTMLindex.htmlを用意しました。ここには、ファイルのinput要素と、canvas要素があるだけです。</body></html>JavaScriptindex.htmlにある「下記のJavaScriptコード」という部分に入るコードです。プラグインは何も使っていません。2014年10月現在のSafariで動作させる場合はAudioContextのかわりにwebkitAudioContextを使用してください。FileReader;sourceは後ほどAudioBufferSourceNodeを格納します。再生とリアルタイムに処理をするので、OfflineAudioContextではなくAudioContextを使います。ローカルのファイルを読み取ることができます。analyser.connect(audioContext.destination);高速フーリエ変換の分割サイズであるfftSizeには2の累乗の数値のみ設定することができます。これはデフォルト2048になっていますが、2048だと取得できるデータ量が多すぎてリアルタイム処理がやり難いので適度に減らしています。10);canvasの横幅を設定している部分で使っているfrequencyBinCountは、fftSizeの1/2の値が取得できます。};fileReaderでファイルの読み込みが終わった時のコールバックです。APIでは扱えないので、decodeAudioDataを使ってデコードしています。このメソッドは第3引数にデコードエラー時のコールバックを設定することも可能ですが、今回は省いています。デコードしたデータをsourceにセットし、source.start(0)によって、0秒後に音声の再生を開始します。音声ファイルを変更したときに、レンダリングと音声を止めておかないとまずいことになるので16行目で対応しています。});フォームにセットされたファイルをバイナリファイルとして読み込んでいるだけです。読み込み後にfileReaderのonloadが発火します。};spectrumsの変更がないように思えますが、getByteFrequencyDataはspectrumsを直接書き換えています。canvasへの描画は、spectrumsの値をそのまま棒グラフの長さとしているので単純です。以上で周波数データを棒グラフで描画することができます。高度な操作ができるので、ゲーム関係やサウンドビジュアル関係など、その道のコアな人たちにとっては夢の広がるAPIなのではないでしょうか。W3Cのサンプルを見るだけでも夢が広がります。date*日本語が含まれない投稿は無視されますのでご注意ください。fax.0422-26-9781お問い合わせはこちらからどうぞ。