跳至正文
首页 » 博客 » What is the Web Audio API: A primer

What is the Web Audio API: A primer

音频是互动体验如此引人注目的重要组成部分。放置良好的声音对于通知,钟声以及音频和视频通信应用程序至关重要。对于视力受损的计算机用户,音频提示,语音合成和语音识别对于可用的体验至关重要。Web Audio API旨在控制Web上的音频,允许开发人员选择音频源,为音频添加效果,创建音频可视化效果,应用空间效果 (如平移) 等等。

什么是Web Audio API?

Web Audio API是一个高级JavaScript API,用于在web应用程序中处理和合成音频。此API的目标是包含现代游戏引擎中的功能以及现代桌面和web应用程序中的一些混合,处理和过滤任务。

简史

将音频合并到浏览器中都是在20世纪90年代末中使用Internet Explorer中的标签开始的,该标签可以在打开网站时自动播放midi文件。浏览器后来开始使用第三方插件,如Flash,QuickTime或Silverlight,但所有这些插件都有缺点。然后,随着不支持flash的移动浏览器的到来,需要一些新的东西。该解决方案附带了HTML5,它引入了

尽管如此,播放音频是不够的-我们想要分析,反应和操纵我们的音频。此外,HTML5在实现复杂的游戏和交互式应用程序方面有很大的局限性,这就是Web Audio API通过提供许多功能来实现的地方,包括:

  • 播放不同的声音与节奏
  • 调整音量
  • 交叉衰落两种声音
  • 等功率交叉衰落
  • 播放列表交叉淡化

这对开发者有什么影响?

模块化路由

模块化路由允许不同AudioNode对象之间的任意连接。每个节点可以具有输入和/或输出。源节点没有输入和单个输出,而目标节点只有一个输入和输出,最常见的示例是AudioDestinationNode -音频硬件的最终目标。诸如过滤器的其他节点可以被放置在源节点和目的地节点之间。当两个对象连接在一起时,开发人员不必担心低级别的流格式细节 ,正确的事情就发生了。

当单个源直接路由到输出时,这是单个路由的样子:

在许多游戏中,将多个声音源组合在一起以创建最终混音。源包括背景音乐、游戏音效、UI反馈声音,以及在多人游戏设置中,其他玩家的声音。使用Web Audio API中的模块化路由,您可以通过完全控制每个声音以及所有声音来分离所有声音。

这就是我们可以将所有通道组合到单个输出的复杂模块化路由的样子:

有了这个设置,玩家很容易分别控制每个通道的水平。例如,许多人喜欢在背景音乐关闭的情况下玩游戏。

精确定时模型

对于web应用程序,鼠标和键盘事件与听到声音之间的时间延迟很重要。该时间延迟被称为延迟,并且由若干因素 (输入设备延迟、内部缓冲延迟、DSP处理延迟、输出设备延迟、用户的耳朵与扬声器的距离等) 引起,并且是累积的。该延迟越大,则越不满足UX。在极端情况下,它可以使音乐制作或游戏无法进行。

即使在中等水平,延迟也会影响时间,并给人以声音滞后或游戏无响应的印象。对于音乐应用,计时问题会影响节奏。对于游戏,时间问题会影响游戏的精确度。对于交互式应用程序,它通常以与低动画帧速率相同的方式降低用户的体验。

使用Web Audio API,可以避免延迟,精确的计时使您能够在将来的特定时间安排事件。这对于脚本场景和音乐应用非常重要。以下是Web Audio API中可用的解决此问题的功能:

  • 精确播放和恢复
  • 调度精确的节奏
  • 更改音频参数
  • 逐渐改变音频参数
  • 自定义时序曲线

分析和可视化

Web Audio API中的功能不仅仅是音频合成和处理。它还提供了一种理解正在播放的声音的方法。一个好的可视化分析器可以作为一种调试工具来调整声音是正确的。其次,可视化对于任何与音乐相关的游戏和应用程序都至关重要。

我们可以在时域和频域上分析声波。您可以将动画添加到声音的可视化中。最后,我们可以设置一个循环来查询和呈现分析器以进行其当前频率分析。

以下是实现声音的简单分析和可视化的关键点。

  • 频率分析
  • 使用requestAnimationFrame进行动画处理
  • 可视化声音

最后的思考…

Web Audio API使音频合成和处理非常简单,具有广泛的功能。然而,开发人员需要非常谨慎地使用它,因为API是在JavaScript中实现的,这会导致浏览器上的一些性能问题,特别是对于当今一代的移动设备。在JavaScript中处理音频时,获得可靠、无故障的音频同时实现合理的低延迟是非常具有挑战性的,特别是在重处理器负载下。在未来,我们可以预期它会改善由JavaScript引起的性能问题,但它通常非常有用,并将潮流转向开发人员。

</p