[ Jpn | Eng ]

Main Menu



Recent

最近の記事

Search

サイト内検索:

Archive

Powered by
MTOS 5.2.2


g200kg > Web Audio API 解説 > 06.バッファソースでワンショットサンプルから音を出す

Web Audio API 解説

2016/11/14

06.バッファソースでワンショットサンプルから音を出す



AudioBufferSourceの使い方

ワンショットのサンプルを保持しておいて鳴らす場合は AudioBuffer + AudioBufferSourceNode を使用します。AudioBuffer にはサンプルの元データを保持し、音を出す際に AudioBufferSourceNode を作って鳴らした後はそのまま捨てます。AudioBufferSourceNode の再使用はできません。

元データの AudioBuffer は AudioContext.createBuffer() で指定サイズのバッファが作成できますが、.wav や .mp3などのデータから作成するには、AudioContext.decodeAudioData() を使用します。

ファイルのフォーマットとしては wav / mp3 / ogg が使用できます。


AudioBufferSourceのパラメータ

パラメータ単位デフォルト値値の範囲内容
bufferAudioBuffer-null-再生するオーディオバッファ
playbackRateAudioParamなし1-∞ ~ +∞再生速度。このパラメータは k-rate です。
detuneAudioParamセント0-∞ ~ +∞再生速度に対するデチューン。このパラメータは k-rate です。
loopブール値-false-ループ再生の指定
loopStart数値00~バッファ長ループ開始位置
loopEnd数値00~バッファ長ループ終了位置。0の場合、バッファ全体がループ対象となる
start([when [,offset [,duration]]])関数---再生開始。whenは開始時刻(秒)。offset/durationはバッファ中の再生位置指定(単位は秒)。
stop([when])関数---再生停止。whenは停止時刻(秒)

AudioBufferSourceの使用例

ワンショットの音声ファイルを鳴らす例を下に示します。

起動後、LoadSample() 関数では、「./snare.wav」というファイルをXMLHttpRequest() で取ってきて decodeAudioData() に渡しています。 デコードにはある程度の時間がかかる事に注意してください。歴史的経緯からデコード終了時のコールバックも使えますが、戻り値は Promise になっていますのでそちらを使った方が良いでしょう。

その後「Play」ボタンが押される度に AudioBufferSource ノードを作成して、buffer を鳴らします。

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

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

var buffer = null;
LoadSample(audioctx, "./snare.wav");

function Play() {
	var src = audioctx.createBufferSource();
	src.buffer = buffer;
	src.connect(audioctx.destination);
	src.start();
}

function LoadSample(ctx, url) {
	var req = new XMLHttpRequest();
	req.open("GET", url, true);
	req.responseType = "arraybuffer";
	req.onload = function() {
		if(req.response) {
			ctx.decodeAudioData(req.response).then(function(b){buffer=b;},function(){});
		}
	}
	req.send();
}

</script>

</body>
</html>
テストページ:BufferSourceからワンショットの音を鳴らす




g200kg