web Audio实现pcm音频数据收集

2019年04月09日Web前端

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

音频源

getUserMedia

录音的音频源当然是设备的话筒(音频输入设备),所以需要用到navigator.mediaDevices.getUserMedia()这个方法。

该方法有一个参数,

  • constraints,指定请求的媒体类型,这儿只牵扯都音频,所以仅需audio:true即可。

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

注:不推荐使用navigator.getUserMedia()方法,因为该方法已经从web标准中删除了。

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就是音频源节点。

音频处理节点

createScriptProcessor

createScriptProcessor(),该方法创建一个ScriptProcessorNode用于通过JavaScript直接处理音频,有三个参数:

  • bufferSize,缓冲区大小,以样本帧为单位。一般有以下值 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数据了,为了能够正常的播放,还得略微处理下,下篇将将探讨如何转数字信号。

代码地址:web Audio实现pcm音频数据收集,想要看js录音的可以看这篇文章:纯js实现录音与播放