[译]Web Audio API基本概念

[FrankKai]

在做实时语音转换技术分享的过程中，一直都没有找到非常全面的音频相关的资料，今天终于误打误撞找到一篇非API介绍的音频相关文章，在这里做一个学习MDN官方好文章的笔记。

• web audio workflow
• sources and channels
• Audio data:what's in a sample
• Audio buffers: frames, samples and channels
• Planar versus interleaved buffers
• Visualizations-AnalyserNode
• Fan-in and Fan-out
• 趣味小知识
• 专有名词

[FrankKai]

web audio workflow

1.create Audio context -> 2.create sources-> 3.creates effects -> 4.choose destination -> 5.establish connections

[FrankKai]

sources and channels

• 一个input或output由一个或者多个audio channel组成，channel的组成代表了audio的layout。
• 任何离散的channel结构都是支持的，包括mono，stereo，quad，5.1等等
  

音频源生成方式

• 通过JavaScript直接创建一个audio node，例如oscillator。
• 创建一个raw PCM data。Audio Context有解码各种格式audio的方法。
• 从HTML media elements获取。例如video或者audio。
• 直接从WebRTC MediaStream获取。例如webcam或者microphone。

Audio channels

总共四种声音：Mono，Stereo，Quad，5.1。

声道表格

专有名词	声道详情
Mono	0: M: mono
Stereo	0: L: left1: R: right
Quad	0: L: left1: R: right2: SL: surround left3: SR: surround right
5.1	0: L: left1: R: right2: C: center3: LFE: subwoofer4: SL: surround left5: SR: surround right

Up-mixing and down-mixing

当input channels和output channels不匹配时，up-mixing和down-mixing会发生，也就是有一套规则去平衡输入和输出。可以称之为通道解释，channelInterpretation。

比如：

Input channels	Output channels	Mixing rules
1 (Mono)	2 (Stereo)	Up-mix from mono to stereo.The M input channel is used for both output channels (L and R).output.L = input.Moutput.R = input.M
1 (Mono)	4 (Quad)	Up-mix from mono to quad.The M input channel is used for non-surround output channels (L and R). Surround output channels (SL and SR) are silent.output.L = input.Moutput.R = input.Moutput.SL = 0output.SR = 0

更多规则可以查看：channelInterpretation

[FrankKai]

Audio data:what's in a sample

采样是什么意思？

当一个语音信号被处理时，sample（采样）的意思是讲一个时域连续的信号转换为一个时域离散的信号的过程。

为什么要采样？

因为对于一段音频来讲，自然情况下是一段连续的声波，只有转换成离散的采样序列，也就是很多段按等长时间分隔的音频数据，这样计算机才能去处理这些一个个独立的数据块。这也就是采样的原因。

采样属于什么学科？

signal processing，信号处理。

吐槽：数字信号处理课上学到的全还给老师了，没想到在录音功能还能用到一些专业课知识，大学还是没白读。

[FrankKai]

Audio buffers: frames, samples and channels

frames

var buffer = baseAudioContext.createBuffer(numOfchannels, length, sampleRate);

入参分析：

• numOfchannels 声道数 1是单声道，2是双声道。默认是1，单声道
• length 帧总长度 buffer内sample frame的个数
• sample rate 采样频率 每秒采样帧的个数

var audioCtx = new AudioContext();
var buffer = audioCtx.createBuffer(2, 22050, 44100);

分析：
双声道，44100Hz是最常见的大多数声卡的工作频率，22050帧。22050帧声音数据在44100Hz的声卡上，会运行0.5秒。
22050frams/44100Hz=0.5s，所以length/sample rate 其实就是音频运行时长的意思了。
简单理解的话，就是我具有1s运行44100个frame的能力，然后你给了我22050个frame，那么用0.5秒就把这个任务给搞定了。

var context = new AudioContext();
var buffer = context.createBuffer(1, 22050, 22050);

当我们创建一个这样的单声道的Buffer以后，如果仍然运行在44.1Khz的声卡上，那么它会被resample。
什么是resample呢？

Note: audio resampling is very similar to image resizing. Say you've got a 16 x 16 image, but you want it to fill a 32x32 area. You resize (or resample) it. The result has less quality (it can be blurry or edgy, depending on the resizing algorithm), but it works, with the resized image taking up less space. Resampled audio is exactly the same: you save space, but in practice you will be unable to properly reproduce high frequency content, or treble sound.

总结起来就是，若采样频率低于当前声卡运行频率，音频时长不变，音频数据会被拉长，占用内存变小，音质降低；反之如果高于运行频率，音频时长不变，音频数据会被压缩，占用内存变大，音质升高。

samples

• 一个sample在js中用一个float32的数据来表示，它代表着某个声道某一个时间在audio stream上的某一点的值。
• frame或者sample frame，指的是某一个时间在audio stream上的所有声道上的音频点的集合。单个单声道的frame包括1个sample，单个双声道frame包括2个sample，单个5.1的frame包括6个sample。
• sample rate指的是1秒钟可以play的frame个数，单位是Hz。1Hz=1frame/1s。sample rate越高，音质越好。因为一秒内可以播放的帧的个数越多，一秒内可以将连续时间转换成更多段离散的数据块，计算机对音质做更细粒度的处理，因此音质越好。
• 一段1秒时长的44100Hz的Audio Buffer。单声道有44100个sample，44100个frame，length也是44100；但是双声道有88200个sample，也是44100个frame，length是44100。
• 一定要明确一点，sample rate和channel个数是无关的。它们相乘的结果只能代表当前AudioContext的音质，理论上来说，sample rate越高，channel越多，音质越好。

一张神图可以辅助我们更好的理解上面的知识点。

单声道的情况下，我们只能听到left channel的声音；双声道可以同时听到left，right两个channel的声音。

[FrankKai]

Planar versus interleaved buffers

• Web Audio API仅支持二维的buffer格式。 适用于对每个channel上的数据单独处理的音频。left和right两个channel的数据存储像下面这样：

LLLLLLLLLLLLLLLLRRRRRRRRRRRRRRRR(这是一个双声道的16个frame的buffer)

• 交叉buffer。适用于不用太多处理的音频，比如一个解码MP3 stream。格式是下面这样的：

LRLRLRLRLRLRLRLRLRLRLRLRLRLRLRLR

Web Audio API只支持二维格式的音频数据处理。只有在发送给声卡播放时，才会被转换为交叉音频流。

阶段	格式
processing	planar
playing/decoded	interleaved

[FrankKai]

Visualizations-AnalyserNode

AnalyserNode拥有时域和频域两种类型的方法，用来获得数据的副本。

域	方法	数据类型
频域	getFloatFrequencyData	Float32Array
频域	getByteFrequencyData	Uint8Array
时域	getFloatTimeDomainData	Float32Array
时域	getByteTimeDomainData	Uint8Array

结合canvas可视化出音频信息。

[FrankKai]

Spatialization（音频空间化）

• Position vector标明声音源在三维空间中坐标。
• Direction vector标明PannerNode所指向的方向。
• Velocity vector标明声音的速率。
• 还有一个标明能听到声音的圆锥体。

相关Node是PannerNode和AudioListener。

更加深入的内容可以查看：Web Audio Spatializations

[FrankKai]

Fan-in and Fan-out

Fan-in是指多变一，扇入，仿佛扇子多个扇尖到扇尾，收缩。ChannelMergerNode可以把多个单声道（mono）上的信号汇聚成一个单-多信号。

Fan-out指一变多，扇出，仿佛扇子扇尾到多个扇尖，发散。ChannelSplitterNode可以把一个单-多信号拆分成多个单声道（mono）信号。

[FrankKai]

趣味小知识

为什么44.1Khz是最常用的音频采样频率？
首先，人类的听力范围在20Hz到20000Hz之间。
根据香农采样理论，采样频率最好是最大听力频率的2倍多。所以大于40Khz。
其次，采样前必须对信号进行低通滤波，否则会产生混叠。一个理想的低通滤波器可以完美地通过20khz以下的频率(不衰减它们)并完美地切断20khz以上的频率，但在实践中需要一个过渡频带，在那里频率被部分衰减。这个过渡带越宽，做一个抗锯齿滤波器就越容易和经济。44.1 kHz的采样频率允许2.05 kHz的过渡频带。

[FrankKai]

专业词汇

sources

名词	解释
<audio>	音频组件
oscillator	振荡器
stream	流

effect nodes

名词	解释
reverb	混响
biquad filter	双二阶滤波器
panner	用来描述音频位置和行为
compressor	压缩器

discrete channel structure

名词	解释
mono	单声道
stereo	双声道，立体声
quad	四声道
5.1	六声道

[FrankKai]

参考资料：https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API