Share
Robert Moog hat bekanntlich einen der ersten kommerziellen modularen Synthesizer entwickelt. Seine Erfindungen bestanden aus Drähten und Knöpfen, die es Musikern ermöglichten, nie zuvor gehörte Töne zu erzeugen. Diese Instrumente waren auch nicht billig und kosteten selbst für das einfachste Modell Tausende von Dollar.
Dank der Web-Audio-API können wir jetzt unseren eigenen, ähnlich klingenden Synth erstellen, den wir nach Herzenslust für insgesamt $ 0 konfigurieren können. Darüber hinaus können wir unseren Synth dank des Webs sofort an alle Benutzer der Welt verteilen.
Wenn Sie die vorherigen Tutorials in dieser Web Audio-Serie nicht gelesen haben, empfiehlt es sich, diese zu lesen, bevor Sie sich mit diesem beschäftigen, da sie die Grundlagen der Verwendung der Web Audio-API und das Erstellen eines völlig neuen Sounds behandeln.
Beginnen wir mit dem Erstellen einer einfachen HTML-Seite.
Fügen Sie Ihrer Web-App Sound hinzu Synthesizer!
Und etwas grundlegendes Styling in unserem styles / main.css Datei.
body font-family: serifenlos; .container margin: auto; Breite: 800px;
Vielleicht ist das Wichtigste, was Ihr Synth benötigt, eine Tastatur. Glücklicherweise habe ich ein kleines JavaScript-Snippet erstellt, das Ihrer Seite eine virtuelle Tastatur hinzufügt. Laden Sie eine Kopie von Qwerty Hancock herunter und verweisen Sie sie wie unten auf Ihrer Seite.
Dann fügen Sie Ihrer Seite ein leeres div mit der ID "keyboard" hinzu..
Dies ist der Ort auf der Seite, in den die Tastatur eingefügt wird.
Wir möchten auch eine dedizierte JavaScript-Datei für unseren Synth einrichten, also erstellen wir sie auch und verweisen darauf, wo Qwerty Hancock enthalten ist.
In synth.js initialisieren wir unsere Tastatur mit den folgenden Schritten.
var keyboard = new QwertyHancock (id: 'keyboard', Breite: 600, Höhe: 150, Oktaven: 2);
Dies weist unsere Seite an, eine Instanz unserer Tastatur in das Element mit der ID von "keyboard" einzufügen, die Größe auf 600 x 150 px zu ändern und die Anzahl der Tasten auf der Tastatur zwei Oktaven zu überdecken. Speichern und aktualisieren Sie Ihren Browser, um eine schöne Bildschirmtastatur zu sehen. Verwenden Sie Tasten, Tasten oder Ihre Maus, um die Noten beim Drücken anzuzeigen.
Qwerty Hancock versorgt uns mit zwei Veranstaltungshörern, keyUp und Taste nach unten. Dadurch können wir uns in die Tastatur einhaken und Code schreiben, der beim Drücken der Tastatur ausgelöst wird. Es sagt uns auch, welche Note gedrückt wurde und welche Frequenz in Hertz angezeigt wird.
Accentsconagua
keyboard.keyDown = Funktion (Hinweis, Häufigkeit) console.log ('Hinweis', Hinweis, 'wurde gedrückt'); console.log ('Seine Häufigkeit ist', Häufigkeit); ; keyboard.keyUp = Funktion (Hinweis, Häufigkeit) console.log ('Hinweis', Hinweis, 'wurde freigegeben'); console.log ('Seine Häufigkeit war', Häufigkeit); ;Starten wir einen Oszillator, wenn eine Taste gedrückt wird. Wir stoppen es nach einer Sekunde, damit es nicht für immer weitergeht.
var context = new AudioContext (); keyboard.keyDown = Funktion (Hinweis, Frequenz) var osc = context.createOscillator (); osc.connect (context.destination); osc.start (context.currentTime); osc.stop (context.currentTime + 1); ;
Warum erstellen wir den Oszillator im Taste nach unten Funktion? Ist das nicht ineffizient? Oszillatoren sind so konstruiert, dass sie leicht sind und nach dem Gebrauch weggeworfen werden können. Sie können sie eigentlich nur einmal verwenden. Betrachten Sie sie als eine Art bizarres Audio-Feuerwerk.
Wenn wir jetzt eine Taste drücken, hören wir einen Ton. Es ist ein bisschen laut, also erstellen wir eine gainNode als Master-Lautstärkeregler fungieren.
var context = new AudioContext (), masterVolume = context.createGain (); masterVolume.gain.value = 0,3; masterVolume.connect (context.destination); keyboard.keyDown = Funktion (Hinweis, Frequenz) var osc = context.createOscillator (); osc.connect (masterVolume); masterVolume.connect (context.destination); osc.start (context.currentTime); osc.stop (context.currentTime + 1); ;
Ein Keyboard, das immer wieder eine Note spielt, macht keinen Spaß. Stecken Sie also die Frequenz in den Oszillator, bevor Sie mit dem Spielen beginnen.
osc.frequency.value = Frequenz;
Schön. Wir müssen jetzt den Oszillator anhalten, nachdem wir eine Taste statt einer Sekunde angehoben haben. Weil wir den Oszillator im Inneren erzeugen Taste nach unten Wenn Sie diese Funktion aktivieren, müssen Sie nachverfolgen, welcher Oszillator welche Frequenz spielt, um ihn beim Loslassen der Taste zu stoppen. Ein einfacher Weg, dies zu tun, besteht darin, ein leeres Objekt zu erstellen und die Frequenzen als Tasten hinzuzufügen, zusammen mit dem Oszillator, der diese Frequenz als Wert spielt.
var Oszillatoren = ; keyboard.keyDown = Funktion (Hinweis, Frequenz) // Vorheriger Code hier Oszillatoren [Frequenz] = Osc; osc.start (context.currentTime); ;
Dies bedeutet, dass wir die Frequenz, die wir von unserer bekommen, problemlos nutzen können noteUp Funktion, um diesen bestimmten Oszillator zu stoppen.
keyboard.keyUp = Funktion (Hinweis, Frequenz) Oszillatoren [Frequenz] .stop (context.currentTime); ;
Wir haben jetzt einen voll funktionsfähigen (sehr einfachen) Synthesizer im Browser! Ok, es hört sich im Moment nicht gut an, aber mal sehen, ob wir das ändern können.
Als erstes müssen Sie die Art der Welle der Oszillatorausgänge ändern. Es gibt vier Grundtypen zur Auswahl: Sinus, Quadrat, Dreieck und Sägezahn. Jede andere Wellenform klingt anders. Spielen Sie mit ihnen und wählen Sie Ihren Favoriten. Für dieses Beispiel wähle ich "Sägezahn".
osc.type = 'Sägezahn';
Dort hört sich das besser an.
Es ist sehr selten, dass Sie einen Synthesizer finden, der einen einzelnen Oszillator verwendet. Die meisten Synthies verbessern ihren Sound, indem sie verschiedene Oszillatoren verschiedener Typen kombinieren. Mal sehen, wie es klingt, wenn wir noch eine hinzufügen. Denken Sie daran, wir müssen alle unsere Verbindungen verdoppeln, und wir müssen einem Array Oszillatoren derselben Frequenz hinzufügen. Dies bedeutet, dass wir über sie iterieren können, um alle Oszillatoren zu stoppen, die dieselbe Note spielen.
keyboard.keyDown = Funktion (Hinweis, Frequenz) var osc = context.createOscillator (), osc2 = context.createOscillator (); osc.frequency.value = Frequenz; osc.type = 'Sägezahn'; osc2.frequency.value = Frequenz; osc2.type = 'Dreieck'; osc.connect (masterVolume); osc2.connect (masterVolume); masterVolume.connect (context.destination); Oszillatoren [Frequenz] = [Os, Os2]; osc.start (context.currentTime); osc2.start (context.currentTime); ; keyboard.keyUp = Funktion (Hinweis, Frequenz) Oszillatoren [Frequenz] .forEach (Funktion (Oszillator) Oszillator.stop (context.currentTime);); ;
Zum Abschluss verwenden wir einen Trick, den wir im vorigen Tutorial gelernt haben. Wir können ein wenig Chorus hinzufügen, um unseren Sound noch schimmernder zu machen, indem wir die Oszillatoren etwas verstimmen.
osc.detune.value = -10; osc2.detune.value = 10;
Schön, auf einen Synth würde Kraftwerk stolz sein! Spielen Sie mit dem fertigen Artikel mit oder verzahnen Sie das Repo auf GitHub, um den Synth nach Herzenslust zu optimieren.
