JavaScript基本修炼(14)——WebRTC在浏览器中怎样取得指定花样的PCM数据
2019-11-18杂谈搜奇网40°c
A+ A-目次
- 一. PCM花样是什么
- 二. 浏览器中的音频收集处置惩罚
- 三. 需求完成
- 设计1——服务端FFmpeg完成编码
- 设计2——ScriptProcessorNode手动处置惩罚数据流
- 参考文献
示例代码托管在：http://www.github.com/dashnowords/blogs
博客园地点：《大史住在大前端》原创博文目次
华为云社区地点：【你要的前端打怪升级指南】
本文中最主要的信息：32为浮点数示意
16bit位深数据时是用-1~+1的小数来示意16位的-32768~+32767的！翻遍了MDN都没找到诠释，我的心田很崩溃！
近来不少朋侪须要在项目中对接百度语音辨认的REST API接口，在读了我之前写的【Recorder.js+百度语音辨认】全栈设计手艺细节一文后依然对Web音频收集和处置惩罚的部份比较疑心，本文仅针对音频流处置惩罚的部份举行诠释，全栈完成设计的手艺要点，能够拜见上面的博文，本篇不再赘述。
一. PCM花样是什么
百度语音官方文档关于音频文件的请求是：
pcm,wav，arm及小顺序专用的m4a花样，请求参数为16000采样率，16bit位深，单声道。
PCM编码，全称为"脉冲编码调制"，是一种将模拟信号转换成数字信号的要领。模拟信号平常指一连的物理量，比方温度、湿度、速率、光照、声响等等，模拟信号在恣意时候都有对应的值；数字信号平常是模拟信号经由采样、量化和编码等几个步骤后获得的。
比方如今麦克风收集到了一段2秒的音频模拟信号，它是一连的，我们有一个很菜的声卡，收集频次为10Hz，那末经由采样后就获得了20个离散的数据点，这20个点对应的声响值多是种种精度的，这关于存储和后续的运用而言都不轻易，此时就须要将这些值也离散化，比方在上例中，信号的局限是0~52dB，假定我们愿望将0~63dB的值都以整数情势纪录下来，假如采纳6个bit位来存储，那末就能够辨认（2^6-1=63）个数值，如许收集的信号经由过程四舍五入后都以整数情势保留就能够了，最小精度为1dB；假如用7个bit位来保留，可存储的差别数值个数为(2^7-1=127)个，假如一样将0~63dB映照到这个局限上的话，那末最小精度就是0.5dB，很显著如许的处置惩罚一定是有精度丧失的，运用的位数越多精度越高，盘算机中天然须要运用8的整数倍的bit位来举行存储，经由上述处置惩罚后数据就被转换成了一串0和1构成的序列，如许的音频数据是没有经由任何紧缩编码处置惩罚的，也被称为“裸流数据”或“原始数据”。从上面的示例中很轻易看出，用10Hz的采样率，8bit位存储采样点数值时，纪录2秒的数据一共会发生2X10X8 = 160个bit位，而用16bit位来存储采样点数据时，纪录1秒的数据也会发生1X10X16 = 160个bit位，假如没有任何附加的申明信息，就没法晓得这段数据究竟该怎样运用。依据指定请求举行编码后获得的序列就是pcm数据，它在运用之前平常须要声明收集相干的参数。
下图就是一段采样率为10Hz，位深为3bit的pcm数据，你能够直观地看到每一个步骤所做的事情。
wav花样也是一种无损花样，它是依据范例在pcm数据前增加44字节长度用来添补一些声明信息的，wav花样能够直接播放。而百度语音辨认接口中后两种花样都须要经由编码算法处置惩罚，平常会有差别水平的精度丧失和体积紧缩，所以在运用后两种数据时必然会存在分外的编解码时候斲丧，所以不难看出，种种花样之间的挑选实在就是对时候和空间的衡量。
二. 浏览器中的音频收集处置惩罚
浏览器中的音频处置惩罚涉及到许多
API的合作，相干的观点比较多，想要对此深切相识的读者能够浏览MDN的【Web 媒体手艺】篇，本文中只做大抵引见。
起首是完成媒体收集的WebRTC手艺，运用的旧要领是navigator.getUserMedia( ),新要领是MediaDevices.getUserMedia( )，开发者平常须要本身做一下兼容处置惩罚，麦克风或摄像头的启用涉及到平安隐私，平常网页中会有弹框提醒，用户确认后才可启用相干功用，挪用胜利后，回调函数中就能够获得多媒体流对象，后续的事情就是缭绕这个流媒体睁开的。
浏览器中的音频处置惩罚的术语称为AudioGraph，实在就是一个【中心件形式】，你须要建立一个source节点和一个destination节点，然后在它们之间能够衔接许许多多差别范例的节点，source节点既能够来自流媒体对象，也能够本身添补生成，destination能够衔接默许的扬声器端点，也能够衔接到媒体录制APIMediaRecorder来直接将pcm数据转换为指定媒体编码花样的数据。中心节点的范例有许多种，可完成的功用也异常丰富，包含增益、滤波、混响、声道的兼并星散以及音频可视化剖析等等异常多功用(能够参考MDN中给出的AudioContext可建立的差别范例节点)。固然想要闇练运用还须要一些信号处置惩罚方面的学问，关于非工科背景的开发者而言并不轻易进修。
三. 需求完成
平常的完成要领是从getUserMedia要领获得原始数据，然后依据相干参数手动举行后处置惩罚，相对比较烦琐。
设计1——服务端FFmpeg完成编码
许多示例都是将音频源节点直接衔接到默许的输出节点（扬声器）上，然则险些没什么意义，笔者现在还没有找到运用Web Audio API自动输出pcm原始采样数据的要领，可行的要领是运用MediaRecorder来录制一段音频流，然则录制实例须要传入编码相干的参数并指定MIME范例，终究获得的blob对象平常是经由编码后的音频数据而非pcm数据，但也由于经由了编码，这段原始数据的相干参数也就已存在于输出后的数据中了。百度语音官方文档引荐的要领是运用ffmpeg在服务端举行处置惩罚，只管显著在音频的编解码上绕了弯路，但一定比本身手动编码难度要低很多，而且ffmepg异常壮大，后续扩大也轻易。参考数据大抵从灌音完毕到返回效果，PC端耗时约1秒，挪动端约2秒。
中心示例代码(完全示例见附件或开首的github代码仓)：
//WebRTC音频流收集
navigator.mediaDevices.getUserMedia({audio:true})
.then((stream) => {
//实例化音频处置惩罚上下文
ac = new AudioContext({
sampleRate:16000 //设置采样率
});
//建立音频处置惩罚的源节点
let source = ac.createMediaStreamSource(stream);
//建立音频处置惩罚的输出节点
let dest = ac.createMediaStreamDestination();
//直接衔接
source.connect(dest);
//生成针对音频输出节点流信息的录制实例,假如不经由过程ac实例调治采样率，也能够直接将stream作为参数
let mediaRecorder = window.mediaRecorder = new MediaRecorder(dest.stream, {
mimeType: '',//chreome中的音轨默许运用花样为audio/webm;codecs=opus
audioBitsPerSecond: 128000
});
//给灌音机绑定事宜
bindEventsForMediaRecorder(mediaRecorder);
})
.catch(err => {
console.log(err);
});灌音机事宜绑定：
//给灌音机绑定事宜
function bindEventsForMediaRecorder(mediaRecorder) {
mediaRecorder.addEventListener('start', function (event) {
console.log('start recording!');
});
mediaRecorder.addEventListener('stop', function (event) {
console.log('stop recording!');
});
mediaRecorder.addEventListener('dataavailable', function (event) {
console.log('request data!');
console.log(event.data);//这里拿到的blob对象就是编码后的文件，既能够当地试听，也能够传给服务端
//用a标签下载;
createDownload(event.data);
//用audio标签加载
createAudioElement(event.data);
});
}当地测试时，能够将生成的音频下载到当地，然后运用ffmpeg将其转换为目的花样：
ffmpeg -y -i record.webm -f s16le -ac 1 -ar 16000 16k.pcm细致的参数申明请移步ffmpeg documentation，至此就获得了相符百度语音辨认接口的灌音文件。
设计2——ScriptProcessorNode手动处置惩罚数据流
假如以为运用ffmpeg有点“杀鸡用牛刀”的觉得，那末就须要本身手动处置惩罚二进制数据了，这是就须要在audioGraph中增加一个剧本处置惩罚节点scriptProcessorNode，依据MDN的信息该接口将来会烧毁，用新的Audio Worker API庖代，但现在chrome中的状态是，Audio Worker API标记为实验功用，而旧的要领也没有明白的提醒申明会移除（平常设计取销的功用，掌握台都邑有黄色字体的提醒）。但无论如何，相干的基本原理是一致的。
scriptProcessorNode节点运用一个缓冲区来分段存储流数据，每当流数据添补满缓冲区后，这个节点就会触发一个audioprocess事宜（相当于一段chunk），在回调函数中能够获取到该节点输入信号和输出信号的内存位置指针，然后经由过程手动操纵就能够举行数据处置惩罚了。
先来看一个简朴的例子，下面的示例中，处置惩罚节点什么都不做，只是把单声道输入流直接拷贝到输出流中：
navigator.mediaDevices.getUserMedia(constraints)
.then((stream) => {
ac = new AudioContext({
sampleRate:16000
});
let source = ac.createMediaStreamSource(stream);
//组织参数依次为缓冲区大小，输入通道数，输出通道数
let scriptNode = ac.createScriptProcessor(4096, 1, 1);
//建立音频处置惩罚的输出节点
let dest = ac.createMediaStreamDestination();
//串连衔接
source.connect(scriptNode);
scriptNode.connect(dest);
//增加事宜处置惩罚
scriptNode.onaudioprocess = function (audioProcessingEvent) {
//输入流位置
var inputBuffer = audioProcessingEvent.inputBuffer;
//输出流位置
var outputBuffer = audioProcessingEvent.outputBuffer;
//遍历通道处置惩罚数据，当前只要1个输入1个输出
for (var channel = 0; channel < outputBuffer.numberOfChannels; channel++) {
var inputData = inputBuffer.getChannelData(channel);
var outputData = outputBuffer.getChannelData(channel);
//用按钮掌握是不是纪录流信息
if (isRecording) {
for (let i = 0; i < inputData.length; i = i + 1) {
//直接将输入的数据传给输出通道
outputData[i] = inputData[i];
}
}
};
}在上面的示例加工后，假如直接将效果衔接到ac.destination（默许的扬声器节点）就能够听到录制的声响，你会听到输出信号只是反复了一遍输入信号。
然则将数据传给
outputData输出后是为了在后续的节点中举行处置惩罚，或许终究作为扬声器或MediaRecorder的输入，传出后就没法拿到pcm数据了，所以只能本身来假扮一个MediaRecorder。
起首在上面示例中向输出通道透传数据时，改成本身存储数据，将输入数据打印在掌握台后能够看到缓冲区大小设置为4096时，每一个chunk中获取到的输入数据是一个长度为4096的Float32Array定型数组，也就是说每一个采样点信息是用32位浮点来存储的，【recorder.js】给出的转换要领以下：
function floatTo16BitPCM(output, offset, input) {
for (let i = 0; i < input.length; i++, offset += 2) {
let s = Math.max(-1, Math.min(1, input[i]));
output.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7FFF, true);
}
}看起来的确是不晓得在干吗，厥后参考文献中找到了相干诠释：
32位存储的采样帧数值，是用
-1到1来映照16bit存储局限-32768~32767的。
如今再来看上面的公式就比较轻易懂了：
//下面一行代码保证了采样帧的值在-1到1之间，由于有可能在多声道兼并或其他状态下超出局限
let s = Math.max(-1, Math.min(1, input[i]));
//将32位浮点映照为16位整形示意的值
output.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7FFF, true);假如s>0实在就是将0~1映照到到0~32767，正数第一位标记位为0，所以32767对应的就是0111 1111 1111 1111也就是0x7FFF，直接把s当系数相乘就能够了；当s为负数时，须要将0~-1映照到0~-32768，所以s的值也能够直接当作比例系数来举行转换盘算，负数在内存中存储时须要运用补码，补码是原码除标记位之外按位取反再+1获得的，所以-32768原码是1000 0000 0000 0000（溢出的位直接抛弃）,除标记位外按位取反获得1111 1111 1111 1111,末了再+1运算获得1000 0000 0000 0000(溢出的位也直接抛弃)，用16进制示意就是0x8000。趁便多说一句，补码的存在是为了让正值和负值在二进制形状上相加即是0。
公式里的output很显著是一个ES6-ArrayBuffer中的DataView视图，用它能够完成夹杂情势的内存读写，末了的true示意小端体系读写，对这一块学问不太熟悉的读者能够浏览阮一峰先辈的ES6指南（前端必备工具书）举行相识。
参考文献
how-to-convert-between-most-audio-formats-in-net。
