L'API Web Audio qu'est-ce que c'est?

Ne t'inquiète pas, c'est ici! Une API qui non seulement blanchit les dents et améliore votre posture, mais ajoute du son à votre site Web de manière merveilleuse *. C'est l'API Web Audio! Jamais entendu parler? Ne t'inquiète pas. Ce tutoriel vous permettra de démarrer en un rien de temps.

L'API Web Audio est un moyen sophistiqué de créer et de manipuler du son directement dans le navigateur via JavaScript. Il vous permet de générer de l'audio à partir de zéro ou de charger et manipuler tout fichier audio existant que vous pourriez avoir. Il est extrêmement puissant, même avec son propre système de chronométrage pour une lecture en une fraction de seconde..

«Je ne peux pas utiliser le element? ”Bien, oui, mais cela dépend vraiment de votre cas d'utilisation. le L'élément est parfait pour incorporer et lire des clips audio tels que de la musique ou des podcasts, mais si vous avez besoin d'un peu plus de contrôle, comme le contrôle de volume par programme ou l'ajout d'effets, l'API Web Audio sera parfaitement adaptée à votre Tin Pan Alley..

Faire un son

Passons à l'action. Pour commencer à jouer avec l'API Web Audio, nous devons nous assurer que nous utilisons un navigateur qui le prend en charge. Vérifions caniuse.com. On dirait que la prise en charge du navigateur est plutôt bonne. Seul Internet Explorer ne prend pas en charge l'API pour le moment, mais cela changera bientôt, car il est actuellement mis en œuvre pour être inclus dans la prochaine version majeure..

Gardons les choses simples en créant une page HTML de base avec un

AudioContext est un petit conteneur dans lequel tout notre son vivra. Il donne accès à l’API Web Audio, ce qui nous permet d’accéder à des fonctions très puissantes. Avant de poursuivre, il est essentiel de comprendre un concept important de l’API Web Audio: les nœuds..

Noeuds

Prenons l'exemple de Brian May, astrophysicien aux cheveux bouclés et guitariste de Queen. Lorsque Brian veut jouer de la guitare, il prend l’avance sur sa guitare et la connecte à une pédale à effet semblable à une pédale de distorsion. Il connecte ensuite une autre sortie de sa pédale de distorsion à un autre effet ou à son amplificateur. Cela permet au son de voyager de sa guitare, d’être manipulé, puis envoyé à un haut-parleur afin que les gens puissent entendre ses riffs rock. C’est exactement comment l’API Web Audio fonctionne. Le son est transmis d’un nœud à l’autre, puis manipulé, puis transmis à vos haut-parleurs..


Voici un exemple de base. Ajoutez ce qui suit à votre > étiquette.

var context = new AudioContext (), oscillator = context.createOscillator (); // Connectez l'oscillateur à nos enceintes oscillator.connect (context.destination);

Ici, nous avons créé un oscillateur. Un oscillateur est un type de générateur de son qui nous fournira une tonalité simple. Nous avons pris les devants de l’oscillateur et l’avons connecté à nos haut-parleurs, connus dans le monde de l’audio Web comme contexte.destination.

Maintenant que tout est connecté, il suffit de démarrer l'oscillateur pour pouvoir l'entendre. Assurez-vous que vos haut-parleurs ne sont pas montés trop fort!

// Démarrer l'oscillateur maintenant oscillator.start (context.currentTime);

Vous devriez maintenant entendre quelque chose lorsque votre page se charge. Pour arrêter votre oscillateur après quelques secondes, ajoutez simplement le texte suivant.

// Arrête l'oscillateur dans 3 secondes oscillator.stop (context.currentTime + 3);

Entendre quelque chose? Bien joué, vous venez de faire du son dans le navigateur!

Fichiers audio

Maintenant, vous pensez peut-être “Oscillateurs?! Je n'ai pas le temps pour ça, je suis un homme d'affaires important avec beaucoup de réunions et de déjeuners d'affaires où aller! », Ce qui est parfaitement correct. Faire du son de cette façon n'est pas pour tout le monde. Heureusement, il y a un autre moyen.

Supposons que vous souhaitiez lire un fichier mp3 ordinaire. L'API Web Audio peut également le faire. Nous devons d’abord charger le fichier audio via notre vieil ami, XMLHttpRequest. Rappelez-vous que lors du chargement de fichiers en utilisant cette méthode, votre page devra être servie via un serveur et pas seulement chargée à partir de votre système de fichiers local. Pour éviter toute complication, assurez-vous que votre fichier mp3 est servi de la même manière et à partir du même endroit..

var request = new XMLHttpRequest (); request.open ('GET', 'my.mp3', true); request.responseType = 'arraybuffer'; request.onload = function () var undecodedAudio = request.response; ; demande envoyée();

Lorsque le fichier audio est complètement chargé par le navigateur, le en charge L'événement se déclenche et renvoie les données audio dans l'attribut de réponse. À ce stade, il est stocké en tant que ArrayBuffer, mais pour en extraire les données audio, nous devons le convertir en un AudioBuffer. Pensez à AudioBuffer comme à un petit conteneur contenant nos données audio en mémoire pour nous. Pour ce faire, nous utilisons le decodeAudioData une fonction.

request.onload = function () var undecodedAudio = request.response; context.decodeAudioData (undecodedAudio, function (buffer) // Le contenu de notre mp3 est maintenant un AudioBuffer console.log (buffer);); ;

Une fois que nous avons un AudioBuffer contenant nos données audio, nous devons trouver un moyen de les lire. Vous ne pouvez pas jouer un AudioBuffer directement, il doit être chargé dans un dossier spécial. AudioBufferSourceNode. Ce nœud est comme un lecteur de disques, tandis que le tampon est le disque vinyle avec la musique. Ou pour mettre à jour mon analogie, le nœud est comme un magnétophone et le tampon est une cassette…

request.onload = function () var undecodedAudio = request.response; context.decodeAudioData (undecodedAudio, function (buffer) // Crée le AudioBufferSourceNode var sourceBuffer = context.createBufferSource (); // Indique à AudioBufferSourceNode d'utiliser ce AudioBuffer. sourceBuffer.buffer = buffer;); ;

Le disque est maintenant sur le lecteur de disques prêt à jouer. Mais rappelez-vous, nous utilisons l'API Web Audio, et l'API Web Audio requiert que nous connections des nœuds entre eux afin d'envoyer le son à nos haut-parleurs. Faisons donc ce que nous avons fait précédemment avec notre oscillateur et connectons notre noeud source à nos haut-parleurs (contexte.destination).

request.onload = function () var undecodedAudio = request.response; context.decodeAudioData (undecodedAudio, fonction (tampon) var sourceBuffer = context.createBufferSource (); sourceBuffer.buffer = tampon; sourceBuffer.connect (context.destination);); ;

Encore une fois, maintenant que tout est connecté, nous pouvons facilement commencer à lire le contenu du mp3 en indiquant à AudioBufferSourceNode de jouer à ce moment précis.. 

sourceBuffer.start (context.currentTime);

Belle!

Résumé

Dans ce didacticiel, nous avons appris à utiliser l'API Web Audio pour créer un son de manière native dans le navigateur, ainsi qu'à charger et lire un fichier mp3. L'API est capable de beaucoup plus, et j'ai hâte de vous montrer son potentiel dans les prochains tutoriels..

Tout le code de ce tutoriel est disponible sur GitHub.

* Malheureusement, l’API Web Audio ne prend actuellement pas en charge le blanchiment des dents ni l’amélioration de la posture..