Web Audio APIでマイクから取得したinputBufferを再生したい

Question

前提・実現したいこと

JavaScriptのWeb Audio APIを利用して、マイクから受け取ったバッファをそのまま再生したいのですが、取得したバッファ(e.inputBuffer)の再生がうまくいきません。

該当のソースコード

const handleSuccess = function(stream) {
	const context = new AudioContext();
	const source = context.createMediaStreamSource(stream);
	const processor = context.createScriptProcessor(1024, 1, 1);
	const playSource = context.createBufferSource();

	source.connect(processor);
	processor.connect(context.destination);

	processor.onaudioprocess = function(e) {
		
		// 再生
		playSource.buffer = e.inputBuffer.getChannelData(0);
		playSource.connect(context.destination);
		playSource.start();

	};
};

navigator.mediaDevices.getUserMedia({ audio: true, video: false })
	.then(handleSuccess);

発生しているエラーメッセージ

Uncaught TypeError: Failed to set the 'buffer' property on 'AudioBufferSourceNode': Failed to convert value to 'AudioBuffer'.

試したこと

Web RTCを利用した簡単な方法(https://github.com/webrtc/samples/blob/gh-pages/src/content/getusermedia/audio/js/main.jsなど)も試してみましたが、一つ一つのバッファを取得したいため、onaudioprocessイベントを使用した方法を利用したいと思っています。

Answer 1

ScriptProcessorNode の使い方がおかしい気がします。

    processor.onaudioprocess = function(e) {

        // 再生
        playSource.buffer = e.inputBuffer.getChannelData(0);
        playSource.connect(context.destination);
        playSource.start();

    };

audioprocessイベントでは、ScriptProcessorNodeに入力された inputBuffer を処理して outputBuffer に渡すことが必要です。e.inputBuffer.getChannelData(0) の内容を e.outputBuffer.getChannelData(0) にコピーする必要があります。

しかし、マイク入力をそのまま出力したいというゴールなら ScriptProcessorNode は不要で、source をそのまま context.destination につなげればいいです。

source.connect(context.destination);

Comments

[hosh]

速やかな回答有難うございます！
outputBuffer もあるのですね。
もう少し詳しく調べてみたいと思います。