Audio要素では物足りない
- タイミングを正確に制御できない。
- 一度に再生できる音声の数がかなり限られている。
- 安定して音をプリバッファする方法がない。
- リアルタイムでエフェクトをかけることができない。
- 音を分析する方法がない
つまり、 音をガチャガチャいじくって、アウトプットできるよ！
どこで使えるの？
PC
-
IEは11もNG
- 次期IEで実装予定
- それ以外はOK
スマホ
- iOS6.1
- Android Chrome
-
Android 標準ブラウザはNG
- 音がなる場合もあるけど、挙動が不安定。
ローディングはどうやってやんの？
xhrでちまちまやるのもよし。CreateJSのPreloadJS + SoundJSでやるのもよし。
基本
部品をノードでつないでいく
- 部品がいっぱいあって線でつなぐイメージ
- 部品の種類
- 音源になるもの
- エフェクター
- 出力先
- Blenderのノードとかギターのエフェクターみたいなノリ。
Web Audio API - Web API インターフェイス | MDN
音源になるもの
| 名前 | 内容 |
|---|---|
| OscillatorNode | オシレーター(サイン波とかノコギリ波とかのやつ) |
| AudioBuffer | AudioBufferSourceNodeに入れるバッファ。 context.decodeAudioData(arrayBuffer, success)で作成する |
| AudioBufferSourceNode | xhrとかで取ってきたmp3などのオーディオデータを再生するやつ |
| MediaElementAudioSourceNode | audioタグやvideoタグから再生するやつ |
| MediaStreamAudioSourceNode | MediaStream(マイクとか、カメラとか)を入力ソースにするやつ |
エフェクター
| 名前 | 内容 |
|---|---|
| BiquadFilterNode | ローパスフィルタ、ハイパスフィルタとか |
| ConvolverNode | コンボリューションフィルタ。リバーブなんかができる |
| DelayNode | ディレイかけるだけ |
| DynamicsCompressorNode | コンプレッサー。音の粒をそろえたりする。 |
| GainNode | 音量調整するだけ |
| WaveShaperNode | ディストーション |
| PeriodicWaveNode | よくわからん(Used to define a periodic waveform that can be used to shape the output of an OscillatorNode.) |
出力先
- AudioDestinationNode
- MediaStreamAudioDestinationNode
分析と可視化
- AnalyserNode
オーディオチャンネルの分岐と合成
| 名前 | 内容 |
|---|---|
| ChannelSplitterNode | ステレオチャンネルを分割して、片方ずつ処理したいときとかにつかう |
| ChannelMergerNode | 複数のチャンネルをまとめる。 |
Audio spatialization
空間化
ここが詳しい → 3D 立体音響 - Web Audio API を使用したゲーム用音声の開発
| 名前 | 内容 |
|---|---|
| AudioListener | 音源を聞いてるひと的な(？)。ドップラー効果とかできる |
| PannerNode | 仮想音源の位置を移動させることで立体音響をつくる。3Dパンニング。 |
JavaScript による音声処理
| 名前 | 内容 |
|---|---|
| ScriptProcessorNode | プログラマブルなやつ。input/output両方いける。音声解析とかフィルタ作成、動的に音生成など。 |
ScriptProcessorNodeはイベントが飛んでくる
- audioprocess (event)
- AudioProcessingEvent
これらのノードのパラメータ一覧
Web Audio API 解説 - 18.各ノードのパラメータ一覧 | g200kg Music & Software
mp3の再生までの手順
- xhrでmp3などを
responseType: 'arraybuffer'でロード (非同期) -
audioContext.decodeAudioData(arrayBuffer, success, error)でAudioBuffer作成 (非同期) - AudioBufferをAudioBufferSourceNodeにぶちこむ
- 再生！
つかえそうなノード
gainとかpanは置いといて
- ScriptProcessorNode
- 音のなるタイミングでイベント → そのイベント中にbufferをいじくって自由に音を作る
- Biquad Filter
- ローパスフィルタとか、いろいろフィルタがある
- Analyser
- スペクトラム情報が取り出せる
- WaveShaper
- ディストーションエフェクト
- Convolver
- コンボリューションフィルタ
ライブラリは？
timbre.js
動かない
oampo/Audiolet
動かない
音を出すだけならSoundJSでよし
注意点
- スマホではタップ操作が必須
- ローディングは勝手に行っててもよし
- 音を鳴らすタイミングだけ、タップ操作が必須。一度タップすれば、勝手に鳴らせるようになる。
- いちどstop()すると、破棄される
- AudioBufferSourceでも同じで一度 start()して再生し終わるかstop()で止めるともうそのAudioBufferSourceは使えなくなります
デバッグ
FirefoxにWeb Audio用のコンソールがある
- パラメータをいじくれる
- ノードの追加や変更はできない
おもしろデモサイト
Web Audio Demos
遊べるサンプルがたくさんある
シンセ + シーケンサー
参考
-
オーディオデータの再生 | Web Audio APIの基本処理 | WEB SOUNDER - Web Audio API 解説 -
- コードと図解付きで詳しい。サンプルも豊富。
-
Web Audio API 解説 - 01.前説 | g200kg Music & Software
- ひと通り解説がある。軽く読めていい感じ。W3Cの仕様を日本語訳してる人のサイト。
- Web Audio API を使用したゲーム用音声の開発 - HTML5 Rocks
- いまさらながら、WebAudio APIで遊ぶ - Qiita
- Getting Started with Web Audio API - HTML5 Rocks
-
Web Music Developers JP Advent Calendar 2012 - Adventar
- よもやま話がたくさん