Caso práctico: creación de Technitone.com

HTML5 Rocks
Technitone, una experiencia de audio en la Web
Technitone.com

Technitone.com es un proyecto de fusión de varias tecnologías (WebGL, Canvas, Web Sockets, CSS3, JavaScript, Flash y la nueva API de Web Audio) en Chrome.

En este artículo se tratarán todos los aspectos de la producción: la elaboración del plan, el servidor, los efectos visuales y sonoros y parte del flujo de trabajo utilizado para el diseño de contenido interactivo. La mayoría de las secciones contienen fragmentos de código, una demo y un enlace de descarga. Al final del artículo, aparece un enlace de descarga que incluye todo el contenido almacenado en un archivo .zip.

El equipo de producción de gskinner.com

El concierto

En gskinner.com, no somos ingenieros de sonido, pero podemos desarrollar un plan para cualquier reto que se nos plantee:

  • Los usuarios representan tonos en un panel, siguiendo el ejemplo de la aplicación ToneMatrix de André Michelle.
  • Los tonos se conectan a instrumentos de muestra, a kits de baterías e, incluso, a grabaciones de los propios usuarios.
  • Varios usuarios conectados tocan simultáneamente en el mismo panel
  • …o prueban con un solo.
  • Las sesiones de invitación permiten que los usuarios organicen un grupo musical y realicen actuaciones improvisadas.

Ofrecemos a los usuarios la oportunidad de explorar el API de Web Audio a través de un panel de herramientas que aplica efectos y filtros de audio a sus tonos.

Technitone (de gskinner.com)

También:

  • Almacenamos los efectos y las composiciones de los usuarios como datos y los sincronizamos en diferentes clientes.
  • Proporcionamos algunas opciones de color para que los usuarios puedan crear canciones con un diseño atractivo.
  • Ofrecemos una galería en la que se puede escuchar, admirar e, incluso, editar el trabajo de otros usuarios.

Hemos mantenido la familiar metáfora del panel, la hemos trasladado a un espacio 3D, le hemos añadido algunos efectos de partículas, textura e iluminación y hemos alojado el resultado en una interfaz flexible (o de pantalla completa) basada en JavaScript y CSS.

El recorrido

Los datos del panel, de los efectos y de los instrumentos se agrupan y se serializan en el cliente y, a continuación, se envían a nuestro servidor Node.js personalizado para resolverlos para varios usuarios en Socket.io. Estos datos se vuelven a enviar al cliente con las aportaciones de los diferentes músicos antes de distribuirse entre las capas de CSS, WebGL y WebAudio correspondientes encargadas de la representación de la interfaz de usuario, de las muestras y de los efectos durante una sesión de reproducción de varios usuarios.

Para la comunicación en tiempo real con los conectores, se utiliza JavaScript en el cliente y en el servidor.

Diagrama de servidor de Technitone

Utilizamos el término "nodo" para referirnos a los distintos aspectos del servidor: un servidor web estático y nuestro servidor de conexión (todo en uno). Finalmente, acabamos utilizando Express, un servidor web completo totalmente integrado en el nodo. Se trata de un servidor con una máxima escalabilidad y grandes posibilidades de personalización que se encarga de los aspectos más básicos del servidor (como el servidor de Windows o Apache, por ejemplo) para que los desarrolladores puedan olvidarse de esas tareas y centrarse en la creación de sus aplicaciones. Descargar un diagrama de comunicación cliente-servidor más detallado

Demo de varios usuarios (sí, solo es una captura de pantalla)

Como esta demo se debe ejecutar en un servidor de nodo y este artículo no lo es, hemos incluido una captura de pantalla en la que se ve el aspecto de la demo después de instalar Node.js, configurar el servidor web y ejecutar la demo de forma local. Cada vez que un nuevo usuario acceda a la instalación de tu demo, se añadirá un nuevo panel y se podrá ver el trabajo de todos los participantes.

Captura de pantalla de demo de Node.js

Descargar la demo de varios usuarios Se necesita el servidor Node.js. Asegúrate de consultar el archivo README, que contiene información sobre la instalación de Node.js, la configuración del servidor y la ejecución local de la demo.

La organización del nodo es sencilla. Utilizando una combinación de Socket.io y solicitudes POST personalizadas, evitamos tener que crear complejas rutinas para la sincronización. Socket.io lleva a cabo este proceso de forma transparente; JSON es el formato que se utiliza para la transmisión de datos.

El procedimiento es muy sencillo:

Con tres líneas de JavaScript, tenemos un servidor web listo para funcionar con Express.



    

Utilizamos unas cuantas líneas más para establecer la vinculación de socket.io para la comunicación en tiempo real.



    

Una vez hecho esto, solo hay que empezar a detectar las conexiones entrantes procedentes de la página HTML.



      

La comprobación del sonido

Nadie se puede imaginar los grandes esfuerzos que conlleva el uso del API de Web Audio. Nuestros primeros descubrimientos confirmaron que el sistema de procesamiento digital de señales (Digital Signal Processing, DSP) era muy complejo y que probablemente estaba por encima de nuestras posibilidades. Segundo descubrimiento: Chris Rogers ya había hecho el trabajo duro en el API.

Technitone no utiliza ningún descabellado procedimiento matemático ni audioholístico: los desarrolladores interesados pueden acceder fácilmente a esta funcionalidad. Lo único que tuvimos que hacer fue repasar alguna terminología y leer la documentación. Nuestro consejo es que no te limites a echarle un vistazo rápido, sino que la leas de principio a fin. Es un material muy bueno que incluye diagramas y fotos.

Si es la primera vez que has oído hablar del API de Web Audio o no sabes lo que puede hacer, consulta las demos de Chris Rogers. Si buscas ideas, sin duda las encontrarás allí.

Demo del API de Web Audio

Tu navegador no admite el API de Web Audio. Prueba a ejecutar la demo en Chrome.

Descargar demo del API de Web AudioSolo funciona si se aloja en un servidor.


A continuación se ofrece una visión general del contenido de la fuente:

Se carga una muestra (archivo de sonido)…



  

…se configura un enrutamiento modular…



  

…se aplica un efecto de tiempo de ejecución (convolución utilizando una respuesta a impulso)…



  

…se aplica otro efecto de tiempo de ejecución (retraso)…



  

…y, por último, se crea el efecto sonoro.



  

Nuestro enfoque de la reproducción en Technitone está totalmente centrado en la planificación. En lugar de establecer un intervalo de temporización equivalente al tempo para el procesamiento de los sonidos con cada compás, configuramos un intervalo más reducido que gestiona y planifica los sonidos en una cola. De esta forma, el API puede realizar la tarea inicial de resolución de los datos de audio y procesamiento de filtros y efectos antes de que se asigne a la CPU la tarea de creación del efecto sonoro. Cuando finalmente llega el compás, ya contiene toda la información necesaria para presentar el resultado definitivo a los altavoces.

En general, hay que optimizarlo todo. Al forzar demasiado las CPU, fue necesario omitir algunos procesos (ventanas emergentes, clics, borrados...) para no salirse de la planificación; hicimos todo lo posible por resolver el lío que se organizaba al saltar de una pestaña de Chrome a otra.

La iluminación

La parte frontal y central componen el panel y el túnel de partículas. Esta es la capa de WebGL de Technitone.

WebGL ofrece un rendimiento considerablemente superior al de otros sistemas utilizados para la representación de efectos visuales en la Web, al hacer que la GPU y el procesador funcionen conjuntamente. El coste de ese mayor rendimiento es un trabajo más intenso de desarrollo con una curva de aprendizaje mucho más pronunciada. No obstante, si eres un auténtico apasionado del contenido interactivo en la Web y quieres conseguir el mayor rendimiento posible, WebGL te ofrece una solución comparable a Flash.

Demo de WebGL

Tu navegador no admite el elemento canvas de HTML5. Asegúrate de tener instalada la versión más reciente del navegador y de que sea compatible con el elemento canvas de HTML5. Se recomienda utilizar Google Chrome.


En esta demo se presentan varios conceptos, como los de sombreado, textura, animación, efectos de partículas e interactividad. Cada demo se basa en el concepto anterior siguiendo una progresión lineal.

Descargar demo de WebGLLas demos basadas en texturas solo funcionan en un servidor.

Nota: WebGL se ajusta a un protocolo de seguridad que impide que cargue y manipule texturas directamente desde la unidad de disco duro local.

El contenido de WebGL se representa en un elemento canvas (concretamente, en el elemento canvas de HTML5) y se compone de los siguientes elementos principales:

  • vértices de objetos (elemento geométrico),
  • matrices de posición (coordenadas 3D),
  • sombreadores (descripción de aspecto de elemento geométrico, vinculado directamente a la GPU),
  • contexto ("accesos directos" a los elementos a los que hace referencia la GPU),
  • búferes (canales de transmisión de datos de contexto a la GPU),
  • código principal (lógica empresarial específica del contenido interactivo deseado),
  • método de "dibujo" (activa los sombreadores y representa píxeles en el elemento canvas).

A continuación se indican los pasos que integran el proceso básico que se lleva a cabo para mostrar contenido WebGL en la pantalla:

  1. Se define la matriz de perspectiva (ajustando la configuración de la cámara que se introduce en el espacio 3D para definir el plano de la imagen).
  2. Se define la matriz de posición (declarando en las coordenadas 3D el origen respecto al que se deben calcular las posiciones).
  3. Se incluyen en los búferes los datos que se deben transmitir al contexto a través de los sombreadores (posición de vértice, color, texturas&hellip).
  4. Los datos de los búferes se extraen y organizan con los sombreadores y se transmiten a la GPU.
  5. Se activa el método de dibujo para indicarle al contexto que active los sombreadores, que utilice los datos y que actualice el elemento canvas.

El proceso sería algo así:

Se define la matriz de perspectiva…



  

…se define la matriz de posiciónx…



  

…se definen algunos elementos geométricos y de diseño…



  

…se incluyen en los búferes una serie de datos, que se transmiten al contexto…



  

…y, por último, se activa el método de dibujo.



  

Recuerda que en cada marco se debe borrar el elemento canvas para evitar un apilamiento de elementos visuales de tipo alfabético.

El lugar de actuación

Además del panel y del túnel de partículas, todos los demás elementos de la interfaz de usuario se crearon en HTML/CSS, y la lógica del contenido interactivo se creó en JavaScript.

Desde un principio, decidimos que los usuarios debían interactuar con el panel lo más rápidamente posible y empezar a utilizarlo directamente, sin pantallas de bienvenida, instrucciones ni tutoriales. Si la interfaz está cargada, no debe haber nada que la ralentice.

Para ello, debíamos pensar detenidamente cómo podíamos guiar al usuario la primera vez que interactuaba con el panel, así que incluimos algunas pistas sutiles, como el cambio de la propiedad del cursor CSS en función de la posición del ratón en el espacio WebGL. Si el cursor se encuentra sobre el panel, se convierte en un cursor de mano (porque el usuario puede interactuar con el panel representando tonos). Si se coloca en el espacio blanco que rodea el panel, se convierte en un cursor de cruz de direcciones (para indicar que el usuario puede realizar un giro o dividir el panel en capas).

Preparación del espectáculo

LESS (un preprocesador de CSS) y CodeKit (un programa que se ha convertido en los esteroides de los desarrolladores web) reducen verdaderamente el tiempo de conversión de los archivos de diseño en contenido HTML/CSS acabado. Esto permite organizar, crear y optimizar el contenido CSS de una forma mucho más versátil, aprovechando variables, combinaciones (funciones) e incluso elementos matemáticos.

Efectos escénicos

Utilizando transiciones CSS3 y backbone.js, hemos creado algunos efectos realmente sencillos que animan la aplicación y proporcionan a los usuarios algunas pistas visuales del instrumento que están usando.

Los colores de Technitone

Backbone.js permite capturar eventos de cambio de color y aplicar el nuevo color a los elementos DOM adecuados. Las transiciones CSS3 aceleradas por GPU permitieron llevar a cabo los cambios de estilo de color con un impacto reducido o nulo en el rendimiento.

La mayoría de las transiciones de color de los elementos de la interfaz se crearon mediante transición de colores de fondo. Sobre este color de fondo, colocamos imágenes de fondo con zonas de transparencia estratégicas de forma que el color de fondo pudiera resaltar.

Demo de transición de color:  ¿cuántos colores puedes crear?

Esta demo muestra un fantástico ejemplo de lo que se puede hacer con esta técnica. Elige colores y observa cómo los mezcla el científico loco para crear un tercer color único.

Demo de cambio de color abajo

Descargar demo de cambio de color

Vamos a examinar más detenidamente el funcionamiento de HTML, CSS y JavaScript y ver cómo se pueden preparar los elementos artísticos para conseguir el efecto deseado.

HTML: la base

Necesitábamos tres regiones de color para la demo: dos regiones de color seleccionadas por el usuario y una tercera región de color combinado. Creamos la estructura DOM más sencilla que se pudiera imaginar para las transiciones CSS3 y unas pocas solicitudes HTTP para nuestra ilustración.

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

CSS: estructura sencilla con estilo

Utilizamos el posicionamiento absoluto para situar cada región en su ubicación correcta y ajustamos la propiedad de posición de fondo para alinear la ilustración de fondo en cada región. De esa forma, todas las regiones (cada una de ellas con la misma imagen de fondo) parecían un único elemento.



  

Aplicamos transiciones aceleradas por GPU que detectaban eventos de cambio de color. Aumentamos la duración y modificamos la curvatura en .color-mixed para crear la impresión de que los colores tardaban algún tiempo en mezclarse.



  

Consulta la página de HTML5please para obtener información sobre navegadores compatibles y usos recomendados para las transiciones CSS3.

JavaScript: puesta en marcha

Asignar colores de forma dinámica es sencillo. Buscamos en el DOM cualquier elemento que tenga nuestra clase de color y establecemos el color de fondo en función de los colores seleccionados por el usuario. Aplicamos el efecto de transición a cualquier elemento del DOM añadiendo una clase.

De esta forma, se crea una arquitectura ligera, flexible y escalable.



  

Una vez que se han seleccionado los colores primarios y secundarios, calculamos el valor de color combinado y asignamos el valor resultante al elemento DOM correspondiente.



  

Ilustración para la arquitectura HTML/CSS: cómo dar personalidad a tres cuadros de color cambiante

Nuestro objetivo era crear un efecto de iluminación realista y divertido que mantuviera su integridad al incluir colores de contraste en regiones de color adyacentes.

Una imagen PNG de 24 bits permite que el color de fondo de los elementos HTML se vea a través de las zonas transparentes de la imagen.

Zonas transparentes de la imagen

Los cuadros de color generan bordes muy marcados en los que confluyen diferentes colores. Esto interfiere con la creación de efectos de iluminación realistas y fue uno de los mayores retos que tuvimos que afrontar al diseñar la ilustración.

Regiones de color

La solución fue diseñar la ilustración de forma que nunca se pudieran mostrar los bordes de las regiones de color a través de las zonas transparentes.

Bordes de regiones de color

La planificación de la compilación fue un paso crucial. Una rápida sesión de planificación en la que participaron el diseñador, el desarrollador y el ilustrador ayudó al equipo a determinar cómo se debía componer todo para que funcionara correctamente.

En el archivo de Photoshop, puedes ver un ejemplo de la información sobre la construcción CSS que puede transmitir la nomenclatura de las capas.

Bordes de regiones de color

Descargar demo de cambio de color

Bonus

Para los usuarios que no utilizan Chrome, intentamos trasladar la esencia de la aplicación a una única imagen estática. El nodo del panel se convierte en el elemento principal, los mosaicos de fondo hacen referencia al objetivo de la aplicación y la perspectiva presente en el reflejo sugiere el envolvente entorno 3D del panel.

Bordes de regiones de color

Si quieres obtener más información sobre Technitone, no te pierdas las novedades de nuestro blog.

Descargar todas las demos como un único archivo

El grupo

Te agradecemos que hayas leído este artículo y esperamos ver pronto una de tus actuaciones.

Comments

0