diff --git a/index.js b/index.js index 6e92c9b..b847faf 100644 --- a/index.js +++ b/index.js @@ -9,7 +9,8 @@ var receivedGraph; var receivedData = []; var MAX_DATA_POINTS = 1024; -var FREQUENCY_TONE = 500; +// 20 to 20,000 - human +var FREQUENCY_TONE = 18000; function handleWindowLoad() { // grab dom elements @@ -39,7 +40,7 @@ function handleSendButtonClick() { oscillator.frequency.setValueAtTime(FREQUENCY_TONE, audioContext.currentTime); oscillator.connect(audioContext.destination); oscillator.start(); - window.setTimeout(function() { oscillator.stop(); }, 100); + window.setTimeout(function() { oscillator.stop(); }, 500); } function handleListeningCheckbox(e) { @@ -79,6 +80,7 @@ function analyzeAudio() { var audioContext = getAudioContext(); const frequencyData = new Uint8Array(analyser.frequencyBinCount); analyser.getByteFrequencyData(frequencyData); + drawFrequencyData(frequencyData); var frequencyIndex = Math.round(FREQUENCY_TONE / (audioContext.sampleRate / analyser.fftSize)); const amplitude = frequencyData[frequencyIndex]; @@ -86,16 +88,38 @@ function analyzeAudio() { if(receivedData.length > MAX_DATA_POINTS) { receivedData.length = MAX_DATA_POINTS; } - drawReceivedData(); + // drawReceivedData(); if(amplitude > 0) { - receivedDataTextarea.value = `Frequency Detected. Amplitude: ${amplitude}`; + receivedDataTextarea.value = `Frequency ${FREQUENCY_TONE}Hz Detected. Amplitude: ${amplitude}`; } else { - receivedDataTextarea.value = 'Frequency Not Detected.'; + receivedDataTextarea.value = `Frequency ${FREQUENCY_TONE}Hz Not Detected.`; } requestAnimationFrame(analyzeAudio); } +function drawFrequencyData(frequencyData) { + const ctx = receivedGraph.getContext('2d'); + const { width, height } = receivedGraph; + const segmentWidth = (1 / frequencyData.length) * width; + ctx.clearRect(0, 0, width, height); + const sorted = frequencyData.slice().sort((a, b) => a - b); + const min = 0;// sorted[0]; + const max = 255;//sorted[sorted.length - 1]; + const range = max - min; + ctx.beginPath(); + for(let i = 0; i < frequencyData.length; i++) { + const value = frequencyData[i]; + const y = (1-(value / range)) * height; + if(i === 0) { + ctx.moveTo(0, y); + } else { + ctx.lineTo(segmentWidth * i, y) + } + } + ctx.stroke(); +} + function drawReceivedData() { const ctx = receivedGraph.getContext('2d'); const { width, height } = receivedGraph;