Introduction à l'API Web Audio

HTML5 avec connectivité / temps réel, CSS3 / Styles, accès aux appareils, graphisme 3D & effets, multimédia, performance et intégration, sémantique et stockage local

Par

TechnoCompétences

Introduction à l'interface de programmation Web Audio

  1. À propos
  2. Multimédia sur le Web sans plugiciel
  3. Retour sur les éléments multimédias
  4. Faiblesses de l'élément audio
  5. Que peut on faire de plus avec l'API Web Audio
  6. L'API Web Audio
  7. Exemple theremin
  8. Bonus : Device Orientation API

Retour sur l'élément <audio>

<article> <h1>Belle petite musique utile quand nous gagnons au jeu!</h1> <audio controls> <source src="audio/utwig.wav"> </audio> </article>

Retour sur l'élément <audio>

<article> <h1>Belle petite musique utile quand nous gagnons au jeu!</h1> <audio controls> <source src="audio/utwig.wav"> </audio> </article>

Belle petite musique utile quand nous gagnons au jeu!


Faiblesse de l'élément audio

Qu'est que l'API Web Audio et peut-on l'utiliser ?

Que peut on faire de plus avec l'API Web Audio ?

Exemples

Les base de l'API Web Audio ?

function getAudioContext() { var context = null; if (!Modernizr.webaudio) { console.log("Votre navigateur ne prends pas en charge l'API WebAudio"); } if (!!window.AudioContext) { context = new AudioContext(); } else { if (!!window.webkitAudioContext) { context = new webkiAudioContext(); } } return context; }
Création d'un contexte audio

Bonus : Chargement de fichier binaire avec XMLHttpRequest 2

function loadSound(url) { var request = new XMLHttpRequest(); request.open('GET', url, true); request.responseType = 'arraybuffer'; request.onload = function() { context.decodeAudioData(request.response, function(buffer) { playSound(buffer, 0); }, onError); } request.send(); }

Array typés en Javascript

var buffer = new ArrayBuffer(16); var int32View = new Int32Array(buffer); var int16View = new Int16Array(buffer); [0,2,4,8] [0,0,2,0,4,0,8]
Exemple ArrayBuffer et Typed Arrays (source : https://developer.mozilla.org/en-US/docs/JavaScript_typed_arrays)

Décoder et jouer un son à partir d'un buffer de données

Lien vers l'exemple décodage de son

Décoder et jouer un son à partir d'un buffer de données

context.decodeAudioData(request.response, function(buffer) { playSound(buffer, 0); }, onError); ... function playSound(buffer, time) { /* Pris de http://www.html5rocks.com/en/tutorials/webaudio/intro/ */ var source = context.createBufferSource(); // creer la source du son source.buffer = buffer; // specifie a la source quel son elle doit jouer source.connect(context.destination); // connete la source a la destination (les hauts parleurs) source.noteOn(time); // joue le son (time = 0 -> sans arrêt) }

Source, noeuds et destination

Source, noeuds et destination

Comment fonctionne un synthétiseur anaogique ?

Synthé modulaire analogique
Source : Wikipedia

Exemple : construisons un Theremin en HTML!

Lien vers l'exemple

Theremin
Source : Wikipedia