【Web】1326- 深入浅出 Web Audio API
前言
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
):WebRTCMediaStream
增益(
GainNode
):音量增益db延迟(
DelayNode
):延迟输出效果卷积(
ConvolverNode
):混响立体声均衡(
StereoPannerNode
):立体声效果空间均衡(
PannerNode
):3D波形畸变器(
WaveShaperNode
):扭曲效果动态压缩(
DynamicsCompressorNode
):压缩、侧链双二阶滤波器(
BiquadFilterNode
):EQ均衡
振荡器(
OscillatorNode
):持续产生指定频率周期的正弦波(sine),方波(square),锯齿波(sawtooth),三角波(triangle)和自定义周期波音频缓冲(
AudioBufferSourceNode
):解码后的PCM数据媒体元素(
MediaElementAudioSourceNode
):HTML5MediaStream(
MediaStreamAudioSourceNode
):WebRTCMediaStream
音频源
音效
音频输出
声道处理
可视化
特殊
例:使用振荡器,增益和自定义周期波,分析
具体地址可以查看 CodePen:https://codepen.io/jamesliu96/pen/oNGgWOb
例:淡入淡出Mixer
具体地址可以查看 CodePen:https://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]
更多
https://tonejs.github.io/
参考资料
[1]
Chime: https://jamesliu.info/chime/
[2]
Pitcher: https://jamesliu.info/pitcher/
[3]
Web Audio API - Web APIs | MDN: https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API
[4]
Web Audio API - Web API 接口参考 | MDN: https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Audio_API
- END -
【Web】1326- 深入浅出 Web Audio API相关推荐
- 如何使用Web Audio API听到“ Yanny”和“ Laurel”的声音
by _haochuan 通过_haochuan 如何使用Web Audio API听到" Yanny"和" Laurel"的声音 (How you can h ...
- Web Audio API
Web audio concepts and usage 1.创建audio context 2.在context中创建source,例如<audio>, OscillatorNode, ...
- Web Audio API 入门1
将吉他和效果器(effect pedal 比如失真效果器)链接,然后将效果器和放大器(amplifier)链接,最后将放大器和音响(speaker)连接,既:吉他-效果器–放大器-音响 Web Aud ...
- Web Audio API与WebSocket播放实时音频
WebSocket客户端与Web Audio API示例 <!DOCTYPE html> <html><head><meta charset="ut ...
- HTML 利用 Web Audio API 进行音频可视化
利用Web Audio API 进行音乐可视化 1.什么是 Web Audio API: 官方:Web Audio API 提供了在Web上控制音频的一个非常有效通用的系统,允许开发者来自选音频源,对 ...
- HTML5 Web Audio Api-2 发声oscillator
(Web Audio Api基础信息整理中,到时候补上) oscillator的意思是振荡器,众所周知,声音就是物体振动产生的声波. 在Web Audio Api中,官方给我们提供了一个振荡器 需要用 ...
- Web Audio API之手把手教你用web api处理声音信号:可视化音乐demo
1.Web Audio API 介绍 Web Audio API 提供了在Web上控制音频的一个非常有效通用的系统 ,这些通用系统通俗的讲就是我们可以利用Web Audio API提供的各种方法操作各 ...
- ASP.NET Core环境Web Audio API+SingalR+微软语音服务实现web实时语音识别
处于项目需要,我研究了一下web端的语音识别实现.目前市场上语音服务已经非常成熟了,国内的科大讯飞或是国外的微软在这块都可以提供足够优质的服务,对于我们工程应用来说只需要花钱调用接口就行了,难点在于整 ...
- 利用Web Audio API将振动数据转化为音频数据并播放
年初在公司做了一个需求:传感器采集到了机器的振动数据,要在网页中利用这个数据播放出振动的声音. 之前只了解过HTML中的<audio>元素可以通过src属性指定音频文件路径来播放音频,现在 ...
最新文章
- MySQL 学习资料汇总
- 神经网络设计神经网络
- C#编程(七十四)----------释放非托管资源
- 第 171 章 vagrant - Tool for building and distributing virtualized development environments
- chrome 常用快捷键(可以摆脱鼠标哦)
- spider-定向抓取
- ResNet最强改进版来了!ResNeSt:Split-Attention Networks
- 文青工程师陈盛 — 程序员+文青是怎样一种体验
- Android log 管理工具
- ext 部署到 tomcat服务器下,通过http8080端口查看
- CSS基础(part15)--元素的隐藏与显示
- 常用技巧 —— 打表规律
- 任务47:Identity MVC:ReturnUrl实现
- Hadoop HBase概念学习系列之hbase shell中执行java方法(高手必备)(二十五)
- Gson之TypeAdapter的工作原理分析(1)
- MySQL sql语句总结
- PE系统加载RAID驱动
- 信源编码程序设计实验C语言实现,霍夫曼信源编码实验报告.docx
- 小游戏打包发布安卓APK
- 几种常见电源防反接设计