Create and play melodies and songs in the browser

Schritt 1: Der Ton

Moderne Browser ermöglichen es mit Hilfe der WebAudio API Töne im Browser zu erzeugen, diese zu verändern und auf dem Gerät des Nutzers abzuspielen. Diese API nutzen wir auch für unsere Weihnachtslieder.

Ein einfacher durchgehender Ton lässt sich mit der OscillatorNode erzeugen. Wie ein physischer Oszillator erzeugt dieser eine einfache Wellenkurve in einer Frequenz unserer Wahl. Auch die Art der Kurve lässt sich angeben, sodass unterschiedliche Klangfarben entstehen.

Wenn mehrere Oszillatoren gleichzeitig Töne erzeugen, kann es vorkommen, dass sich diese gegenseitig nivellieren und so die Lautstärke der Melodien schwankt oder kurzzeitig gar kein Ton zu hören ist. Um diesen Effekt zu verringern, werden die Töne mit Hilfe einer WaveShaperNode verzerrt.

Schon haben wir unseren fertigen Ton, der sich mit dem Audiogerät des Nutzers verbinden lässt und so durchgehend spielt.

Schritt 2: Die Note

Damit es nicht zu eintönig wird, braucht unser Ton noch eine variable Höhe und Länge. Wir wollten die Musik mit Hilfe von Noten angeben, wie es in der Musiktheorie üblich ist. Das heißt die Höhe und Länge wird in Form eines Arrays notiert:

[[“a”, 4], 1 / 4]

Dieses Array beschreibt den Ton A4 (in der Helmholtz Schreibweise a') als eine Viertelnote. Wenn diese Note gespielt wird, wird daraus die Frequenz von 440 Hz und die Länge in Millisekunden berechnet sowie der Oscillator für die entsprechende Dauer auf diese Frequenz gesetzt.

Schritt 3: Die Melodie

Eine Melodie entsteht durch die Aneinanderreihung von Tönen. Um eine solche Melodie zu beschreiben werden einfach alle Noten, die hintereinander gespielt werden sollen, in je eine Zeile geschrieben. Das kann zum Beispiel so aussehen:

{
 “sound”: 1,
 “notes”: [
   [[“g”, 3], 1 / 4],
   [“r”, 1 / 4],
   [[“c”, 4], 1 / 8],
 ]
}

Zunächst definiert eine Melodie einen Sound. Uns stehen vier unterschiedlich klingende Sounds zur Verfügung, die mit den Zahlen eins bis vier ausgewählt werden können. Daraufhin werden die Noten der Melodie definiert. In unserem Beispiel besteht die Melodie aus zwei Tönen. Zunächst wird eine Viertelnote G3 gespielt, dann wird eine Viertelnote pausiert (r wie rest) und dann wird eine Achtelnote C4 gespielt - fertig ist unsere Melodie.

Schritt 4: Das Lied

Im Idealfall besteht ein Lied aus mehrere Melodien, die gleichzeitig abgespielt werden. So gibt es in unseren Liedern mehrere Spuren. Das Lied ist der Taktgeber, der dafür sorgt, dass alle Spuren ihre Töne auch zur richtigen Zeit spielen. Dafür erhält es einige Informationen:

{
 “tempo”: 140,
 “timing”: “straight”,
 “tracks”: [...]
}

Mit der Information zum Tempo weiß das Lied, wie schnell die einzelnen Noten hintereinander gespielt werden sollen und die Noten können ihre Länge in Millisekunden berechnen. Neben dem Standard (straight) kann auch ein swing Timing gewählt werden. Dadurch wird – wie bei geswingter Musik üblich – jede zweite Note etwas später und kürzer gespielt.
Die Melodien, die wir in Schritt 3 kennengelernt haben stehen jetzt in dem Feld “tracks”. Es können beliebig viele Melodien mit unterschiedlichen Sounds angegeben werden, die später alle gleichzeitig abgespielt werden.
Zusätzlich gibt es auch eine Schlagzeugspur, die auf andere Art und Weise definiert werden kann. Nähere Informationen dazu findet ihr am Ende dieses Artikels.

Schritt 5: Der Abspielplan

Nun sind alle Informationen vorhanden um das Lied auch abspielen zu können. Dabei gehen wir wie folgt vor: Zunächst erfährt unser Lied (Schritt 4), dass es abgespielt werden soll. Unser Lied fungiert als eine Art Taktgeber und gibt nun allen Melodien (Schritt 3) Bescheid, dass sie all ihre Noten der ersten Sekunden des Liedes zum Abspielen bereit machen sollen. Die Melodien kennen ihre Noten (Schritt 2) bestens und wissen, welche Noten in den ersten Sekunden gespielt werden müssen. Die Noten erstellen daraufhin einen Ton (Schritt 1) indem sie einen Oszillator erzeugen und diesem erklären zu welchem Zeitpunkt genau er starten soll den Ton zu spielen und wann er wieder damit aufhört.

Nach wenigen Millisekunden wird das Lied erneut aktiv. Noch haben wir nicht das ganze Lied eingeplant um den Speicher unseres Computers zu schonen. Das Lied gibt nun wieder den Melodien Bescheid, dass sie ihre Noten etwas weiter in die Zukunft einplanen sollen usw. So wird nach und nach das Lied vollständig eingeplant während es schon abgespielt wird.

Wie werde ich Browser-Musiker?

Die Ergebnisse dieser Arbeit sind in der NPM Bibliothek ZONG 3000 gemündet, mit der auf einfache Weise Lieder erzeugt und abgespielt werden können. Dort ist auch nochmal genau beschrieben, wie sie genutzt werden kann. Der Quellcode steht zur freien Verfügung und Änderungen wie Verbesserungen sind gerne gesehen.
In diesem Sinne Frohe Weihnachten und viel Spaß beim Experimentieren und Musizieren.