JavaScript基础修炼(14)
示例代码托管在: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
指南(前端必备工具书)进行了解。
JavaScript基础修炼(14)的更多相关文章
- JavaScript基础修炼(14)——WebRTC在浏览器中如何获得指定格式的PCM数据
目录 一. PCM格式是什么 二. 浏览器中的音频采集处理 三. 需求实现 方案1--服务端FFmpeg实现编码 方案2--ScriptProcessorNode手动处理数据流 参考文献 示例代码托管 ...
- javascript基础修炼(2)——What's this(上)
目录 一.this是什么 二.近距离看this 三. this的一般指向规则 四. 基本规则示例 五. 后记 开发者的javascript造诣取决于对[动态]和[异步]这两个词的理解水平. 一.thi ...
- javascript基础修炼(4)——UMD规范的代码推演
javascript基础修炼(4)--UMD规范的代码推演 1. UMD规范 地址:https://github.com/umdjs/umd UMD规范,就是所有规范里长得最丑的那个,没有之一!!!它 ...
- javascript基础修炼(7)——Promise,异步,可靠性
开发者的javascript造诣取决于对[动态]和[异步]这两个词的理解水平. 一. 别人是开发者,你也是 Promise技术是[javascript异步编程]这个话题中非常重要的,它一度让我感到熟悉 ...
- javascript基础修炼(8)——指向FP世界的箭头函数
一. 箭头函数 箭头函数是ES6语法中加入的新特性,而它也是许多开发者对ES6仅有的了解,每当面试里被问到关于"ES6里添加了哪些新特性?"这种问题的时候,几乎总是会拿箭头函数来应 ...
- javascript基础修炼(10)——VirtualDOM和基本DFS
1. Virtual-DOM是什么 Virtual-DOM,即虚拟DOM树.浏览器在解析文件时,会将html文档转换为document对象,在浏览器环境中运行的脚本文件都可以获取到它,通过操作docu ...
- javascript基础修炼(11)——DOM-DIFF的实现
目录 一. 再谈从Virtual-Dom生成真实DOM 二. DOM-Diff的目的 三. DOM-Diff的基本算法描述 四. DOM-Diff的简单实现 4.1 期望效果 4.2 DOM-Diff ...
- javascript基础修炼(1)——一道十面埋伏的原型链面试题
在基础面前,一切技巧都是浮云. 题目是这样的 要求写出控制台的输出. function Parent() { this.a = 1; this.b = [1, 2, this.a]; this.c = ...
- javascript基础修炼(9)——MVVM中双向数据绑定的基本原理
开发者的javascript造诣取决于对[动态]和[异步]这两个词的理解水平. 一. 概述 1.1 MVVM模型 MVVM模型是前端单页面应用中非常重要的模型之一,也是Single Page Appl ...
随机推荐
- VMware Tools按钮变灰色,无法安装的解决方法
参考博客: https://blog.csdn.net/weixin_30639719/article/details/94846851 https://jingyan.baidu.com/artic ...
- 19.8.8 flutter 学习之创建第一个可变的Widget
创建一个很简单的可变的Widget 效果就是点击字的时候会变化 完整代码: class CarPage extends StatefulWidget { @override _CarState cre ...
- eclipse springboot 官网demo启动 SpringApplication类找不到
网上有很多类似的,我这种情况是:maven的问题,,, 我自己下载了maven并集成到了eclipse上,导致java.lang.NoClassDefFoundError: org/springfra ...
- mahout从入门到放弃--安装(1)
1.稀里糊涂下载 我的集群是hadoop 2.7.3 ,本来想找到对应的mahout版本,但是没有找到.本着安全原则,mahout最新版本是0.14.0,回退一个版本使用0.13.0 mahout地址 ...
- Avro从入门到入土
avro官网 1.Avro历史 Avro是Hadoop的一个数据序列化系统,由Hadoop的创始人Doug Cutting(也是Lucene,Nutch等项目的创始人)开发,设计用于支持大批量数据交换 ...
- hiho #1032: 最长回文子串
#1032 : 最长回文子串 时间限制:1000ms 单点时限:1000ms 内存限制:64MB 描述 小Hi和小Ho是一对好朋友,出生在信息化社会的他们对编程产生了莫大的兴趣,他们约定好互相帮助,在 ...
- 手动编译源码安装包报错 fatal error:cruses.h: no such file or direcrory
很明显是缺少cruses.h这个文件,但是用yum搜索又搜不到,可能是我的yum源的库包太少的原因吧. 后来多方查找,发现cruses.h这个头文件属于ncurses模块,需要安装ncurses-de ...
- zabbix监控Nginx模板
前提条件: nginx模块安装了http_stub_status_module和nginx_upstream_check_module: 在nginx的配置文件中配置上: location /stat ...
- HTML中的超链接(Hyperlink)
超链接 ★超链接简单介绍 超链接可以说是网页中最常见的元素.超链接的英文名是hyperlink.每个网站都是由众多的网页组成,网页之间通常都是通过链接的方式相互关联的. 超链接能够让浏览者在各个独立的 ...
- java8中规范的四大函数式接口
java8中规范的四大函数式接口: 1.Consumer<T> :消费型接口 void accept(T t); 2.Supplier<T> :供给型接口 ...