2 - Multimedia, audio

Michel Buffa
Juin 2016

buffa@unice.fr

L'élément <audio> !

Voici l'élément <audio> ! 

<audio controls
  src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.oga">
Votre navigateur ne supporte pas l'élément audio.
</audio>

Ou encore...

<audio controls="controls">
    <source src="song.ogg" type="audio/ogg" />
    <source src="/song.mp3" type="audio/mp3" />
    Votre navigateur ne supporte pas l'élément audio.
</audio>

Comme l'élément the <video>, l'élément <audio> a une API JavaScript API, et on peut lui associer des éléments <track>

Web Audio API

Web Audio API (Chrome and Firefox Aurora, experimental)

 try {
   var context = new AudioContext();
   ...
}
 catch(e) {
   alert('Web Audio API n'est pas supporté par votre navigateur');
}

Les échantillons sont en mémoire vive (pas de streaming),

Jeux, applications musicales, etc.

Modèle de graphe pour les traitements temps réel.

Exemple qui charge un son en Ajax,le stocke en mémoire puis le joue

Chargement d'un son avec Xhr2

var dogBarkingBuffer = null;
var context = new AudioContext();

function loadDogSound(url) {
 var request = new XMLHttpRequest();
 request.open('GET', url, true);
 request.responseType = 'arraybuffer';

 // Decode asynchronously
 request.onload = function() {
   context.decodeAudioData(request.response, function(buffer) {
     dogBarkingBuffer = buffer;
   }, onError);
 }
 request.send();
}

Construire un graphe pour jouer le son

var context = new AudioContext();
function playSound(buffer) {
// create sound source
  var source = context.createBufferSource();
// What to play, an audio buffer
  source.buffer = buffer;
// connect source to destination (speakers in that case)
  source.connect(context.destination);
// Play the sound
source.start(0);
}

On peut rajouter des noeuds de traitement de son entre la source et la destination

// Create the filter
var filter = context.createBiquadFilter();
// Create the audio graph.
source.connect(filter);
filter.connect(context.destination);
// Create and specify parameters for the low-pass filter.
filter.type = "lowpass"; // Low-pass filter. See BiquadFilterNode docs
filter.frequency.value = 440; // Set cutoff to 440 HZ
// Playback the sound.
source.start(0);

Exemple précédent avec un filtre passe bas (online)

getUserMedia existe aussi pour capturer le son !

function gotStream(stream) {
    var context = new AudioContext();

    // Create an AudioNode from the stream.
    var mediaStreamSource =
         audioContext.createMediaStreamSource( stream );

    // Connect it to the destination to hear yourself
    // (or any other node for processing!)
    mediaStreamSource.connect( audioContext.destination );
}

navigator.getUserMedia( {audio:true}, gotStream );

Démonstration !

Génération de sons / instruments virtuels

var context = new AudioContext();

// Create a source node with 1024, the number of samples to generate
// on each call. 0, our node has NO INPUTS as far as we just want to generate sound
// 2 for stereo...
var node = context.createScriptProcessor(1024, 0, 2);

// Specify the audio generation function
node.onaudioprocess = generateAudio;

// Connect the node to a destination, i.e. the audio output.
node.connect(context.destination);

Complete source code