kramann.info
© Guido Kramann

Visualisierung der Mikrofon-Aufzeichnung

(EN google-translate)

(PL google-translate)

Bekannte Probleme:

Es muß ein Mikrofon verfügbar sein (nicht der Fall bei Laptops vom mobilen PC-Pool, ggf. Headset anschließen)
Das Mikrofon muß aktiviert sein (Auswählen über PulseAudio Lautstärke: Eingabegeräte )
Firefox beendet Streaming nach einigen Sekunden (Chrome und Opera funktionieren)
Bei Chrome und Opera kann nicht 0 Audioausgänge gewählt werden, d.h. Fehler, wenn: context.createScriptProcessor(1024, 0, 1)

<!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.