web Audio实现pcm音频数据收集
前面利用web audio api播放了本地音乐,并且利用createOscillator生成音频并播放。既然如此,我们能否接着用js去实现简单的录音呢? 音频源getUserMedia录音的音频源当然是设备的话筒(音频输入设备),所以需要用到navigator.mediaDevices.getUserMedia()这个方法。 该方法有一个参数,
该方法返回一个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就是音频源节点。 音频处理节点createScriptProcessorcreateScriptProcessor(),该方法创建一个ScriptProcessorNode用于通过JavaScript直接处理音频,有三个参数:
保证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实现录音与播放。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |