この記事は公開されてから1年以上経過しており、最新の内容に追従できていない可能性があります。
- Web Audio API - Web API | MDN
- ブラウザ上だけで音をいろいろこねこねできる
AudioContextや各AudioNodeがキモ- 基本的にはAudioNodeをつなげていくことでデータを取得したり、設定値に基づいて波形への操作ができる
- 例えばマイクから入力して、周波数分析をして、Canvasで可視化、みたいなものがシュッと作れる
- AudioContextを作る
- AnalyserNodeを作る
- AudioContextをつかってMediaStreamからMediaStreamAudioSourceNodeを作る（入力になる）
- MediaStreamAudioSourceNodeにAnalyserNodeをつなげる
- これでもうUint8Arrayでデータが取れるようになってしまう
- これを0からネイティブに書こうとすると、特に分析で、自分でFFTするかFFTできるライブラリを入れたりして大変そう（あまりわからない）
- デバイスの初期化とか開放とかいろいろあって結構たいへんになりそうなイメージ
- WebAudio APIさまさまや！
- 入力にはざっくりファイル（バッファ）から、オシレーター発振、MediaElement、MediaStreamが使える
- ファイル, AudioBufferSourceNode
- XHR -> ArrayBuffer -> AudioContext.decodeAudioData とやると取れる
- オシレータ, OscillatorNode
- 通常はサイン波。OscillatorNode.type を変えられる
- sine, square, sawtooth, triangle
- 余談だけど Synth1 を思い出す: Software Synthesizer Synth1
- OscillatorNode.setPeriodicWave() でカスタムした波形も入る（？）
- MDNのドキュメントだとよくわからなくて、WebAudioの定義には式が書かれているのでこれを参考にするのがよさそう
- https://webaudio.github.io/web-audio-api/#waveform-generation
- 通常はサイン波。OscillatorNode.type を変えられる
- ファイル, AudioBufferSourceNode
- 出力先はデフォルト(?)かMediaStreamを選べる
- AudioDestinationNode
- AudioContext.destinationに入っている
- ブラウザのデフォルトの出力先になるのかな
- MediaStreamAudioDestinationNode
- AudioContext.createMediaStreamDestinationで取れる
- MediaStreamAudioDestinationNode.streamとしてMediaStreamが取れる
- ので、それをaudioやvideoタグのMediaStreamあるいはMediaStreamTrackとして渡せる
- AudioDestinationNode
- あとはいろんなAudioNodeが準備されている
- BiquadFilterNode, フィルタ
- ConvolverNode, リバーブ
- DelayNode, ディレイ
- DynamicsCompressorNode, コンプレッサ
- GainNode, 音量調節
- WaveShaperNode, ディストーション
- AnalyserNode, 分析
- ChannelSplitterNode, チャンネル分離
- ChannelMergerNode, チャンネル結合
- PannerNode, パン
- StereoPannerNode, ステレオの左右バランス
- OfflineAudioContextを使うと、オフライン、出力されないAudioContextが作れる
- これは中にAudioBufferを持っていて、レンダリングがすることでそのAudioBufferにデータが出力される
- AudioContextはオンラインなので出力があるけど、これはバッファだけのオンメモリなので高速、なのかな
- Webブラウザ上でシンセサイザー、というのかな、そういうのが作れそう