A real-time spectrogram running in the browser featured at la Fête de la Science (2024)
The spectrogram is running at this URL
Clone the repository
git clone https://github.com/jscanvic/spectrogram
cd spectrogramStart an HTTP server in the current directory
python -m http.server -b 127.0.0.1 8000Open this URL in a web browser
The spectrogram is designed to run on laptops and desktops using any Chromium-based or Firefox-based web browser. It is not supported on mobile devices.
The spectrogram is computed using the Web Audio API and more precisely using the AnalyserNode interface which is responsible for computing the discrete Fourier transforms. It is continuously rendered onto an HTMLCanvasElement. Every time a new section of the spectrogram is about to be rendered, everything else is shifted to the left before it is drawn on the newly available space. This is more computationally efficient than rendering the whole spectrogram at every frame and it enables real-time rendering at a higher temporal resolution.