VillainHR

让你听见的 HTML5

音频 audioContext 播放器 HTML5.0 2018-07-14

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 变化,由空域变为频率,这样让音频分析多了一个维度分析。

此处输入图片的描述

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

dB 计算单位

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

此处输入图片的描述

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

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

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

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

(奶奶个腿。。。)

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

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

HTML5 音频应用

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

image.png-13.3kB

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

image.png-38.7kB

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

原文链接: https://www.villianhr.com/2018/07/14/让你听见的 HTML5

更新时间: 2018-07-14