- 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.
Jose
5a8dc9c489