Web Audio API

Jan 28, 2016
christophe brochard

La Web Audio API permet de lire, manipuler et de synthétiser du son au sein d’une application web. Pour généraliser on peut jouer sur 3 objets différents : les sources, les filtres d’effets, l’analyseur.

Les sources

Les sources peuvent être n’importe quelle source audio à laquelle vous pourriez penser (microphone, soundcloud, balise <audio> etc). On peut aussi remarquer la possibilité de créer une onde sinusoïdale (dans cet exemple, la fréquence de la sinusoide créée dépend de la position du curseur http://mdn.github.io/violent-theremin/).

 

Les filtres d’effets

On peut obtenir des effets sur le son très développés comme le montre cette liste d’exemples : https://webaudiodemos.appspot.com/input/index.html.

Sont présents aussi les filtres de traitement de signal standards (pour ceux qui connaissent : gain, passe-bas, passe-haut, atténuation, etc).

 

l’analyseur

L’analyseur fournit en temps réel deux informations : le tableaux de fréquences de sortie (qui permet de représenter le spectre sonore du son joué http://webaudioapi.com/samples/visualizer/ ) et la forme de l’onde.

 

Fonctionnement

Tous ces composants sont organisés comme des noeuds à connecter entre eux.

 

Capture d’écran 2016-01-28 à 16.55.49
Prenons un exemple le plus simple possible, on veut jouer la note LA (=440Hz) et pouvoir changer le volume.


var audioCtxt = new window.AudioContext(), // Création du context audio
    sinusoide = audioCtxt.createOscillator(), // Création de la sinusoide
    volumeCtrl = audioCtxt.createGain(); // Création du filtre qui controle le volume

sinusoide.frequency.value = 440;
volumeCtrl.gain.value = 0.07;
sinusoide.start(0);

//Créations des connexions
sinusoide.connect(volumeCtrl);
volumeCtrl.connect(audioCtxt.destination);

// On baisse le volume toutes les 50 millisecondes 
monInterval = setInterval(function(){
    volumeCtrl.gain.value -= 0.001;
    if(volumeCtrl.gain.value &lt; 0) {
        volumeCtrl.gain.value = 0;				
        clearInterval(monInterval);
    }
}, 50);

On peut créer et connecter à tout moment autant de noeuds que l’on veut a une ou plusieurs destinations.

À part la transposition de logiciel de musique et de traitement du signal sur internet, l’exploitation de cette API n’en est (en grande partie) qu’au stade d’expérimentations (http://bruno-simon.com/lab/music-spinners/) et d’applications ludiques (http://dinahmoelabs.com/plink).

On peut tout de même imaginer que ces outils couplés à tout l’environnement qu’offre le web peut donner naissance à des projets très intéressants et innovants.

J’ai un peu de mal à imaginer une application directe pour renforcer l’UX de pages web où l’ajout de sons reste problématique. Par contre nul doute que cette API sera très utile pour les sites experientiels (http://www.unseen-music.com/yume/).

Grégoire Humbert, Développeur Front-end @ UX-Republic

JS-REPUBLIC est une société de services spécialisée dans le développement JavaScript. Nous sommes centre de formation agréé. Retrouvez toutes nos formations techniques sur notre site partenaire dédié au Training

No comments

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *