Kategorien
JavaScript & jQuery Programmierung

Blip. und die Web Audio API: Einfach mit Audiodateien arbeiten

Mit Einführung der Web-Audio-API ist das Erstellen und Manipulieren von Sounds per JavaScript möglich geworden. Die Audio-Library Blip. stellt Methoden zur Verfügung, mit denen schnell und relativ unkompliziert Klänge eingebunden, verändert und abgespielt werden können. So können Sie etwa die Abspielgeschwindigkeit beeinflussen, Sounds übereinander legen oder sie in einer Schleife abspielen. Das funktioniert verhältnismäßig einfach. Im folgenden Beitrag stelle ich ein paar funktionierende Beispiele für den Soforteinsatz vor…

blip-webaudioapi-teaser_DE

Clips anlegen und abspielen

Ist die JavaScript-Datei blip.js im HTML-Head eingebunden, können wir damit begonnen, sogenannte Clips zu erstellen. Das sind Audiodateien, die beispielsweise im Wave- oder MP3-Format vorliegen müssen, und per sampleLoader()  geladen und eingebunden werden.

blip

Diese Samples lassen sich anschließend auf unterschiedliche Art manipulieren und abspielen.

blip.sampleLoader()
.samples({
  "melodie": "melodie.mp3",
  "gesang": "gesang.mp3"
})
.done(abspielen)
.load();

Im Beispiel werden zwei Audiodateien geladen und entsprechenden Variablen zugeordnet. Über die Methode done() rufen wir eine Funktion auf, die auf die Samples Zugriff hat – im Beispiel ist es die Funktion abspielen. Die Methode load() sorgt dafür, dass die angegebenen Samples geladen werden. Die über done() angegebene Funktion wird aufgerufen, wenn die Samples im Browser bereitstehen.

Innerhalb der Funktion abspielen hat man nun Zugriff auf die Samples. Mit den Methoden play() und stop() können wir nun das Abspielen der Samples steuern. Der play()-Methode kann dabei eine Zeit übergeben werden, die für einen zeitlichen Versatz vor dem Abspielen sorgt.

blip.clip().sample("melodie").play();
blip.clip().sample("gesang").play(8);

Im Beispiel ordnen wir beide Samples über die clip()-Methode einem Clip zu. Während melodie ohne Versatz abgespielt wird, wird gesang erst nach acht Sekunden abgespielt. Gerade wenn man mehrere Klänge übereinander legen will, ist es manchmal hilfreich, diese zu verschiedenen Zeiten abspielen zu können.

Lautstärke und Geschwindigkeit verändern

Der play()-Methode lässt sich neben der Versatzzeit ein Objektliteral übergeben, über das die Lautstärke und die Abspielgeschwindigkeit eines Samples beeinflusst werden kann. Mit dem Parameter gain wird die Lautstärke, über rate die Geschwindigkeit angegeben.

blip.clip().sample("gesang").play(8, {
  gain: 2,
  rate: 0.75
});

Im Beispiel wird der Sample doppelt so laut und mit Dreiviertel der normalen Geschwindigkeit abgespielt. Der Wert 1 stellt für beide Parameter jeweils den Normalwert dar.

Loops erstellen und abspielen

Mit Blip. können wir sehr einfach sogenannte Loops erstellen. Dabei handelt es sich um Samples, die in einem bestimmten Rhythmus in einer Endlosschleife wiederholt werden. Loops bieten sich an, wenn ein einzelner Klang (etwa ein Trommelschlag) stets wiederholt werden soll. Der loop()-Methode muss die Geschwindigkeit übergeben werden, mit welcher der Sample wiederholt werden soll. Dies geschieht über tempo(). Hier geben wir einen Wert an, der die Wiederholungen pro Minute definiert. Über die Methode tick() wird eine Funktion übergeben, welche in der über tempo() angegebenen Zeit immer wieder aufgerufen wird.

blip.loop()
  .tempo(50)
  .tick(function (t) {
    schlagzeug.play(t)
  }
);

Im Beispiel wiederholt sich der Sample schlagzeug 50 Mal in der Minute. Die Wiederholung erfolgt immer im gleichen Abstand. Mit der zusätzlichen Methode data() lassen sich unterschiedliche Wiederholschritte angeben, so dass verschiedene Takte definiert werden können.

blip.loop()
  .tempo(50)
  .data([1, 1, 0])
  .tick(function (t) {
    schlagzeug.play(t)
  }
);

Im Beispiel übergeben wir data() drei Werte als Array. Sie sorgen dafür, dass die über tick() übergebene Funktion bei jedem dritten Aufruf ausgelassen wird. Die Anzahl der Werte für data() ist frei definierbar. Auch komplexe Abfolgen sind auf diese Weise möglich.

Den Zufall einbeziehen

Blip. bietet mit der Methode chance() die Möglichkeit, das Abspielen von einer vorgegebenen Wahrscheinlichkeit abhängig zu machen. Dazu wird der Methode ein Wahrscheinlichkeitswert übergeben, der einen zufälligen Rhythmus in Kombination mit der loop()-Methode ergibt.

blip.loop()
  .tempo(50)
  .tick(function (t) {
    if (blip.chance(1/3)) {
      schlagzeug.play(t)
    }
  }
);

In diesem Beispiel spielt der Sample schlagzeug bei jedem Durchlauf bei einer Wahrscheinlichkeit von 1 zu 3 ab. Außerdem lassen sich mit der random()-Methode Zufallszahlen ausgeben.

blip.loop()
  .tempo(50)
  .tick(function (t) {
    schlagzeug.play(t, {
      "rate": blip.random(0.25, 2.5)
    })
  }
);

Im letzten Beispiel wird die Abspielgeschwindigkeit bei jedem Durchlauf zufällig festgesetzt. Sie wird dabei immer zwischen den Werten 0,25 und 2.5 liegen. Ohne Angabe von Werten liegt die Zufallszahl immer zwischen 0 und 1.

Fazit und Lizenz

Blip. bietet einige gute Funktionen, um Klänge zu manipulieren. Neben den vorgestellten Funktionen erlaubt Blip. auch den Zugriff auf die verschiedenen Audio-Nodes der Web-Audio-API, mit denen beispielsweise eigene Klänge erzeugt werden können.

Blip. steht jedermann kostenlos zur Verfügung und darf unter Nennung des Entwicklers eingesetzt und weiterentwickelt werden. Voraussetzung ist lediglich ein Browser, der die Web-Audio-API unterstützt. Das ist bei allen modernen Browsern, auch auf mobilen Clients der Fall. Eine Ausnahme bildet Opera Mini und – natürlich – der Internet Exploder. Mit Microsoft Edge soll dann auch aus Redmond Standardunterstützung folgen…

(dpe)

Von Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet.

Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.