Introduction à l’API Web Audio
L’API Web Audio est un outil puissant qui permet aux développeurs de contrôler et de manipuler l’audio dans les applications Web. De l’amélioration de la qualité sonore des appels vidéo à l’ajout d’effets sonores dynamiques dans les jeux Web, l’API offre flexibilité et puissance. Dans ce blog, nous expliquerons comment modifier les flux de microphones à l’aide de l’API Web Audio, avec des exemples pratiques concrets pour des scénarios tels que la vidéoconférence, la diffusion en direct et les jeux en ligne.
Nous couvrirons trois étapes :
- Création d’un nœud source à partir du flux du microphone à l’aide de l’interface AudioContext.
- Modification de la piste avec des fonctionnalités Web Audio telles que le réglage du gain, les filtres et les compresseurs.
- Création d’un nœud de destination et remplacer le flux d’origine par celui modifié.
Étape 1 Création d’un nœud source à partir du flux microphone –
Pour commencer à modifier l’audio, nous devons créer un AudioContext et obtenir un flux de microphone. En utilisant getUserMedia(), nous pouvons capturer l’entrée du microphone et la convertir en un nœud source pouvant être manipulé par l’API Web Audio.
Compatibilité entre navigateurs
Différents navigateurs peuvent gérer la création de sources différemment. Par exemple, Firefox nécessite l’utilisation de createMediaStreamTrackSource() au lieu de createMediaStreamSource(). Cette variation doit être gérée lors de la création d’applications sur plusieurs plates-formes.
Pour chrome/safari –
création du nœud source dans Chrome
Pour Mozilla Firefox –
création du nœud source dans Mozilla Firefox
Étape 2 Modification de la piste –
Maintenant que nous disposons du flux du microphone, explorons comment le modifier pour des scénarios réels, tels que la diffusion en direct et la réduction du bruit dans les appels audio.
Exemple 1 : augmentation du volume pour la diffusion en direct
Si vous créez une plate-forme de diffusion en direct comme Twitch ou YouTube Live, vous devrez peut-être régler le volume du microphone. Par exemple, les utilisateurs voudront peut-être augmenter le volume s’ils parlent doucement ou s’ils souhaitent projeter leur voix plus clairement.
Voici comment utiliser un GainNode pour augmenter le volume du microphone :
créer un nœud de gain et appliquer une augmentation de 150 % au volume d’origine
Utilisez la méthode createGain() pour créer un GainNode à partir de l’interface AudioContext. En utilisant ce GainNode, vous pouvez régler dynamiquement le volume du microphone dans votre application de diffusion en direct. Soyez toutefois prudent avec des valeurs de gain supérieures à 5, car cela peut provoquer une distorsion audio. Une fois les valeurs définies, connectez le gainNode à l’objet nœud source créé à l’étape 1.
Exemple 2 : réduire le bruit de fond pour des appels plus clairs
Dans des scénarios réels comme les appels vidéo ou les cours en ligne, la réduction du bruit de fond peut considérablement améliorer la clarté de l’audio. Vous pouvez utiliser un filtre passe-haut pour supprimer les bruits basse fréquence et un filtre passe-bas pour bloquer les sons haute fréquence.
Voici un exemple qui applique les deux filtres pour se concentrer sur les fréquences de la voix humaine (100 Hz à 9 000 Hz) :
Pour cela, nous devons créer deux filtres : un filtre passe-haut et un filtre passe-bas. Le passe-haut agira comme une barrière pour bloquer l’audio au-dessus d’une certaine fréquence et le filtre passe-bas bloquera l’audio en dessous d’une certaine fréquence. Créer un objet filtre biquad à l’aide d’un objet d’interface contextuelle audio
Créez un filtre passe-haut et passe-bas à l’aide de la méthode createBiquadFilter() et appliquez le type et la fréquence à chacun d’eux pour créer une plage de fréquences.
Cette configuration peut améliorer considérablement la communication dans les applications de conférence comme Zoom ou Google Meet en éliminant le bruit de fond et en se concentrant sur la clarté de la voix.
Il existe de nombreux autres filtres biquad qui peuvent être utilisés à diverses fins. La documentation Mdn fournit des cas d’utilisation détaillés pour chacun d’entre eux. Découvrez le Documentation du filtre biquad audio Web MDN
Exemple 3 : Équilibrer l’audio pour le podcasting ou le streaming
Dans les scénarios de podcasting ou de diffusion en direct, l’équilibrage audio est essentiel. Un compresseur est souvent utilisé pour garantir que les niveaux audio restent cohérents, réduisant les sons forts et amplifiant les sons faibles.
Voici comment implémenter un compresseur :
ajout d’un nœud de compresseur avec des paramètres à l’aide de la méthode setValueAtTime()
Paramètres du compresseur expliqués :
Seuil (-20dB) : Il s’agit du niveau de volume auquel la compression commence. Les sons supérieurs à -20 dB seront atténués.
Genou (40dB): Cela adoucit la rapidité avec laquelle la compression entre en jeu, rendant la réduction du volume plus douce et moins brusque.
Rapport (4:1) : Pour chaque tranche de 4 dB au-dessus du seuil, seul 1 dB passe. Cela contrôle dans quelle mesure les sons forts sont réduits.
Attaque (0,3 seconde) : C’est la rapidité avec laquelle le compresseur commence à fonctionner lorsque le son devient trop fort. Un court delay permet de conserver l’impact initial du son.
Relâcher (0,25 seconde): Il s’agit du temps nécessaire au compresseur pour s’arrêter une fois que le son est tombé en dessous du seuil, garantissant ainsi des transitions en douceur vers un volume normal.
Ce type de compression est idéal pour créer un flux audio équilibré de qualité professionnelle en temps réel. N’hésitez pas à jouer avec ces valeurs pour obtenir une qualité audio selon vos besoins.
Filtres supplémentaires à explorer –
Nœud Convoluteur : Outre les ajustements de gain et de fréquence, vous pouvez utiliser le nœud Convolver pour ajouter des effets de réverbération. Cela peut simuler différents environnements acoustiques, par exemple en faisant sonner votre voix comme si vous étiez dans une grande salle ou une petite pièce.
Filtre de pointe : Une autre option est le Peaking Filter, qui vous permet d’augmenter ou de réduire une bande de fréquence spécifique. Cela peut aider à accentuer certaines tonalités vocales ou à réduire les fréquences problématiques dans votre audio.
Pour des informations plus détaillées sur ces filtres et d’autres, vous pouvez explorer le Documentation de l’API Web Audio MDN.
Étape 3 Création d’un nœud de destination et remplacement de la piste d’origine –
Une fois que vous avez appliqué vos modifications, l’étape suivante consiste à créer un nœud de destination pour générer le flux modifié. Ceci est essentiel dans les applications WebRTC où vous souhaitez envoyer le flux modifié au lieu de celui d’origine.
Une fois que vous avez apporté des modifications à la piste audio à l’aide du contexte audio, nous devons maintenant connecter la source à la destination. Pour cela, utilisez la méthode createMediaStreamDestination() pour créer un nœud de destination et connectez le dernier nœud filtré modifié au nœud de destination.
Obtenez la liste des expéditeurs locaux (piste audio en cours d’envoi) et utilisez la méthode replaceTrack() pour la remplacer par la piste de flux modifiée.
connecter le dernier nœud de filtre modifié au nœud de destination et remplacer la piste d’origine par une piste modifiée
Pièges potentiels et compatibilité entre navigateurs
- Distorsion audio: Une augmentation excessive du gain peut entraîner une distorsion. Testez toujours vos niveaux de gain pour éviter l’écrêtage audio, en particulier lorsque vous travaillez dans des environnements à volume élevé.
- Problèmes de latence: L’application de plusieurs effets audio tels que des filtres, des compresseurs et des réglages de gain peut introduire une latence, en particulier dans les communications en temps réel. Testez votre application sur différents réseaux pour garantir un délai minimal.
- Compatibilité du navigateur: L’API Web Audio présente quelques incohérences entre les navigateurs. Comme indiqué précédemment, Firefox nécessite createMediaStreamTrackSource(), tandis que Chrome et Safari utilisent createMediaStreamSource(). Assurez-vous de gérer ces différences pour éviter de casser votre application sur des navigateurs spécifiques.
- Des outils tels que Modernizr peuvent aider à détecter les capacités du navigateur et garantir une fonctionnalité fluide entre les navigateurs.
Conclusion :
L’API Web Audio offre une boîte à outils puissante pour améliorer et manipuler l’audio en temps réel, ce qui la rend idéale pour les applications de vidéoconférence, de diffusion en direct et de jeux. En comprenant comment créer des nœuds sources, appliquer des effets tels que le gain, les filtres et les compresseurs, et gérer la compatibilité entre navigateurs, vous pouvez créer des expériences audio immersives et de qualité professionnelle.
Des plateformes comme Discord, Twitch et Google Meet s’appuient fortement sur l’API Web Audio pour offrir aux utilisateurs des expériences audio claires et dynamiques. À mesure que les technologies Web continuent d’évoluer, l’API Web Audio restera essentielle pour créer des applications Web attrayantes et riches en sons.
Pour un apprentissage plus approfondi, consultez le Documentation de l’API Web Audio MDN.
VOUS TROUVEZ CELA UTILE ? PARTAGEZ-LE
Source link