pcm编码html audio,web Audio实现pcm音频数据收集

前面利用web audio api播放了本地音乐，并且利用createOscillator生成音频并播放。既然如此，我们能否接着用js去实现简单的录音呢？

音频源

getUserMedia

该方法有一个参数，constraints，指定请求的媒体类型，这儿只牵扯都音频，所以仅需audio:true即可。

该方法返回一个promise，成功回调的参数是一个 MediaStream对象。

createMediaStreamSource

此时createMediaStreamSource()方法就有用啦，引用MDN上的一段话：AudioContext接口的createMediaStreamSource()方法用于创建一个新的MediaStreamAudioSourceNode 对象， 需要传入一个媒体流对象(MediaStream对象)， 然后来自MediaStream的音频就可以被播放和操作。

他返回的是MediaStreamAudioSourceNode类型的，也就是音频源节点，到此处，音频源已经有了，下面看下保存音频的节点(音频处理节点)。

navigator.mediaDevices.getUserMedia({

audio: true

}).then((stream) => {

audioInput = context.createMediaStreamSource(stream);

}).catch((err) => {

console.log('error');

});

此时，audioInput就是音频源节点。

音频处理节点

createScriptProcessorbufferSize，缓冲区大小，以样本帧为单位。一般有以下值 256,512,1024,2048,4096,8192,16384。当传0时，系统会取当前环境最合适的缓冲区大小。每当缓冲区满时，则会触发audioprocess事件，即bufferSize控制着回调事件的频率。注：mdn提示 chrome 31版本的不支持传0的方式。

numberOfInputChannels，值为整数，用于指定输入node的声道的数量，默认值是2，最高能为32，且不能为0。

numberOfOutputChannels，值为整数，用于指定输出node的声道的数量，默认值是2，最高能取32，不能为0。

保证numberOfInputChannels和numberOfOutputChannels相等就行了，通过监听audioprocess后，就可以处理对应的音频流了。

recorder = context.createScriptProcessor(4096,1,1);

recorder.onaudioprocess = function(e) {

// getChannelData返回Float32Array类型的pcm数据

var data = e.inputBuffer.getChannelData(0);

inputData.push(newFloat32Array(data));

size += data.length;

}

我这默认是一通道的，所以只对0进行了数据收集。MDN上说，audioporcess缓冲区的数据是，非交错的32位线性PCM，标称范围介于-1和之间+1，即32位浮点缓冲区，每个样本介于-1.0和1.0之间。所以等录音结束后，inputData中就是存放的pcm格式的录音数据了(还需处理下)。

总结

现在我们手上已经有了简单的pcm数据了，为了能够正常的播放，还得略微处理下，下篇将将探讨如何转数字信号。

想要看js录音的可以看这篇文章：纯js实现录音与播放。

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。