Web Audio APIで音を扱う

2018.11.26

Webページ上で音声を扱う

今回はWeb Audio APIを使って、Webページ上で音声の再生やマイク音声の取得を試してみます。

Web Audio API

Web Audio APIはWebアプリケーション上で音声処理を行うことのできるAPIです。これを用いることによってWebページ上で音声ファイルを再生したり、端末のマイクからの入力音声を取得して扱うことができるようになります。音声ファイルをただ再生するだけならjavascriptのAudio機能を使う方が簡単ですが、このAPIを使えば音声にエフェクトをかけるなど、より高度な操作が可能になります。

Web Audio APIの処理の流れ

Web Audio APIが音声を扱う処理の流れは以下の図のようになっています。
音声の入力点であるcreateMediaElementSourceNodeに再生したい音声ファイルなどを設定し、それを音声の出力点であるdestinationNodeに接続(connect)することにより、スピーカーなどから音声が出力されます。音量調節やエフェクトを追加したい場合はcreateMediaElementSourceNodeとdestinationNodeの中間にNodeオブジェクトを挟み込む形で接続します。

Web Audio APIを用いる上で重要なのは以下の要素です。

  • AudioContext
  • createMediaElementSourceNode
  • createBiquadFilterNode
  • createGainNode
  • destinationNode
  • AnalyserNode
  • getByteFrequencyData

AudioContext

Web Audio APIの基底となるクラスです。このAPIで音声を扱うには最初に必ずこのクラスをインスタンス化する必要があります。

createMediaElementSourceNode

AudioContextクラスが持つ内部クラスの一つで、再生したい音声ファイルやマイクからの音声を読み込む入力点となるクラスです。

createBiquadFilterNode

入力された音声データに周波数フィルターをかけることができるクラスです。ローパスフィルター(高い周波数を抑えて低い周波数を持ち上げる)やハイパスフィルター(引く周波数を抑えて高い周波数を持ち上げる)など、8種類のフィルターが用意されています。

createGainNode

入力された音声データの音量を調節することのできるクラスです。最小値は0で最大値が1です。0.1単位で細かく調節することができます。

destinationNode

AudioContextクラスが持つ内部クラスの一つで、音声の出力点となるクラスです。入力点であるcreateMediaElementSourceNodeと接続(connect)されることにより、音声を端末から出力することができます。

AnalyserNode

AudioContextクラスが持つ内部クラスの一つで、マイクの入力や音声ファイルの周波数領域の分析を行うことができます。

getByteFrequencyData

AnalyserNodeクラスが持つメソッドの一つで、入力される音声の波形データ(音の振幅)を取得できます。

デモ

以下の3つのデモを作ってみます。

  • 音声ファイルの再生
  • フィルターの適用
  • 端末のマイクから音声を取得

音声ファイルを再生

まずは任意の音声ファイルをブラウザ上でただ鳴らしてみます。
音声ファイルをセットした入力点と出力点を繋いでから、音声ファイルを再生します。

[index.html]
[index.js]

↑再生ボタンを押すと音がなります。音量に注意してください。
ポーズボタンを押すと音声が一時停止します。

フィルターの適用

Web Audio APIには音声に適用できるいくつかのエフェクト機能が用意されています。ここでは、そのうちの一つであるFilterをかけて音声の変化を確認してみます。

[index.html]
[index.js]

↑再生ボタンを押すと音がなります。音量に注意してください。
音源は一つ目と同じものですがローパスフィルターがかかっています。

端末のマイクから音声データを取得

今度は逆に、webサイトにアクセスしたユーザーの端末のマイクの音声を取得して音量をリアルタイムに画面に表示してみます。
音量に閾値を定め、音量がその値を超えたら何かインタラクションを起こす、といった応用ができそうです。

[index.html]
[index.js]

音量 0 / 100

 

↑「マイクon」のボタンを押すと、マイクが有効になり音声を取得し始めます。

端末のマイク使用の注意点

端末のマイクにアクセスするにはgetUserMedia(Stream)APIを用いる必要があり、使用する上でいくつか注意すべき点があります。

https限定

APIの仕様上、Stream APIを使用するWebページはhttpsである必要があり、httpのページでは動作しません。

iOSでの使用

2018年11月現在、Stream APIはiOSのChromeには対応しておらず、iOS SafariもiOS11以降のみの対応となっています。 モバイル環境で利用する際には想定する使用環境に注意が必要です。
またiOS Safariでは音声の自動再生・録音ができません。最初の一回は必ず画面タップなどのユーザー操作が伴っていなければなりません。

まとめ

今回はWeb Audio APIを使って、Webブラウザ上で音声を扱ういくつかのデモを作ってみました。
PCのWebブラウザ限定のゲームやアプリケーションで利用するには全く問題なさそうですが、スマートフォン向けのマイクを使ったサービスに利用する場合にはStream APIの対応している端末とブラウザのバージョンに注意が必要です。
Web Audio APIを元にインタラクティブミュージックのシステム構築に特化させたTone.jsなども公開されており、Webブラウザ上で扱える音の表現は幅広くなって来ています。