web Audio实现pcm音频数据收集

2019年04月09日Web前端0

前面利用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实现录音与播放。

web audioweb音频

目录