L'audio HTML5 et l'API Web Audio sont plus performants

Eric Bidelman

Démonstration de l'élément de source multimédia
DÉMO

Dans le cadre de l'intégration de MediaStream avec WebRTC, l'API Web Audio a récemment lancé un gem d'infiltration appelé createMediaElementSource(). Elle vous permet de connecter un élément <audio> HTML5 en tant que source d'entrée à l'API. Pour faire simple, vous pouvez visualiser du contenu audio HTML5, effectuer des mutations sonores en temps réel, appliquer des filtres, etc.

Normalement, l'API Web Audio fonctionne en chargeant un titre via XHR2, en saisissant un fichier, etc., et vous n'avez plus rien à faire. Ce hook vous permet d'associer <audio> HTML5 à la visualisation, au filtrage et à la puissance de traitement de l'API Web Audio.

L'intégration à <audio> est idéale pour diffuser en streaming des éléments audio relativement longs. Imaginons que votre fichier dure deux heures. Vous ne voulez pas décoder tout cela. C'est également intéressant si vous souhaitez créer une API (et une interface utilisateur) de lecteur multimédia de haut niveau pour la lecture, la mise en pause et la lecture, mais si vous souhaitez appliquer un traitement ou 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, un bug nécessite que la configuration de la source soit effectuée après window.onload.

L'étape logique suivante consiste à corriger crbub.com/112367. Une fois que ce chiot est prêt, vous pourrez relier WebRTC (l'API navigator.getUserMedia() en particulier) pour canaliser l'entrée audio (par exemple, micro, table de mixage, guitare) à une balise <audio>, puis visualiser ce dernier à l'aide de l'API Web Audio. Méga boum !