API audio Web: Ajoutez un son adapté à la bande passante à votre page Web

Déverrouiller le navigateur Power Audio: un guide de l'API audio Web

L'API audio Web permet aux développeurs d'intégrer un traitement audio sophistiqué directement dans les pages Web à l'aide de JavaScript, éliminant le besoin de plugins. Ceci est particulièrement bénéfique pour les applications Web fréquemment accessibles via des réseaux à faible bande passante, car il permet une synthèse sonore en utilisant diverses formes d'onde, résultant en des tailles de fichiers plus petites par rapport à l'audio préenregistré.

Source: mdn

Caractéristiques clés et support du navigateur:

L'API audio Web bénéficie d'un large support entre les principaux navigateurs, notamment Chrome, Edge, Firefox, Opera et Safari (bien que le support de Safari ait été expérimental au moment de la rédaction et peut nécessiter des préfixes WebKit). Le noyau de l'API est le constructeur AudioContext, fournissant des méthodes pour créer et connecter divers AudioNodes. Ces nœuds, conformes à l'interface AudioNode, peuvent être enchaînés en utilisant la méthode connect() pour créer des graphiques audio complexes.

Puis-je utiliser Audio-API? (Vérifiez la compatibilité du navigateur ici)

Bâtiment des graphiques audio:

AudioNodes se diviser en trois catégories:

• nœuds source: générer ou saisir l'audio (par exemple, MP3 fichiers, sons synthétisés).
• Nœuds d'effet: Modifier les signaux audio (par exemple, GainNode, Panning).
• nœuds de destination: Sortir l'audio de l'appareil de l'utilisateur (accessible via AudioContext.destination).

L'exemple suivant montre une lecture d'un MP3 en utilisant AudioBufferSourceNode:

Demo de codepen: lire un MP3 avec une API audio Web (Remplacez your-codepen-id-here par le codepen ID réel)

Synthèse sonore avec oscillatornode:

Au-delà de l'audio pré-enregistré, le OscillatorNode permet une génération de son en temps réel basé sur des formes d'onde spécifiées. Les types de formes d'onde incluent:

• 'sine': son lisse, sifflant.
• 'square': Sharp, souvent utilisé dans la conception du son de jeu rétro.
• 'triangle': un mélange d'ondes sinusoïdales et carrées.
• 'sawtooth': son fort et bourdonnant.

Cette capacité réduit considérablement les tailles de fichiers, cruciale pour maintenir les performances de l'application à travers des bandes passantes variables (2G à 4G). Un son synthétisé est considérablement plus petit qu'un fichier audio comparable. Par exemple, un exemple simple OscillatorNode codé comme un MP3 peut être seulement de 10 Ko, chargeant beaucoup plus rapidement sur les connexions plus lentes.

Demo de codepen: générer du son par oscillatornode (Remplacer your-codepen-id-here par l'ID de codepen réel)

Ajout de sons de notification:

Créons un son de notification en utilisant OscillatorNode et GainNode. Le GainNode contrôle l'amplitude audio (volume). AudioParam (une interface exposée par GainNode et OscillatorNode) permet de définir et de planifier des changements progressifs dans des valeurs telles que la fréquence et le gain, créant des effets plus naturels. À l'aide de exponentialRampToValueAtTime, nous pouvons s'estomper en douceur dans et hors du son.

Demo de codepen: sons de notification par oscillatornode (remplacer your-codepen-id-here par l'ID de codepen réel)

Remarque importante sur Audionode Réutilisation: AudioNodes sont peu coûteux à créer. Pour rejouer un son, recréez le nœud au lieu d'essayer de le redémarrer.

Exploration plus approfondie:

Pour une plongée plus profonde dans l'API audio Web, considérez la série SITEPoint Premium Screencast, " Vous n'avez rien entendu encore! "

Questions fréquemment posées (FAQ):

(La section FAQ de l'entrée d'origine a été omise ici de sauvegarder de l'espace, mais il est fortement recommandé de l'inclure dans la sortie finale pour l'exhaustivité. Les informations fournies sont déjà couvertes dans le texte révisé ci-dessus.)

Cette sortie révisée maintient le contenu d'origine tout en améliorant la lisibilité et le flux. N'oubliez pas de remplacer les liens de codePen d'espace réservé avec les liens réels vers les démos.

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!