就仿佛它丰富多样的声音处理(和其他)功能还不够一样,Web Audio API 还包含了一些功能,能让你模拟出收听者在声源周围移动时声音上的差异,例如在玩 3D 游戏时,当你围绕着一个声源移动时产生的声像定位效果。它的官方术语叫 “空间化”,本文将介绍如何实现这样一个系统的基础知识。
Web Audio API 最有意思的特性之一,就是能够从音频源中提取频率、波形以及其他数据,随后这些数据可被用于创建可视化内容。本文将阐释具体的操作方法,并提供几个基本的用例。注:你可以在 Voice-change-O-matic 示例中找到所有代码片段的实际运行示例。基本概念要从音频源中提取数据,你需要一个分析器节点(AnalyserNode),它可通过 BaseAudioContext...
Web Audio API 的 IIRFilterNode 接口是实现通用无限脉冲响应(IIR)滤波器的音频节点处理器,这种类型的滤波器可用于实现音调控制设备和图形均衡器,并且可以指定滤波器的响应参数,以便根据需要进行调节。本文将探讨如何实现一个滤波器,并在一个简单示例中加以运用。示例本指南中的简单示例提供了一个播放 / 暂停按钮,用于启动和暂停音频播放,还提供了一个切换开关,用于打开和关闭...
本文将展示一个可用鼠标弹奏的虚拟键盘的代码以及可运行的演示示例。该键盘允许你在标准波形以及一种自定义波形之间进行切换,而且你可以使用键盘下方的音量滑块来控制主增益。这个示例使用了以下 Web API 接口:AudioContext、OscillatorNode、PeriodicWave 以及 GainNode。由于 OscillatorNode 继承自 AudioScheduledSourc...
本文将演示如何通过 ConstantSourceNode(恒定源节点)将多个参数关联在一起,以便它们共享同一个值,并且这个值可以通过设置ConstantSourceNode.offset 的值来进行更改。有时候,你可能希望将多个音频参数关联起来,以便共享同一个值,同时还能以某种方式进行更改。例如,你可能有一组振荡器,其中两个需要共享相同的可配置的音量,也可能对某些特定输入应用了一个滤波器,但...
本文将介绍如何创建一个音频工作线程处理器,并在 Web 音频应用程序中使用它。在 Web Audio API 首次引入浏览器时,它就包含了使用 JavaScript 代码创建自定义音频处理器的能力,这些处理器会被调用以执行实时音频操作。ScriptProcessorNode 的缺点在于它在主线程上运行,因此会阻塞其他正在进行的操作,直至它执行完毕。这尤其是对于像音频处理这种可能会非常耗费计算...
在编写创意代码时,并没有严格意义上的对错。只要你考虑到了安全性、性能和可访问性,就可以采用适合自己的风格。在本文中,我们将分享一些最佳实践 —— 使用 Web Audio API 的指导原则和知识技巧。加载音频 / 音频文件使用 Web Audio API 加载声音主要有四种方式,但具体应该选用哪种,可能会让人有些困惑。在处理文件时,你可以从 HTMLMediaElement(即 <a...
在本教程中,我们将介绍声音的创建和修改,以及定时和调度。我们将介绍样本加载、包络、滤波器、波表和调频。如果你熟悉这些术语,并且正在寻找 Web Audio API 应用程序的介绍,那么你就来对地方了。注意:你可以在 GitHub 的 webaudio-examples 仓库的 step sequencer 子目录中找到下面演示的源代码。你也可以查看 在线示例。
本文解释了 Web Audio API 功能背后的一些音频理论,以帮助你在设计应用程序的音频路由时做出明智的决策。如果你还不是一名音响工程师,本文将为你提供足够的背景知识,让你理解 Web Audio API 为何会如此运作。音频图(Audio graphs)Web Audio API 涉及在音频上下文(AudioContext)中处理音频操作,其设计旨在实现模块化的音频路由。每个音频节点执...
这篇文章将让我们了解如何开始使用 Web Audio API。本文会先简要介绍一些概念,然后研究一个简单的便携式音响示例,这个示例允许我们加载一个音频轨道,播放和暂停它,并改变它的音量和立体声像。Web Audio API 并不能取代 <audio> 媒体元素,而是对其进行补充,就像 <canvas> 与 <img> 元素并存一样。你的用例将决定你使用什么...