[ Jpn | Eng ]

Main Menu



Recent

最近の記事

Search

サイト内検索:

Archive

Powered by
MTOS 5.2.2


g200kg > Web Audio API 解説 > 09.スクリプトプロセッサーの使い方

Web Audio API 解説

2016/11/14

09.スクリプトプロセッサーの使い方



スクリプトプロセッサとは

ScriptProcessorノードは生の音声データを Javascript で自由に操作できるノードです。自分のやりたい事が自由に書けるので信号処理の中身に覚えのある人なら ScriptProcessor だけ使えれば、全部その中で処理してしまうという方法もあります。

ただし残念ながらこのノードは既に非推奨となっており、将来的には削除される予定です。 メインスレッド上で動作するためあまり重い処理をさせられないというのがその理由で、代替として別スレッドで動作する AudioWorklet の仕様が策定中ですがこちらはまだブラウザへの実装が進んでいません。

ScriptProcessorを作るのは

audioctx.createScriptProcessor([buffersize [,inputch [,outputch]]])
という書式で、inputch、outputchはそれぞれ入力と出力のチャンネル数(デフォルトは2)を指定します。 ですが、「出力するだけでいいから」とinputchに0を指定したりすると環境によって動かなくなったりするようです。 buffersize は 256 から 16384 の 2 の累乗の値で、指定すればその値になりますが、省略または 0 を渡すとシステムが最適な値を適当に選んでくれます。


スクリプトプロセッサのパラメータ

スクリプトプロセッサのonaudioprocessには実際に音声データを処理する関数名設定します。bufferSizeはノード作成時に指定したバッファサイズで作成後の変更はできません。

パラメータ単位デフォルト値値の範囲内容
onaudioprocessEventListener---Javascirptの関数を指定
bufferSize数値-環境による256 ~ 16384リードオンリー。作成時に指定されたオーディオデータの受け渡しのバッファサイズ。256, 512, 1024, 2048, 4096, 8192, 16384のどれか

スクリプトプロセッサ使用例

このScriptProcessorを使って何か音の出るものを作ってみます。

なおこのデモでは ScriptProcessor はページが立ち上がると勝手に走り始めますが、モバイルデバイスの場合、何らかのユーザーアクションをトリガーにしないと音が出ないという制約がありますのでダミーのオシレーターを置いてボタンを押すとそれをスタートさせています。


<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>Script Processor</h1>
<img src="../images/scrproc.png"/><br/>
<button onclick="Play()">Play</button>
<script type="text/javascript">

var bufsize = 1024;
var play = 0;

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

var scrproc = audioctx.createScriptProcessor(bufsize);
scrproc.onaudioprocess = Process;
scrproc.connect(audioctx.destination);
var osc = null;

function Process(ev) {
	var buf0 = ev.outputBuffer.getChannelData(0);
	var buf1 = ev.outputBuffer.getChannelData(1);
	for(var i = 0; i < bufsize; ++i)
		buf0[i] = buf1[i] = (Math.random() - 0.5) * play;
}

function Play() {
	if(play) {
		play = 0;
	}
	else {
		if(osc == null){
			osc = audioctx.createOscillator();
			osc.start();
		}
		play = 1;
	}
}
</script>
</body>
</html>

ノードの接続としては ScriptProcessor を作ってdestinationに繋いでいます。スクリプトプロセッサーの onaudioprocessプロパティ に Javascript の関数を指定すると必要に応じて関数がコールバックされますのでその中で音声データを直接出力バッファに書き込みます。

出力バッファはコールバック関数の引数から ev.outputBuffer.getChannelData()という形で取ってきますが、チャンネル数がデフォルトでは 2 になっていますのでバッファは2つあります。

ここでは両方のバッファを乱数 (-0.5 ~ +0.5)で埋めていますので音としてはノイズになります。また、[Play] のボタンを押すと音が出たり止まったりをトグルするようになっています。

テストページ:スクリプトプロセッサーの使い方




g200kg