L'API audio Web offre aux programmeurs JavaScript un accès facile au traitement sonore et à la synthèse. Dans cet article, nous allons éclairer les oscillateurs personnalisés, une fonctionnalité peu connue de l'API audio Web qui facilite la mise en ?uvre de Fourier en travail pour synthétiser des effets sonores distinctifs dans le navigateur.

Les plats clés

• L'API audio Web permet aux programmeurs JavaScript d'utiliser le traitement sonore et la synthèse, y compris l'utilisation d'oscillateurs personnalisés et de transformations de Fourier pour créer des effets sonores uniques dans le navigateur.
• Les transformations de Fourier sont un outil mathématique utilisé pour décomposer un signal complexe en courbes sinuso?dales discrètes de fréquences incrémentielles, ce qui le rend idéal pour une génération de son réaliste. Cette méthode est utilisée par des normes de compression audio telles que MP3.
• Les oscillateurs personnalisés de l'API audio Web peuvent être utilisés pour définir vos propres formes d'onde, en utilisant Fourier Transforts pour générer la forme d'onde. Cette fonctionnalité permet la synthèse de tons complexes comme une sirène de police ou un son de cor distinctif.
• La synthèse du son utilisant des transformations de Fourier et des oscillateurs personnalisés dans l'API audio Web est plus flexible que de travailler avec des échantillons audio, permettant aux développeurs d'automatiser complètement les effets personnalisés et de synthétiser des tons complexes.

Oscillateurs audio Web

L'API audio Web vous permet de composer un graphique d'éléments audio pour produire du son. Un oscillateur est un tel élément - une source sonore qui génère un signal audio pur. Vous pouvez définir sa fréquence et son type, qui peut être sinuso?dal, carré, en dents de scie ou en triangle, mais, comme nous sommes sur le point de le voir, il existe également un type personnalisé puissant. Tout d'abord, essayons un oscillateur standard. Nous définissons simplement sa fréquence à 440 Hz, que les musiciens reconna?tront comme la note A4, et nous incluons un sélecteur de type pour vous permettre d'entendre la différence entre les formes d'onde sinus, carré, en dents de scie et triangle.

Voir l'oscillateur audio Web Pen par Seb Molines (@Clafou) sur Codepen.

Les oscillateurs personnalisés vous permettent de définir vos propres formes d'onde à la place de ces types intégrés, mais avec une torsion: ils utilisent des transformations de Fourier pour générer cette forme d'onde. Cela les rend parfaitement adaptés à une génération de son réaliste.

Fourier se transforme par l'exemple

La transformée de Fourier est l'outil mathématique utilisé par les normes de compression audio telles que MP3, parmi de nombreuses autres applications. La transformée de Fourier inverse décompose un signal en ses fréquences constituantes, tout comme les vibrations de l'oreille humaine pour percevoir les tons individuels. à un niveau élevé, les transforts de Fourier exploitent le fait qu'un signal complexe peut être décomposé en courbes sinuso?dales discrètes de fréquences incrémentielles. Il fonctionne à l'aide de tableaux de coefficients, chacun appliqué à un multiple de fréquence fondamentale. Plus les tables sont grandes, plus l'approximation est proche. Intrigué? La page Wikipedia vaut le coup et comprend des animations pour aider à visualiser la décomposition d'un signal en courbes sinuso?dales discrètes. Mais plut?t que de plonger dans la théorie, mettons cela en pratique en déconstruisant un simple son continu: un cor à air.

synthétisant une corne

Pour cet article, nous utiliserons cet enregistrement d'une sirène de police et d'un cor. Un spectrographe du son de cor, créé à l'aide de l'auditeur audio open source, est montré ici. Il montre clairement un certain nombre de lignes d'intensité variable, toutes espacées à des intervalles égaux. Si nous regardons de plus près, cet intervalle est d'environ 160 Hz. Fourier Transforts fonctionne avec une fréquence fondamentale (appelons-le f ) et ses connotations, qui sont des multiples de f. Si nous choisissons 160 Hz comme F fondamental F, la ligne à 320 Hz (2 x F) est notre première dépression, la ligne à 480 Hz (3 x F) notre deuxième dépasse, etc. Parce que le spectrographe montre que toutes les lignes sont à des multiples de F, un tableau des intensités observées à chaque multiple de F est suffisante pour représenter une imitation décente du son enregistré. La documentation API audio Web pour CreatePerioddicWave, qui crée une forme d'onde personnalisée à partir de coefficients de Fourier, nous le dit:

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.

Il y a aussi un imagination Paramètre que nous pouvons ignorer car les phases ne sont pas pertinentes pour cet exemple. Créons donc un tableau de ces coefficients (les estimant à 0,4, 0,4, 1, 1, 1, 0,3, 0,7, 0,6, 0,5, 0,9, 0,8 basé sur la luminosité des lignes du spectrographe à partir du bas). Nous créons ensuite un oscillateur personnalisé à partir de ce tableau et synthétins le son résultant.

<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>

Voir l'oscillateur personnalisé du stylo: Horn par Seb Molines (@Clafou) sur Codepen.

Pas exactement un son apaisant, mais étonnamment près du son enregistré. Bien s?r, la synthèse sonore va bien au-delà du spectre seule - en particulier, les enveloppes sont un aspect tout aussi important du timbre.

des données du signal aux tables de Fourier

Il est inhabituel de créer des coefficients de Fourier à la main comme nous l'avons fait (et peu de sons sont aussi simples que notre son de cor qui n'est composé que de partiels harmoniques, c'est-à-dire des multiples de F). En règle générale, les tables de Fourier sont calculées en alimentant les données du signal réel dans un algorithme inverse FFT (Fast Fourier Transform). Vous pouvez trouver des coefficients de Fourier pour une sélection de sons dans le référentiel de chrome, parmi lequel est le son d'orgue joué ci-dessous:

Voir l'oscillateur personnalisé du stylo: organe par Seb Molines (@clafou) sur codepen.

La bibliothèque open source DSP.js vous permet de calculer ces coefficients de Fourier à partir de vos propres exemples de données. Nous allons maintenant le démontrer pour produire une forme d'onde spécifique.

Oscillateur à basse fréquence: Tone de sirène de police

Une sirène de la police américaine oscille entre une basse et une fréquence élevée. Nous pouvons y parvenir en utilisant l'API Web Web en connectant deux oscillateurs. La première (un oscillateur à basse fréquence, ou LFO) module la fréquence de la seconde qui produit elle-même les ondes sonores audibles. Pour déconstruire la vraie chose, tout comme auparavant, nous prenons le spectrographe d'un son de sirène de police du même enregistrement. Plut?t que des lignes horizontales, nous voyons maintenant une forme d'onde en forme de nageoire de requin représentant la modulation du ton rythmique de la sirène. Les oscillateurs standard ne prennent en charge que les formes d'onde sinuso?dales, carrées, de dents de scie et en forme de triangle, nous ne pouvons donc pas compter sur ceux pour imiter cette forme d'onde spécifique. Mais nous pouvons à nouveau créer un oscillateur personnalisé. Tout d'abord, nous avons besoin d'un tableau de valeurs représentant la courbe souhaitée. La fonction suivante produit de telles valeurs, que nous fourrons dans un tableau appelé SharkFinvalues.

Voir la fonction de forme d'onde de Pen pour une modulation de tonalité de sirène par Seb Molines (@Clafou) sur Codepen.

Ensuite, nous utilisons DSP.js pour calculer les coefficients de Fourier à partir de ces données de signal. Nous obtenons les tableaux réels et d'imag que nous utilisons ensuite pour initialiser notre LFO.

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.

Enfin, nous créons le deuxième oscillateur et connectons le LFO à sa fréquence, via un n?ud de gain pour amplifier la sortie du LFO. Notre spectrographe montre que la forme d'onde dure environ 380 ms, nous avons donc réglé la fréquence du LFO à 1 / 0,380. Cela nous montre également que le ton fondamental de la sirène varie d'un minimum d'environ 750 Hz à un sommet d'environ 1650 Hz (une médiane de 1200 Hz ± 450 Hz), nous avons donc fixé la fréquence de l'oscillateur à 1200 et le gain du LFO à 450. Nous pouvons maintenant commencer les deux oscillateurs pour entendre notre sirène de police.

<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>

Voir la sirène Pen par Seb Molines (@Clafou) sur Codepen.

Pour plus de réalisme, nous pourrions également appliquer une forme d'onde personnalisée au deuxième oscillateur, comme nous l'avons montré avec le son de cor.

Conclusion

Avec leur utilisation de Fourier Transforts, les oscillateurs personnalisés offrent aux développeurs audio Web un moyen facile de synthétiser des tons complexes et d'automatiser entièrement les effets personnalisés tels que la forme d'onde de la sirène que nous avons démontrée. La synthèse sonore est beaucoup plus flexible que de travailler avec des échantillons audio. Par exemple, il est facile de construire sur cet effet de sirène pour ajouter plus d'effets, comme je l'ai fait pour ajouter un décalage Doppler dans cette application mobile. La spécification ?puis-je utiliser? montre que l'API audio Web profite d'un large support de navigateur, à l'exception de IE. Tous les navigateurs ne sont pas à jour avec la dernière norme W3C, mais un correctif de singe est disponible pour aider à écrire du code cross-browser. Android L ajoutera une prise en charge de l'API audio Web au WebView, ce que iOS fait depuis la version 6. C'est le moment idéal pour commencer à expérimenter!

Questions fréquemment posées (FAQ) sur l'utilisation de transformations de Fourier avec API audio Web

Quelle est l'API audio Web et comment fonctionne-t-elle?

L'API audio Web est une API JavaScript de haut niveau pour le traitement et la synthèse de l'audio dans les applications Web. Il permet aux développeurs de choisir des sources audio, d'ajouter des effets à l'audio, de créer des visualisations audio, d'appliquer des effets spatiaux (tels que le panoramique) et bien plus encore. Il fonctionne en créant un contexte audio à partir de laquelle une variété de n?uds audio peuvent être créés et connectés ensemble pour former un graphique de routage audio. Chaque n?ud remplit une fonction audio spécifique telle que la production de son, la modification du volume ou l'application d'un effet audio.

Comment fonctionne la transformée de Fourier dans l'API audio Web?

La transformée de Fourier est une méthode mathématique qui transforme une fonction du temps, un signal, en fonction de la fréquence. Dans le contexte de l'API audio Web, il est utilisé pour analyser les fréquences présentes dans un signal audio. Cela se fait à l'aide de l'interface AnalyserNode, qui fournit des informations d'analyse en fréquence et du domaine temporel en temps réel. La transformée de Fourier est utilisée pour convertir les données du domaine temporel en données de domaine de fréquence, qui peuvent ensuite être utilisées à diverses fins telles que la création de visualisations audio.

Qu'est-ce que la propriété FFTSize dans l'API audio Web?

La propriété FFTSize de l'API audio Web est utilisée pour définir la taille de la transformée de Fourier rapide (FFT) à utiliser pour déterminer le domaine de fréquence. Il s'agit d'une puissance de deux valeur qui détermine le nombre d'échantillons qui seront utilisés lors de l'exécution de la transformée de Fourier. Plus la valeur est élevée, plus il y a de bacs de fréquence et plus les données de fréquence seront détaillées. Cependant, une valeur plus élevée signifie également plus de puissance de calcul. puis utiliser ces données pour créer des représentations visuelles. Cela se fait généralement à l'aide de l'interface Analysernode, qui fournit des informations d'analyse en fréquence et du domaine temporel en temps réel. Ces données peuvent ensuite être utilisées pour créer des visualisations telles que des graphiques de forme d'onde ou des graphiques de spectre de fréquence. La méthode spécifique de création de la visualisation dépendra du type de visualisation que vous souhaitez créer et de la bibliothèque ou de l'outil que vous utilisez pour créer les graphiques.

Comment puis-je utiliser l'API audio Web pour appliquer des effets à l'audio ?

L'API audio Web fournit une variété de n?uds qui peuvent être utilisés pour appliquer des effets à l'audio. Ceux-ci incluent Gainnode pour la modification du volume, BiquadFilternODODOD pour appliquer une variété d'effets de filtre, Convolvernode pour appliquer des effets de convolution tels que la réverbération, et bien d'autres. Ces n?uds peuvent être créés à partir du contexte audio, puis connectés dans un graphique de routage audio pour appliquer les effets souhaités à l'audio.

Quelles sont les utilisations courantes de l'API audio Web?

Le L'API audio Web est couramment utilisée à diverses fins dans les applications Web. Il s'agit notamment de jouer et de contr?ler l'audio, d'ajouter des effets sonores aux jeux, de créer des visualisations audio, d'appliquer des effets spatiaux à l'audio pour les applications de réalité virtuelle, et bien plus encore. Il fournit un moyen puissant et flexible de travailler avec l'audio dans les applications Web.

Comment puis-je contr?ler la lecture de l'audio à l'aide de l'API Web Audio?

L'API Web Audio fournit plusieurs méthodes pour contr?ler la lecture de l'audio. Cela comprend la possibilité de démarrer et d'arrêter l'audio, d'ajuster le taux de lecture et de rechercher différentes parties de l'audio. Cela se fait généralement à l'aide de l'interface AudiobuffersourCenode, qui représente une source audio composée de données audio en mémoire.

Quelles sont les limites de l'API audio Web?

Pendant que l'API audio Web est puissant et flexible, il a certaines limites. Par exemple, il nécessite un navigateur moderne qui prend en charge l'API, et il peut être complexe à utiliser pour des taches de traitement audio plus avancées. De plus, comme il s'agit d'une API de haut niveau, elle peut ne pas fournir le niveau de contr?le nécessaire pour certaines applications par rapport aux API de niveau inférieur.

Puis-je utiliser l'API audio Web pour enregistrer l'audio?

Oui, l'API audio Web peut être utilisé pour enregistrer l'audio, bien que ce ne soit pas son objectif principal. Cela se fait généralement à l'aide de l'interface MediaStreamaudiosourCenode, qui représente une source audio composée d'un flux multimédia (comme à partir d'un microphone ou d'un autre appareil d'entrée audio).

Comment puis-je en savoir plus sur l'API audio Web?

Il existe de nombreuses ressources disponibles pour en savoir plus sur l'API audio Web. Le Mozilla Developer Network (MDN) fournit une documentation complète sur l'API, y compris les guides et les tutoriels. Il existe également de nombreux tutoriels et cours en ligne disponibles sur des sites Web comme CodeCademy, Udemy et Coursera. De plus, plusieurs livres sont disponibles sur le sujet, tels que ?Web Audio API? de Boris Smus.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!