思ったより奥が深いけど、けっこう簡単かもしれないWeb Audio API


# Audio要素では物足りない

* タイミングを正確に制御できない。
* 一度に再生できる音声の数がかなり限られている。
* 安定して音をプリバッファする方法がない。
* リアルタイムでエフェクトをかけることができない。
* 音を分析する方法がない

つまり、 **音をガチャガチャいじくって、アウトプットできるよ！**


抜粋：“[Web Audio API - オライリー](http://www.oreilly.co.jp/books/9784873116419/)”

# どこで使えるの？

http://caniuse.com/#feat=audio-api

## PC

* **IEは11もNG**
  * 次期IEで実装予定
* それ以外はOK

## スマホ
* iOS6.1
* Android Chrome
* **Android 標準ブラウザはNG**
  * 音がなる場合もあるけど、挙動が不安定。


# ローディングはどうやってやんの？

xhrでちまちまやるのもよし。CreateJSのPreloadJS + SoundJSでやるのもよし。


# 基本

## 部品をノードでつないでいく
* 部品がいっぱいあって線でつなぐイメージ
* 部品の種類
    * 音源になるもの
    * エフェクター
    * 出力先
* Blenderのノードとかギターのエフェクターみたいなノリ。

![](https://mdn.mozillademos.org/files/7893/web-audio-api-flowchart.png)


[Web Audio API - Web API インターフェイス | MDN](https://developer.mozilla.org/ja/docs/Web/API/Web_Audio_API#.E3.82.AA.E3.83.BC.E3.83.87.E3.82.A3.E3.82.AA.E3.82.BD.E3.83.BC.E3.82.B9)


### 音源になるもの

| 名前 | 内容 |
|--------|--------|
| 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 を使用したゲーム用音声の開発](
http://www.html5rocks.com/ja/tutorials/webaudio/games/#toc-3d)


| 名前 | 内容 |
|--------|--------|
| AudioListener | 音源を聞いてるひと的な(？)。ドップラー効果とかできる |
| PannerNode | 仮想音源の位置を移動させることで立体音響をつくる。3Dパンニング。 |


### JavaScript による音声処理
| 名前 | 内容 |
|--------|--------|
| ScriptProcessorNode | プログラマブルなやつ。input/output両方いける。音声解析とかフィルタ作成、動的に音生成など。 |

ScriptProcessorNodeはイベントが飛んでくる

* audioprocess (event)
* AudioProcessingEvent



## これらのノードのパラメータ一覧

[Web Audio API 解説 - 18.各ノードのパラメータ一覧 | g200kg Music & Software](http://goo.gl/ErSGDv)



# mp3の再生までの手順

* xhrでmp3などを`responseType: 'arraybuffer'`でロード (非同期)
* `audioContext.decodeAudioData(arrayBuffer, success, error)`でAudioBuffer作成  (非同期)
* AudioBufferをAudioBufferSourceNodeにぶちこむ
* 再生！



# つかえそうなノード

gainとかpanは置いといて

* ScriptProcessorNode
  * 音のなるタイミングでイベント → そのイベント中にbufferをいじくって自由に音を作る
* Biquad Filter
  * ローパスフィルタとか、いろいろフィルタがある
* Analyser
  * スペクトラム情報が取り出せる
* WaveShaper
  * ディストーションエフェクト
* Convolver
  * コンボリューションフィルタ


# ライブラリは？

[timbre.js](http://goo.gl/0gCU5)
動かない

[oampo/Audiolet](https://github.com/oampo/Audiolet)
動かない

音を出すだけならSoundJSでよし




# 注意点

* スマホではタップ操作が必須
    * ローディングは勝手に行っててもよし
    * 音を鳴らすタイミングだけ、タップ操作が必須。一度タップすれば、勝手に鳴らせるようになる。
* いちどstop()すると、破棄される
    * AudioBufferSourceでも同じで一度 start()して再生し終わるかstop()で止めるともうそのAudioBufferSourceは使えなくなります




# デバッグ

FirefoxにWeb Audio用のコンソールがある

[Web Audio Editor](https://developer.mozilla.org/ja/docs/Tools/Web_Audio_Editor)

![Three_jsのお勉強をしています。.png](https://qiita-image-store.s3.amazonaws.com/1334/2631/362205b2-b893-6cc0-b842-9c4f6ae99683.png "Three_jsのお勉強をしています。.png")

* パラメータをいじくれる
* ノードの追加や変更はできない


# おもしろデモサイト

## [Web Audio Demos](http://goo.gl/7pjx82)


遊べるサンプルがたくさんある

 [Web Audio Playground](http://webaudioplayground.appspot.com/)
![Web_Audio_Playground.png](https://qiita-image-store.s3.amazonaws.com/1334/2631/50702fa1-b9e2-6891-cfbb-c3737600d6db.png "Web_Audio_Playground.png")

## シンセ + シーケンサー

http://app.hya.io/

![app_hya_io.png](https://qiita-image-store.s3.amazonaws.com/1334/2631/67cfc49b-a5c1-bbe6-8080-a62781539df8.png "app_hya_io.png")





# 参考

* [オーディオデータの再生 | Web Audio APIの基本処理 | WEB SOUNDER - Web Audio API 解説 -](http://curtaincall.weblike.jp/portfolio-web-sounder/webaudioapi-basic/audio)
  * コードと図解付きで詳しい。サンプルも豊富。
* [Web Audio API 解説 - 01.前説 | g200kg Music & Software](http://www.g200kg.com/jp/docs/webaudio/)
  * ひと通り解説がある。軽く読めていい感じ。[W3Cの仕様を日本語訳](http://g200kg.github.io/web-audio-api-ja/)してる人のサイト。
* [Web Audio API を使用したゲーム用音声の開発 - HTML5 Rocks](http://www.html5rocks.com/ja/tutorials/webaudio/games/)
* [いまさらながら、WebAudio APIで遊ぶ - Qiita](http://qiita.com/umisama/items/fd31da94a4ba2ba34add)
* [Getting Started with Web Audio API - HTML5 Rocks](http://goo.gl/61jBF)
* [Web Music Developers JP Advent Calendar 2012 - Adventar](http://goo.gl/7Jhky)
  * よもやま話がたくさん