2025-04-25 19:00:28 +02:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>ESP32 Piano Spectrum Analyzer</title>
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
2025-04-25 19:52:45 +02:00
|
|
|
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation"></script>
|
2025-04-25 19:00:28 +02:00
|
|
|
<style>
|
|
|
|
|
body {
|
|
|
|
|
font-family: Arial, sans-serif;
|
|
|
|
|
margin: 20px;
|
|
|
|
|
background: #f0f0f0;
|
|
|
|
|
}
|
|
|
|
|
.container {
|
|
|
|
|
max-width: 1200px;
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
background: white;
|
|
|
|
|
padding: 20px;
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
box-shadow: 0 0 10px rgba(0,0,0,0.1);
|
|
|
|
|
}
|
|
|
|
|
h1 {
|
|
|
|
|
color: #333;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
#spectrum-container {
|
|
|
|
|
position: relative;
|
|
|
|
|
height: 400px;
|
|
|
|
|
margin: 20px 0;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div class="container">
|
|
|
|
|
<h1>Piano Spectrum Analyzer</h1>
|
|
|
|
|
<div id="spectrum-container">
|
|
|
|
|
<canvas id="spectrumChart"></canvas>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script>
|
2025-04-25 19:52:45 +02:00
|
|
|
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
|
|
|
|
|
}));
|
|
|
|
|
|
2025-04-25 19:00:28 +02:00
|
|
|
const ctx = document.getElementById('spectrumChart').getContext('2d');
|
|
|
|
|
const chart = new Chart(ctx, {
|
|
|
|
|
type: 'line',
|
|
|
|
|
data: {
|
2025-04-25 19:52:45 +02:00
|
|
|
labels: Array.from({length: 134}, (_, i) => (i + 8) * (8000 / 1024)),
|
2025-04-25 19:00:28 +02:00
|
|
|
datasets: [{
|
|
|
|
|
label: 'Frequency Spectrum',
|
2025-04-25 19:52:45 +02:00
|
|
|
data: Array(134).fill(0),
|
2025-04-25 19:00:28 +02:00
|
|
|
borderColor: 'rgb(75, 192, 192)',
|
|
|
|
|
tension: 0.1,
|
2025-04-25 19:52:45 +02:00
|
|
|
fill: true,
|
|
|
|
|
backgroundColor: 'rgba(75, 192, 192, 0.2)'
|
2025-04-25 19:00:28 +02:00
|
|
|
}]
|
|
|
|
|
},
|
|
|
|
|
options: {
|
|
|
|
|
responsive: true,
|
|
|
|
|
maintainAspectRatio: false,
|
|
|
|
|
animation: {
|
|
|
|
|
duration: 0
|
|
|
|
|
},
|
|
|
|
|
scales: {
|
|
|
|
|
y: {
|
|
|
|
|
beginAtZero: true,
|
2025-04-25 19:52:45 +02:00
|
|
|
max: 5000,
|
|
|
|
|
title: {
|
|
|
|
|
display: true,
|
|
|
|
|
text: 'Magnitude'
|
|
|
|
|
}
|
2025-04-25 19:00:28 +02:00
|
|
|
},
|
|
|
|
|
x: {
|
2025-04-25 19:52:45 +02:00
|
|
|
type: 'logarithmic',
|
|
|
|
|
min: 60,
|
|
|
|
|
max: 1100,
|
2025-04-25 19:00:28 +02:00
|
|
|
title: {
|
|
|
|
|
display: true,
|
|
|
|
|
text: 'Frequency (Hz)'
|
2025-04-25 19:52:45 +02:00
|
|
|
},
|
|
|
|
|
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)';
|
|
|
|
|
}
|
2025-04-25 19:00:28 +02:00
|
|
|
}
|
|
|
|
|
}
|
2025-04-25 19:52:45 +02:00
|
|
|
},
|
|
|
|
|
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
|
|
|
|
|
}
|
2025-04-25 19:00:28 +02:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const wsUrl = `ws://${window.location.hostname}/ws`;
|
|
|
|
|
const ws = new WebSocket(wsUrl);
|
|
|
|
|
|
2025-04-25 19:52:45 +02:00
|
|
|
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;
|
|
|
|
|
}
|
|
|
|
|
|
2025-04-25 19:00:28 +02:00
|
|
|
ws.onmessage = function(event) {
|
|
|
|
|
const spectrum = JSON.parse(event.data);
|
2025-04-25 19:52:45 +02:00
|
|
|
// Interpolate the spectrum data for logarithmic display
|
|
|
|
|
chart.data.datasets[0].data = interpolateSpectrum(spectrum);
|
|
|
|
|
chart.update('none'); // Use 'none' mode for maximum performance
|
2025-04-25 19:00:28 +02:00
|
|
|
};
|
|
|
|
|
|
|
|
|
|
ws.onclose = function() {
|
|
|
|
|
console.log('WebSocket connection closed');
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
window.location.reload();
|
|
|
|
|
}, 1000);
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
