Dans le cadre de l'intégration de MediaStream avec WebRTC, l'API Web Audio a récemment reçu une gemme secrète appelée createMediaElementSource(). En gros, il vous permet de connecter un élément <audio> HTML5 en tant que source d'entrée à l'API. En termes simples, vous pouvez visualiser l'audio HTML5, effectuer des mutations sonores en temps réel, filtrer, etc.
Normalement, l'API Web Audio charge un titre via XHR2, une entrée de fichier, etc., et vous pouvez commencer. À la place, ce hook vous permet de combiner <audio> HTML5 avec la visualisation, le filtrage et la puissance de traitement de l'API Web Audio.
L'intégration de <audio> est idéale pour le streaming d'assets audio assez longs. Imaginons que votre fichier dure deux heures. Vous ne voulez pas décoder l'intégralité de cette chaîne. Il est également intéressant si vous souhaitez créer une API (et une UI) de lecteur multimédia de haut niveau pour la lecture/la mise en pause/la recherche, mais que vous souhaitez appliquer un traitement/une analyse supplémentaires.
En voici un aperçu :
// Create an <audio> element dynamically.
var audio = new Audio();
audio.src = 'myfile.mp3';
audio.controls = true;
audio.autoplay = true;
document.body.appendChild(audio);
var context = new webkitAudioContext();
var analyser = context.createAnalyser();
// Wait for window.onload to fire. See crbug.com/112368
window.addEventListener('load', function(e) {
// Our <audio> element will be the audio source.
var source = context.createMediaElementSource(audio);
source.connect(analyser);
analyser.connect(context.destination);
// ...call requestAnimationFrame() and render the analyser's output to canvas.
}, false);
Comme indiqué dans le code, il existe un bug qui nécessite que la configuration de la source se produise après window.onload.
L'étape suivante consiste à corriger crbug.com/112367. Une fois que vous aurez terminé, vous pourrez connecter WebRTC (en particulier l'API navigator.getUserMedia()) pour acheminer l'entrée audio (micro, mixeur, guitare, par exemple) vers une balise <audio>, puis la visualiser à l'aide de l'API Web Audio. Méga boom !