让你听见的 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)

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

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏VRPinea

利用超声波追踪实现6DoF,高通推出新版骁龙845 VRDK参考设计

3777
来自专栏安全领域

启动物联网项目所需的一切:第 3 章

原文地址:https://dzone.com/articles/everything-you-need-to-start-your-iot-project-pa...

4766
来自专栏SDNLAB

之于5G——浅谈SDN和NFV

在我刚开始了解5G核心网架构的时候,我注意到软件定义网络(SDN)和网络功能虚拟化(NFV)作为两种新兴技术被多次提及。然而,对于SDN和NFV技术在5G中扮演...

3194
来自专栏吉浦迅科技

Allinea DDT解决阿贡国家实验室的一个未解之谜

阿贡国家实验室领导计算设施(ALCF)的计算机科学家和工程师拥有世界上第四快的超级计算机,并且用量很大:尝试最大最复杂的宇宙模拟是他们其中的一个...

2929
来自专栏AI科技评论

如何评价微软在数据中心使用FPGA代替传统CPU的做法?

编者按:本文系微软亚洲研究院实习生李博杰在知乎上针对“如何评价微软在数据中心使用FPGA代替传统CPU的做法?”问题的回答。AI科技评论已获得转载授权。 首先,...

59911
来自专栏社区的朋友们

Qcon北京2017总结:测试角度看泛智能和大数据

本来这个文章应该在很早之前就写的,可惜一直没时间,写的时候断断续续。关键是这次leader 拓展又见晓生,每次见到他都会提醒我,这总结居然还没有写。下面就由小V...

4150
来自专栏媒矿工厂

全能媒体机—Matrix in Media?

本文总结了发表在IBC2018上,由英国Streampunk Media Ltd.的R. I. Cartwright和美国Gilmer&Associates I...

1915
来自专栏黑泽君的专栏

这些网站,99%人用过都说是神器,还不收藏!

—— 由谷歌开发的一个基于AI分析并猜出你要画什么的平台,是原先“你画我猜”的升级版,让你从现有图库里找出最符合脑中形象的图案。

2503
来自专栏杨建荣的学习笔记

我眼中的业务巡检demo

在表现形式上,自己也琢磨了很多的思路,总体的感觉是有很多信息想展示出来,但是信息太多又怕太乱,所以在纠结之中,自己给自己明确的定位了下:面向业务的巡检,于是毫不...

783
来自专栏大数据挖掘DT机器学习

【观点】浅谈网络数据挖掘

人们在访问某网站的同时,便提供了个人对网站内容的反馈信息:点击了哪一个链接,在哪里浏览时间最多,用了哪个搜索项、总体浏览时间、个人姓名和住址等。所有这些信息都被...

2963

扫码关注云+社区

领取腾讯云代金券