Jose/esp32i2s
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix 🐛: Update bin range calculation and formatting in src/main.cpp

Browse Source 
- The code provided is a JavaScript application that visualizes frequency data from a WebSocket connection. It uses the Chart.js library to create an interactive graph that displays the spectrum of incoming audio. The chart includes annotations for specific frequencies and tooltips with detailed frequency information.

Here's a breakdown of the key components:

1. **Note Frequencies**:
- `noteFrequencies` is an object containing note names as keys and their corresponding frequencies in Hz.

2. **Chart Setup**:
- `chart` initializes a Chart.js chart with the specified type, dimensions, options, plugins, data, and animation.
- `chart.update()` updates the chart to reflect any changes in the dataset.

3. **WebSocket Connection**:
- A WebSocket connection (`ws`) is established to receive frequency data from a server running on the same hostname as the client.
- The `onmessage` event handler receives JSON-encoded data, which represents the frequency spectrum.
- The received spectrum data is interpolated using logarithmic scale to enhance the visual representation of the spectrum.

4. **Interpolation**:
- The `interpolateSpectrum` function converts the linear frequency bins of the spectrum to logarithmic scale and interpolates between the closest two bins for a smoother display.
- This interpolation helps in better handling of low-frequency components that may not be accurately represented by simple linear steps.

5. **Legend Disabling**:
- The `legend: { display: false }` option disables the legend in the chart, which is useful when multiple datasets are displayed.

This application provides a dynamic way to visualize audio frequency data, allowing users to interact with the spectrum and gain insights into the content of the incoming audio.
- The changes introduced in `src/main.cpp` are related to the calculation and formatting of bin ranges for frequency detection, specifically focusing on the FFT size from 60 Hz to 1100 Hz.
This commit is contained in:
Jose
2025-04-25 19:52:45 +02:00
parent 91b24e0da0
commit 5a8dc9c489
2 changed files with 138 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
data/index.html
View File

@@ -3,6 +3,7 @@
<head>
<title>ESP32 Piano Spectrum Analyzer</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation"></script>
<style>
body {
font-family: Arial, sans-serif;
@@ -37,17 +38,41 @@
</div>
<script>
Chart.register('chartjs-plugin-annotation');
// Piano note frequencies (Hz)
const noteFrequencies = {
'C2': 65.41, 'C#2': 69.30, 'D2': 73.42, 'D#2': 77.78, 'E2': 82.41, 'F2': 87.31,
'F#2': 92.50, 'G2': 98.00, 'G#2': 103.83, 'A2': 110.00, 'A#2': 116.54, 'B2': 123.47,
'C3': 130.81, 'C#3': 138.59, 'D3': 146.83, 'D#3': 155.56, 'E3': 164.81, 'F3': 174.61,
'F#3': 185.00, 'G3': 196.00, 'G#3': 207.65, 'A3': 220.00, 'A#3': 233.08, 'B3': 246.94,
'C4': 261.63, 'C#4': 277.18, 'D4': 293.66, 'D#4': 311.13, 'E4': 329.63, 'F4': 349.23,
'F#4': 369.99, 'G4': 392.00, 'G#4': 415.30, 'A4': 440.00, 'A#4': 466.16, 'B4': 493.88,
'C5': 523.25, 'C#5': 554.37, 'D5': 587.33, 'D#5': 622.25, 'E5': 659.26, 'F5': 698.46,
'F#5': 739.99, 'G5': 783.99, 'G#5': 830.61, 'A5': 880.00, 'A#5': 932.33, 'B5': 987.77,
'C6': 1046.50
};
// Create ticks for the x-axis
const xAxisTicks = Object.entries(noteFrequencies).filter(([note]) =>
note.length === 2 || note === 'C#4' || note === 'F#4' || note === 'A#4'
).map(([note, freq]) => ({
value: freq,
label: note
}));
const ctx = document.getElementById('spectrumChart').getContext('2d');
const chart = new Chart(ctx, {
type: 'line',
data: {
labels: Array.from({length: 512}, (_, i) => i * (8000 / 1024)),
labels: Array.from({length: 134}, (_, i) => (i + 8) * (8000 / 1024)),
datasets: [{
label: 'Frequency Spectrum',
data: Array(512).fill(0),
data: Array(134).fill(0),
borderColor: 'rgb(75, 192, 192)',
tension: 0.1,
fill: false
fill: true,
backgroundColor: 'rgba(75, 192, 192, 0.2)'
}]
},
options: {
@@ -59,14 +84,89 @@
scales: {
y: {
beginAtZero: true,
max: 5000
max: 5000,
title: {
display: true,
text: 'Magnitude'
}
},
x: {
type: 'logarithmic',
min: 60,
max: 1100,
title: {
display: true,
text: 'Frequency (Hz)'
},
ticks: {
callback: function(value, index, values) {
// Find the closest note
const closestNote = Object.entries(noteFrequencies)
.reduce((closest, [note, freq]) => {
return Math.abs(freq - value) < Math.abs(freq - closest.freq)
? { note, freq }
: closest;
}, { note: '', freq: Infinity });
if (Math.abs(value - closestNote.freq) < 1) {
return closestNote.note;
}
return '';
}
},
grid: {
color: (ctx) => {
const value = ctx.tick.value;
// Check if this tick corresponds to a C note
if (Object.entries(noteFrequencies)
.some(([note, freq]) =>
note.startsWith('C') && Math.abs(freq - value) < 1)) {
return 'rgba(255, 0, 0, 0.1)';
}
return 'rgba(0, 0, 0, 0.1)';
}
}
}
},
plugins: {
annotation: {
annotations: Object.entries(noteFrequencies)
.filter(([note]) => note.startsWith('C'))
.reduce((acc, [note, freq]) => {
acc[note] = {
type: 'line',
xMin: freq,
xMax: freq,
borderColor: 'rgba(255, 99, 132, 0.5)',
borderWidth: 1,
label: {
content: note,
enabled: true,
position: 'top'
}
};
return acc;
}, {})
},
tooltip: {
callbacks: {
title: function(context) {
const freq = context[0].parsed.x;
// Find the closest note
const closestNote = Object.entries(noteFrequencies)
.reduce((closest, [note, noteFreq]) => {
return Math.abs(noteFreq - freq) < Math.abs(noteFreq - closest.freq)
? { note, freq: noteFreq }
: closest;
}, { note: '', freq: Infinity });
return `Frequency: ${freq.toFixed(1)} Hz (Near ${closestNote.note})`;
}
}
},
legend: {
display: false
}
}
}
});
@@ -74,10 +174,33 @@
const wsUrl = `ws://${window.location.hostname}/ws`;
const ws = new WebSocket(wsUrl);
function interpolateSpectrum(spectrum) {
// Convert the linear frequency bins to logarithmic scale
const result = new Array(spectrum.length).fill(0);
const binWidth = 8000 / 1024; // Hz per bin
for (let i = 0; i < spectrum.length; i++) {
const freq = (i + 8) * binWidth;
const logFreq = Math.log10(freq);
// Find the two closest bins and interpolate
const bin1 = Math.floor((logFreq - Math.log10(60)) / (Math.log10(1100) - Math.log10(60)) * spectrum.length);
const bin2 = bin1 + 1;
if (bin1 >= 0 && bin2 < spectrum.length) {
const t = (logFreq - Math.log10(60)) / (Math.log10(1100) - Math.log10(60)) * spectrum.length - bin1;
result[i] = spectrum[bin1] * (1 - t) + spectrum[bin2] * t;
}
}
return result;
}
ws.onmessage = function(event) {
const spectrum = JSON.parse(event.data);
chart.data.datasets[0].data = spectrum;
chart.update();
// Interpolate the spectrum data for logarithmic display
chart.data.datasets[0].data = interpolateSpectrum(spectrum);
chart.update('none'); // Use 'none' mode for maximum performance
};
ws.onclose = function() {

11
src/main.cpp
View File

@@ -137,8 +137,15 @@ void sendSpectrumData() {
if (ws.count() > 0 && !noteDetector.isCalibrating()) {
const auto& spectrum = noteDetector.getSpectrum();
String json = "[";
for (size_t i = 0; i < Config::FFT_SIZE/2; i++) {
if (i > 0) json += ",";
// Calculate bin range for 60-1100 Hz
// At 8kHz sample rate with 1024 FFT size:
// binFreq = index * (8000/1024) = index * 7.8125 Hz
// For 60 Hz: bin ≈ 8
// For 1100 Hz: bin ≈ 141
for (int i = 8; i <= 141; i++) {
if (i > 8) json += ",";
json += String(spectrum[i], 2);
}
json += "]";