HTML5 und die Web-Audio-API: Audiodateien abspielen, manipulieren und Klänge erzeugen

Kein Beitragsbild

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010...

Mit HTML5 und dem „<audio>“-Element ist es möglich, Audiodateien ganz ohne Plug-in im Browser abzuspielen. Mit der neuen Web-Audio-API kann man nun Audiodateien direkt per JavaScript laden oder eigene Klänge erzeugen. Außerdem kann die API die Wiedergabe von Audiodateien manipulieren, indem zum Beispiel Frequenzbereiche verändert werden. Wir werfen einen genaueren Blick auf die musikalische Schnittstelle.

audiocontext

Anwendungsfall 1: Wiedergabe einer Audiodatei

Zunächst einmal muss festgelegt werden, welche Quelle für die Audiowiedergabe genutzt werden soll. Wir könnten eine Audiodatei direkt per JavaScript laden oder eine per „<audio>“-Element bereits definierte Quelle nutzen. In jedem Fall muss ein „AudioContext“ bereitgestellt werden. Anschließend wird die Quelle definiert.

var musik = new AudioContext();
var quelle = musik.createBufferSource();

Im Beispiel soll eine Audiodatei direkt per JavaScript geladen werden. Dazu weisen wir dem „AudioContext“-Objekt („musik“) die Methode „createBufferSource()“ zu. Im nächsten Schritt wird die Audiodatei mittels „XMLHttpRequest()“ geladen.

var xhr = new XMLHttpRequest();

xhr.open("GET", "musik.mp3", true);
xhr.responseType = "arraybuffer";

xhr.addEventListener("load", function() {
  quelle.buffer = musik.createBuffer(xhr.response, false);
  quelle.connect(musik.destination);
  quelle.start(0);
}, false);

xhr.send();

Der Aufruf per „XMLHttpRequest()“ ist notwendig, um Zugriff auf die Audiodatei zu erlangen. Wichtig ist, dass der „responseType“ den Wert „arraybuffer“ besitzt. Nur so kann die Antwort des Requests – also der Inhalt der Audiodatei – korrekt behandelt werden. Im Beispiel wird damit die Datei „musik.mp3“ geladen. Innerhalb des Event-Listeners wird der Inhalt der Audiodatei über die Methode „createBuffer()“ der Audioquelle („quelle“) als Buffer zugewiesen.

Die Quelle verbinden wir nun noch per „connect()“ mit dem „AudioContext“-Objekt. Im letzten Schritt wird mit der Wiedergabe per „start()“ begonnen. Die Zahl innerhalb der „start()“-Methode gibt die Zeit in Sekunden an, nach der die Wiedergabe beginnen soll. Bei einem Wert größer Null wird die Wiedergabe erst nach Ablauf der angegebenen Sekunden gestartet; ansonsten beginnt sie sofort.

Anwendungsfall 2: Eigene Klänge erzeugen

Statt eine Audiodatei wiederzugeben, ist es mit der Web-Audio-API auch möglich, einen eigenen Klang zu erzeugen. Hierzu wird die Methode „createOscillator()“ genutzt.

var musik = new AudioContext();
var quelle = musik.createOscillator();

quelle.frequency.value = 440;
quelle.type = "sine";
quelle.connect(musik.destination);
quelle.start(0);

Auch in diesem Beispiel erstellen wir zunächst ein „AudioContext“-Objekt und definieren eine Quelle. Die Quelle ist in diesem Fall jedoch keine Bufferquelle, sondern ein Oszillator. Über die Eigenschaft „frequency“ geben wir eine Frequenz in Hertz an, wobei „type“ die Art der Frequenzschwingung bezeichnet. Neben einer Sinusschwingung („sine“) sind Rechteckschwingung („square“), Dreieckschwingung („triangle“) und Kipp- beziehungsweise Sägezahnschwingung („sawtooth“) möglich.

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

E-Book Bundle von Andreas Hecht

Per „connect()“ wird die Quelle wieder dem „AudioContext“-Objekt zugewiesen. Da in diesem Beispiel keine Datei geladen werden muss, ist der Einsatz von „XMLHttpRequest()“ nicht nötig. Per „createOscillator()“ generierte Klänge spielen solange, bis sie per „stop()“ angehalten werden. Während des Abspielens ist es jedoch möglich, die Frequenz zu verändern.

Statt eine feste Frequenz anzugeben, können Sie also per „setTimeout()“ die Frequenz während der Wiedergabe verändern.

var quelle_frequenz = 100;
var quelle_frequenz_richtung = 1;

window.setTimeout("frequenzen()", 10);

function frequenzen() {
  if (quelle_frequenz_richtung == 1) {
    quelle_frequenz += 1;
    if (quelle_frequenz > 200) quelle_frequenz_richtung = -1;
  } else {
    quelle_frequenz -= 1;
    if (quelle_frequenz < 100) quelle_frequenz_richtung = 1;
   }
   quelle.frequency.value = quelle_frequenz;
   window.setTimeout("frequenzen()", 10);
}

Im Beispiel wird eine Frequenz bei 100 Hertz beginnend jede Hundertstelsekunde um ein Hertz noch oben verändert, bis sie 200 Hertz erreicht hat. Anschließend wird die Frequenz auf gleichem Wege reduziert. Diese Frequenzveränderung wird im Beispiel als Dauerschleife abgespielt.

Natürlich können auch mehrere Quellen gleichzeitig spielen. Für jedes „AudioContext“-Objekt lassen sich beliebig viele Quellen definieren und wiedergeben. Wichtig ist, dass jede einzelne Quelle per „start()“ startet.

quelle1.musik.createOscillator();
quelle2.musik.createOscillator();

quelle1.frequency.value = 250;
quelle2.frequency.value = 500;

quelle1.connect(musik.destination);
quelle2.connect(musik.destination);

quelle1.start(0);
quelle2.start(1);

Im Beispiel werden zwei Quellen, die unterschiedlich definiert sein können – zum Beispiel per „createOscillator()“ und „createBufferSource()“ –, dem  „AudioContext“-Objekt zugewiesen. Anschließend startet die Wiedergabe, wobei die zweite Quelle eine Sekunde später beginnt.

Wiedergabe manipulieren

Statt eine Audiodatei oder einen Klang nur wiederzugeben, bietet die Web-Audio-API mehrere Methoden, um die Wiedergabe zu manipulieren. So können biquadratische Filter („createBiquadFilter()“) auf die Wiedergabe angewendet werden. Diese Filter erlauben die Dämpfung bestimmter Frequenzbereiche.

Tiefpassfilter („lowpass“) dämpfen Frequenzen oberhalb einer gesetzten Grenze, Hochpassfilter („highpass“) dämpfen Frequenzen unterhalb einer Grenze. Bei Bandbreitenfilter („bandpass“) werden Frequenzen außerhalb einer Frequenzbandbreite abgeschwächt. Darüber hinaus gibt es Filter zur Anhebung und Absenkung von Tiefen beziehungsweise Höhen („lowshelf“ und „highshelf“) für bestimmte Frequenzen und einen Filter, der Tiefen und Höhen innerhalb eines Frequenzbereich anhebt und absenkt („peaking“).

Die Methode „createBiquadFilter()“ ähnelt sehr der „createOscillator()“-Methode. Neben der Eigenschaft „frequency“ gibt es für einige Filter noch die zusätzliche optionale Eigenschaft „Q“, welche die Qualität des Filters angibt. Beim Tiefpassfilter wird über die Eigenschaft definiert, wie stark die umliegenden Frequenzen berücksichtigt werden sollen. Erlaubt sind Werte zwischen 0,1 und 1000, wobei 1 der Standardwert ist.

var musik = new AudioContext();
var quelle = musik.createOscillator();
var filter = musik.createBiquadFilter();
quelle.frequency.value = 500;
quelle.type = "sine";

filter.frequency.value = 250;
filter.Q.value = 2;
filter.type = "lowpass";

quelle.connect(filter)
filter.connect(musik.destination);
quelle.start();

Im Beispiel wird ein Tiefpassfilter auf Frequenzen oberhalb von 250 Hertz angewendet. Damit der Filter auch zum Einsatz kommt, muss er per „connect()“ dem „AudioContect“-Objekt zugewiesen werden. Natürlich können auch mehrere Filter angewendet werden. Die „connect()“-Methode sieht vor, dass alle Audioknoten, die erzeugt werden, quasi in Reihe miteinander verbunden werden.

quelle.connect(filter1);
filter1.connect(filter2);
filter2.connect(filter3)
filter3.connect(musik.destination);

Im Beispiel wird die Quelle zunächst mit „filter1“ verbunden. Dieser wird mit „filter2“ und dieser wiederum mit „filter3“ verbunden. Der dritte Filter wird schließlich mit dem „AudioContect“-Objekt verbunden.

Es gibt eine Reihe weiterer Möglichkeiten, um die Wiedergabe zu manipulieren. Mit „createConvolver()“ fügt man der Wiedergabe einen Nachhall hinzu. Mit „createChannelSplitter()“ und „createChannelMerge()“ werden Audiokanäle separiert beziehungsweise zusammengefügt. Außerdem lässt sich mit „createDynamicsCompressor()“ ein Kompressor einrichten, welcher die Lautstärkespitzen abschwächt.

Wiedergabe eines „<audio>“-Elementes

Statt eine Audiodatei direkt per JavaScript zu laden, erlaubt die Web-Audio-API auch, auf ein „<audio>“-Element zuzugreifen.

var musik = new AudioContext();
var quelle = musik.createMediaElementSource(document.getElementsByTagName("audio")[0]);

Statt „createBufferSource()“ wird in diesem Fall die Methode „createMediaElementSource()“ verwendet. Der Methode wird das jeweilige „<audio>“-Element per „getElementsByTagName()“ oder anderen ähnlichen Methoden zugewiesen.

Anschließend kann die Quelle mit den vorgestellten Möglichkeiten manipuliert werden. Eine Wiedergabe per „quelle.start()“ ist hierbei jedoch nicht möglich. Die Wiedergabe wird entweder über die Steuerleiste des „<audio>“-Elementes gestartet oder über die JavaScript-Methode „play()“ für die Steuerung des „<audio>“-Elementes.

document.getElementsByTagName("audio")[0].play();

Browserunterstützung

Die Web-Audio-API wird bereits seit Chrome in der Version 11 unterstützt. Der in älteren Versionen verwendete Vendor-Präfix ist mittlerweile nicht mehr nötig. Außerdem unterstützen Firefox ab Version 25 und Opera ab Version 15 die API. Der Internet Explorer unterstützt die API derzeit noch nicht.

Links zum Beitrag

(dpe)

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.

Sortiert nach:   neueste | älteste | beste Bewertung
Stefan
Gast

Richtig cool!
Auf der Demo Seite bin ich jetzt echt eine Stunde hängen geblieben :-D
ja gibts echt richtig gute Spielereien.

Schöne Grüße
Stefan

wpDiscuz