[ Jpn | Eng ]

Main Menu



Recent

最近の記事

Search

サイト内検索:

Archive

Powered by
MTOS 5.2.2


g200kg > Web Audio API 解説 > 02.とりあえず音を出す

Web Audio API 解説

2016/11/14

02.とりあえず音を出す



とりあえず音を出すコード

まずは何でも良いからとりあえず音を出してみます。コードはこんな感じになります。

<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>First Step</h1>
<img src="images/osc1.png"/><br/>
<button onclick="Play()"> Play </button><br/>

<script type="text/javascript">

window.AudioContext = window.webkitAudioContext||window.AudioContext;
var audioctx = new AudioContext();

var osc = audioctx.createOscillator();
osc.connect(audioctx.destination);

function Play() {
	osc.start();
}
</script>
</body>
</html>

まずnew AudioContext() でオーディオコンテキストというオブジェクトを作ります。 11行目で windows.AudioContext に代入しているのは、iOS Safariなど、一部に残っている webkit プリフィックスが必要なブラウザへの対応ですが、その辺を気にしなければ不要です。

次にcreateOscillator()でオシレータを作って、それをconnect()メソッドを使ってaudioctx.destinationに接続しています。その後ボタンを押されるとオシレータがstart()されるようになっています。他にもフィルターとか、ゲイン調整とか単機能のノードと呼ばれるオブジェクトがあってそれを組み合わせて音を作っていくわけですね。接続している先の audioctx.destination は AudioContext が持っている最終的な出力ポイントでここに繋がれた信号が音になって出て行きます。

なお、モバイルデバイスではページのロードからオシレータをスタートして実際に音を出すまでの一連の流れの中にボタンを押すなどのユーザーのアクションを一度入れる必要があります。


テストページ:とりあえず音を出す

ノードの種類

Web Audio APIでは様々な種類のノードが準備されています。これらを必要に応じて作成し、connect()して行く事で様々な音を合成したりエフェクトをかけたりできるようになります。 次の表は準備されているノードの一覧です。

GainNode入力した信号を増幅または減衰させて出力します。パラメータはgainの1つだけです。
DelayNode入力した信号を遅らせて出力します。パラメータはdelayTimeの1つだけです。
AudioBufferSourceNodeバッファにあるデータを音源として信号を出力します。再生速度の可変やループの設定ができます。
MediaElementAudioSourceNodeHTML上に組み込まれているaudioエレメントを音源にします。
ScriptProcessorNode入力と出力の間でJavascriptで自由に処理が行えます。このノードは今後 AudioWorklet という仕組みに置き換えられる事が決まっており、現在はまだ使えますが非推奨となっています。
PannerNode三次元空間内でのパンニングが設定できます。
StereoPannerNodeステレオ (2ch) でのパンニングが設定できます。
ConvolverNodeコンボリューション演算を行います。主にリバーブに用いられますが任意の特性のフィルターなども作れます。
AnalyserNode信号を周波数分析してパワースペクトルや波形データを取り出せます。主な用途としてはスペクトルアナライザーがあります。
ChannelSplitterNodeステレオLRや5.1chの信号の各チャンネルを分離して出力します。
ChannelMergerNodeそれぞれ独立した信号をまとめてステレオLRや5.1chの信号を出力します。
DynamicsCompressorNodeいわゆるコンプレッサーです。入力信号の音量の変化を抑えて出力します。
BiquadFilterNode入力信号にフィルターをかけて出力します。フィルターの種類はLPF/HPF/BPFなど8種類あります。
IIRFilterNodeこちらもフィルターですが、フィルター係数を自由に設定できますが、その代りにリアルタイムに特性を変化させる事はできません。固定的で特殊な特性のフィルターが必要な場合に使用します。
WaveShaperNode入力信号に入力対出力のカーブを適用して出力します。ディストーションなどを作る事ができます。
OscillatorNode周波数と波形を指定して出力します。
MediaStreamAudioSourceNodeWebRTCでも使われるMediaStreamを信号源にします。例えばマイクから入ってくる信号を扱うような場合に使用します。
MediaStreamAudioDestinationNodeMediaStreamの出力として扱える形で出力します。

音の源を作るノード

上にあげたノードの中で入力がなくても音が出せる音源となるノードは、Oscillator / AudioBufferSource / ScriptProcessor / MediaElementAudioSource / MediaStreamAudioSource の5つです。ただし、MediaElementAudioSourceはあくまでHTML上のエレメントとして振舞いますので発音タイミングをWeb Audio APIを使って正確に制御する事はできません。また、MediaStreamAudioSourceはマイクを扱うアプリでは必須ですが楽器アプリなどでは使いません。

典型的にはシンセ的なものならばOscillator、リズムマシンやサンプラーのようにワンショットのサンプルデータを使用するならAudioBufferSourceを使えば良いと思いますが、結局やりたい事の自由度からScriptProcessorで全部やってしまうというケースもあります。

ただ、上でも書いたように ScriptProcessor は現在既に非推奨となっており、その代替とされている AudioWorklet はまだブラウザへの実装が済んでいないという状況である事に注意してください。




g200kg