【Web】1326- 深入浅出 Web Audio API
前端自习课
共 2409字,需浏览 5分钟
· 2022-05-20
前言
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/
参考资料
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
评论
深入浅出各种边缘检测算子及其推导
作者丨Rustle@知乎(已授权)来源丨https://zhuanlan.zhihu.com/p/59640437编辑丨极市平台导读 本文系统的讲解了边缘检测算法的相关概念,并辅以大量的图与公式帮助大家深入理解各种边缘检测算子。 写在前面:本文篇幅较长,用了大量图与公式帮助大家深
机器学习初学者
0
Stability AI开放Stable Diffusion 3 API,在线免费使用
「Stability AI」宣布开放其最新文本到图像生成模型「Stable Diffusion 3」的API接口,供开发者和企业使用。该模型采用创新的多模态扩散转换器架构,在字体、细节还原、提示理解等方面表现优异,评测结果超越了业内其他顶尖系统。与DALL-E 3和Midjourney v6等最先进
IQ前端
0
【第124期】Vue 3 组合式 API 的瑞士军刀(VueUse)
概述 今天,我们要深入探索一个强大的工具集——VueUse。它为 Vue 3 的组合式 API(Composition API)提供了超过 200 个实用函数,让你的开发工作更加得心应手。官方网站:https://vueuse.org/VueUse 是什么?VueUse 的官方网站是 https:
前端微服务
0
腾讯云 4.8 故障原因曝光:因 API 新版本兼容性不够和配置数据灰度机制不足
2024 年 4 月 8 日 15 点 23 分,腾讯云团队收到告警信息,云 API 服务处于异常状态;随即在腾讯云工单、售后服务群以及微博等渠道开始大量出现腾讯云控制台登录不上的客户反馈。经过故障定位发现,客户登录不上控制台正是由云 API 异常所导致。云 API 是云上统一的开放接口集合,客户可
开源Linux
10
Chrome开发者建议你这样调试web应用
❝本文来自 Chrome 团队的 Jecelyn Yeen (阮贝琪)在FEDAY分享,主题为:探讨网页调试的现况、Chrome DevTools 的最新进展以及一些实用的 DevTools 小工具。现代Web开发中,为了满足用户的需求和期望,提高开发效率和...
前端瓶子君
0
React 并发 API 实战,这几个例子看懂你就明白了
本文适合对React 并发 API感兴趣的小伙伴阅读。欢迎关注前端早茶,与广东靓仔携手共同进阶~目录什么是并发它和 React 有什么关系中断和切换是如何工作的那 Suspense 呢?如何启动 transition结束语什么是并发并发是...
前端大神之路
0
SpringBoot接口安全快试试用 API Key 来保护吧
星标▲Java学习之道▲一起成长,一起学习~目录1、概述2、REST API Security3、用API Keys保护REST API4、测试文章来源: https://www.baeldung.com/spring-boot-api-key-secret1、概述安全性在REST API开发中扮演着重要...
Java学习之道
0
第2章:控制流程:深入浅出 Python 循环语句
点击上方“ Python学习开发 ”,选择“ 加为星标 ” 第一时间关注Python技术干货! Python 3 作为一门动态、解释型的高级编程语言,以其简洁明了的语法和强大的功能库而广受欢迎。在最新版的Python 3中,循环语句是控制...
Python学习开发
0