专栏首页前端小吉米让你听见的 HTML5

让你听见的 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 的相关内容和描述。

本文分享自微信公众号 - 前端小吉米(villainThr)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-07-17

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 不再碎片化学习,快速掌握 H5 直播技术

    villainhr
  • 谷歌都在用 PWA 你还不用?

    villainhr
  • Android 和 Webview 如何相互 sayHello(一)

    在移动时代 Web 的开发方式逐渐从 PC 适配时代转向 Hybird 的 Webview。以前,我们只需要了解一下 PC Chrome 提供的几个操作行为,比...

    villainhr
  • Python面向对象编程Day 25部分

      说的就是数据属性,点的方式调用的就是属性,把函数封装成数据属性,使得外部在调用的时候感觉不到内部的逻辑。既可以访问实例属性还可以访问类属性。

    py3study
  • Python 面向对象编程(下篇)

    上一篇面向对象编程(上篇)讨论了面向对象编程的基础部分,使用案例讲解了三大特性:封装、继承、多态。

    double
  • [PHP] 控制反转依赖注入的日常使用

    陶士涵
  • Python27 反射

    图中输入choice的内容是一个字符串,正常调用d.eat()这可不是一个字符串。 报错提示Dog中不存在attribute choice(字符串)

    py3study
  • python入门教程NO.9 怎么理解面向对象编程?看我就够了!

    在python中,用变量表示属性,用函数表示方法,因此具有相同属性和方法的一类事物就是‘类’,对象就是这这类事物中具体的一个。

    python鱼霸霸
  • Python之面向对象(1)

    面向过程的程序设计的核心是过程(流水线式思维),过程即解决问题的步骤,面向过程的设计就好比精心设计好一条流水线,考虑周全什么时候处理什么东西。把完成某一个需求的...

    PM小王
  • 比拼生态和未来,Spark和Flink哪家强?

    Spark 是最活跃的 Apache 项目之一。Spark 的开源社区一度达到上千的活跃贡献者。最主要推动者是 Databricks,由最初的 Spark 创...

    加米谷大数据

扫码关注云+社区

领取腾讯云代金券