graph amplitude over time.

index.html

@@ -20,6 +20,7 @@
         </label>
         <h2>Received</h2>
         <textarea id="received-data" rows="10" cols="40"></textarea><br />
+        <canvas id="received-graph"></canvas>
       </div>
     </div>
   </body>

index.js

@@ -5,6 +5,9 @@ var microphoneStream;
 var microphoneNode;
 var analyser;
 var receivedDataTextarea;
+var receivedGraph;
+var receivedData = [];
+var MAX_DATA_POINTS = 1024;
 
 var FREQUENCY_TONE = 500;
 
@@ -13,6 +16,7 @@ function handleWindowLoad() {
   sendButton = document.getElementById('send-button');
   isListeningCheckbox = document.getElementById('is-listening-checkbox');
   receivedDataTextarea = document.getElementById('received-data');
+  receivedGraph = document.getElementById('received-graph');
 
   // wire up events
   sendButton.addEventListener('click', handleSendButtonClick);
@@ -78,6 +82,11 @@ function analyzeAudio() {
 
   var frequencyIndex = Math.round(FREQUENCY_TONE / (audioContext.sampleRate / analyser.fftSize));
   const amplitude = frequencyData[frequencyIndex];
+  receivedData.unshift(amplitude);
+  if(receivedData.length > MAX_DATA_POINTS) {
+    receivedData.length = MAX_DATA_POINTS;
+  }
+  drawReceivedData();
   if(amplitude > 0) {
     receivedDataTextarea.value = `Frequency Detected. Amplitude: ${amplitude}`;
   } else {
@@ -87,5 +96,27 @@ function analyzeAudio() {
   requestAnimationFrame(analyzeAudio);
 }
 
+function drawReceivedData() {
+  const ctx = receivedGraph.getContext('2d');
+  const { width, height } = receivedGraph;
+  const segmentWidth = (1 / MAX_DATA_POINTS) * width;
+  ctx.clearRect(0, 0, width, height);
+  const sorted = receivedData.slice().sort((a, b) => a - b);
+  const min = sorted[0];
+  const max = sorted[sorted.length - 1];
+  const range = max - min;
+  ctx.beginPath();
+  for(let i = 0; i < MAX_DATA_POINTS && i < receivedData.length; i++) {
+    const value = receivedData[i];
+    const y = (1-(value / range)) * height;
+    if(i === 0) {
+      ctx.moveTo(0, y);
+    } else {
+      ctx.lineTo(segmentWidth * i, y)
+    }
+  }
+  ctx.stroke();
+}
+
 
 window.addEventListener('load', handleWindowLoad);