musicolors is a javascript music visualization library, using the pitch, energy, and timbral features of the music.

🎁 Try the musicolors DEMO here: http://www.musicolors.art/

To use the demo, please follow the steps below to allow Chrome to access your audio input without restrictions:

1. Open chrome://flags/ in your Chrome browser.

2. Search for the Insecure origins treated as secure setting.

3. In the input field, enter the demo URL: http://www.musicolors.art/

4. Enable the setting and restart Chrome.

The source of the visualization comes from the user audio, so it is totally up to your sound (e.g. singing voice to the mic.). Feel free to try visual effects and see through your sound!

📄 Paper Published on arXiv! : https://arxiv.org/abs/2503.14220

We’ve published a paper on arXiv detailing the development of musicolors and the results of the user study. Check it out to learn more about our system design, implementation process, and key findings from the experiments.

$ npm i musicolors

import musicolors from musicolors

you can visualize by three features of music: pitch, energy and timbre.

pitch	energy	timbre

// pitch visualization
musicolors.animatePitch();

// energy visualization
musicolors.animateEnergy();

// timbre visualization
musicolors.animateTimbre();

now you can also see the dynamic changing background based your time zone.
check out the visuals of changing dynamically with the specific time of the day.

// changes the background by the time, this only works in the browser settings.
musicolors.updateBackground();

morning	afternoon	evening	night