Als onderdeel van de MediaStream-integratie met WebRTC heeft de Web Audio API onlangs een undercover juweeltje geland dat bekend staat als createMediaElementSource() . In principe kunt u hiermee een HTML5 <audio> -element als invoerbron aan de API koppelen. In termen van de leek...je kunt HTML5-audio visualiseren, realtime geluidsmutaties uitvoeren, filteren, enz.!
Normaal gesproken werkt de Web Audio API door een nummer te laden via XHR2 , bestandsinvoer, wat dan ook, ... en je bent vertrokken. In plaats daarvan kunt u met deze hook HTML5 <audio> combineren met de visualisatie-, filter- en verwerkingskracht van de Web Audio API.
Integratie met <audio> is ideaal voor het streamen van redelijk lange audio-items. Stel dat uw bestand 2 uur lang is. Je wilt dat hele ding niet decoderen! Het is ook interessant als je een mediaspeler-API (en UI) op hoog niveau wilt bouwen voor afspelen/pauzeren/zoeken, maar wat extra verwerking/analyse wilt toepassen.
Hier is hoe het eruit ziet:
// 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);
Zoals opgemerkt in de code, is er een bug die vereist dat de bronconfiguratie plaatsvindt na window.onload .
De volgende logische stap is het repareren van crbub.com/112367 . Zodra die puppy klaar is, kun je WebRTC (met name de navigator.getUserMedia() API) aansluiten om audio-invoer (bijvoorbeeld microfoon, mixer, gitaar) naar een <audio> -tag te leiden, en deze vervolgens te visualiseren met behulp van de Webaudio-API. Mega boem!