让你听见的 HTML5

HTML5 多媒体应用现在还没被大部分挖掘出来，像普通的页游只能简简单单的做一些 2D 渲染，主要差距还是在性能上。H5 天生是动态语言，需要经过解析、编译。而且 JS 还是一个弱类型语言，虽然有 JIT 的帮助，但是解析引擎本身就有一个天花板，你无法、或者直接点，不能让 JS 达到原生的效率。但随着技术的发展，浏览器倾向于给 Web 开发者直接提供更底层的 API 使用，而最新推出的 WASM 的技术则更是直接解决了如何让 Web 在拥有原生性能的前提下，不用大量造高性能计算的轮子。

在这样的一个发展前提下，HTML5 的性能会逐渐的被释放，这也会加快 HTML5 多媒体时代的到来，比如，高性能页游引擎、Web 音视频播放器、图形计算、分布式计算引擎等等。

虽然，看起来前景很广，不过，该交的学费，该走的弯路你还是要走的。本篇不打算往大而全走，这里想应题，介绍一下 HTML5 中音频处理的板块。

在 Web 中，你能够直接操作底层的音频 API 是，AudioContext。如果你还考虑兼容性的话，可以加上 webkitAudioContext。

let AudioContext = window.AudioContext || window.webkitAudioContext;

它实际上和 MediaSource Extension 一样，是将输入数据直接和播放设备连接在一起。audioContext 连接的是 AudioBuffer 和音频播放器。中间可以和一些 Node 连接，这些 Node 是用来对流进行处理的。

常用的 Node 有：

• GainNode: 淡入淡出音量处理
• BiquadFilterNode: 滤波节点
• DelayNode: 创建回声
• PannerNode: 空间环绕音效
• analyserNode: 频谱分析
• offlineContext : 快速音视频处理

下面是直接解码一个 Buffer 为音频处理格式流：

context.decodeAudioData(buffer,audioBuffer=>{
    // audioBuffer 对象
});

这意味着，我们可以直接拿到音频流里面的具体数据，而剩下的就是我们的想象空间了。这里为了方便大家理解，顺带介绍一点关于声音的基本理论。

声学基础

一般人可以感觉到20 Hz~20kHz，强度为 -5dB~130dB 的声音信号。成年人为 30~16000Hz 之间，老年人为 50~10000Hz 之间。人是通过耳朵进行感受音波的，那为什么会称为波呢？最直观的可以看我们耳朵是怎么反应声音的。当声音经过外耳传入中耳时，镫骨的运动引起耳蜗内流体压强的变化，从而引起行波沿基底膜的传播。

耳蜗就像一个频谱分析仪，将复杂的信号分解成为各种频率分量。频谱分析会比较专业一点，简单说就是 声波 通过 快速 FFT 变化，由空域变为频率，这样让音频分析多了一个维度分析。

其中，在音频中有一个非常通用并且流行的单位，分贝。分贝最初使用是在电信行业，是为了量化长导线传输电报和电话信号时的功率损失而开发出来的。这个单位实际上并不是实际带物理单位的量，它原始含义其实就是 两个数值的对数比率，这两个数值分别是测量值和参考值（也称为基准值）。如公式：

而我们经常会看到某些描述单位，比如，>120dB 属于不舒服声域范围。或者形如下图：

声压是描述声波最基本的物理量，是媒质中的压力与静压的差值。单位为 Pa。（你可以理解为大气压的波动值）。前面说了分贝是参考值，那他参考的是啥呢？

其实是20μPa，这个值表示人耳在1000Hz处的平均可听阈值，或者是人耳在1000Hz处可被感知的平均最小声压波动值。

最后再给大家普及一个，我大学以来贼 TM 想不通的东西，经常会在很多滤波器里面看到 -3dB。那时候一直想不明白是为什么这个这么重要，后来偶然间看到

-3dB对应的幅值比为0.707，即为：。如果是按功率比来计算，则功率比为1/2，也就是原来功率的一半，因此，-3dB称为“半功率点”。 在 高通、低通、带通和带阻滤波器的截止频率是-3dB点。这表示的也是功率衰减一般时，对应的滤波截止频率。

(奶奶个腿。。。)

关于声学这块，还有很多很多内容，比如粉红噪声，高斯噪声等等。几百页的教材都写不完，我这里就不在这赘述了。

这里我们回到 HTML5 的工程技术中来，简单介绍一下，音频 H5 能有哪些具体的工程例子。

HTML5 音频应用

首先第一个想到的是 keyboard Piano，通过键盘控制，来手动播放 piano 对应的声音，比如 C1，C2,C3 等。

更专业一点的用来进行音频分析，测试你的音色好听与否。通常来说，你在唱歌的时候，泛音越多，越集中，代表你的歌声越浑厚好听。

当然，HTML5 在 WASM 的加持下，还可以做更多更有趣的事情。这里，点击阅读全文，可以查看 WASM 的相关内容和描述。