About Spectrochrome

Spectrochrome is an experimental music visualisation tool. It is based on a "showcqt" style spectrogram visualisation, but unlike conventional approaches, this tool assigns a set of hand-picked colours for each pitch (versus using colour to encode intensity).

In addition to showing a pitch-keyed spectrogram, this tool also acts as a testbed for identifying the notes being played at each instant. The current "strongest pitch detection" algorithm implemented is a crude method for trying to find a way of detecting the melody line of the clip (though it doesn't work very well yet!) Building out these capabilities is topic for future development.

Implementation Details

This tool is currently implemented using Plain/Vanilla Javascript in a single HTML file (*). All processing and rendering strictly happens entirely locally in your browser, on your own hardware.

Usage Tips

Basic Usage:
1. Load an audio file
2. Configuring tuning (i.e. "A = 440 Hz" or "A = 432 Hz")
3. Click "Analyze" to process
4. You can now play / scrub / explore, or export the spectrogram
Tweaking the Appearance:
- Use the "Legend" and "Tweaks" popovers to adjust how the spectrogram and pitch detection work.
- CAUTION: Most of these updates are SLOW, especially on longer sound clips and/or slower CPU's.
Exporting Music Videos:
- Use the "Record" button to export a video of the viewport (with synchronised soound playback). By default, the exported video will show the timeline scrubber scrolling across the screen, slowly revealing the full spectrogram in all its full technicolour glory, in sync with the music.
- Avoid clicking or interacting with the page during this process, as any changes you make will be included in the video.
Audio File Notes:
- This tool has been designed and optimised to work with short audio files - specifically those around 1 minute long!
- Clips +/- 30 seconds should generally still be ok.
- Longer files "can" be used (with success up to about 5 minutes). However, be prepared for this to potentially take a while to compute and/or update (especially on slower machines).
- From limited tests so far, results may vary when dealing with "professionally mixed + produced" tracks (e.g. many pop music tracks), as the full frequency spectrum tends to be quite "saturated" in these, reducing the utility of this tool.
- Any audio files supported by your browser should be able to be used. Examples of supported formats that have been successfully tested include .wav, .mp3, and .flac
Supported Browsers:
- This was mainly built and tested on Firefox 151 on Windows 10 and Linux.
- Earlier versions have also been checked on Ms Edge.
- CAUTION: It is not currently recommended to keep this page open on a laptop running on battery power. A future update will improve energy efficiency when idling, but currently this is not supported.

Further Info

For further information about this project, see the following links:

https://github.com/Aligorith/musicviz_playpen/tree/master/03_spectro_tool (Original Git Repo)

~ Joshua Leung (2026)