Verwenden von Fourier transformiert sich mit der Web -Audio -API

Die Web -Audio -API bietet JavaScript -Programmierern einen einfachen Zugriff auf die Schallverarbeitung und -synthese. In diesem Artikel werden wir den benutzerdefinierten Oszillatoren beleuchtet, eine wenig bekannte Funktion der Web-Audio-API, mit der Fourier-Transformationen für die Arbeit für die Synthese von charakteristischen Soundeffekten im Browser einfach sind.

Key Takeaways

• Mit der Web -Audio -API können JavaScript -Programmierer die Schallverarbeitung und -synthese verwenden, einschließlich der Verwendung von benutzerdefinierten Oszillatoren und Fourier -Transformationen, um einzigartige Soundeffekte im Browser zu erzeugen.
• Fourier -Transformationen sind ein mathematisches Werkzeug, mit dem ein komplexes Signal in diskrete sinusförmige Kurven inkrementeller Frequenzen zerlegt wird, was es ideal für die realistische Schallzeugung macht. Diese Methode wird durch Audio -Komprimierungsstandards wie MP3.
verwendet.
benutzerdefinierte Oszillatoren in der Web -Audio -API können verwendet werden, um Ihre eigenen Wellenformen zu definieren, wobei Fourier -Transformationen verwendet werden, um die Wellenform zu erzeugen. Diese Funktion ermöglicht die Synthese komplexer Töne wie eine Polizeisirene oder ein unverwechselbarer Horn -Sound.
Soundsynthese unter Verwendung von Fourier -Transformationen und benutzerdefinierten Oszillatoren in der Web -Audio -API ist flexibler als die Arbeit mit Audio -Proben, sodass Entwickler benutzerdefinierte Effekte automatisieren und komplexe Töne synthetisieren können.

Web -Audio -Oszillatoren

Mit der Web -Audio -API können Sie ein Diagramm von Audioelementen komponieren, um Sound zu erzeugen. Ein Oszillator ist ein solches Element - eine Schallquelle, die ein reines Audiosignal erzeugt. Sie können seine Frequenz und ihren Typ festlegen, der Sinus, Square, Sawtooth oder Dreieck sein kann, aber wie wir sehen wollen, gibt es auch einen leistungsstarken benutzerdefinierten Typ. Versuchen wir zunächst einen Standardoszillator. Wir haben einfach seine Frequenz auf 440 Hz gesetzt, die Musiker als A4 -Note erkennen, und wir können den Unterschied zwischen Sinus-, Quadrat-, Sägezahn- und Dreieck -Wellenformen hören.

Siehe den Pen -Web -Audio -Oszillator von SEB Molines (@clafou) auf CodePen. Mit benutzerdefinierten Oszillatoren können Sie Ihre eigenen Wellenformen anstelle dieser integrierten Typen definieren, aber mit einer Wendung: Sie verwenden Fourier-Transformationen, um diese Wellenform zu erzeugen. Dies macht sie ideal für die realistische Klanggeneration.

Fourier transformiert mit Beispiel

Die Fourier -Transformation ist das mathematische Tool, das unter anderem von Audio -Komprimierungsstandards wie MP3 verwendet wird. Die inverse Fourier -Transformation zersetzt ein Signal in seine Bestandteile, ähnlich wie die menschlichen Ohrschwingungen, um einzelne Töne wahrzunehmen. Auf hohem Niveau transformiert Fourier die Tatsache, dass ein komplexes Signal in diskrete sinusförmige Kurven inkrementeller Frequenzen zerlegt werden kann. Es funktioniert mit Tabellen mit Koeffizienten, die jeweils auf ein Vielfaches einer grundlegenden Frequenz angewendet werden. Je größer die Tische, desto näher der Annäherung. Fasziniert? Die Wikipedia -Seite ist einen Blick wert und enthält Animationen, um die Zersetzung eines Signals in diskrete Sinuskurven zu visualisieren. Aber anstatt sich mit der Theorie zu befassen, lassen Sie uns dies in die Praxis umsetzen, indem wir einen einfachen kontinuierlichen Klang dekonstruieren: ein Lufthorn.

synthetisieren ein Horn

Für diesen Artikel werden wir diese Aufzeichnung einer Polizeisirene und eines Polizei -Horns verwenden. Ein Spektrograph des Horn -Sounds, der mit der Open Source Audio Editor Audacity erstellt wurde, wird hier angezeigt. Es zeigt deutlich eine Reihe von Linien unterschiedlicher Intensität, die alle in gleichen Intervallen verteilt sind. Wenn wir genauer hinschauen, beträgt dieses Intervall ungefähr 160 Hz. Fourier transformiert die Arbeit mit einer grundlegenden Frequenz (nennen wir es f ) und seine Obertöne, die ein Vielfaches von F sind. Wenn wir 160 Hz als unsere grundlegende F wählen, ist die Linie bei 320 Hz (2 x F) unsere erste Oberton, die Linie bei 480 Hz (3 x F) unser zweiter Oberton und so weiter. Da der Spektrograph zeigt, dass sich alle Linien in einem Vielfachen von F befinden, reicht eine Anordnung der bei jedem Vielfachen von F beobachteten Intensitäten aus, um eine anständige Nachahmung des aufgezeichneten Klangs darzustellen. Die Dokumentation der Web -Audio -API für CreateperiodicWave, die eine benutzerdefinierte Wellenform aus Fourier -Koeffizienten erstellt, zeigt uns Folgendes:

The real parameter represents an array of cosine terms (traditionally the A terms). In audio terminology, the first element (index 0) is the DC-offset of the periodic waveform and is usually set to zero. The second element (index 1) represents the fundamental frequency. The third element represents the first overtone, and so on.

Es gibt auch eine Bild Parameter, den wir als Phasen ignorieren können, sind für dieses Beispiel irrelevant. Lassen Sie uns also ein Array dieser Koeffizienten erstellen (schätzen Sie sie auf 0,4, 0,4, 1, 1, 1, 0,3, 0,7, 0,6, 0,5, 0,9, 0,8, basierend auf der Helligkeit der Linien auf dem Spektrographen, die am unteren Rand beginnen). Anschließend erstellen wir einen benutzerdefinierten Oszillator aus dieser Tabelle und synthetisieren den resultierenden Klang.

<span>var audioContext = new AudioContext();
</span><span>var osc = audioContext.createOscillator();
</span>
<span>var real = new Float32Array([0,0.4,0.4,1,1,1,0.3,0.7,0.6,0.5,0.9,0.8]);
</span>
<span>var imag = new Float32Array(real.length);
</span><span>var hornTable = audioContext.createPeriodicWave(real, imag);
</span>
osc <span>= audioContext.createOscillator();
</span>osc<span>.setPeriodicWave(hornTable);
</span>osc<span>.frequency.value = 160;
</span>osc<span>.connect(audioContext.destination);
</span>osc<span>.start(0);</span>

Siehe den Stift -benutzerdefinierten Oszillator: Horn von SEB Molines (@clafou) auf CodePen.

Nicht gerade ein beruhigendes Geräusch, sondern auffallend nahe dem aufgenommenen Sound. Natürlich geht die Klangsynthese alleine über das Spektrum hinaus - insbesondere sind die Umschläge ein ebenso wichtiger Aspekt von Timbre.

von Signaldaten zu Fourier -Tabellen

Es ist ungewöhnlich, Fourier -Koeffizienten von Hand zu erzeugen, wie wir es gerade getan haben (und nur wenige Geräusche sind so einfach wie unser Horn -Sound, der nur aus harmonischen Partials besteht, d. H. Vielfachen von F). Typischerweise werden Fourier -Tabellen berechnet, indem reale Signaldaten in einen inversen FFT -Algorithmus (Fast Fourier -Transformation) versorgt werden. Sie finden Fourier -Koeffizienten für eine Auswahl von Klängen im Chrom -Repository, darunter der unten gespielte Orgel -Sound:

Siehe den Pen Custom Oscillator: Organ von SEB Molines (@clafou) auf CodePen.

Mit der Open -Source -Bibliothek mit DSP.JS können Sie solche Fourier -Koeffizienten aus Ihren eigenen Beispieldaten berechnen. Wir werden dies nun demonstrieren, um eine bestimmte Wellenform zu erzeugen.

Niederfrequenzoszillator: Polizei Sirenen Ton

Eine US -amerikanische Polizei Sirene oszilliert zwischen einem Tief und einer hohen Frequenz. Wir können dies mit der Web -Audio -API erreichen, indem wir zwei Oszillatoren verbinden. Der erste (ein Niederfrequenzoszillator oder LFO) moduliert die Frequenz der zweiten, die selbst die hörbaren Schallwellen erzeugt. Um das Realität zu dekonstruieren, nehmen wir wie zuvor einen Spektrographen eines Polizei -Sirenen -Sounds aus derselben Aufnahme. Anstelle horizontaler Linien sehen wir jetzt eine hakenflossenförmige Wellenform, die die rhythmische Tonmodulation der Sirene darstellt. Standard-Oszillatoren unterstützen nur Sinus-, Quadrat-, Sägezahn- und Dreieck-Wellenformen, sodass wir uns nicht auf diejenigen verlassen können, um diese spezifische Wellenform nachzuahmen. Wir können jedoch noch einmal einen benutzerdefinierten Oszillator erstellen. Erstens brauchen wir eine Reihe von Werten, die die gewünschte Kurve darstellen. Die folgende Funktion erzeugt solche Werte, die wir in ein Array namens Sharkfinvalues ​​einfügen.

Siehe die Funktion der Stiftwellenform für eine Sirenentonmodulation durch SEB Molines (@clafou) auf CodePen.

Als nächstes verwenden wir DSP.js, um Fourier -Koeffizienten aus diesen Signaldaten zu berechnen. Wir erhalten die realen und bildlichen Arrays, mit denen wir dann unseren LFO initialisieren.

The real parameter represents an array of cosine terms (traditionally the A terms). In audio terminology, the first element (index 0) is the DC-offset of the periodic waveform and is usually set to zero. The second element (index 1) represents the fundamental frequency. The third element represents the first overtone, and so on.

Schließlich erstellen wir den zweiten Oszillator und verbinden das LFO über einen Gain -Knoten mit seiner Frequenz, um den Ausgang des LFO zu verstärken. Unser Spektrograph zeigt, dass die Wellenform etwa 380 ms dauert, sodass wir die Frequenz des LFO auf 1/0,380 festlegen. Es zeigt uns auch, dass der grundlegende Ton der Sirene von einem Tief von etwa 750 Hz bis zu einem Hoch von etwa 1650 Hz (einem Median von 1200 Hz ± 450 Hz) reicht. Daher setzen wir die Frequenz des Oszillators auf 1200 und den Gewinn des LFO auf 450. Wir können jetzt beide Oszillatoren beginnen, um unsere Polizeisirene zu hören.

<span>var audioContext = new AudioContext();
</span><span>var osc = audioContext.createOscillator();
</span>
<span>var real = new Float32Array([0,0.4,0.4,1,1,1,0.3,0.7,0.6,0.5,0.9,0.8]);
</span>
<span>var imag = new Float32Array(real.length);
</span><span>var hornTable = audioContext.createPeriodicWave(real, imag);
</span>
osc <span>= audioContext.createOscillator();
</span>osc<span>.setPeriodicWave(hornTable);
</span>osc<span>.frequency.value = 160;
</span>osc<span>.connect(audioContext.destination);
</span>osc<span>.start(0);</span>

Siehe die Stift Sirene von SEB Molines (@clafou) auf Codepen.

Für mehr Realismus könnten wir auch eine benutzerdefinierte Wellenform auf den zweiten Oszillator anwenden, wie wir mit dem Horn -Sound gezeigt haben.

Schlussfolgerung

Mit ihren Verwendung von Fourier -Transformationen bieten benutzerdefinierte Oszillatoren Web -Audio -Entwicklern eine einfache Möglichkeit, komplexe Töne zu synthetisieren und benutzerdefinierte Effekte wie die von uns gezeigte Sirenenwellenform vollständig zu automatisieren. Die Klangsynthese ist viel flexibler als die Arbeit mit Audio -Samples. Zum Beispiel ist es einfach, auf diesem Sireneffekt aufzubauen, um mehr Effekte hinzuzufügen, wie ich es getan habe, um eine Doppler -Verschiebung in dieser mobilen App hinzuzufügen. Die Spezifikation „Kann ich verwenden“ zeigt, dass die Web -Audio -API mit Ausnahme des IE einen breiten Browser -Support genießt. Nicht alle Browser sind mit dem neuesten W3C-Standard auf dem neuesten Stand, aber ein Affenpatch steht zum Schreiben von Cross-Browser-Code zur Verfügung. Android L wird dem WebView Web Audio -API -Unterstützung hinzufügen, das iOS seit Version 6 gemacht hat. Jetzt ist eine großartige Zeit, um mit dem Experimentieren zu beginnen!

häufig gestellte Fragen (FAQs) zur Verwendung von Fourier -Transformationen mit Web -Audio -API

Wie lautet die Web-Audio-API und wie funktioniert sie? Es ermöglicht Entwicklern, Audioquellen auszuwählen, Audio Effekte hinzuzufügen, Audiovisualisierungen zu erstellen, räumliche Effekte (z. B. Schwenk) und vieles mehr anzuwenden. Es erstellt einen Audiokontext, aus dem eine Vielzahl von Audioknoten erstellt und miteinander verbunden werden kann, um ein Audio -Routing -Diagramm zu bilden. Jeder Knoten führt eine bestimmte Audiofunktion aus, z.

Wie funktioniert die Fourier -Transformation in der Web -Audio -API? Im Kontext der Web -Audio -API wird es verwendet, um die in einem Audiosignal vorhandenen Frequenzen zu analysieren. Dies erfolgt anhand der Schnittstelle an der Analyseernode, die Informationen in Echtzeithäufigkeiten und Zeitabläufen liefert. Die Fourier-Transformation wird verwendet, um die Zeitdomänendaten in Frequenzdomänendaten umzuwandeln, die dann für verschiedene Zwecke wie das Erstellen von Audiovisualisierungen verwendet werden können. 🎜>

Die FFTSIZE -Eigenschaft in der Web -Audio -API wird verwendet, um die Größe der schnellen Fourier -Transformation (FFT) einzustellen, um die Frequenzdomäne zu bestimmen. Es ist eine Leistung von zwei Wert, die die Anzahl der Stichproben bestimmt, die bei der Durchführung der Fourier -Transformation verwendet werden. Je höher der Wert ist, desto mehr Frequenzbehälter sind die Frequenzdaten detaillierter. Ein höherer Wert bedeutet jedoch auch, dass mehr Rechenleistung erforderlich ist. und dann diese Daten verwenden, um visuelle Darstellungen zu erstellen. Dies erfolgt typischerweise unter Verwendung der Analysernode-Schnittstelle, die Informationen zur Häufigkeit von Echtzeit- und Zeit-Domänen-Analyse liefert. Diese Daten können dann verwendet werden, um Visualisierungen wie Wellenformdiagramme oder Frequenzspektrumdiagramme zu erstellen. Die spezifische Methode zum Erstellen der Visualisierung hängt von der Art der Visualisierung ab, die Sie erstellen möchten, und der Bibliothek oder des Tools, die Sie zum Erstellen der Grafiken verwenden. ? Dazu gehören Gainnode für das Ändern des Volumens, die BiquadFilternode zur Anwendung einer Vielzahl von Filtereffekten, Konvolvernode für die Anwendung von Faltungseffekten wie Reverb und vieles mehr. Diese Knoten können aus dem Audiokontext erstellt und dann in einem Audio -Routing -Diagramm verbunden werden, um die gewünschten Effekte auf den Audio anzuwenden. Die Web -Audio -API wird häufig für eine Vielzahl von Zwecken in Webanwendungen verwendet. Dazu gehören das Spielen und Kontrolle von Audio, das Hinzufügen von Soundeffekten zu Spielen, das Erstellen von Audiovisualisierungen, die Anwendung räumlicher Effekte auf Audio für Virtual -Reality -Anwendungen und vieles mehr. Es bietet eine leistungsstarke und flexible Möglichkeit, mit Audio in Webanwendungen zu arbeiten.

Wie kann ich die Wiedergabe von Audio mithilfe der Web -Audio -API steuern? Dies beinhaltet die Möglichkeit, Audio zu starten und zu stoppen, die Wiedergaberate anzupassen und verschiedene Teile des Audios zu suchen. Dies erfolgt normalerweise mit der AudioBuffersourcenode-Schnittstelle, die eine Audioquelle darstellt, die aus In-Memory-Audiodaten besteht. Mächtig und flexibel, es hat einige Einschränkungen. Beispielsweise erfordert es einen modernen Browser, der die API unterstützt, und es kann komplex sein, für fortschrittlichere Audioverarbeitungsaufgaben zu verwenden. Da es sich um eine API auf hoher Ebene handelt, liefert sie möglicherweise nicht die für bestimmte Anwendungen benötigte Kontrolle im Vergleich zu APIs auf niedrigerer Ebene.

Ja, die Web -Audio -API kann zum Aufzeichnen von Audio verwendet werden, obwohl dies nicht ihr Hauptzweck ist. Dies erfolgt in der Regel mit der Medienstreamaudiosourcenode -Schnittstelle, die eine Audioquelle darstellt, die aus einem Medienstrom besteht (z. B. aus einem Mikrofon oder einem anderen Audioeingabegerät). 🎜>

Es gibt viele Ressourcen, um mehr über die Web -Audio -API zu erfahren. Das Mozilla Developer Network (MDN) enthält umfassende Dokumentation der API, einschließlich Anleitungen und Tutorials. Es gibt auch viele Online -Tutorials und Kurse auf Websites wie Codecademy, Udemy und Coursera. Darüber hinaus sind mehrere Bücher zu diesem Thema verfügbar, wie z. B. „Web -Audio -API“ von Boris Smus.

Das obige ist der detaillierte Inhalt vonVerwenden von Fourier transformiert sich mit der Web -Audio -API. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!