メインコンテンツへ移動
黯羽軽揚毎日少しずつ

Web Audio API 解析

無料2015-08-06#HTML#JS#音频数据分析#音频可视化#过滤特定频率#混响#音频空间化#处理声道#扭曲#合成音效#同时播放多个音频#多个音频交叉播放#音频淡入淡出

audio タグは十分に強力ではないため、Web Audio API を提供してオーディオ制御を強化し、オーディオデータ分析、データ可視化、特定周波数のフィルタリング、リバーブ、オーディオ空間化、チャンネル処理、歪み、合成音響などの強力な機能をサポートします

はじめに

本文の内容は AudioContext - Web API 接口 | MDN から整理したもので、古くなっている可能性がありますのでご注意ください（2015-06-24）

一.Web Audio API 各ノードの関係

[caption id="attachment_694" align="alignnone" width="300"]Web Audio API 各ノード間の関係 Web Audio API 各ノード間の関係[/caption]

二.Web Audio API の役割

###1.audio タグでも実現可能な機能

  • 複数のオーディオを同時再生

  • 複数のオーディオをクロスフェード再生（同時再生を基に制御を追加）

  • 音量調整（ゲイン値を調整）

  • フェードイン/フェードアウト（同上）

###2.特徴的な機能

  • オーディオ時間、周波数の取得、データ可視化の実現（音声再生：http://mdn.github.io/voice-change-o-matic/）

  • 特定周波数のフィルタリング（フィルター、ローパスフィルター、ハイパスフィルター、バンドパスフィルター、ローシェルフフィルター、ハイシェルフフィルター、ピーキングフィルター、ノッチフィルター、オールパスフィルター。ローパスフィルターは低周波数の帯域幅を確保し、高周波数帯域の音波を破棄します）

  • リバーブ効果（エコー）

  • オーディオ空間化

  • オーディオストリーム内の各チャンネルにアクセスして個別処理

  • ステレオ効果

  • 非線形歪み効果

  • 音響の生成（電子オルガンのシミュレーション：http://cool.techbrood.com/fiddle/5644）

三.Web Audio API 概要

###AudioContext

####Properties

  • AudioContext.currentTime

説明：double 秒を返します。AudioContext は作成されると 0 からカウント開始

役割：オーディオ再生に使用。例えば source.start(time); の time パラメータ

  • AudioContext.destination

説明：AudioDestinationNode 型のオブジェクトを返します。AudioContext 内の全ノードの最終ノードを表し、通常はオーディオ出力デバイス（例：スピーカー）

役割：一連のノードを AudioContext.destination に接続しないと音が出ません

  • AudioContext.listener

説明：AudioListener オブジェクトを返します

役割：【3D オーディオ空間化（3D audio spatialization）の実現】

  • AudioContext.mozAudioChannelType

説明：非標準、互換性が悪く、使用非推奨

役割：

  • AudioContext.sampleRate

説明：浮動小数点数を返します。サンプリングレートを表します

役割：同じ AudioContext 内の全ノードのサンプリングレートは同じため、サンプリングレート変換はサポートされません

####Methods

  • AudioContext.close()

説明：AudioContext を閉じ、すべてのオーディオリソースを強制的に解放

役割：閉じた後はノードを作成できませんが、オーディオのデコード、buffer の作成は可能

備考：https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/close

  • AudioContext.createAnalyser()

説明：AnalyserNode オブジェクトを返します

役割：【オーディオ時間、周波数の取得、データ可視化の実現（スペクトル図？）】

  • AudioContext.createBiquadFilter()

説明：BiquadFilterNode オブジェクトを返します

役割：2 次フィルター。一般的なタイプのフィルターに設定可能

  • AudioContext.createBuffer()

説明：空の AudioBuffer オブジェクトを返します

役割：オーディオデータを格納し、AudioBufferSourceNode オブジェクトで再生

  • AudioContext.createBufferSource()

説明：AudioBufferSourceNode オブジェクトを返します

役割：AudioBuffer 内のオーディオデータを再生

  • AudioContext.createChannelMerger()

説明：ChannelMergerNode オブジェクトを返します

役割：AudioContext.createChannelSplitter() と連携してチャンネルを操作。複数のオーディオストリームのチャンネルを単一のオーディオストリームに統合

  • AudioContext.createChannelSplitter()

説明：ChannelSplitterNode オブジェクトを返します

役割：【オーディオストリーム内の各チャンネルにアクセスして個別処理】するために使用。通常 AudioContext.createChannelMerger() と連携

  • AudioContext.createConvolver()

説明：ConvolverNode オブジェクトを返します

役割：【オーディオにリバーブ効果を追加】

  • AudioContext.createDelay()

説明：DelayNode オブジェクトを返します

役割：遅延を設定。デフォルトパラメータは 0 秒

  • AudioContext.createDynamicsCompressor()

説明：DynamicsCompressorNode オブジェクトを返します

役割：オーディオ信号の圧縮に使用

  • AudioContext.createGain()

説明：GainNode オブジェクトを返します

役割：【全体の音量を制御】

  • AudioContext.createJavaScriptNode()

説明：廃止済み

役割：

  • AudioContext.createMediaElementSource()

説明：新しい MediaElementAudioSourceNode オブジェクトを返します

役割：ページ上の既存の audio または video 要素からデータを取得

  • AudioContext.createMediaStreamDestination()

説明：WebRTC MediaStream に関連付けられた MediaStreamAudioDestinationNode オブジェクトを返します

役割：オーディオストリームを表し、ローカルファイルとして保存または他のコンピューターに送信可能

備考：Web RTC はネットワークリアルタイム通信で、ブラウザ間の audio/video データ共有を実現。ネイティブ API サポートがあり、サードパーティプラグインに依存しません。詳細：https://developer.mozilla.org/en-US/docs/Web/Guide/API/WebRTC

  • AudioContext.createMediaStreamSource()

説明：新しい MediaStreamAudioSourceNode オブジェクトを返します

役割：MediaStream オブジェクトパラメータが必要。例：navigator.getUserMedia インスタンス

  • AudioContext.createOscillator()

説明：OscillatorNode オブジェクトを返します

役割：周期波を表し、主に【一定のトーン（恒音？）の生成】に使用

  • AudioContext.createPanner()

説明：PannerNode オブジェクトを返します

役割：入力オーディオストリームを 3 次元空間に空間化

  • AudioContext.createPeriodicWave()

説明：PeriodicWave（周期波）を作成

役割：周期波形を定義し、OscillatorNode の出力を形成

  • AudioContext.createScriptProcessor()

説明：ScriptProcessorNode オブジェクトを返します

役割：オーディオを直接処理

  • AudioContext.createStereoPanner()

説明：StereoPannerNode オブジェクトを返します

役割：【ステレオ効果】を実現。入力オーディオストリームを等冪平移アルゴリズムでステレオ画像に定位

  • AudioContext.createWaveShaper()

説明：WaveShaperNode オブジェクトを返します

役割：【非線形歪み効果】を実現

  • AudioContext.createWaveTable()

説明：廃止済み

役割：

  • AudioContext.decodeAudioData()

説明：ArrayBuffer 内のオーディオファイルデータを非同期でデコード

役割：ArrayBuffer は通常 XMLHttpRequest の response（送信時に responseType 属性を arraybuffer に設定すると arraybuffer 型のレスポンスが返る）

備考：戻り値は xhr.response であり、xhr.responseText ではありません

####Related pages for Web Audio API

  • AnalyserNode

説明：分析ノード

役割：リアルタイムの周波数および時域分析情報を提供。データのみ取得し、入力は変更しない

備考：時域分析は信号関連の用語。時域内で信号のフィルタリング、増幅、統計特徴計算、相関分析などの処理を総称して信号の時域分析と呼びます。

  • AudioBuffer

説明：オーディオバッファ

役割：AudioContext.decodeAudioData() または AudioContext.createBuffer() で作成可能。バッファに格納後、AudioBufferSourceNode で再生可能

  • AudioBufferSourceNode

説明：オーディオバッファソースノード

役割：AudioBuffer 内のデータをオーディオ信号に変換

備考：AudioBufferSourceNode は 1 回しか再生できません。AudioBufferSourceNode.start() も 1 回しか呼び出せません。AudioBufferSourceNode は再利用不可（複数回再生するには複数の AudioBufferSourceNode を作成する必要あり）。ただし AudioBuffer は再利用可能

  • AudioChannelManager

説明：非標準。現在 FF のみサポート。使用非推奨

役割：

  • AudioDestinationNode

説明：オーディオデスティネーション（出力）ノード

役割：AudioContext 内の全ノードの終点を表し、通常はデバイスのスピーカー

備考：入力チャンネル数に制限あり。maxChannelCount を超えると例外が発生。おそらく 6

  • AudioListener

説明：オーディオリスナー。人の位置と方向を表します

役割：オーディオ空間化に使用。AudioContext 内の全 PannerNode は AudioListener に空間化され、AudioContext.listener 属性に格納

  • AudioNode

説明：オーディオノード

役割：最上位抽象インターフェース。継承関係は画像 rel.png を参照

  • AudioParam

説明：オーディオパラメータ

役割：オーディオ関連のパラメータを表します。通常は AudioNode のパラメータ。例：GainNode.gain

  • AudioProcessingEvent

説明：廃止予定。Audio Workers により代替

役割：

  • BiquadFilterNode

説明：双二次フィルター

役割：単純な低次フィルター。AudioContext.createBiquadFilter() で作成可能

  • ChannelMergerNode

役割：チャンネルマージャーノード

説明：ChannelSplitterNode と連携して、異なるモノラル入力を単一出力に統合

備考：各チャンネルを個別処理するために使用。例：チャンネルミックスの実現

  • ChannelSplitterNode

説明：チャンネルスプリッターノード

役割：ChannelMergerNode と連携して、オーディオソースの各チャンネルを一組のモノラル出力に分離

備考：同上

  • ConvolverNode

説明：コンボルバーノード

役割：線形畳み込みを実装。通常リバーブ効果の実現に使用

備考：畳み込みリバーブはオーディオの空間感（ホール感？）を強化。複雑なアルゴリズムで、比較的大きなオーバーヘッドが発生する可能性あり

  • DelayNode

説明：ディレイノード

役割：入力から出力までの遅延を設定

  • DynamicsCompressorNode

説明：ダイナミクスコンプレッサーノード

役割：圧縮効果を実装。クリッピング歪みを防止。AudioContext.createDynamicsCompressor で作成

備考：【音楽制作やゲームオーディオでよく使用】

  • GainNode

説明：ゲインノード

役割：音量調整に使用。チャンネル数は変更しない

  • MediaStreamAudioDestinationNode

説明：メディアストリームオーディオデスティネーション（出力）ノード

役割：単一オーディオストリームメディアトラック（AudioMediaStreamTrack）を含む WebRTC MediaStream のオーディオデスティネーションを表します。Navigator.getUserMedia で作成可能

  • MediaStreamAudioSourceNode

説明：メディアストリームオーディオソースノード

役割：WebRTC MediaStream（例：ネットワークカメラやマイク）を含むオーディオソースを表します。オーディオソースに似た AudioNode

  • NotifyAudioAvailableEvent

説明：非標準。互換性が悪く、使用非推奨

役割：

  • OfflineAudioCompletionEvent

説明：オフラインオーディオ完了イベント

役割：OfflineAudioContext の処理終了時にトリガー

  • OfflineAudioContext

説明：オフラインオーディオコンテキスト

役割：全 AudioNode を接続するオーディオ処理グラフを表します

備考：OfflineAudioContext はデバイスハードウェアをレンダリングせず、できるだけ早く処理を完了して AudioBuffer に出力

  • OscillatorNode

説明：オシレーターノード

役割：周期波形（例：正弦波）を表します。指定された周波数の正弦波を作成し、トーンは一定

  • PannerNode

説明：パンナーノード

役割：空間内のオーディオ信号源の位置と動作を表します

備考：右手デカルト座標系で位置を記述。速度ベクトルと方向コーンで動きを表します。Pan は声像、Phase は位相。声像とは音場内の楽器の発音位置点。���単に言えば、音の方位、左寄りか右寄りか。

  • ParentNode

説明：親ノード

役割：特殊な Node。子を持つことができます

備考：ParentNode は抽象 DOM ノード。作成不可。Element、Document、DocumentFragment オブジェクトが実装

  • PeriodicWave

説明：周期波

役割：周期波形を定義。OscillatorNode の出力の形成に使用可能

  • ScriptProcessorNode

説明：スクリプトプロセッサーノード

役割：js によるオーディオの生成、処理、分析を実装。InputBuffer と OutputBuffer の 2 つの Buffer を含む

  • StereoPannerNode

説明：ステレオパンナーノード

役割：オーディオフローを左または右にパン。低コスト等価アルゴリズムでオーディオフローをステレオ画像に配置

  • WaveShaperNode

説明：ウェーブシェイパーノード

役割：非線形歪み増幅器。明らかな増幅効果の実現に加え、信号に暖かみを追加するためによく使用

コメント

コメントはまだありません

コメントを書く