Open Source im professionellen Einsatz
Linux-Magazin 09/2014
884

Beispielanwendung

Der Programmcode der folgenden Beispielanwendung fällt dank ECMA-Script 6 einfacher aus als früher, lässt sich leichter lesen und hilft somit Programmierfehler zu vermeiden. Das gilt insbesondere für die Klasse in Listing 11. Die Definition ihrer Methoden erfolgt inline, also im Klassenkörper. Das spart Programmcode und macht es leichter, die Methoden der Klasse zuzuordnen.

Listing 11

Modul metronome/metronome.js

01 export class Metronome {
02  constructor()  {
03   this.context = new (window.AudioContext || window.webkitAudioContext)();
04   this.loadBuffer();
05  }
06
07  loadBuffer(url="pulse.ogg") {
08   var request = new XMLHttpRequest();
09   request.open("GET", url, true);
10   request.responseType = "arraybuffer";
11   request.onload = () => this.context.decodeAudioData(request.response, (buffer) => this.buffer = buffer);
12   request.send();
13  }
14
15  play(beats) {
16   this.stop();
17   this.src = this.context.createBufferSource();
18   this.src.buffer = this.extendBuffer(beats, this.buffer);
19   this.src.loop = true;
20   this.src.connect(this.context.destination);
21   this.src.start();
22  }
23
24  stop() {
25   ("src" in this)?this.src.stop():"";
26  }
27
28  extendBuffer(beats, buffer) {
29   var total = 60/beats * buffer.sampleRate;
30   var ext = this.context.createBuffer(buffer.numberOfChannels, total, buffer.sampleRate);
31   for(let i=0; i<buffer.numberOfChannels; i++)
32    ext.getChannelData(i).set(buffer.getChannelData(i));
33   return ext;
34  }
35 }

Die verwendete Syntax erleichtert zudem Java- oder C++-Programmierern den Einstieg in die ansonsten eher kryptische prototypale Vererbung in Javascript. Auch der Einsatz von Arrow-Funktionen in der Definition der beiden Rückruffunktionen in Zeile 11 vereinfacht den Code: Arrow-Funktionen schreiben sich in einer einzigen Zeile und binden die Sondervariable »this« lexikalisch an das aktuelle Objekt. Damit entfällt ein weiteres Zuordnungsproblem.

Abbildung 3 zeigt die Beispielanwendung in Firefox unter Ubuntu 12.04. Das Metronom spielt einen Taktschlag in einer Schleife. Das gewünschte Metrum trägt der Anwender im Zahlenfeld links ein. Die beiden Buttons rechts davon starten und stoppen das Metronom.

Abbildung 3: Das selbst programmierte Metronom in der Browseransicht von Firefox.

Die hörbaren Taktschläge erzeugt das Web-Audio-API [9]. Diese Schnittstelle generiert und verarbeitet Audiodaten mittels Javascript im Browser und leitet sie an das Soundsystem des Rechners weiter. Es existiert derzeit zwar nur als W3C-Entwurf, aber die aktuelleren Versionen der Browser Firefox und Chrome verfügen bereits über brauchbare Implementierungen.

HTML-Gerüst

Das HTML-Dokument der Beispielanwendung zeigt Listing 9. In seinem Kopf (Zeilen 3 bis 10) bindet Zeile 4 Formatierungsanweisungen per CSS-Datei ein. Die Zeilen 5 und 6 laden den Traceur-Compiler, Zeile 7 das Open-Source-Javascript-Framework Jquery [10]. Zeile 9 integriert schließlich den Javascript-Code der Beispielanwendung. Zeile 8 schaltet alle verfügbaren Features von Traceur frei. Der Div-Container nimmt in den Zeilen 12 bis 19 neben dem Titel im H1-Element die Liste mit den Steuerelementen (Zeilen 14 bis 18) auf. Das Eingabefeld in Zeile 15 ist vom Typ »number« , die Knöpfe vom Typ »button« .

Listing 9

HTML-Dokument metronome/index.html

01 <!DOCTYPE html>
02 <html>
03 <head>
04  <link href="app.css" rel="stylesheet"></link>
05  <script src="https://traceur-compiler.googlecode.com/git/bin/traceur.js"></script>
06  <script src="https://traceur-compiler.googlecode.com/git/src/bootstrap.js"></script>
07  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
08  <script>traceur.options.experimental = true;</script>
09  <script src="app.js" type="module"></script>
10 </head>
11 <body>
12  <div id="container">
13   <h1>Metronom</h1>
14    <ul>
15     <li><input id="beats" type="number" value="96"/></li>
16     <li><input id="start" type="button" value="Start"/></li>
17     <li><input id="stop"  type="button" value="Stop"/></li>
18    </ul>
19  </div>
20 </body>
21 </html>

Listing 10 enthält den ECMA-Script-6-Code. Die erste Zeile importiert die Klasse »Metronome« , Zeile 2 definiert die Variable »met« zum Speichern einer »Metronome« -Instanz. In der folgenden Zeile erzeugt und speichert ein Jquery-Ausdruck eine Instanz von »Metronome« .

Listing 10

Anwendung metronome/app.js

01 import {Metronome} from 'metronome';
02 var met;
03 $(document).ready(() => met = new Metronome())
04 $('#start').click(() => met.play($('#beats').val()));
05 $('#stop').click(() => met.stop());

Die Ereignisbehandlung in Zeile 4 reagiert auf einen Klick auf den Start-Knopf, indem sie die Methode »play()« aufruft und das Metronom damit startet. Der Jquery-Ausdruck »$('#beats').val()« in der Parameterliste des Methodenaufrufs liest zuvor das Metrum aus dem Textfeld mit der ID »beats« (Zeile 15). Ein Klick auf den Stop-Button ruft die Methode »stop()« auf.

Listing 11 zeigt die Klasse »Metronome« . Die Konstruktor-Funktion (Zeilen 2 bis 5) initialisiert in Zeile 3 das Attribut »context« mit dem Audiokontext des Web-Audio-API. Über dieses Attribut ruft ECMA-Script im Folgenden alle Methoden des API auf.

Das Hersteller-Präfix »webkit« berücksichtigt den Browser Chrome. Zeile 4 ruft die Methode »loadBuffer()« (Zeilen 7 bis 13) auf. Sie lädt die Audiodatei mit dem Taktgeräusch vom Server und überführt sie zwecks Weiterverarbeitung in einen Audio-Buffer. Dazu erzeugt und speichert Zeile 8 zunächst ein »XMLHttpRequest« -Objekt in der Variablen »request« . Zeile 9 lädt die Audiodatei mit Hilfe der »open()« -Methode vom Server.

Diesen Artikel als PDF kaufen

Express-Kauf als PDF

Umfang: 7 Heftseiten

Preis € 0,99
(inkl. 19% MwSt.)

Linux-Magazin kaufen

Einzelne Ausgabe
 
Abonnements
 
TABLET & SMARTPHONE APPS
Bald erhältlich
Get it on Google Play

Deutschland

Ähnliche Artikel

  • ECMA Script 6 angenommen

    ECMA International hat die vorgeschlagene Version ECMA Script 6 jetzt offiziell angenommen.

  • Javascript-Alternativen

    Javascript ist der Stoff, aus dem der Client-Teil vieler interaktiver Webanwendungen gemacht ist, schleppt aber Altlasten mit. Gegen die schreiben die Macher der vier vorgestellten Skriptsprachen an.

  • Angular 2

    Mit Typescript statt Javascript, JiT- und AoT-Kompilation und einem konsequenten Einsatz von Components brühen die Macher das Javascript-Framework Angular in Version 2 neu auf. Das Linux-Magazin probiert einen kräftigen Schluck von dem Gebräu.

  • Mit Vektoren zeichnen

    Bilder im Format Scalable Vector Graphics (SVG) brauchen weniger Speicherplatz und lassen sich ohne Qualitätsverlust skalieren. Selbst Animationen und Programmcode mit Javascript sind möglich, was den Standard fürs Web und den Desktop interessant macht.

  • Neue Webseite für Javascript-Test Sputnik

    Google hat eine Webseite online gebracht, mit der Anwender die Javascript-Testsammlung Sputnik im Browser ausführen können.

comments powered by Disqus

Ausgabe 10/2017

Digitale Ausgabe: Preis € 6,40
(inkl. 19% MwSt.)

Artikelserien und interessante Workshops aus dem Magazin können Sie hier als Bundle erwerben.