Web Audio API 前知識：音声処理のために知っておくべき仕組みと用語

Webページ上で音声処理 (サウンドエンジニアリング) をするには、Web Audio APIというJavaScript APIを利用することになる。
この記事では、Web Audio APIを使ったサウンドエンジニアリングを行うにあたって知っておくべき仕組みや用語をまとめておきたい。

音の表現方法
- 時間領域表現
- 周波数領域表現
サンプリングレート (サンプリング周波数、サンプルレート)
チャンネル
音声ノード (audio node)
AudioContextオブジェクト / 音声処理グラフ (audio processing/routing graph)
参考文献

音の表現方法

音とは、空気の振動を耳で感知したものである。
この振動をデジタルなデータとして扱い、それを視覚化するには、二種類の表し方がある。

時間領域表現

横軸を時間、縦軸を -1 ～ 1 の波の振幅とするグラフで音を表す方法。
音の波形を見たいときに使う。

f:id:audiovisualcoding:20211209205308j:plain — 音の時間領域表現

周波数領域表現

横軸を周波数 (音の高さ)、縦軸を音圧レベル [単位 dB (デシベル)] とするグラフで音を表す方法。
このグラフはスペクトル (スペクトラム) と呼ばれる。

f:id:audiovisualcoding:20211209210147j:plain — 音の周波数領域表現

サンプリングレート (サンプリング周波数、サンプルレート)

音を時間領域で表すためには、非常に短い時間ごとに振幅の数値をとる (標本化・サンプリングする) 必要がある。
この標本化の頻度がサンプリングレートであり、波形の横軸の細かさにあたる。
また、この標本化されたデータの一つ一つを、サンプルという。
画像の解像度と同じように、サンプリングレートが高いほうが、よりなめらかで正確な波形になる。

1秒に何回標本化するかという数値なので、単位は Hz (ヘルツ) を用いる。
サンプリングレートがたとえば8,000Hzの場合、質を保てる音の周波数はその半分の4,000Hzまでである (これ以上高い音は取れない) 。
そのため、一般的には人間の可聴域の最大値 (約20,000Hz) をカバーできる 44,100Hz や 48,000Hz であることが多い*1。

チャンネル

チャンネルとは音声の経路のことである。
チャンネル数に応じて、それぞれのチャンネルが最終的に空間レイアウト上のどのスピーカーから再生されるかが決まる。
後述する「音声ノード」も、それぞれ受け持つことができるチャンネル数が決まっている。

代表的なチャンネル構成は以下のようなものである。

モノ / モノラル (Mono)
ステレオ (Stereo)
クアッド (Quad)
5.1

モノ / モノラル (Mono)

チャンネル数1。

Ch.1 … M (Mono / モノ)

ステレオ (Stereo)

チャンネル数2。

Ch.1 = L (Left / 左)
Ch.2 = R (right / 右)

クアッド (Quad)

チャンネル数4。

Ch.1 = L (left / フロント左)
Ch.2 = R (right / フロント右)
Ch.3 = SL (surround left / サラウンド左)*2
Ch.4 = SR (surround right / サラウンド右)

5.1

チャンネル数6。

Ch.1 = L (left / フロント左)
Ch.2 = R (right / フロント右)
Ch.3 = C (center / 中央)
Ch.4 = LFE*3 (subwoofer / 低音)
Ch.5 = SL (surround left / サラウンド左)
Ch.6 = SR (surround right / サラウンド右)

音声ノード (audio node)

DOMの音声処理に関わるオブジェクトを総して、音声ノードという。
音源のデータを持つノード、音にエフェクトをかけるノード、出力先を指定すノードなどがこれにあたる。

音声ノードはそれぞれに一つまたは複数の入力 (inputs) と出力 (outputs) を持ち、一方のノードのoutputから他方のノードのinputへと接続することができる。

音声ノードのうち、主要なものは次の4種類に分けられる*4：

音源を定義するノード
エフェクトを定義するノード
音声の出力先を定義するノード
音声データを分析するノード

音源を定義するノード

OscillatorNode

指定された波形 (サイン波や矩形波など) と周波数に応じた音を発生させる。

AudioBufferSourceNode

AudioBufferに格納されている音声データを受け取って再生する。
AudioBufferとは、短い音声データを格納するためのバッファであり、一般的には45秒未満であることが推奨される。

MediaElementAudioSourceNode

HTMLの<audio>要素や<video>要素に設定されている音声を操作する。
AudioBufferに格納するには長い音声を再生したいときに、このノードが適している。

MediaStreamAudioSourceNode

getUserMedia()メソッドで取得したマイクやWebカメラからの音声を操作する。

エフェクトを定義するノード

BiquadFilterNode

音源に、タイプ・周波数・Q値を指定したフィルタをかける。

フィルタタイプ
音源をスペクトルで見たときに、どの部分を除去または増幅するかを決定する。

ローパス (lowpass) … 指定の周波数より高い領域を除去する (＝低い領域を残す)。
ハイパス (highpass) … 指定の周波数より低い領域を除去する (＝高い領域を残す)。
バンドパス (bandpass) … 指定の周波数のまわりだけ残し、それ以外の領域を除去する。
ノッチ (notch) … 指定の周波数のまわりだけ除去する。バンドストップフィルタとも呼ばれる。
ローシェルフ (lowshelf) … 指定の周波数より低い領域の音圧を上げる、または下げる。
ハイシェルフ (highshelf) … 指定の周波数より高い領域の音圧を上げる、または下げる。
ピーキング (peaking) … 指定の周波数のまわりの音圧を上げる、または下げる。
オールパス (allpass) … すべての周波数領域を残すが、わずかに遅延させる効果を持つ。これによって音をはっきりさせたり、重厚にしたりすることができる(らしい)。

周波数
それぞれのフィルタで、どの周波数を起点にするかを決定する。
数値の手がかりとして、人間の可聴域は 20 ～ 20,000Hz、男性の声の平均値は 85 ～ 155Hz、女性の声の平均値は 165 ～ 255Hz である。

Q値*5
フィルタの「鋭さ・ゆるさ」のようなものを決定する。
たとえば、ローパスフィルタにおいてQ値が低い (1.0以下など) と、指定した周波数のまわりの幾分広い領域にかけてゆるやかに減衰カーブを描く。
反対にQ値を高くすると、より精密に除去できるが、代わりに指定した周波数が部分的に増幅されるという副作用がある。

ConvolverNode

コンボリューション (畳み込み) リバーブをかける。
このリバーブ方式は、インパルス応答 (IR / impulse response)の音声データを格納したAudioBufferを必要とする。

まず「インパルス」について説明すると、一瞬だけ非常に大きい振幅をあらわす信号のことであり、音として聞くと「風船が割れる音」や「手を叩く音」のような、パチンという音である。
これをたとえばコンサートホールのような空間で鳴らすと、その残響音が聞こえるはずである。
(音における) インパルス応答とは、このように「任意の空間でインパルスを鳴らしてその残響音を録音したもの」として理解してよいと思う。

コンボリューションリバーブは、インパルス応答を素材として使うことで、音源にそれと同じ残響効果をつけることができるエフェクトである。