Custom Music Visualizer
PostPosted:Sun Sep 25, 2016 3:30 am
I haven't posted it quite some time, so I decided to put up something that I made, that I feel is quite cool. I've made a music visualizer from scratch using JavaScript and HTML5 (you'll need Google Chrome or Microsoft Edge for this one, but works best with chrome).
I've spent quite some time on perfecting this and I think it's finally ready for release of some kind. I finally release the aOS Music Visualizer (some of its features are built to work with my OS, but it works best loaded by itself).
The bass is on the left, with the treble on the right. The louder a specific frequency gets, the greener it gets.
Here's some instructions for the controls...
The first box is for inputting the song name. If you're on anything but Chrome OS, clicking the Song List button will present all songs installed on the visualizer. Chrome OS cuts off the list halfway through for some reason.
Pick a song out of the list and enter its name into the Song box. Then hit enter, while your cursor is still in the box, to start the visualizer. My personal favorite at the moment is called Neurology, as seen in the picture. If you've got gaming headphones and enjoy some good dubstep, listen to that song now. For those interested in the rest of his works, his name is Teminite and is not popular enough for how awesome his music is.
Use the left arrow to restart the song.
Use the pause and play keys to pause and play.
You MUST use the 'New' button or refresh the page to start a different song. It does not work otherwise.
Delay ms is the delay between the visualizer's audio source and the audio you hear. Because the visualizer takes time to calculate the audio data, we have to delay the audible sound, or else it will be out of sync. On most machines, this delay comes out to about 150ms. You can adjust this if it seems out of sync.
Min decibels is how quiet something can get before it is considered nothing. Note that a value of -100 is quieter than a value of -50. By default, -80.
Randomize sets the visualizer on a random loop of all installed songs. When one song ends, it starts the next automagically.
The button Window Recolor is another version of the visualizer designed to work with my OS. Past Window Recolor are also other cool versions as well, like a circle, and even an Ultra Graphics setting, for the daring.
You can also click on the visualization itself to throw it into fullscreen. It theoretically works with any resolution from (1 by 1) to (2048 by 1.7976931348623157e+308)
Here's some links...
Direct link to the visualizer: https://aaron-os-mineandcraft12.c9.io/u ... rs/cnv.php
Link to my OS, that is now hosted 24/7: https://aaron-os-mineandcraft12.c9.io
The OS can load the visualizer as an app, but the FPS is not as good because it has to share your processor with another operating system.
If anyone wants me to install a song on the server for them to try it out on the visualizer, let me know! It only takes me about 3 minutes to do and is no trouble at all. Chrome does not let the visualizer access a song that does not 'belong' to it, if that makes sense.
Let me know your thoughts! This has been one of my favorite projects to do! Someone also try to run window recolor mode under aOS, and let me know if it works. I've only tested it on my machine so far. I'm running out of ideas of things to add/change on the visualizer and on aOS, so every suggestion and feedback helps!
I've spent quite some time on perfecting this and I think it's finally ready for release of some kind. I finally release the aOS Music Visualizer (some of its features are built to work with my OS, but it works best loaded by itself).
The bass is on the left, with the treble on the right. The louder a specific frequency gets, the greener it gets.
Here's some instructions for the controls...
The first box is for inputting the song name. If you're on anything but Chrome OS, clicking the Song List button will present all songs installed on the visualizer. Chrome OS cuts off the list halfway through for some reason.
Pick a song out of the list and enter its name into the Song box. Then hit enter, while your cursor is still in the box, to start the visualizer. My personal favorite at the moment is called Neurology, as seen in the picture. If you've got gaming headphones and enjoy some good dubstep, listen to that song now. For those interested in the rest of his works, his name is Teminite and is not popular enough for how awesome his music is.
Use the left arrow to restart the song.
Use the pause and play keys to pause and play.
You MUST use the 'New' button or refresh the page to start a different song. It does not work otherwise.
Delay ms is the delay between the visualizer's audio source and the audio you hear. Because the visualizer takes time to calculate the audio data, we have to delay the audible sound, or else it will be out of sync. On most machines, this delay comes out to about 150ms. You can adjust this if it seems out of sync.
Min decibels is how quiet something can get before it is considered nothing. Note that a value of -100 is quieter than a value of -50. By default, -80.
Randomize sets the visualizer on a random loop of all installed songs. When one song ends, it starts the next automagically.
The button Window Recolor is another version of the visualizer designed to work with my OS. Past Window Recolor are also other cool versions as well, like a circle, and even an Ultra Graphics setting, for the daring.
You can also click on the visualization itself to throw it into fullscreen. It theoretically works with any resolution from (1 by 1) to (2048 by 1.7976931348623157e+308)
Here's some links...
Direct link to the visualizer: https://aaron-os-mineandcraft12.c9.io/u ... rs/cnv.php
Link to my OS, that is now hosted 24/7: https://aaron-os-mineandcraft12.c9.io
The OS can load the visualizer as an app, but the FPS is not as good because it has to share your processor with another operating system.
If anyone wants me to install a song on the server for them to try it out on the visualizer, let me know! It only takes me about 3 minutes to do and is no trouble at all. Chrome does not let the visualizer access a song that does not 'belong' to it, if that makes sense.
Let me know your thoughts! This has been one of my favorite projects to do! Someone also try to run window recolor mode under aOS, and let me know if it works. I've only tested it on my machine so far. I'm running out of ideas of things to add/change on the visualizer and on aOS, so every suggestion and feedback helps!