twitter facebook github google-plus xing linkedin instagram
Technologie

Melodien und Lieder im Browser erzeugen und abspielen

Melodien und Lieder im Browser erzeugen und abspielen

Für unseren Jahresrückblick hatten wir die Idee uns mit ein wenig Musik in weihnachtliche Stimmung zu versetzen. Um unsere Entwicklerherzen höher schlagen zu lassen, wird diese Musik nicht einfach als Audiodatei eingebunden, sondern direkt im Browser des Nutzers erzeugt. Dieser Artikel gibt einen kurzen Überblick darüber, wie das Ganze funktioniert.

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 verhindern, werden die Töne mit Hilfe einer WaveShaperNode verzerrt.

Schon haben wir unseren fertigen Ton, der sich mit dem Audio Gerä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') mit einer Länge von einem Viertel des Takts. 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: Das Lied

Im Idealfall besteht ein Lied aus mehrere Melodien, die gleichzeitig abgespielt werden. So gibt es in unseren Liedern mehrere Spuren, denen jeweils ein Oscillator zugeordnet ist, der die entsprechenden Töne erzeugen kann. 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’,
  resolution: 1 / 8,
}

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 Auflösung (resolution) gibt an, in wieviele kleinste Einheiten der Takt intern unterteilt wird. In diesem Fall sagt das Lied acht mal pro Takt den Spuren Bescheid, dass sie ihre nächste Note spielen sollen, falls sie an dieser Stelle eine Note zum abspielen haben. Das bedeutet auch, dass durch diese Auflösung eine Achtelnote die kleinstmögliche ist.

Unsere Lieder nutzen noch ein paar mehr Funktionen wie eine Schlagzeugspur. Der Schlagzeugklang wird dabei durch ein kurzes weißes Rauschen erzeugt. Damit haben wir jetzt alles zusammen um echte Musik zu machen.

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, musizieren und mit der Melodie von Let It Snow:

[['g', 3], 1 / 8],
[['g', 3], 1 / 8],
[['g', 4], 1 / 8],
[['g', 4], 1 / 8],
[['f', 4], 1 / 4],
[['e', 4], 1 / 4],
[['d', 4], 1 / 8],
[['c', 4], 1 / 4],
[['g', 3], 1 / 4],
['r', 1 / 4],
['r', 1 / 8],
[['c', 4], 1 / 8],
[['c', 4], 1 / 8],
[['d', 4], 1 / 4],
['r', 1 / 8],
[['d', 4], 1 / 8],
[['d', 4], 1 / 4],
[['c', 4], 1 / 8],
[['b', 3], 1 / 4],
[['g', 3], 1 / 4],
['r', 1 / 4],
['r', 1 / 8],
[['a', 3], 1 / 8],
[['a', 3], 1 / 8],
[['a', 4], 1 / 8],
[['a', 4], 1 / 8],
[['g', 4], 1 / 4],
[['f', 4], 1 / 4],
[['e', 4], 1 / 8],
[['d', 4], 1 / 4],
['r', 1 / 2],
[['b', 4], 1 / 8],
[['a', 4], 1 / 8],
[['g', 4], 1 / 4],
[['g', 4], 1 / 8],
[['f', 4], 1 / 8],
[['e', 4], 1 / 4],
[['e', 4], 1 / 8],
[['d', 4], 1 / 8],
[['c', 4], 1 / 4]
Sie suchen den richtigen Partner für erfolgreiche Projekte?
Lassen Sie uns ins Gespräch kommen.
Nehmen Sie Kontakt auf