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…
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.
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)
