深入浅出 Web Audio API

语言: CN / TW / HK

       

  • 2011被提出,同年草案被Google Chrome和Mozilla Firefox实现

  • 在此之前Web音频较为原始,无法应付较为复杂的应用场景,例如Web游戏或互动应用

  • 旨在提供全套Web音频解决方案,包含现代游戏音频引擎和一些混录、加工、过滤的能力,可实现部分数字音频工作站(DAW)的功能

基本概念

音频数字信号处理 Audio DSP

  • 包含 振荡器 (oscillator), 滤波器 (filter), 合成器 (synthesiser)等功能

声信号 Sound Signal

  • 20~20,000Hz频率 震动 (vibration)产生的 声波 (sound wave),通过 模拟信号 (analogue signal)或 数字信号 (digital signal)表示,可被 麦克风 (microphone)、乐器 拾音器 (pickup)等换能设备转换后 采样 (sample),或直接被 合成 (synthesise)

  • 震动的 频率 (frequency)称为 音高 (pitch), 振幅 (amplitude)称为 音量 (volume)

  • 将采样的 连续取值 (continuous-valued)模拟信号近似为 离散值 (discrete-valued)数字信号,从而实现数字化,常用方法 脉冲编码调制 (pulse-code modulation,  PCM )

  • 数字音频的 取样率 (sample rate)指的是每秒数字音频采样的个数,单位为Hz,通常使用48,000Hz或44,100Hz

时域 Time Domain

  • 信号的时域波形表达信号随着时间的变化而变化, 示波器 (oscilloscope)可以展示信号的时域波形。

频域 Frequency Domain

  • 通过数学运算进行时域和频域的互相转换,音频领域常见的有 傅立叶变换 (Fourier transform), 快速傅立叶变换算法 (FFT algorithm)

音频上下文 AudioContext

  • Web Audio API提供了** AudioContext 作为音频DSP操作的上下文空间,内部实现了一套 模块化路由**(modular routing)
  • 使用的时候,需要 connect ,用完可以 disconnect
  • 输入向输出方向“流动”

  • suspend
    resume
    close
    
  • 安全:用户必须提供user gesture,否则保持 suspended 状态

音频节点 AudioNode

  • 音频上下文中的基础单元

  • 常用节点

    • ScriptProcessorNode :利用JavaScript直接生成、处理、分析音频,deprecated but commonly used
    • 分析器( AnalyserNode )
    • 合并声道( ChannelMergerNode )
    • 分离声道( ChannelSplitterNode )
    • 音频输出( AudioDestinationNode ):默认输出( AudioContext.destination )
    • MediaStream( MediaStreamAudioDestinationNode ):WebRTC MediaStream
    • 增益( GainNode ):音量增益db
    • 延迟( DelayNode ):延迟输出效果
    • 卷积( ConvolverNode ):混响
    • 立体声均衡( StereoPannerNode ):立体声效果
    • 空间均衡( PannerNode ):3D
    • 波形畸变器( WaveShaperNode ):扭曲效果
    • 动态压缩( DynamicsCompressorNode ):压缩、侧链
    • 双二阶滤波器( BiquadFilterNode ):EQ均衡
    • 振荡器( OscillatorNode ):持续产生指定频率周期的正弦波(sine),方波(square),锯齿波(sawtooth),三角波(triangle)和自定义周期波
    • 音频缓冲( AudioBufferSourceNode ):解码后的PCM数据
    • 媒体元素( MediaElementAudioSourceNode ):HTML5
    • MediaStream( MediaStreamAudioSourceNode ):WebRTC MediaStream
    • 音频源

    • 音效

    • 音频输出

    • 声道处理

    • 可视化

    • 特殊

例:使用振荡器,增益和自定义周期波,分析

具体地址可以查看 CodePen:http://codepen.io/jamesliu96/pen/oNGgWOb

例:淡入淡出Mixer

具体地址可以查看 CodePen:http://codepen.io/jamesliu96/pen/jOYedQR

例: Chime [1]

旋律来自个人听音扒谱,音乐版权归原作者所有

例: Pitcher [2]

幅度 Amplitude

  • 方均根

自相关 Auto Correlate

  • 离散自相关

音高 Pitch

基于十二平均律,标准音高为440Hz

p = #MIDI
f = 频率
当 f = 440:p = 69
A440 = 440Hz = #69

Web Audio API - Web APIs | MDN [3]

Web Audio API - Web API 接口参考 | MDN [4]

http://tonejs.github.io/

参考资料

[1]

Chime: http://jamesliu.info/chime/

[2]

Pitcher: http://jamesliu.info/pitcher/

[3]

Web Audio API - Web APIs | MDN: http://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API

[4]

Web Audio API - Web API 接口参考 | MDN: http://developer.mozilla.org/zh-CN/docs/Web/API/Web_Audio_API

- END -

:heart: 谢谢支持

以上便是本次分享的全部内容,希望对你有所帮助^_^

喜欢的话别忘了 分享、点赞、收藏 三连哦~。

欢迎关注公众号 ELab团队 收货大厂一手好文章~

我们来自字节跳动,是旗下大力教育前端部门,负责字节跳动教育全线产品前端开发工作。

我们围绕产品品质提升、开发效率、创意与前沿技术等方向沉淀与传播专业知识及案例,为业界贡献经验价值。包括但不限于性能监控、组件库、多端技术、Serverless、可视化搭建、音视频、人工智能、产品设计与营销等内容。

欢迎感兴趣的同学在评论区或使用内推码内推到作者部门拍砖哦

字节跳动校/社招投递链接: http://job.toutia o.com/

内推码: 7 EZKXME