当我们在Goo Technologies听说Web Audio API将在即将发布的Mozilla Firefox版本中得到支持时，我们立即开始集思广益，思考可以用它构建什么。

我们开始与“Legend of Diridum”（见下文）背后的游戏开发者讨论这个项目，并提出了在舞台上建立一个小市场和一个小爵士乐队的想法。我们想要捕捉的感觉是市场复苏的感觉。乐队演奏着一首曲子来热身，人群还没有聚集过来。夜晚温暖而舒适，派对即将开始。

我们称这个演示版本为“Diridum之歌”。

Web Audio API能为你做什么

我们将从三个角度简要了解Web Audio系统。分别是游戏设计、音频工程和编程。

从游戏设计师的角度来看，我们可以利用Web Audio API的功能来调整游戏的声音环境。我们可以同时运行大量独立的声音，同时还可以调整它们的特性以适应环境或游戏机制。你可以让声音通过关闭的门发出闷闷的声音，并在门打开时逐渐打开这些声音的滤波器以取消其闷音效果。实时进行。当我们从人行道走到教堂时，我们可以为角色的脚步声添加环境反射声。街道的环境声音将与我的脚步声一起在教堂里回响。我们可以将咆哮的火焰声音附加到我的魔法师的火球上，将其抛出并听到火球向目标移动的声音。我们可以听到警车的警笛声越来越近，并听到它从多普勒效应产生的音调变化中经过的声音。而且我们知道，我们可以在不需要管理音频引擎的生产的情况下使用这些功能。它已经存在并且可以工作。

从音频工程的角度来看，我们将Web Audio API视为一个大型的补丁板，配有一系列外接设备磁带机和混音器。在底层，我们对系统的基本方面感到比较满意。我们可以轻松地处理正在播放的声音的音量变化，而不会冒因音量级别从一个样本到另一个样本发生变化而导致数字失真。系统将进行此类调整所需的插值。我们还可以构建我们想要的类型的影响，并根据我们的意愿连接它们。只要我们保持我的系统规模合理，我们就可以用Web Audio API创建一个不错的录音棚。

从程序员的角度来看，我们可以轻松地编写项目所需的代码。如果遇到问题，我们通常可以在网上找到一个好的解决方案。我们不必花费时间学习如何使用一些文档记录不佳的专有音频引擎。我们最常处理的问题类型可能与代码的结构有关。我们将弄清楚如何处理声音的加载以及何时加载哪些声音。如何通过一些合适的数据结构或其他设计管道为游戏设计师提供这些声音。我们还将与团队合作，确定如何处理声音系统的预算。我们可以使用多少数据？我们可以在同一时间播放多少声音？我们可以在目标平台上使用多少效果？可能最难的问题，最大的技术风险，与处理网络上运行的各种硬件和浏览器有关。

关于Legend of Diridum

这个名为“Diridum之歌”的音效演示实际上是基于即将推出的游戏“LOD：Legend of Diridum”的图形和设置的特殊演示。LOD团队由游戏设计资深人士Michael Stenmark领导。

LOD是一款易于学习、用户友好的奇幻角色扮演游戏，建立在一个所谓的沙盒世界之上。它融合了日本奇幻和角色扮演游戏的元素，从Grandia、Final Fantasy、Zelda以及Animal Crossing和Minecraft等游戏中汲取灵感。

游戏设定在一个巨大的奇幻世界中，发生在一场可怕的魔法战争之后。这个世界受到战争法师军队中怪物、鬼魂和不死生物的困扰，玩家从帝国的官方驱魔师开始游戏，以净化土地上的邪恶并保护Diridum人民的安全。LOD是在Goo Engine中构建的，可以在几乎任何网络浏览器中玩，无需下载任何内容。

关于音乐

这首歌对于营造气氛和展现一个炎热夏夜转变为派对的温暖感觉至关重要。作曲家Adam Hagstrand很快就做到了。我们喜欢他营造的轻松、爵士乐风格。这正是乐队在人群到来之前热身时会演奏的那种曲调。

使用Goo Engine快速构建3D游戏

我们热爱网络，我们热爱HTML5。HTML5在多种设备的浏览器上运行，无需下载和安装任何特殊的客户端软件。这使得游戏可以在几乎所有可以想象到的网站上发布，并且由于它直接在浏览器中运行，因此它为前所未有的病毒式传播机会和社交媒体集成打开了大门。

我们希望将Diridum之歌构建为HTML5浏览器游戏，但如何在3D中做到这一点？答案是WebGL。WebGL是HTML5中的一项新标准，允许游戏像原生游戏一样访问硬件加速。HTML5中WebGL的引入是浏览器所能提供的功能的巨大飞跃，它允许构建具有前所未有的图形质量的网络游戏。WebGL驱动的HTML5在游戏过程中不需要太多带宽。由于游戏资产在游戏之前和游戏过程中下载（预缓存），因此即使是速度适中的互联网连接也足够了。

但是从头开始构建WebGL游戏是一项巨大的工作。Goo Technologies的Goo平台是简化WebGL游戏和应用程序构建过程的解决方案。Goo Create将于11月发布，使其更易于访问和使用。

Goo是一个基于HTML5和WebGL的图形开发平台，能够为下一代网络游戏和应用程序提供动力。从一开始，它就被构建为具有惊人的图形流畅度和性能，同时使图形创作者能够轻松使用。由于它是HTML5，因此它使创作者能够在网络上构建和分发高级交互式图形，而无需特殊的浏览器插件或软件下载。使用Goo，您可以将硬件加速的游戏和应用程序发布到台式机、笔记本电脑、智能电视、平板电脑或移动设备上。它可以立即访问流畅的丰富图形和以前无法想象的浏览器游戏玩法。

更新：Goo Technologies刚刚推出了他们的交互式3D编辑器Goo Create，它彻底简化了创建交互式WebGL图形的过程。

构建Diridum之歌

我们用一个相当小的团队在相对较短的时间内构建了这个演示项目。总共有大约七个人参与了制作。大多数团队成员对我们的数据和代码进行了零星的更新。粗略地说，我们没有遵循任何传统的开发流程，而是试图在不进行任何更大规模的生产的情况下获得尽可能好的结果。

演示的编程有两个不同的方面。一个用于构建世界，另一个用于连接声音系统。由于用户界面主要用于控制声音系统状态，因此我们让声音系统驱动用户界面。这是一种简单的方法，但我们也有一个相对简单的问题需要解决。构建像这样的小型3D世界主要是将模型数据加载到3D空间中的各个位置。Goo Engine处理了使场景以正确的颜色和形状呈现所需的所有底层编程，因此我们不必为这些部分编写任何代码。

我们定义了一种简单的格式来将模型数据添加到场景中，我们还包括了向世界添加声音以及一些稍微复杂一点的系统（例如动画模型和冒泡水音效）的能力。

您可以使用它来更改爵士乐队混音的小型混音器面板是由声音系统动态生成的。

由于我们预计此应用程序将在触摸屏设备上使用，因此我们还决定仅使用可点击按钮作为界面。在针对移动设备的广泛集合时，我们没有足够的时间来测试任何其他类型控件的可用性。

在3D世界中使用Web Audio

为了构建3D世界的声音环境，我们可以访问声音源的空间化和玩家的耳朵。声音和监听者的空间方面归结为位置、方向和速度。每个声音也可以被设置为在其方向锥体中发出声音，简而言之，这模拟了扬声器前后之间的差异。钢琴实际上不需要任何方向性，因为它在所有方向上听起来都非常相似。另一方面，扩音器具有可比的方向性，并且应该在前面比在后面响亮。

if (is3dSource) {
    // 3D sound source
    this.panNode = this.context.createPanner();
    this.gainNode.connect(this.panNode);
    this.lastPos = [0,0,0];
    this.panNode.rolloffFactor = 0.5;
} else {
    // Stereo sound source “hack”
    this.panNode = mixNodeFactory.buildStereoChannelSplitter(this.gainNode, context);
    this.panNode.setPosition(0, this.context.currentTime);
}

声音的位置用于确定声像或声音在哪个扬声器中更响亮以及声音应该有多响。

声音和监听者的速度以及它们的位置提供执行多普勒频移以相应地处理世界中所有声音源所需的信息。对于其他世界效应（例如，将门后声音变闷或使用混响改变房间声音），我们将不得不编写一些代码并配置处理节点以满足我们的预期结果。

对于向用户界面添加声音和此类直接效果，我们可以将声音连接起来而不必经过空间化，这使得它们变得有点简单。如果您愿意，您仍然可以处理效果并发挥创意。也许可以根据鼠标指针单击的位置平移声音源。

初始化Web Audio

设置使用Web Audio非常简单。棘手的部分与确定您需要预加载多少声音以及您觉得舒适加载多少声音有关。您还需要考虑到加载声音包含两个异步且可能缓慢的操作。第一个是下载，第二个是从某种小型格式（例如OGG或MP3）到arraybuffer的解压缩。在针对本地机器进行开发时，您会发现解压缩比下载慢得多，并且与下载速度一样，我们预计无法知道这将需要多长时间才能满足任何给定用户的需求。

播放声音流

一旦您解压缩并准备好了声音，就可以用来创建声音源。声音源是一个相对底层的对象，它以某种速度将其声音数据流传输到其选定的目标节点。对于最简单的系统，此目标节点是扬声器输出。即使使用这个原始系统，您也可以已经操纵声音的播放速度，这会改变它的音调和持续时间。Web Audio API中有一个不错的功能，允许您调整此类更改的插值行为以适应您的需求。

添加音效：混响、延迟和失真

要向我们的简单系统添加效果，您需要在源和扬声器之间放置一个处理器节点。我们音频工程师希望在此处拆分源以获得“干”和“湿”组件。干组件是未经处理的声音，湿组件是经过处理的。然后，您将干和湿都发送到扬声器，并通过在每条音轨上添加一个增益节点来调整它们之间的混合。增益是工程师表达“音量”的方式。您可以继续执行此操作，并根据需要在源和扬声器之间添加节点。有时您需要并行效果，有时您需要串行效果。在编写系统代码时，最好使更改任何给定节点的这种连接方式变得容易。

结论

我们对“Diridum之歌”的结果非常满意，并且对当今网络浏览器中提供的音频和3D性能印象深刻。希望移动设备能够尽快在性能方面赶上，并且HTML5将成为最通用的跨平台游戏环境。
现在去玩“Diridum之歌”！