Bild & TonDigezz

Online-Jukebox

Originaler Beitrag: digezz.ch

Reicht das Studentenbudget nicht für ein Spotify-Abo und beim Radio fehlt dir das Mitspracherecht, welcher Song gespielt wird? Kein Problem, höre dir jetzt fünf meiner Kompositionen in der Online-Jukebox an.

Ich habe mir von Native Instruments die Maschine MK1 gekauft. 10 Jahren nach dem Release ist die neuste Version des Geräts beinahe in jedem Hip-Hop Studio zu finden, obwohl sie sich nicht grundlegend von meiner Ausführung unterscheidet.

10 Jahre, so lange ist es in etwa auch her, als ich das letzte Mal mit einem Instrument ein Lied gespielt habe. Nun wollte ich wieder Musik machen. Heute fasziniert mich, dass mithilfe von Programmen jedes gängige Instrument auf dem Computer gespielt werden kann. Also komponierte und produzierte ich meine eigenen Songs für die Online-Jukebox.

Songliste:

  1. Earth Vibes
  2. Deep Fever
  3. Hopeful For Hope
  4. Hot Chillin’
  5. It’s a Trap

Hier geht’s zur Jukebox

Idee

Ich wollte schon seit einiger Zeit versuchen, Musik zu komponieren. Seit der Block- und Altflöte in der Schule habe ich aber kein Instrument gespielt. In diesem Semester habe ich jedoch das Minor «Make it Sound» besucht und war motiviert, dieses Projekt anzugehen.

Ich habe mich dann entschieden eine gebrauchte «Maschine MK1» von Native Instruments zu kaufen. Das Gerät ist nun seit über 10 Jahren veröffentlicht und darum sehr günstig zu erwerben. Es funktioniert in erster Linie wie eine Drum-Machine. Es hat also verschiedene Pads, auf denen Kick, Snare und Hihats zugewiesen werden können und mit einem Schlag darauf ausgelöst werden. Es kann jedoch jede beliebige .wav-Datei mit einer Taste ausgelöst werden, sodass auch Töne und Stimmen gesampelt werden können. Dafür stellt Native Instruments schon viele Sounds zur Verfügung. Im Keyboard-Mode kann ausserdem auch ein VST-Instrument gespielt werden, wie beispielsweise «Native Instruments Kontakt», das fast jedes Instrument beinhaltet.

Vorbereitung

Ich habe damit begonnen mein Wissen zu erweitern. Das Minor gab mir zwar schon viele Einblicke, aber ganze Songs zu komponieren hätte ich mir noch nicht zugetraut. Als Quelle diente mir in erster Linie Youtube. Beispielsweise musste ich noch etwas Musiktheorie nachholen, welche ich unter anderem auf dem Kanal «Paul Marx Media» gut erklärt fand. Infos zum Abmischen und Mastern habe ich mir aus den Videos von «abmischenlernen» angeeignet. Aber auch Seiten wie delamar.de haben mir stark geholfen. Über die Maschine fand ich nur spezifische oder veraltete Videos, deshalb musste ich einen Blick in das über tausendseitige Benutzerhandbuch wagen. Parallel zum Lesen habe ich meinen ersten Beat, der eher in die Richtung Hip-Hop ging erstellt. Dieser erreichte die Selektion für in die Jukebox schlussendlich klar nicht.

Ich habe mir vorgenommen, zuerst die Musik zu erstellen und erst dann die Webseite, je nachdem wie viel Aufwand ich noch in das Projekt stecken möchte.

Songs

Komponieren

Zuerst musste ich komponieren, um die Melodien und Takte der Songs zu erfinden. Die meisten Ideen scheiterten schon hier, oder spätestens, als ich sie einige Tage später nochmals angehört habe. Ich bin jeweils so vorgegangen, dass ich mich für ein Drum-Kit entschieden habe und dann einzelne Pads mit anderen Schlagzeug-Sounds neu belegt habe. Nach den Drums habe ich mich durch die Instrumente und Sounds geklickt und die Interessanten auf die Pads geladen. Dann konnte ich im Keyboard-Mode eine Melodie einspielen. Für den Bass habe ich entweder eine Bassgitarre oder einen Synthesizer verwendet. Ich habe bemerkt, dass es am zielführendsten ist, wenn man frei ausprobiert und Melodien einspielt. Anschliessend kann man immer noch sehr gut beurteilen, ob man an der Idee festhalten will. Mit der Maschine und der gleichnamigen Software kann man seine Kompositionen live einspielen und aufnehmen oder im MIDI-Editor programmieren. Aufnahmen konnten auch in diesem Editor nachträglich korrigiert werden. Ich habe versucht, andere Melodien oder noch ein weiteres Instrument hinzuzufügen. Dies war dann für den Refrain oder für sonstige Teile des Songs nützlich.

Später habe ich die Kompositionen nochmals angehört und ein wenig daran herumgebastelt. Die Meisten habe ich anschliessend verworfen, da mich die Melodie nicht überzeugt hat. Diese Phase war wirklich nicht einfach. Es erforderte viel Übung und manchmal auch Glück, auf die richtige Melodie zu stossen.

War ich mit einem Baustein zufrieden, habe ich versucht, die restlichen Teile des Songs zu erstellen und einen Aufbau mit Strophe und Refrain zu arrangieren. Die Grundgerüste standen, aber tönten noch nicht wirklich gut.

Ich habe ganz verschiedene Musikrichtungen ausprobiert, um auch selbst mehr Abwechslung zu haben. Die meisten wurden jedoch moderne Hip-Hop Beats. Einige würde ich eher in Richtung Pop oder Trap einordnen.

Mixing

Zuerst musste ich die Lautstärke der einzelnen Töne regulieren. Anschliessend ging es darum, durch das Komprimieren und Platzieren im Stereopanorama alle Spuren im Mix zu positionieren. Um den Song klarer zu machen, musste ich mit einem Equalizer dafür sorgen, dass pro Frequenz nur eine Audiospur dominiert. Damit alles noch spannender und natürlicher klingt, habe ich bei einigen Tönen einen Hall (Reverb), ein Echo (Delay) oder weitere Effekte eingefügt. Diese Phase brauchte ebenfalls sehr viel Geduld und Kreativität. Zuerst probierte ich aus, was es für Möglichkeiten und Plugins gab und wie man sie einsetzt. Dann musste ich lernen zu hören, was man verändern muss, um das gewünschte Resultat zu erlangen. Einen Effekt anzuwenden reicht nicht, denn jeder hat nochmals unzählige Knöpfe und Regler, da sie meistens Hardware-Geräten nachempfunden werden. Zu diesem Zeitpunkt klangen die Songs schon relativ gut, aber der letzte und entscheidende Schliff fehlte noch.

Mastering

Im letzten Schritt für das Erstellen der Songs habe ich mit einem Equalizer den Master-Track so bearbeitet, dass ein ausgewogenes Klangbild entstand. Praktisch dabei war auch ein dynamischer EQ, der je nach Pegel die Frequenz verändert. Mit der Software Ozone von iZotope konnte ich dann das eigentliche Mastering durchführen. Beispielsweise musste die Lautstärke mit dem Maximizer (Limiter, Kompressor und Verstärkung) erhöht und angeglichen werden, ohne zu übersteuern. Heutzutage sind Songs leider stark komprimiert, sodass sie lauter klingen. Unser Ohr empfindet sie dann als besser, da sie kraftvoller wirken. Doch die Dynamik leidet sehr stark darunter. Ich habe mich bei meinem Mastering an die Vorgaben von Spotify gehalten (max. -1dB, -17 LUFS). Diese Werte sind in etwa identisch, wie Youtube alle ihre Videos automatisch normalisiert. Dies habe ich entschieden, weil man so keine grossen Unterschiede in der wahrgenommenen Lautstärke feststellt, wenn man meine Seite besucht.

Audioplayer

Jetzt hatte ich die aufwendige Musik endlich exportiert. Einerseits wollte ich aufgrund sonstiger Projekte nicht mehr allzu viele Stunden investieren, auf der anderen Seite wollte ich natürlich einen würdigen Audioplayer für meine Kompositionen. Ich habe im Internet nach Audioplayern gesucht mit einem Playlist-Feature. Leider wurde ich nicht fündig nach dem gewünschten Code. Entweder wurde noch kein HTML5 verwendet oder der Player kostete. Eines hatten aber alle gemeinsam: Optisch sprachen sie mich überhaupt nicht an. Es gab nur eine Möglichkeit, ich musste selbst mein gewünschtes Design entwerfen und die Funktionen coden.

Grundgerüst bauen

Als Erstes habe ich mit Javascript und jQuery versucht, den HTML5 Audioplayer zu steuern. Es gibt zwar die Funktion, Kontrollknöpfe einzublenden, diese können optisch jedoch nicht verändert werden. In Zukunft wäre wünschenswert, wenn der HTML-Player mit CSS formatiert werden könnte. So habe ich zwar das Audio-Tag verwendet, jedoch von Grund auf meine eigene Oberfläche erstellt und die Features eines Audioplayers hinzugefügt.

Hatte ich dies, entwickelte ich die Funktion der Playlist. Ist das Ende eines Stückes erreicht, wird automatisch im Audioplayer das nächste Lied geladen. Auch mit einem Klick auf einen Song sollte dieser direkt abgespielt werden. Hier war die Schwierigkeit, dass ich nicht für jede .mp3-Datei einen neuen Player machen wollte, sondern die Source dynamisch verändern möchte. Glücklicherweise gibt es dazu schon Beiträge im Internet, sodass ich mit Google und der jQuery-Dokumentation alles nach Wunsch entwickeln konnte. Zwei Funktionen konnte ich leider nicht einbinden. Das Erste war einen Equalizer, der die Frequenzen der Songs grafisch darstellt. Ich wollte es mit Canvas umsetzen. Hatte ich eine Leinwand im HTML erstellt, funktionierten Teile des JavaScripts plötzlich nicht mehr. Schade. Darum habe ich eine Gif-Animation erstellt, die nur angezeigt wird, wenn ein Lied läuft. Eine Zeitleiste wäre auch wünschenswert gewesen, bei der man die Position des Songs durch Klicken verändern konnte. Die Anzeige habe ich einfach hinbekommen: Abfragen wie viel Prozent die Datei schon abgespielt worden war und ein rundes Element auf der Leiste mit diesem Wert als Abstand nach links absolut platzieren. Die Stelle der Musik zu ändern wollte dann mit JavaScript nicht funktionieren. Die Positionsabfrage eines Klicks konnte ich nicht responsive erstellen. Ich habe dann aber noch Lautstärketasten eingebaut, einfach weil dies mit JavaScript auch möglich war.

Design

Ich hatte schon früh im Kopf, das Projekt «Jukebox» zu nennen. Deshalb war klar, dass ich das Design einer Jukebox angleiche. Ich war mir gar nicht sicher, ob dieses Gerät viele noch kennen. Um möglichst eine kleine Datei zu erlangen, habe ich die Jukebox als SVG exportiert. Die Hintergrundbilder sind stark Web optimiert. Die Seite soll so aussehen, als ob die Jukebox in einem Raum steht. Die Elemente sind dynamisch nach der Viewport-Breite skaliert und responsive mit mehreren Media-Queries optimiert.

Equipment

Hardware
  • Native Instruments Maschine MK1 1Gen
  • Akai LPK245
  • Notebook
  • AIAIAI Studio (1. Gen) Kopfhörer
Software

DAW

  • Cockos Reaper, inkl. jeglichen Plugins (EQ, Kompressor, Limiter, etc.)
  • Native Instruments Maschine 2 (Standalone + als Plugin)

Mastering

  • iZotope Ozone

weitere Plugins

  • Valhalla
  • Waves
  • iZotope

Instrumente

  • Native Instruments Kontakt
  • Native Instruments Massive
  • Native Instruments Reaktor

Schwierigkeiten

Live einen Song einzuspielen war am Anfang sehr schwierig, da ich den Takt nicht getroffen habe, obwohl ich ein Metronom aktivieren konnte. Das Gerät war aber von Vorteil, um Ideen zu sammeln. Denn arrangieren konnte ich die Töne auch nach der Aufnahme. Dies förderte die Kreativität, im Vergleich zum Programmieren mit der Maus im MIDI-Editor.

Viele Lieder klangen gut in diesem Moment, als ich sie aufgenommen hatte. Einige Tage später fühlte ich den «Flow» nicht mehr. Solche Songs habe ich bewusst nicht veröffentlich und so die Qualität vor die Quantität gestellt.

Oft habe ich zu viele Töne übereinandergelegt, sodass die Kompositionen sehr wirr und unklar wurden. Melodien mussten komponiert werden, die zueinander passen. Manchmal war weniger auch mehr und es benötigte nicht mehrere Instrumente gleichzeitig. Ausserdem musste ich ein neues Programm kennenlernen und mich mit dem Gerät vertraut machen. Glücklicherweise konnte ich dann das Mastering in meiner gewohnten Umgebung mit der DAW «Cockos Reaper» umsetzen.

Ich habe bemerkt, dass der Beat unterschiedlich sein muss, wenn er ohne Stimme gut klingen soll. Ausserdem fehlt ein Element, wenn man bei Songs mit Gesang nur die Instrumente hört. Darum habe ich das Frequenzspektrum auch in den Mitten sehr stark ausgefüllt. Eine Stimme könnte sich bei den meisten meiner Songs nicht gut in den Beat einbetten, da es keinen Platz im Mix gibt. Da ich jedoch wusste, dass es nur Instrumentals werden, habe ich versucht, dass sich die Kompositionen ohne Vocals komplett anhören.

Schwierig war auch, dass mein Kopfhörer nicht linear klingt. Er ist zwar hochwertig, aber nicht geeignet, um zu produzieren. Um dem entgegenzuwirken, habe ich Tonal Balance verwendet. Dieses Programm zeigt an, wie laut die Frequenzen über das ganze Lied gesehen sind. So kann mit einem EQ das Klangbild ausgewogen werden.

Beim Mastering von «It’s a Trap» hatte ich Probleme, dieselbe Lautstärke wie bei den anderen Songs zu erreichen. Obwohl ich mit Ozone das Volumen in LUFS anzeigen lies, war der Mix viel zu leise. Ich denke es liegt daran, dass der Hauptteil der Elemente des Songs ihre Frequenzen im Bassbereich haben. Ganz erklären, kann ich es jedoch auch nicht. Ich musste den Mastertrack besonders stark komprimieren.

Bei den letzten Tests ist mir aufgefallen, dass auf dem iPhone im Safari Browser die Lautstärke nicht mit Javascript gesteuert werden kann. Darum habe ich die Buttons in diesen Fällen ausgeblendet. Der Safari auf Mobile und Desktop haben noch eine andere Einschränkung: Der Audio-Preload ist von Apple deaktiviert, um Bandbreite zu sparen. Die Audiodatei kann also erst vor dem Abspielen heruntergeladen werden und nicht wie bei den anderen Browsern bereits im Hintergrund, sobald die Seite geladen ist. Dies hat der Vorteil, dass nur angehörte Songs Internet benötigen, sorgt aber für eine Verzögerung nach dem Klick auf einen Titel. Darum habe ich eine Meldung für den Safari-Browser eingerichtet, sodass es nicht als Bug angesehen wird.

Im Nachhinein hätte ich die Grösse der Jukebox der Viewport-Höhe anpassen sollen und nicht der Breite. Bildschirme im 16:9 Seitenverhältnis und ähnliche, funktionieren zwar sehr gut. Um die Seite auf mobile zu optimieren brauchte ich dann noch eine Weile, da Smartphones vor allem im Hochformat benutzt werden. Auf ganz breiten Monitoren konnte ich die Jukebox nicht testen.

Mit den Farben des Designs bin ich nicht vollständig zufrieden. Meine Tester haben die Farbwahl jedoch als passend bewertet.

Fazit

Ich fand es ein sehr cooles Projekt und es hat mir viel Spass gemacht. Sonst wäre dies nicht möglich gewesen, da ich mich wirklich über lange Zeit immer und immer wieder hinter die Musik gesetzt habe. Die grosse Liste der Schwierigkeiten ist aus meiner Sicht normal, da ich in diesem Bereich keine Erfahrung hatte. Ich bin aber mit dem Ergebnis sehr zufrieden und es freut mich, dass ich bis jetzt ausschliesslich positives Feedback erhalten habe.

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.