浅谈H5音频处理（更多谈谈录音方向的内容）

最近须要作一个实时录音而后根据音频流实时反馈出调用静音分析（VAD）以及语音识别(ASR)接口的功能。因而研究起H5有关这方面的支持。

H5的Web Audio API

首先须要弄清一点，Web Audio API和H5的<audio>彻底不是一个体量级的东西，<audio>能够很方便地让你将音频文件丢进去就自带各类花式功能。可是若是直接用Web Auido API进行操做，你甚至能够无中生有地创造声音。 这里粗糙地罗列一下它能作什么事情（尽我所能查到的资料）：

1. 对简单或复杂的声音进行混合；
2. 精确地控制声音的密度和节奏；
3. 内置淡入、淡出，颗粒噪点、音调控制等效果；
4. 灵活的处理在音频流的声道，使它们成为拆分和合并；
5. 处理从<audio>音频或<video>视频的媒体元素和音频源。
6. 使用MediaStream的getUserMedia()方法实时处理现场输入的音频，例如变声；
7. 立体音效，支持多种3D游戏和沉浸式环境。
8. 利用卷积引擎，创造各类线性音效，例如小/大房间、大教堂、音乐厅、洞穴、隧道、走廊、森林等。尤为适用于建立高质量的房间效果。（就是音乐播放器的那种特效~）
9. 高效实时的时域和频的分析，配合CSS3或Canvas或WebGL能够作到音乐的可视化支持。
10. 音频波形算法控制，也就是只要你研究地足够透彻，你把AU搬到web上实现也就阔以的。

然而，这么多高深地功能，不少前端开发者其实都没有这样地需求去接触。罗列在这里，是为了让本身接到相似需求的时候能准确判断对此类需求能作到什么程度。

简单生成点声音

网页通常是无声的，可是当你尝试去给你的点击产生一个声音，对于特殊场景下会让客户耳目一新。这里例子主要参考自张鑫旭--利用HTML5 Web Audio API给网页交互增长声音给到的例子。咱们逐行来分析一下代码来看看如何实现这种效果。

1.  window.AudioContext = window.AudioContext || window.webkitAudioContext;
// 生成一个AudioContext对象
2.  var audioCtx = new AudioContext();
// 建立一个OscillatorNode, 它表示一个周期性波形（振荡），基本上来讲创造了一个音调
3.  var oscillator = audioCtx.createOscillator();
 // 建立一个GainNode,它能够控制音频的总音量
4.  var gainNode = audioCtx.createGain();
// 把音量，音调和终节点进行关联
5.  oscillator.connect(gainNode);
// audioCtx.destination返回AudioDestinationNode对象，表示当前audio context中全部节点的最终节点，通常表示音频渲染设备
6.  gainNode.connect(audioCtx.destination);
// 指定音调的类型，其余还有square|triangle|sawtooth
7.  oscillator.type = 'sine';
// 设置当前播放声音的频率，也就是最终播放声音的调调
8.  oscillator.frequency.value = 196.00;
// 当前时间设置音量为0
9.  gainNode.gain.setValueAtTime(0, audioCtx.currentTime);
 // 0.01秒后音量为1
10. gainNode.gain.linearRampToValueAtTime(1, audioCtx.currentTime + 0.01);
// 音调从当前时间开始播放
11. oscillator.start(audioCtx.currentTime);
// 1秒内声音慢慢下降，是个不错的中止声音的方法
12. gainNode.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 1);
// 1秒后彻底中止声音
13. oscillator.stop(audioCtx.currentTime + 1);
复制代码

oscillator

须要了解上面的代码咱们须要对音频有一些基础的认识。首先，声音的本质其实就是震动，而震动又务必牵扯到波形，不一样的波形会发出不一样的声音。而后相同的波形下还会有不同的震动频率，最终会表现为音调的高低。所以当咱们须要生成一个声音的时候，就须要为它设置波形以及对应的音调，因此你能够这么理解oscillator就是一个创造音调的玩意。

那么给一个音调的创造过程就以下：设置波形-->设置频率

波形

波形主要内置了4种波形，对应发出不一样的声音。主要有sine(正弦波)、square（方波）、triangle（三角波）以及sawtooth锯齿波。 固然若是有须要还可使用setPeriodicWave自定义波形。

频率

频率这玩意很好理解。就是咱们生活中接触地“do、re、mi、fa、sol、la、si”.数值越小，越低沉；数值越大，越清脆。

connect

实际上是h5audio一个十分重要的概念。具体我把它简单理解为中间件的一个概念。例如这个例子，音调产生后通过音量处理的中间件而后再将这些声音结点输出到扬声器上。（在其余文章有很介绍得十分详尽的，在这里就不太想展开，最下面的外链能够找到）

剩下的就是淡入淡出的设置以及播放声音的内容。这些部分在张大大的博客中有详细地阐述，该块内容也是参考着它的博文进行二次翻译记录本身一些理解（很粗浅）而后总结罢了。

玩点录音

获取到原始的pcm数据

本身创造声音有点过于高大上，只播声音又显得有点无趣。那么干脆来玩一下录音好了。开启录音很简单，只须要这么简单的一行代码（固然不考虑兼容性咯）

navigator.mediaDevices.getUserMedia({audio: true, video: true})
复制代码

能够试一下在浏览器控制台输入这段代码， 你就会看到网站想要调用你的摄像头以及麦克风的请求。点击容许后，你的摄像头就会亮灯，开启录音和录屏的状态。

navigator.mediaDevices.getUserMedia(videoObj, (stream) => {}, errBack)

你应该立刻就会问，那么录完的音跑到哪里去了。咱们从这个调用这个方法后，看到中间实际上是有一个回调函数，让咱们拿到麦克风和摄像头产生的数据流的。这时候咱们能够调用AudioContext的接口使得音频PCM数据在到达目的地前经过不一样的处理节点（增益、压缩等），因此咱们须要从这里来入手。

navigator.mediaDevices.getUserMedia({audio: true}, initRecorder)

function initRecorder(stream) {
    const AudioContext = window.AudioContext
    const audioContext = new AudioContext()
    // 建立MediaStreamAudioSourceNode对象，给定媒体流（例如，来自navigator.getUserMedia实例），而后能够播放和操做音频。
    const audioInput = audioContext.createMediaStreamSource(stream)
    // 缓冲区大小为4096，控制着多长时间需触发一次audioprocess事件
    const bufferSize = 4096
    // 建立一个javascriptNode,用于使用js直接操做音频数据
    // 第一个参数表示每一帧缓存的数据大小，能够是256, 512, 1024, 2048, 4096, 8192, 16384,值越小一帧的数据就越小，声音就越短，onaudioprocess 触发就越频繁。4096的数据大小大概是0.085s，就是说每过0.085s就触发一次onaudioprocess，第二，三个参数表示输入帧，和输出帧的通道数。这里表示2通道的输入和输出，固然我也能够采集1，4,5等通道
    const recorder = audioContext.createScriptProcessor(bufferSize, 1, 1)
    // 每一个知足一个分片的buffer大小就会触发这个回调函数
    recorder.onaudioprocess = recorderProcess
    // const monitorGainNode = audioContext.createGain()
    // 延迟0.01秒输出到扬声器
    // monitorGainNode.gain.setTargetAtTime(音量, audioContext.currentTime, 0.01)
    // monitorGainNode.connect(audioContext.destination)
    // audioInput.connect(monitorGainNode)
    // const recordingGainNode = audioContext.createGain()
    // recordingGainNode.gain.setTargetAtTime(音量, audioContext.currentTime, 0.01)
    // recordingGainNode.connect(audioContext.scriptProcessorNode)
    // 将音频的数据流输出到这个jsNode对象中
    audioInput.connect(recorder)
    // 最后先音频流输出到扬声器。（将录音流本来的输出位置再定回原来的目标地）
    recorder.connect(audioContext.destination)
}
复制代码

作到这一步咱们已经能拿到录音数据了，并且仍是按照咱们预想的样子去获得已经分好片的buffer数据。那么咱们终于能够开始愉快地处理咱们的录音流了。

补充一下上面代码中注释的两段用来控制录音音量大小以及将录音声音实时反馈到扬声器的两段方法函数。原理相一致，也就是设置一个处理数据的中间件，在录音设备最终走到扬声器（目标地）前进行二进制的控制

function recorderProcess(e) {
  // 左声道
  const left = e.inputBuffer.getChannelData(0);
}
复制代码

注意在recorderProcess里面调用了一个getChannelData的方法，能够传入整型，取到对应声道的数据，进行分别处理。因为咱们是单声道录制，因此只须要拿到左声道的数据流便可。

若是这时候你不须要对音频的输出再进行控制，已经能够将这段二进制数据直接用websoket传输到后台去了。

数据处理与转换

假如真不凑巧，后台大佬要的数据不是你这玩意的样子，大佬们对音频质量有要求：只接受一个采样率是8khz、位深16的wav文件。很好，那么提取关键字，咱们须要先确认咱们这段pcm数据是否8khz以及位深16.最后再把这些二进制组合起来转成wav格式。看起来很复杂，不要紧，咱们一步一步来。

采样率（sampleRate）和位深度（bitDepth）

首先，采样率(sampleRate)是什么呢，百度一下。

音频采样率是指录音设备在一秒钟内对声音信号的采样次数，采样频率越高声音的还原就越真实越天然。在当今的主流采集卡上，采样频率通常共分为22.05KHz、44.1KHz、48KHz三个等级，22.05KHz只能达到FM广播的声音品质，44.1KHz则是理论上的CD音质界限，48KHz则更加精确一些。

那么接下来这段代码就可让你获取到你麦克风采样率是多少。

const AudioContext = window.AudioContext
const audioContext = new AudioContext()
// 可读属性
console.log(audioContext.sampleRate)
// 44100
复制代码

很好，这段输出表明你的录音设备采样率高到44100HZ，那么根据需求，你就须要将本身的音频采样率下降下来了。然而不幸的是，浏览器并不容许去修改录音时的采样率，并且不一样电脑设备的表现还不同。这意味着，你须要在中间node拿到的二进制再进行一次处理。那么怎么去下降本身的采样率呢。根据上面百度的资料，你很容易就能发现，采样率的高低其实只是在一秒内的音频它的数据点有多少个的问题，咱们须要把原来一秒内有44100个点的数据流减小成8000个点的数据流。很简单嘛，不是么，不过这个有个小点是须要注意的。

Downsample PCM audio from 44100 to 8000参考这里的一个回复： Lets take a simple case of downsampling by a factor of 2. (e.g. 44100->22050). A naive approach would be to just throw away every other sample. But imagine for a second that in the original 44.1kHz file there was a single sine wave present at 20khz. It is well within nyquist (fs/2=22050) for that sample rate. After you throw every other sample away it is still going to be there at 10kHz but now it will be above nyquist (fs/2=11025) and it will alias into your output signal. The final result is that you will have a big fat sine wave sitting at 8975 Hz! In order to avoid this aliasing during downsampling you need to first design a lowpass filter with a cutoff selected according to your decimation ratio. For the example above you would cutoff everything above 11025 first and then decimate.

这里的大概意思就是单纯地抽点是不行的。固然里面内在逻辑还涉及到频率波长什么的，我天然就不太清楚了。有兴趣的朋友能够详细了解一下缘由。所幸这里还提供了代码的实现方式。

function interleave(e){
      var t = e.length;
      sampleRate += 0.0;
      outputSampleRate += 0.0;
      var s = 0,
      o = sampleRate / outputSampleRate,
      u = Math.ceil(t * outputSampleRate / sampleRate),
      a = new Float32Array(u);
      for (i = 0; i < u; i++) {
        a[i] = e[Math.floor(s)];
        s += o;
      }
      return a;
    }
复制代码

那么采样率的问题就解决了。剩下还有两个问题。将音频流转为16位深，这里就比较简单了。只要确保你生成的位数足够就行。好比，8位深的音频只须要生成一个Uint8Array，16位深就要生成2个的长度。new Unit8Array(bitDepth / 8)

pcm数据转wav

好不容易终于走到最后一步了。怎样把pcm数据转为wav数据。原本觉得将是一个极其棘手的问题，可是所幸。pcm->wav的方法很是简单，将wav文件以二进制的方式打开后，去除前44位的字节的头文件信息就是一段pcm数据了。那么咱们只须要把录音过程当中的全部内容都收集起来，而后插入头文件信息便可。这一步相对于前面来讲简直简单太多了。

可是咱们还有一个问题要解决。“javascript如何操做二进制数据”。因此接下来就要介绍这几个玩意了。

Bolb、ArrayBuffer、Unit8Array、DataView

通过漫长地查询，看源码看API查资料，我终于集齐了有关此次操做的全部对象，能够召唤神龙了！

这个几个对象真的是老衲学了这么久都没接触过几个，有些甚至听都没听过。因此一个一个来，并且我也只能提供一些我初略的看法。（欢迎有大佬给我订正，想要具体了解仍是更适合单独去搜索）

ArrayBuffer是个啥玩意呢。ArrayBuffer又称类型化数组。类型化数组，我记得在一篇详解数组的文章有看到，可是因为用处很少后面就给忘了。大体的意思就是js的数组对象，其实并非像其余面向对象语言的实现方式同样，内存不连续并且类型不可控严重影响性能。（可是各大浏览器引擎都有作优化，因此实际编码不须要考虑）。而ArrayBuffer则是专门放0和1组成的二进制数据，因此当你在捕获到pcm数据的时候，将它打印到控制台上会看到这是个ArrayBuffer类型的数组，就是由于这段是二进制数据。

而ArrayBuffer对象并无提供任何读写内存的方法，而是容许在其上方创建“视图”，从而插入与读取内存中的数据。那么视图又是啥呢？？

视图类型	数据类型	占用位数	占用字节	有无符号
Int8Array	整数	8	1	有
Uint8Array	整数	8	1	无
Uint8ClampedArray	整数	8	1	无
Int16Array	整数	16	2	有
Uint16Array	整数	16	2	无
Int32Array	整数	32	4	有
Uint32Array	整数	32	4	无
Float32Array	整数	32	4	\
Float64Array	浮点数	64	8	\

这对于一个计算机基础极差的大兄弟来讲简直是噩梦。这么多玩意，我得怎么搞。又怎么选择，啊咧要崩溃了。可是要操做二进制呀，求助源码库是一个最简单的作法。在源码里面就发现这个玩意了。

DataView视图。为了解决各类硬件设备、数据传输等对默认字节序的设定不一而致使解码时候会发生的混乱问题，javascript提供了DataView类型的视图来让开发者在对内存进行读写时手动设定字节序的类型。因而.wav的文件头就要这么写。具体想知道怎么写仍是得百度出来.wav的文件头信息字节具体如何分配

var view = new DataView(wav.buffer)

    view.setUint32(0, 1380533830, false) // RIFF identifier 'RIFF'
    view.setUint32(4, 36 + dataLength, true) // file length minus RIFF identifier length and file description length
    view.setUint32(8, 1463899717, false) // RIFF type 'WAVE'
    view.setUint32(12, 1718449184, false) // format chunk identifier 'fmt '
    view.setUint32(16, 16, true) // format chunk length
    view.setUint16(20, 1, true) // sample format (raw)
    view.setUint16(22, this.numberOfChannels, true) // channel count
    view.setUint32(24, this.sampleRate, true) // sample rate
    view.setUint32(28, this.sampleRate * this.bytesPerSample * this.numberOfChannels, true) // byte rate (sample rate * block align)
    view.setUint16(32, this.bytesPerSample * this.numberOfChannels, true) // block align (channel count * bytes per sample)
    view.setUint16(34, this.bitDepth, true) // bits per sample
    view.setUint32(36, 1684108385, false) // data chunk identifier 'data'
    view.setUint32(40, dataLength, true) // data chunk length
复制代码

上面的内容就是头信息的写法了。最后将数据以unit8Array的格式写入一个wav二进制数据就有了。咱们还须要的就是将它转成文件对象。

Blob你可能没听过，可是File你确定听过，由于常常须要form表单传文件嘛。那么你这么理解,Blob是一种JavaScript的对象类型。HTML5的文件操做对象，file对象就是Blob的一个分支或说一个子集。

也就是为啥File对象能进行文件分割上传，就是利用了Blob操做二进制数据的方法。

new Bolb(wavData, { type: 'audio/wav' })
复制代码

验证效果

上面的代码都是二进制操做，是否是特别没信息。那就验证一下吧！把生成的blob对象，这样操做：const url = URL.createObjectURL(blob)而后把它丢到<a>标签里面来下载这个文件。命令行工具：

$ file test.wav
test.wav: RIFF (little-endian) data, WAVE audio, Microsoft PCM, 16 bit, mono 8000 Hz 复制代码

彻底符合效果。nice，剩下的问题就是回到实时处理pcm数据的问题了。

传输arrayBuffer

文件咱们会传，可是二进制buffer数组要怎么传递呢？只有当你使用blob生成后的对象才能做为文件对象使用。可是当咱们仍是pcm数据段的时候怎么来做为一个文件传递过去呢。

这里只稍微列举一下本身的尝试，不必定是个正确的使用方法。这里使用的是websocket

// client
const formData = new FormData()
formData.append(blob, new Blob(arrayBuffer))

// server
console.log(ctx.args[0]) // ArrayBuffer<xx,xxx>
复制代码

作点小优化

Web Worker了解一下，因为涉及到文件的转码操做。因此很耗费性能，这时候是时候掏出web Worker来深度优化这玩意。

有关这个的内容，其实看起来很高深可是很简单，worker就至关于一个处理源数据的方法，而后交互方式是用事件监听。

这里仅仅记录几个坑，就不详细介绍：

1. web worker必须起服务来实现。单纯html文件时不能打开worker的。worker必需要传一个.js文件路径，且保证同源策略。
2. 不要向worker去传递函数，不然会错误。并且浏览器还不暴露这个错误。排查了很久的说
3. worker必须传入一个js的路径。在vue下，只能把它丢在static文件去引用了喵。

这里还有些小问题没解决

1. 如何实时地绘制出录音的音量。首先音量能够取获得的buffer里面的大小做为分贝参考。可是具体实现方式还不太懂，或者说没有简便的实现方式吧。
2. 前端收到一个buffer的时候想要实时播放如何作到，如今作的方式实际上是最后才嵌回去。作了一个小实验，没成功。（直接把录音转化好的内容转回ArrayBuffer可是失败了）。感受若是有后端来传递数据应该能够实现。

audioContext.decodeAudioData(play_queue[index_play], function(buffer) {//解码成pcm流
            var audioBufferSouceNode = audioContext.createBufferSource();
            audioBufferSouceNode.buffer = buffer;
            audioBufferSouceNode.connect(audioContext.destination);
            audioBufferSouceNode.start(0);
        }, function(e) {
            console.log("failed to decode the file");
        });
复制代码

3. 如何实时地计算到如今音频的录制实现。由于是数据流没办法转成音频对象致使没能拿到这些方法来获取。如今比较粗暴的方法就是经过字节长度 采样率 位数来计算 可是感受计算量比较大 不属于一个好的实现方式？
4. 改变音调和声音位置的api没能成功调用起来。

const filterNode = audioContext.createBiquadFilter();
// ...
source.connect(filterNode);
filterNode.connect(source.destination);

const updateFrequency = frequency => filterNode.frequency.value = frequency;

复制代码

const rangeX = document.querySelector('input[name="rangeX"]');
const source = audioContext.createBufferSource();
const pannerNode = audioContext.createPanner();

source.connect(pannerNode);
pannerNode.connect(source.destination);

rangeX.addEventListener('input', () => pannerNode.setPosition(rangeX.value, 0, 0));

复制代码

node端切割音频文件

这里补充一点小小知识点。node端并无特别好的处理音频的库。查询了好久以后发现一个调用机器环境ffmpeg来辅助处理的库。用起来起码是没问题的，并且很是全面。（毕竟接触音频多的人应该都懂这个玩意）这里粗糙mark一下本身以前用到的api。

var command = ffmpeg(filePath)
        // .seekInput(60.0) // 开始切割的时间
        .seekInput(7.875) // 开始切割的时间，延迟7秒？为啥
        .duration(4.125) // 须要切割的音频时长
        .save(path.join(__dirname, '../../../app/public/test-1.wav'))
        .on('end', () => {
          console.log('finish')
        })
        .run()
复制代码

最后，感谢付总、涂老师耐心地和我讲解有关音频的种种问题。感谢前端组各位大佬在我不懂的内容即便本身也没有过多接触可是仍是耐心和我探讨问题。

---

参考文章：这里列出的文章都是我查找资料时看到的不错的文章。和上面的内容不必定强烈相关，建议对音频感兴趣的朋友彻底能够本身看看

一个使用 HTML5 录音的例子

Getting Started with Web Audio API

Using Recorder.js to capture WAV audio in HTML5 and upload it to your server or download locally

HTML5录音控件

chris-rudmin/opus-recorder

Tutorial: HTML Audio Capture streaming to Node.js (no browser extensions)

[前端教程]HTML5制做好玩的麦克风音量检测器（Web Audio API）

Downsample PCM audio from 44100 to 8000 DataView Typed Arrays: Binary Data in the Browser Tech Tip: Sample Rate and Bit Depth—An Introduction to Sampling How to convert ArrayBuffer to and from String 用html5-audio-api开发游戏的3d音效和混音 理解DOMString、Document、FormData、Blob、File、ArrayBuffer数据类型 深刻浅出 Web Audio Api