案例研究:构建 Technitone.com

HTML5 Rocks
Technitone - 网络音频体验。
Technitone.com

Technitone.com 在 Chrome 浏览器中融合了 WebGL、Canva、Web Socket、CSS3、JavaScript、Flash 以及新的 Web Audio API

本文将讨论制作的各个方面:方案、服务器、声音、图像以及我们用于交互式设计的部分工作流程。大多数部分包含代码段、演示和下载内容。文章最后会有下载链接,可让您下载一个包含所有这些内容的 zip 文件。

gskinner.com 制作小组。

演奏。

我们不是 gskinner.com 的音频工程师,但您可以出个难题考验下我们,我们会想出一个方案来:

我们为用户提供的工具面板可对音调运用音频过滤器并添加特效,从而让用户探索 Web Audio API 的功能。

由 gskinner.com 推出的 Technitone

我们还提供以下功能:

  • 以数据形式存储用户的作品和特效,并在不同客户端之间同步
  • 提供一些颜色选项,以便用户创作出外观酷炫的歌曲
  • 提供作品库供用户欣赏、称赞甚至修改他人的作品

我们仍然使用熟悉的网格模型,并让其悬浮在 3D 空间中,另外还添加了一些照明、纹理和粒子效果,然后放入由 CSS 和 JavaScript 驱动的可调整(或全屏)界面中。

传送路线。

在客户端上进行整合和序列化后,乐器、特效和网格数据会被发送到我们的自定义 Node.js 后端,以供多个用户使用,如 Socket.io。在多用户播放期间,系统会将这些包含每个演奏者所作贡献的数据发送回客户端,然后再分发到负责呈现用户界面、采样和特效的相关 CSS、WebGL 和 WebAudio 层。

与套接字之间的实时通信会传送至客户端和服务器上的 JavaScript。

Technitone 服务器图表

我们的服务器全方位使用了 Node,且兼具静态网络服务器和我们的套接字服务器的功能。我们最后使用了 Express,这是个完全基于 Node 的完整的网络服务器,具有超高的可扩展性和较强的自定义性,并能为您处理低级别的服务器事项(就像 Apache 或 Windows Server 一样)。然后,作为开发人员,您只需集中精力开发您的应用即可。下载更详细的客户端-服务器通信图表

多用户演示(仅提供屏幕截图)

该演示需要在 Node 服务器上运行;此外,由于本文并不提供实际演示,我们提供了屏幕截图,向您显示在您安装 Node.js、配置网络服务器并在本地运行后的演示效果。每次有新用户访问您的演示装置时,系统都会添加新的网格,且每个人的作品彼此可见。

Node.js 演示屏幕截图

下载多用户演示。需要 Node.js 服务器 请务必查看自述文件 (README),其中包含关于安装 Node.js、配置服务器和本地运行演示的信息。

Node 非常简单。我们只需结合使用 Socket.io 和自定义 POST 请求,而无需建立复杂的同步例程。Socket.io 会自动进行处理,从而分发 JSON

有多简单?让我们来看一下。

只需 3 行 JavaScript,我们就能设立网络服务器,且该服务器通过 Express 运行。



    

然后再添加几行 Javascript 关联 socket.io,以便进行实时通信。



    

现在,我们只需开始监听从 HTML 网页传入的连接即可。



      

声音检查。

一个很大的未知因素是使用 Web Audio API 需要投入的精力。根据我们的初步研究,数字信号处理 (DSP) 极其复杂,我们几乎绞尽脑汁。了解的第二件事:克里斯·罗杰斯 (Chris Rogers) 已完成该 API 中较繁重的部分。

Technitone 并没有使用任何特别刁钻的数学或专业音频学;感兴趣的开发人员可以轻松使用这个功能。我们只需要熟悉一些术语并参阅文档即可。我们建议您不要略读这些文档,而应该从头到尾地阅读并了解这些文档。文档中穿插了图表和照片,非常精彩。

如果这是您第一次听说 Web Audio API,或者您不了解该 API 的功能,可参见克里斯·罗杰斯的演示。如果您在寻找灵感,这个演示一定能够让您实现愿望。

Web Audio API 演示

您的浏览器不支持 Web Audio API,请尝试在 Chrome 浏览器中运行该演示。

下载 Web Audio API 演示。只有托管到服务器后才能运行


以下概述了您可能在源中看到的内容:

在示例(声音文件)中加载…



  

…设置模块化路由…



  

…应用运行时效果(使用脉冲响应的卷积)…



  

…应用另一个运行时效果(延迟)…



  

…然后令其发声。



  

我们的 Technitone 播放原理在于调度。我们并没有将计时器的时间间隔设置成我们的节奏以处理每个节拍的声音,而是设置了一个更小的时间间隔,以队列的形式管理和调度声音。这样,API 就能在 CPU 实际接到发声指令之前执行解析音频数据和处理过滤器及特效的前期工作。当节拍最终形成时,向扬声器传递最终结果所需的所有信息均已准备完毕。

总之,一切都需要优化。当 CPU 负担过重时,系统会跳过一些进程(弹出、点击、擦除)以维持进度;如果您跳转到 Chrome 浏览器的另一个标签页,我们会尽最大的努力停止一切异常。

照明展示。

前面和中间部分是我们的网格和粒子通道。这就是 Technitone 的 WebGL 层。

WebGL 结合使用 GPU 和处理器,其性能远远高于其他大多数在网络上呈现视觉效果的方法。性能上的提升要求以更陡峭的学习曲线进行更复杂的开发。也就是说,如果您对网络互动极具热诚,且希望尽可能减少性能限制,WebGL 可以提供与 Flash 相媲美的解决方案。

WebGL 演示

很抱歉,您的浏览器不支持 HTML5 画布。请确保您的浏览器已更新到最新版本并且兼容 HTML5 画布。建议使用 Google Chrome 浏览器。


该演示介绍了阴影、纹理、动画、粒子效果和交互性。每个演示介绍的都是前一个概念。

下载 WebGL 演示基于纹理的演示只能再服务器上运行

请注意:WebGL 需遵守安全协议,因而不能直接从本地硬盘驱动器加载和处理纹理。

系统会将 WebGL 内容渲染到画布(实际上是 HTML5 画布),且该内容由以下核心建筑块组成:

  • 对象的顶点(几何)
  • 位置矩阵(3D 坐标)
  • 明暗器(描述几何外观,直接链接到 GPU)
  • 环境(GPU 引用元素的“快捷方式”)
  • 缓冲区(向 GPU 传递环境数据的路线)
  • 主代码(针对所需交互的业务逻辑)
  • “draw”方法(激活明暗器并将像素转移到画布)

将 WebGL 内容渲染到屏幕的过程如下所示:

  1. 设置透视矩阵(调整深入 3D 空间的镜头设置,规定图片平面)。
  2. 设置位置矩阵(在 3D 坐标中设定原点,作为测量位置时的对照点)。
  3. 在缓冲区填满数据(顶点位置、颜色、纹理…),以便将这些数据通过明暗器传递到环境中。
  4. 使用明暗器从缓冲区提取并整理数据,然后将其传递到 GPU。
  5. 调用 draw 方法,以便命令环境激活明暗器、运行数据和更新画布。

实际情况如下所示:

设置透视矩阵…



  

…设置位置矩阵…



  

…规定一些几何图形和外观…



  

…在缓冲区填满数据,然后将数据传递到环境…



  

…然后调用 draw 方法



  

如果您不希望基于 alpha 的视觉效果相互堆叠,请务必清除每一帧的画布。

场地。

除了网格和粒子通道外,其他所有用户界面元素都将置入 HTML/CSS 和 JavaScript 的互动逻辑。

从一开始我们确定了一个理念,让用户以最快的速度与网格进行互动。没有闪屏、说明或者教程,只有“开始”。只要加载了界面,速度就不会减慢。

这就要求我们格外关注如何指引初次使用的用户进行互动。我们添加了一些细微的提示,例如根据用户的鼠标在 WebGL 空间所处的位置改变 CSS 光标属性。如果光标位于网格上方,我们会将其转换成手形光标(因为用户可以通过设计音调进行互动)。如果光标位于网格周围的空白区域,我们会将其换成有方向性的十字光标(以表明用户可以旋转网格或将网格扩大成图层)。

演奏准备工作

LESS(一种 CSS 预处理程序)和 CodeKit(强大的网络开发工具)大大减少了将设计文件转换成存根化的 HTML/CSS 所需的时间,因此我们可以使用更灵活的方式整理、编写和优化 CSS:使用变量、混入(函数)甚至数学!

舞台效果

我们使用 CSS3 过渡backbone.js 设计了一些非常简单的特效,有助于将应用付诸于现实,并能向用户提供显示所用乐器的直观队列。

Technitone 具备的颜色

Backbone.js 可让我们捕获颜色变化时间,并将新的颜色应用到相应的 DOM 元素。经 GPU 加速的 CSS3 过渡在处理颜色样式变化时对性能几乎不会造成任何影响。

界面元素的大部分颜色过渡都是由背景颜色过渡引起的。除了背景颜色以外,我们还放置了背景图片,该图片附带的战略性区域的透明度可表现出背景颜色。

颜色过渡演示 - 您可以创造出多少种颜色?

该演示很好地展示了可使用该技术完成的操作。挑选颜色,然后看科学狂人将这些颜色混合到一起,创造出第三种不同的颜色。

颜色便宜演示如下所示。

下载颜色偏移演示

让我们来进一步了解下 HTML、CSS、Javascript 中的后台活动,以及如何为特效准备艺术资产。

HTML:基础

该演示需要三个颜色区域:两个用户选定的颜色区域和一个混合颜色区域。我们创建了所能想到的支持 CSS3 过渡的最简单的 DOM 结构,并尽可能减少了针对我们的插图的 HTTP 请求。

<!-- Basic HTML Setup -->
<div class="illo color-mixed">
  <div class="illo color-primary"></div>
  <div class="illo color-secondary"></div>
</div>
  

CSS:带有样式的简单格式

我们使用绝对定位功能将每个区域定位到准确位置,并调整背景位置属性以便对齐各个区域中的背景插图。因此,所有区域(每个区域使用相同的背景图片)看起来都像是单个元素。



  

我们使用经 GPU 加速的过渡,以便监听颜色变化事件。我们延长了持续时间,并对 .color-mixed 作了缓和修改,以便给人一种颜色混合需要时间的印象。



  

访问 HTML5please 获取对当前浏览器的支持以及对 CSS3 过渡的推荐用法

Javascript:使其发挥作用

动态分配颜色也很简单。我们在 DOM 中搜索所有带有我们的颜色类的元素,并根据用户选择的颜色设置背景颜色。我们通过添加类将过渡效果应用到 DOM 中的所有元素,

从而创建出轻便、灵活、可扩展的架构。



  

选定主要颜色和次要颜色后,我们会计算两者的混合颜色值,并将得到的值分配到适当的 DOM 元素。



  

HTML/CSS 架构图解:提供三种特色的颜色偏移框

我们的目标是创造有趣逼真的照明特效,当相邻的颜色区域中存在对比色时仍能保持图片的完整性。

24 位 PNG 可让 HTML 元素的背景颜色透过图片的透明区域。

图片透明度

当不同颜色相遇时,彩色框的边缘会比较明显。这一点会对形成逼真的照明特效造成阻碍,是设计插图时一个较大的挑战。

颜色区域

相应的解决方法是,在设计插图时不允许颜色区域的边缘透过透明区域。

颜色区域边缘

构建规划非常重要。设计人员、开发人员和插图人员之间的快速规划会议为小组成员了解各项内容应采取的构建方式提供了帮助,使各项内容在整合后能够协调一致。

以 Photoshop 文件为例,了解层命名如何显示关于 CSS 构建的信息。

颜色区域边缘

下载颜色偏移演示

加演。

针对未安装 Chrome 浏览器的用户,我们设定了一个目标:将应用精髓凝炼成一幅静态图片。网格节点代表主体,背景瓦片暗指应用目的,倒影中的透视图暗示网格逼真的 3D 环境。

颜色区域边缘

如果您想学习更多 Technitone 相关知识,请继续关注我们的博客

下载一个包含所有演示的文件

乐队。

感谢您的阅读,也许我们很快又会叨扰您

Comments

0