はじめに

この記事は、prolab Advent Calendar 2016の12月21日の記事として書かれています(遅刻です)。 www.adventar.org

自己紹介

こんにちは、Fukusanです。プロラボでJavaScriptを書いたり、某ちゃんさんにタスクを投げられたりしています。

今回作ってみたもの

今回は、音声ファイルをドロップすると再生する静的HTMLを(深夜テンションで)書きました。
※PCで開いてください、モバイルフレンドリーではないです(ごめんなさい)

音声ファイルをresultの領域にドロップすると再生します。(音が出るので注意)
ファイルをドロップしてから再生されるまで時間がかかる場合があります

See the Pen rWRBxw by 福さん (@Fukusan) on CodePen.

ほんのちょっとWeb Audio APIについて解説

今回、僕が使った機能について簡単に説明します。ちゃんと理解できているか怪しいので間違いを見つけた方は教えていただけると嬉しいです。

AudioContext

音声の再生を管理するクラス、AudioContext.destinationに接続することでWeb audio APIで音を鳴らす事ができます。

AnalyserNode

AudioContext.createAnalyser()の返り値で、音声の時間と周波数を解析することができます。

AudioBufferSourceNode

AudioContext.createBufferSource()の返り値で、AudioBufferオブジェクトに書き込まれた音声データを再生することができます。

今回作ったものについて

画面への表示についてはcanvasにただ描画しているだけなので省略します。また、音声ファイルの読み込みについても今回は省略します。

音声データのデコードについて

ArrayBufferとして読み込んだファイルのデータを

//audioCtxにはthis.audioContextが入っている
this.audioCtx.decodeAudioData(data,callback)

でデコードします。callbackには、デコードの結果が引数に渡されます。今回は、デコードの結果をAudioBufferSourceNode.bufferに代入しています。

AudioNodeの接続の関係

AudioNode(AnalyserNode,AudioBufferSourceNodeなど)は

//AudioNodeの部分には
//AnalyserNode,AudioBufferSourceNodeなどが入る
AudioNode.connect(AudioNode);

と書くことによって接続することができます。今回作ったものでは、 AudioBufferSourceNode→AnalyserNode→AudioContext.destination という風に接続しています。 AudioBufferSourceNodeで再生した音をAnalyserNodeでスペクトル情報を取得して画面表示しさらに、音をAudioContext.destinationに渡して鳴らしています。

スペクトル情報の取得について

音のスペクトル情報はAnalyserNodeのgetByteFrequencyDataメソッドで取得できます。

//this.analyserにはAnalyserNodeが入っている
var spectrums = new Uint8Array(this.analyser.frequencyBinCount);//結果を入れるためのspectrums(Uint8Array)を準備
this.analyser.getByteFrequencyData(spectrums);//spectrumsにスペクトル情報(0～255)を入れる

spectrumsの長さはAnalyserNodeのfftSizeというプロパティの値(デフォルトは2048)により変化しますが、その長さは、AnalyserNode.frequencyBinCountから取得することができます。このようにして取得したスペクトル情報を使って描画しています。

まとめ

僕はWeb Audio APIを初めて使ってみて、機能がとても充実していることに驚きました。特にスペクトル情報の取得が簡単に行えることはとても便利です。ぜひ、一度興味がある方はWeb Audio APIを使ってみてください！ただ、僕は説明が下手なので上記の内容だけで理解できる人は少ないと思います。もし、興味があるという人は、自分で調べていただくともっとわかりやすいサイトが出てくると思います(このブログの意味…)

こんな感じで終わりたいと思います。

prolab Advent Calendar 2016、明日はゲ・ドリンク大先生の記事です。

Fukusanの日記らしきもの

なんとも言えない感じで更新したり、しなかったりするブログです

Web Audio API使ってみた