Fallstudie: Aufbau von Technitone.com

HTML5 Rocks
Technitone – A web audio experience.
Technitone.com

Technitone.com ist eine Verschmelzung von WebGL, Canvas, Web Sockets, CSS3, JavaScript, Flash und des neuen Web Audio API in Chrome.

Dieser Artikel beschäftigt sich mit sämtlichen Aspekten der Produktion: dem Plan, dem Server, den Sounds, den visuellen Elementen und einem Teil des Workflows, den wir zum Design für eine interaktive Erfahrung nutzen. Die meisten Abschnitte enthalten Code-Snippets, eine Demo und einen Download. Am Ende des Artikels finden Sie einen Download-Link, über den Sie alle Demos in einer ZIP-Datei herunterladen können.

Das gskinner.com-Produktionsteam.

Der Gig.

Wir bei gskinner.com sind keineswegs Toningenieure – doch wenn man uns vor eine Herausforderung stellt, können wir nicht widerstehen und arbeiten einen Plan aus:

  • Nutzer zeichnen Klänge in einem Raster ein, "inspiriert" durch die ToneMatrix von Andre.
  • Die Klänge sind mit gesampelten Instrumenten, Schlagzeugen oder sogar eigenen Aufnahmen von Nutzern verknüpft.
  • Mehrere miteinander verbundene Nutzer spielen gleichzeitig im selben Raster …
  • … oder wechseln in den Solomodus, um es allein auszuprobieren.
  • Im Rahmen von Einladungssitzungen können Nutzer eine Band organisieren und eine improvisierte Jam-Session abhalten.

Wir bieten Nutzern die Gelegenheit, das Web Audio API über ein Steuerfeld zu erkunden, in dem sie Audiofilter und Effekte auf ihre Klänge anwenden können.

Technitone von gskinner.com

Außerdem:

  • speichern wir die Kompositionen und Effekte von Nutzern als Daten und synchronisieren diese clientübergreifend
  • stellen wir einige Farboptionen bereit, sodass Nutzer cool aussehende Songs gestalten können
  • bieten wir eine Galerie, in der Nutzer die Werke anderer Personen anhören, mögen und sogar bearbeiten können

Wir haben das bekannte Rasterbild – im 3D-Raum gleitend – aufgegriffen, durch Lichtelemente, Textur und Partikeleffekte ergänzt und es in eine flexible (oder als Vollbild dargestellte) und durch CSS und JavaScript gesteuerte Oberfläche integriert.

Roadtrip.

Instrument-, Effekt- und Rasterdaten werden auf dem Client konsolidiert und serialisiert und anschließend an unser benutzerdefiniertes Node.js-Backend gesendet. Auf diese Weise wird es Socket.io entsprechend für mehrere Nutzer aufgelöst. Diese Daten werden mit den integrierten Beiträgen aller Mitwirkenden an den Client zurückgesendet und danach auf die jeweiligen CSS-, WebGL- und WebAudio-Ebenen aufgeteilt, die bei der Wiedergabe für mehrere Nutzer für das Rendering der Benutzeroberfläche, Samples und Effekte sorgen.

Durch Echtzeitkommunikation mit Sockets werden JavaScript-Daten für den Client und den Server weitergeleitet.

Technitone-Serverdiagramm

Wir nutzen Node.js für jeden Aspekt des Servers. Er ist zugleich ein statischer Webserver und unser Socket-Server. Letztlich entschieden wir uns für Express. Dies ist ein kompletter Webserver, der vollständig für Node.js integriert ist. Er ist höchst skalierbar, sehr anpassbar und verarbeitet die systemnahen Serveraspekte für Sie, wie dies auch bei Apache oder Windows Server der Fall wäre. Auf diese Weise können Sie sich als Entwickler auf die Erstellung Ihrer Anwendung konzentrieren. Detaillierteres Diagramm zur Client-Server-Kommunikation herunterladen

Demo zu mehreren Nutzern (zugegebenermaßen ist dies tatsächlich nur ein Screenshot)

Diese Demo muss von einem Knotenserver ausgeführt werden. Da dieser Artikel kein Knotenserver ist, haben wir einen Screenshot eingefügt, dem Sie entnehmen können, wie die Demo nach der Installation von Node.js, der Konfiguration des Webservers und der lokalen Ausführung aussieht. Jedes Mal, wenn ein neuer Nutzer Ihre Demoinstallation besucht, wird ein neues Raster hinzugefügt. So sind die Werke aller für die anderen Nutzer sichtbar.

Screenshot der Demo zu Node.js

Demo zu mehreren Nutzern herunterladen Erfordert Node.js-Server Lesen Sie auf jeden Fall die README-Datei. Sie enthält Informationen zur Installation von Node.js, zur Konfiguration des Servers und zur lokalen Ausführung der Demo.

Node.js ist ganz einfach. Mit einer Kombination von Socket.io und benutzerdefinierten POST-Anfragen mussten wir keine komplexen Routinen für die Synchronisierung entwickeln. Socket.io verarbeitet dies transparent. Der Datenaustausch erfolgt über JSON.

Wie einfach? Schauen Sie.

Mit drei JavaScript-Zeilen bringen wir einen Webserver mit Express zum Laufen.



    

Noch ein paar Zeilen mehr, und schon ist Socket.io für die Echtzeitkommunikation integriert.



    

Jetzt warten wir nur noch auf eingehende Verbindungen von der HTML-Seite.



      

Soundcheck.

Ein unbekannter Faktor war der durch die Nutzung von Web Audio API verursachte Aufwand. Unsere anfänglichen Ergebnisse belegten, dass die digitale Signalverarbeitung (Digital Signal Processing, DSP) sehr komplex ist und wir der Sache wahrscheinlich überhaupt nicht gewachsen waren. Die zweite Erkenntnis: Chris Rogers hat die knifflige Arbeit im API bereits erledigt.

Technitone nutzt keine abgefahrene Mathematik oder hoch spezialisierte Audiotechnik – diese Funktionalität ist für interessierte Entwickler problemlos zugänglich. Wir mussten wirklich nur terminologisch auf den aktuellen Stand kommen und die Dokumente lesen. Unser Ratschlag? Überfliegen Sie sie nicht. Lesen Sie sie gründlich. Beginnen Sie oben und lesen Sie sie bis zum Ende. Sie sind übervoll mit Diagrammen und Fotos. Die Lektüre lohnt sich wirklich.

Wenn Sie an dieser Stelle zum ersten Mal von Web Audio API gehört haben oder nicht wissen, welche Funktionsmöglichkeiten es bietet, sehen Sie sich die Demos von Chris Rogers an. Lust auf Inspiration? Dort finden Sie sie ganz bestimmt.

Demo zu Web Audio API

Ihr Browser unterstützt Web Audio API nicht. Führen Sie diese Demo bitte in Chrome aus.

Demo zu Web Audio API herunterladenFunktioniert nur beim Hosting auf einem Server


Hier erhalten Sie einen Überblick über die Elemente, die Sie in der Quelle finden:

Sample (Sounddatei) laden …



  

… modulare Weiterleitung einrichten …



  

… Laufzeiteffekt anwenden (Faltung mittels Impulsantwort) …



  

… weiteren Laufzeiteffekt anwenden (Verzögerung) …



  

… und dann den Ton hörbar machen



  

Unser Wiedergabeansatz in Technitone dreht sich um Planung. Wir legen kein unserem Tempo entsprechendes Timer-Intervall zur taktweisen Verarbeitung von Tönen fest, sondern ein kleineres Intervall, bei dem Töne in einer Wartschlange verwaltet und geplant werden. Auf diese Weise kann das API die Vorarbeit erledigen, also die Audiodaten auflösen sowie Filter und Effekte verarbeiten, bevor sie von der CPU hörbar gemacht werden. Wenn der Takt schließlich ausgegeben wird, ist er bereits mit allen Informationen versehen, die zur Darstellung des Endergebnisses nötig sind.

Insgesamt musste alles optimiert werden. Als unsere CPUs einer zu hohen Belastung ausgesetzt waren, wurden Prozesse abgebrochen (Knack-, Klick- und Kratzgeräusche), um den Zeitplan einzuhalten. Wir haben größten Wert darauf gelegt, die Wiedergabe anzuhalten, wenn Sie in Chrome zu einem anderen Tab wechseln.

Lightshow.

Vorn in der Mitte befinden sich unser Raster und der Partikeltunnel. Dies ist die WebGL-Ebene von Technitone.

WebGL bietet eine beträchtlich höhere Leistung als die meisten anderen Ansätze für das Rendering von visuellen Elementen im Web, da die GPU angewiesen wird, in Verbindung mit dem Prozessor zu arbeiten. Dieser Leistungszuwachs geht mit einem erheblich höheren Entwicklungsaufwand, zugleich aber auch mit einer deutlich steileren Lernkurve einher. Nichtsdestoweniger: Wenn Sie von interaktiven Erfahrungen im Web wirklich begeistert sind und möglichst wenige Leistungseinschränkungen in Kauf nehmen möchten, bietet WebGL eine mit Flash vergleichbare Lösung.

Demo zu WebGL

Ihr Browser unterstützt leider HTML5 Canvas nicht. Stellen Sie sicher, dass Ihr Browser auf die neueste Version aktualisiert wurde und mit HTML5 Canvas kompatibel ist. Empfohlen wird Google Chrome.


Die Demo enthält eine Einführung in Schattierung, Texturen, Animation, Partikeleffekte und Interaktivität. Jede Demo baut linear auf dem vorherigen Konzept auf.

Demo zu WebGL herunterladenTexturbasierte Demos funktionieren nur auf einem Server

Hinweis: WebGL entspricht einem Sicherheitsprotokoll, das verhindert, dass es Texturen direkt von einer lokalen Festplatte lädt und bearbeitet.

WebGL-Inhalte werden auf einem Canvas-Element, dem HTML5 Canvas, gerendert und setzen sich aus folgenden Kernkomponenten zusammen:

  • Objektscheitelpunkte (Geometrie)
  • Positionsmatrizen (3D-Koordinaten)
  • Shader (Beschreibung der Geometriedarstellung, die direkt mit der GPU verknüpft ist)
  • Kontext ("Verknüpfungen" zu den Elementen, auf die die GPU verweist)
  • Puffer (Pipelines für die Weitergabe von Kontextdaten an die GPU)
  • Hauptcode (für die gewünschte interaktive Erfahrung spezifische Geschäftslogik)
  • "draw"-Methode (aktiviert die Shader und zeichnet Pixel auf das Canvas-Element)

Der grundlegende Prozess zum Rendern von WebGL-Inhalten auf dem Bildschirm läuft folgendermaßen ab:

  1. Stellen Sie die Perspektivenmatrix ein – hierdurch werden Einstellungen für die in den 3D-Raum gerichtete Kamera angepasst, sodass die Bildebene definiert wird.
  2. Stellen Sie die Positionsmatrix ein – legen Sie in den 3D-Koordinaten einen Ursprung fest, im Verhältnis zu dem Positionen gemessen werden.
  3. Füllen Sie die Puffer mit Daten wie Position des Scheitelpunkts, Farbe oder Texturen, um die Inhalte durch die Shader weiterzugeben.
  4. Extrahieren und organisieren Sie mit den Shadern Daten aus den Puffern und geben Sie diese in die GPU weiter.
  5. Rufen Sie die "draw"-Methode auf, damit der Kontext angewiesen wird, Shader zu aktivieren, mit den Daten ausgeführt zu werden und das Canvas-Element zu aktualisieren.

Dies sieht in Aktion wie folgt aus:

Perspektivenmatrix einstellen …



  

… Positionsmatrix einstellen …



  

… Geometrie und Darstellung definieren …



  

… Puffer mit Daten füllen und diese an den Kontext weitergeben …



  

… und die "draw"-Methode aufrufen



  

Denken Sie bei jedem Frame daran, das Canvas-Element zu leeren, damit alphabasierte visuelle Elemente nicht übereinander gestapelt werden.

Der Ort des Geschehens.

Abgesehen vom Raster und dem Partikeltunnel wurden alle anderen Elemente der Benutzeroberfläche in HTML/CSS und interaktive Logik in JavaScript erstellt.

Wir hatten uns von Anfang an das Ziel gesetzt, dass die Nutzer so schnell wie möglich mit dem Raster interagieren können sollten. Kein Startbildschirm, keine Anleitung, keine Trainings, sondern direkt loslegen. Beim Laden der Oberfläche sollten sie durch nichts aufgehalten werden.

Daher mussten wir uns sehr genau überlegen, wie wir Erstnutzer durch die Interaktionen führen. Wir integrierten unauffällige Hinweise, beispielsweise die Änderung der CSS-Cursor-Eigenschaft basierend auf der Mausposition des Nutzers im WebGL-Raum. Wenn sich der Cursor über dem Raster befindet, wird er als Handsymbol angezeigt, weil die Nutzer durch das Einzeichnen von Klängen interagieren können. Wird der Cursor im leeren Bereich um das Raster herum positioniert, so verwandelt er sich in einen kreuzförmigen Richtungs-Cursor und zeigt so an, dass die Nutzer das Raster drehen oder in Ebenen auflösen können.

Startklar für die Show?

LESS, ein CSS-Vorprozessor, und CodeKit für die Webentwicklung auf Steroiden sorgen für eine erhebliche Verkürzung der Zeit, die für die Übersetzung von Designdateien in HTML/CSS benötigt wird. Mit beiden können wir CSS wesentlich vielseitiger organisieren, schreiben und optimieren. Dabei können Variablen, Mixins (Funktionen) und sogar mathematische Elemente genutzt werden.

Bühneneffekte

Durch CSS3-Übergänge und Backbone.js erstellten wir wirklich einfache Effekte, durch die die Anwendung lebendiger wirkt und die Nutzer visuelle Abläufe sehen, die das gerade verwendete Instrument darstellen.

Die Farben von Technitone

Durch Backbone.js können wir Farbänderungsereignisse erfassen und die neue Farbe auf die entsprechenden DOM-Elemente (Document Object Model) anwenden. Die Farbstiländerungen wurden durch GPU-beschleunigte CSS3-Übergänge mit geringer oder keinerlei Auswirkung auf die Leistung behandelt.

Die meisten Farbübergänge für Oberflächenelemente wurden durch Übergänge bei den Hintergrundfarben bewirkt. Über diesen Hintergrundfarbe platzieren wir Hintergrundbilder mit transparenten Bereichen, die so angeordnet sind, dass die Hintergrundfarbe durchscheint.

Demo zu Farbübergängen – Wie viele Farben können Sie darstellen?

In dieser Demo sehen Sie ein großartiges Beispiel für die Möglichkeiten, die diese Technik bietet. Wählen Sie Farben aus und verfolgen Sie, wie der verrückte Wissenschaftler sie mischt, um eine dritte, neue Farbe herzustellen.

Demo zur Farbverschiebung unten

Demo zur Farbverschiebung herunterladen

Schauen wir uns nun die Details in HTML, CSS, JavaScript und die Vorgehensweise zur Vorbereitung von Grafiken auf den Effekt genauer an.

HTML: Die Basis

Für die Demo benötigten wir drei Farbbereiche: zwei vom Nutzer ausgewählte Farbbereiche und einen dritten Bereich für die gemischte Farbe. Wir erstellten für unsere Illustration die einfachste vorstellbare DOM-Struktur zum Support von CSS3-Übergängen mit der geringsten Anzahl von HTTP-Anforderungen.

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

CSS: Einfache Struktur mit Stil

Wir platzierten die einzelnen Bereiche durch absolute Positionierung am jeweils richtigen Ort und passten die "background-position"-Eigenschaft an, um die Hintergrundillustration in jedem Bereich auszurichten. Hierdurch sehen alle Bereiche – jeder mit demselben Hintergrundbild – wie ein einziges Element aus.



  

Es wurden GPU-beschleunigte Übergänge angewendet, die auf Farbänderungsereignisse horchen. Wir verlängerten die Dauer und änderten das Easing für ".color-mixed", um den Eindruck zu erwecken, dass das Mischen der Farben etwas Zeit in Anspruch nimmt.



  

Besuchen Sie HTML5please, um sich über den Support aktueller Browser und Nutzungsempfehlungen für CSS3-Übergänge zu informieren.

JavaScript: So funktioniert's

Die dynamische Zuweisung von Farben ist einfach. Wir suchen das DOM für jedes Element mit unserer Farbklasse und legen die Hintergrundfarbe, "background-color", basierend auf der Farbauswahl des Nutzers fest. Dann wenden wir unseren Übergangseffekt auf jedes Element im DOM an und fügen dazu eine Klasse hinzu.

Hierdurch wird eine Architektur erstellt, die ressourcensparend, flexibel und skalierbar ist.



  

Sobald die erste und die zweite Farbe ausgewählt sind, berechnen wir den gemischten Farbwert und weisen den resultierenden Wert auf das entsprechende DOM-Element an.



  

Illustration für die HTML/CSS-Architektur: Eine persönliche Note für drei Farbverschiebungsfelder

Unser Ziel war es, einen witzigen und realistischen Lichteffekt zu schaffen, der auch noch echt wirkte, wenn angrenzende Farbbereiche mit kontrastierenden Farben versehen wurden.

Durch eine 24-Bit-PNG-Datei kann die Hintergrundfarbe unserer HTML-Elemente durch die transparenten Bereiche des Bilds durchscheinen.

Bildtransparenzen

Bei den farbigen Feldern entstehen an den Stellen, an denen verschiedene Farben aufeinander treffen, harte Kanten. Dies wirkt sich störend auf realistische Lichteffekte aus und stellte beim Design der Illustration eine der größeren Herausforderungen dar.

Farbbereiche

Die Lösung bestand darin, die Illustration so zu gestalten, dass die Kanten der Farbbereiche niemals durch die transparenten Bereiche durchscheinen können.

Kanten der Farbbereiche

Die Planung des Aufbaus war ein ganz wesentlicher Punkt. In einer schnell anberaumten Planungssitzung mit dem Designer, dem Entwickler und dem Illustrator erhielt das Team den nötigen Überblick darüber, wie alles aufgebaut sein muss, damit nach der Zusammenstellung alles funktioniert.

Anhand der Photoshop-Datei sehen Sie beispielsweise, dass die Benennung von Ebenen Informationen über den CSS-Aufbau liefern kann.

Kanten der Farbbereiche

Demo zur Farbverschiebung herunterladen

Zugabe.

Für Nutzer ohne Chrome setzten wir uns das Ziel, die wesentlichen Elemente der Anwendung in einem einzelnen, statischen Bild zusammenzufassen. Dazu wurde der Rasterknoten in den Mittelpunkt gerückt. Die Kacheln im Hintergrund deuten den Zweck der Anwendung an und die in der Reflexion vorhandene Perspektive spielt auf die immersive 3D-Umgebung des Rasters an.

Kanten der Farbbereiche

Wenn Sie mehr über Technitone erfahren möchten, können Sie in unserem Blog auf dem Laufenden bleiben.

Alle Demos in einer Datei herunterladen

Die Band.

Vielen Dank für Ihre Aufmerksamkeit! Vielleicht treffen wir uns bald bei einer gemeinsamen Jam-Session!

Comments

0