lili/data-over-audio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

draw frequency graph

Browse Source
This commit is contained in:
Lewis Moten
2024-05-01 00:01:36 -04:00
parent 9f47e8c67e
commit a019a31d0b
1 changed files with 29 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
index.js
View File

@@ -9,7 +9,8 @@ var receivedGraph;
var receivedData = []; var receivedData = [];
var MAX_DATA_POINTS = 1024; var MAX_DATA_POINTS = 1024;
var FREQUENCY_TONE = 500; // 20 to 20,000 - human
var FREQUENCY_TONE = 18000;
function handleWindowLoad() { function handleWindowLoad() {
// grab dom elements // grab dom elements
@@ -39,7 +40,7 @@ function handleSendButtonClick() {
oscillator.frequency.setValueAtTime(FREQUENCY_TONE, audioContext.currentTime); oscillator.frequency.setValueAtTime(FREQUENCY_TONE, audioContext.currentTime);
oscillator.connect(audioContext.destination); oscillator.connect(audioContext.destination);
oscillator.start(); oscillator.start();
window.setTimeout(function() { oscillator.stop(); }, 100); window.setTimeout(function() { oscillator.stop(); }, 500);
} }
function handleListeningCheckbox(e) { function handleListeningCheckbox(e) {
@@ -79,6 +80,7 @@ function analyzeAudio() {
var audioContext = getAudioContext(); var audioContext = getAudioContext();
const frequencyData = new Uint8Array(analyser.frequencyBinCount); const frequencyData = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(frequencyData); analyser.getByteFrequencyData(frequencyData);
drawFrequencyData(frequencyData);
var frequencyIndex = Math.round(FREQUENCY_TONE / (audioContext.sampleRate / analyser.fftSize)); var frequencyIndex = Math.round(FREQUENCY_TONE / (audioContext.sampleRate / analyser.fftSize));
const amplitude = frequencyData[frequencyIndex]; const amplitude = frequencyData[frequencyIndex];
@@ -86,16 +88,38 @@ function analyzeAudio() {
if(receivedData.length > MAX_DATA_POINTS) { if(receivedData.length > MAX_DATA_POINTS) {
receivedData.length = MAX_DATA_POINTS; receivedData.length = MAX_DATA_POINTS;
} }
drawReceivedData(); // drawReceivedData();
if(amplitude > 0) { if(amplitude > 0) {
receivedDataTextarea.value = `Frequency Detected. Amplitude: ${amplitude}`; receivedDataTextarea.value = `Frequency ${FREQUENCY_TONE}Hz Detected. Amplitude: ${amplitude}`;
} else { } else {
receivedDataTextarea.value = 'Frequency Not Detected.'; receivedDataTextarea.value = `Frequency ${FREQUENCY_TONE}Hz Not Detected.`;
} }
requestAnimationFrame(analyzeAudio); 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() { function drawReceivedData() {
const ctx = receivedGraph.getContext('2d'); const ctx = receivedGraph.getContext('2d');
const { width, height } = receivedGraph; const { width, height } = receivedGraph;