Visualisierung der Mikrofon-Aufzeichnung
(EN google-translate)
(PL google-translate)
Bekannte Probleme:
|
<!DOCTYPE html> <html> <head lang="de"> <meta charset="iso-8859-1"> <script language:javascript> var malkontext = null; function prozess(e) { var data = e.inputBuffer.getChannelData(0); malkontext.fillStyle = "#000000"; malkontext.fillRect(0,0,1024,1000); malkontext.strokeStyle="#ffffff"; malkontext.beginPath(); var x1 = 0; var y1 = data[0]*200+200; malkontext.moveTo(x1,y1); for (var i = 1; i < data.length; i++) { var x2 = i; var y2 = data[i]*200+200; malkontext.lineTo(x2,y2); } malkontext.stroke(); } function initialisieren(e) { malkontext = document.getElementById("grafik").getContext("2d"); var context = new (window.AudioContext || window.webkitAudioContext)(); var volume = context.createGain(); //Ohne Volume-Knoten bleibt der Eingang stumm! var audioInput = context.createMediaStreamSource(e); audioInput.connect(volume); //1. Param.: Erlaubte Puffergroessen: 256, 512, 1024, 2048, 4096, 8192, 16384 //2. Param.: Anzahl der Input-Kanaele //3. Param.: Anzahl der Output-Kanaele //Fehler bei Chrome, wenn nicht mindestens ein Output! //var node = context.createScriptProcessor(1024, 1, 0); var node = context.createScriptProcessor(1024, 1, 1); node.onaudioprocess = function(e) { prozess(e) }; volume.connect (node); volume.gain.value=1.0; node.connect(context.destination); //"record" } if (!navigator.getUserMedia) { navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; } if (navigator.getUserMedia) { //Mikrofon-Zugriff beim Benutzer anfordern navigator.getUserMedia({audio:true}, initialisieren, function(e) { alert('Error capturing audio.'); }); } else { alert('getUserMedia not supported in this browser.'); } </script> </head> <body> <canvas id="grafik" width="1024" height="400"></canvas> </body> </html>
Code 0-1: Minimalsistischer Code zur Demonstration der Visualisierung von Mikrofondaten.