Discuss Scratch

phillip5heartstone
Scratcher
1 post

Make your own music visualizer! No microphone or "stereo mix" required!

how do you open the generated project or where do you find it? I'm having a mind blank. Please help MegaApuTurkUltra?
MugenPower84
Scratcher
19 posts

Make your own music visualizer! No microphone or "stereo mix" required!

MegaApuTurkUltra wrote:

I thought this forum would be appropriate for showing this off with an intended audience of non-ATers.

Intro
Have you ever wished you could make a visualizer like the ones from Monstercat or Trap Nation? Well, I have
If you take a look at the visualizers on Scratch right now, you'll see they all use the same trick. They use the
loudness
block, and ask people either to play the music through speakers or to enable “stereo mix” (a feature on some computers that redirects speaker output to the microphone). However, for many New Scratchers this may be cumbersome or complicated. @MrSprite has even created a Scratch mod for a “sound loudness” block, but mods are also hard for most Scratchers to use.

So, I wanted to create a better way.

As you may have seen, I recently released a new outside-of-Scratch project called ScratchTools. It's got 2 tools currently, a follower list generator like you see in my follower milestone projects, and a visualizer generator.

So, what's so special about the visualizer generator? Well, it analyzes some given input audio and outputs a template project containing a list of the info and the scripts required to pen-render it. What this means is that the project can render a visualizer without needing to use the sound loudness block! Amazing, right? What's even better is that visualizers using loudness render something like the waveform of the sound, with the height of each pen stroke representing the loudness of the sound at that time. However, my generator uses an FFT (read: complicated math) to generate a visualizer that shows each component frequency of the sound vs how loud that frequency is. This means that the visualizer can show all the notes playing at a certain time in a sound. (This is also how most visualizers you see on YouTube such as Monstercat's visualizer work.)

The visualizers
Right now the generator generates a template project with two visualizer rendering modes. (Sorry, both gifs are at a low framerate so they don't become huge )
Monstercat-like:
This visualizer rendering mode attempts to imitate the monstercat visualizer. Here's a GIF screenshot:


Trap Nation-like:
This visualizer rendering mode attempts to imitate the Trap Nation visualizer. Here's a GIF screenshot:


Of course, the sample graphics in the template are meant to be replaced The new pen transparency feature in Scratch makes the visualizers look awesome on a nice background

Both visualizers were made with no microphone or “stereo mix” required. Interested now? Scroll down for the tutorial! Not interested? View my example projects

Examples
These two projects of mine demonstrate my visualizer generator, in case GIFs aren't enough
https://scratch.mit.edu/projects/62657978/ (My project about ScratchTools)
https://scratch.mit.edu/projects/61487724/ (A follower milestone project)

Download
The ScratchTools binary is located here: https://github.com/MegaApuTurkUltra/ScratchTools/releases
I might release newer versions so check back there.
Wondering about viruses? VirusTotal report here: https://www.virustotal.com/en/file/50a474ba157f7dde2d0b43c33fd40c2de6481fc4485d246062bc3c49556fdd2b/analysis/1432330077/

Tutorial
1. Download my program above. Open it
2. Convert your audio file into a WAV. Some MP3s work but support is shaky. You're better off with a WAV.
3. See this image



Part e: Checking the checkbox will make the generator output a larger range of frequencies to the list in the visualizer template. Unchecking it will cause the generator to output only the lowest frequencies. If your sound has a lot of bass, leave the box unchecked and use the “Trap Nation” style visualizer. If your sound does not have a lot of bass, check the box and use the “Monstercat” style visualizer. More on using different styles later.
4. Open up the generated project. It should look like this:

There are 3 important custom blocks in the code view, “Set Up,” “Play Song,” and “Start Visualizer”
Under “Set Up” you'll see a bunch of options. If you scroll down you can see my sample preset options for the trap nation and monstercat style visualizers.
General settings
  • Visualizer:type Either “monstercat” or “trapnation” depending on which style you want
  • Visualizer:audio:scale How much to scale the visualizer bars by. For quieter audio, this should be set higher.
  • Visualizer:audio:low_threshold If visualizer bars are lower than this value, they will be clipped up. Also defines the radius of the trap nation-style visualizer's circle thing
  • Visualizer:audio:high_threshold If visualizer bars go over this value, they are clipped down. Similar to low_threshold
  • VisualizerColor:red How much red the pen strokes should have. 0 for no red, 255 for maximum red
  • VisualizerColor:green How much green the pen strokes should have. 0 for no green, 255 for maximum green
  • VisualizerColor:blue How much blue the pen strokes should have. 0 for no blue, 255 for maximum blue
  • VisualizerColor:ghost How transparent the visualizer should be. 1 for almost not visible, 255 for completely opaque.
  • VisualizerGraphic:ghost How transparent the graphic on top of the visualizer should be. 0 for not transparent, 100 for fully transparent.
  • Visualizer:songLength IMPORTANT! Set this to how long your sound is in seconds. Without this value, the visualizer will not work correctly.
Monstercat-style specific settings
  • VisualizerLinear:symmetrical? True if the visualizer should be symmetrical, false if not
  • VisualizerLinear:y_pos The y-position of the bottom edge of the visualizer
Trap Nation-style specific settings
  • None

Under “Play Song” is where you put the sound block to play your sound. Do not use the “and wait” version of the play sound block! Upload your sound into the sounds tab of that sprite, and add in the play sound block to play that sound.
Finally, “Start Visualizer” will start the visualizer, and play the sound all the way through while visualizing it! I put that under green flag but if you want that somewhere else then move it.
Note: you'll see a lot of variables in the variables section. Don't worry! None of them are global except for one, which is necessary to coordinate the particle clones. So you'll have space for variables in other sprites if you need them.
Another note: Don't reset the timer while the visualizer is running.
Not satisfied with either of my rendering systems? Make your own! Take a look at the code in my 2 rendering custom blocks, one for each rendering mode. The format of the data list is 80 frequency samples per frame, 10 frames per second (so 800 total list values per second of audio).

Next, play the project. If nothing shows up on the visualizer, try setting the scale setting and replaying the project. You can also play with the lower and upper threshold settings. Fiddle with the variables until you get a nice visualization.
Now all that's left is to include some nice graphics instead of my placeholders, and share your project!

Feedback
Questions? Comments? Suggestions?
Post below!

Enjoy, and have fun

- MegaApuTurkUltra

Why does the project end so early even though the song hasn't ended yet?
Blue_Science
Scratcher
100+ posts

Make your own music visualizer! No microphone or "stereo mix" required!

Impressive ! Simple and powerful. Well done.

Ummm… What's the “peak threshold” ?

Last edited by Blue_Science (Sept. 24, 2018 16:18:01)

Blue_Science
Scratcher
100+ posts

Make your own music visualizer! No microphone or "stereo mix" required!

Is there any way to have less bars (ie. the number of frequency sections) so I can have more fps ? My project won't upload on the scratch site (just like it was crashing)
neilifyyyyyyy
Scratcher
9 posts

Make your own music visualizer! No microphone or "stereo mix" required!

.

Last edited by neilifyyyyyyy (June 13, 2020 17:14:19)

neilifyyyyyyy
Scratcher
9 posts

Make your own music visualizer! No microphone or "stereo mix" required!

MegaApuTurkUltra wrote:

I thought this forum would be appropriate for showing this off with an intended audience of non-ATers.

Intro
Have you ever wished you could make a visualizer like the ones from Monstercat or Trap Nation? Well, I have
If you take a look at the visualizers on Scratch right now, you'll see they all use the same trick. They use the
loudness
block, and ask people either to play the music through speakers or to enable “stereo mix” (a feature on some computers that redirects speaker output to the microphone). However, for many New Scratchers this may be cumbersome or complicated. @MrSprite has even created a Scratch mod for a “sound loudness” block, but mods are also hard for most Scratchers to use.

So, I wanted to create a better way.

As you may have seen, I recently released a new outside-of-Scratch project called ScratchTools. It's got 2 tools currently, a follower list generator like you see in my follower milestone projects, and a visualizer generator.

So, what's so special about the visualizer generator? Well, it analyzes some given input audio and outputs a template project containing a list of the info and the scripts required to pen-render it. What this means is that the project can render a visualizer without needing to use the sound loudness block! Amazing, right? What's even better is that visualizers using loudness render something like the waveform of the sound, with the height of each pen stroke representing the loudness of the sound at that time. However, my generator uses an FFT (read: complicated math) to generate a visualizer that shows each component frequency of the sound vs how loud that frequency is. This means that the visualizer can show all the notes playing at a certain time in a sound. (This is also how most visualizers you see on YouTube such as Monstercat's visualizer work.)

The visualizers
Right now the generator generates a template project with two visualizer rendering modes. (Sorry, both gifs are at a low framerate so they don't become huge )
Monstercat-like:
This visualizer rendering mode attempts to imitate the monstercat visualizer. Here's a GIF screenshot:


Trap Nation-like:
This visualizer rendering mode attempts to imitate the Trap Nation visualizer. Here's a GIF screenshot:


Of course, the sample graphics in the template are meant to be replaced The new pen transparency feature in Scratch makes the visualizers look awesome on a nice background

Both visualizers were made with no microphone or “stereo mix” required. Interested now? Scroll down for the tutorial! Not interested? View my example projects

Examples
These two projects of mine demonstrate my visualizer generator, in case GIFs aren't enough
https://scratch.mit.edu/projects/62657978/ (My project about ScratchTools)
https://scratch.mit.edu/projects/61487724/ (A follower milestone project)

Download
The ScratchTools binary is located here: https://github.com/MegaApuTurkUltra/ScratchTools/releases
I might release newer versions so check back there.
Wondering about viruses? VirusTotal report here: https://www.virustotal.com/en/file/50a474ba157f7dde2d0b43c33fd40c2de6481fc4485d246062bc3c49556fdd2b/analysis/1432330077/

Tutorial
1. Download my program above. Open it
2. Convert your audio file into a WAV. Some MP3s work but support is shaky. You're better off with a WAV.
3. See this image



Part e: Checking the checkbox will make the generator output a larger range of frequencies to the list in the visualizer template. Unchecking it will cause the generator to output only the lowest frequencies. If your sound has a lot of bass, leave the box unchecked and use the “Trap Nation” style visualizer. If your sound does not have a lot of bass, check the box and use the “Monstercat” style visualizer. More on using different styles later.
4. Open up the generated project. It should look like this:

There are 3 important custom blocks in the code view, “Set Up,” “Play Song,” and “Start Visualizer”
Under “Set Up” you'll see a bunch of options. If you scroll down you can see my sample preset options for the trap nation and monstercat style visualizers.
General settings
  • Visualizer:type Either “monstercat” or “trapnation” depending on which style you want
  • Visualizer:audio:scale How much to scale the visualizer bars by. For quieter audio, this should be set higher.
  • Visualizer:audio:low_threshold If visualizer bars are lower than this value, they will be clipped up. Also defines the radius of the trap nation-style visualizer's circle thing
  • Visualizer:audio:high_threshold If visualizer bars go over this value, they are clipped down. Similar to low_threshold
  • VisualizerColor:red How much red the pen strokes should have. 0 for no red, 255 for maximum red
  • VisualizerColor:green How much green the pen strokes should have. 0 for no green, 255 for maximum green
  • VisualizerColor:blue How much blue the pen strokes should have. 0 for no blue, 255 for maximum blue
  • VisualizerColor:ghost How transparent the visualizer should be. 1 for almost not visible, 255 for completely opaque.
  • VisualizerGraphic:ghost How transparent the graphic on top of the visualizer should be. 0 for not transparent, 100 for fully transparent.
  • Visualizer:songLength IMPORTANT! Set this to how long your sound is in seconds. Without this value, the visualizer will not work correctly.
Monstercat-style specific settings
  • VisualizerLinear:symmetrical? True if the visualizer should be symmetrical, false if not
  • VisualizerLinear:y_pos The y-position of the bottom edge of the visualizer
Trap Nation-style specific settings
  • None

Under “Play Song” is where you put the sound block to play your sound. Do not use the “and wait” version of the play sound block! Upload your sound into the sounds tab of that sprite, and add in the play sound block to play that sound.
Finally, “Start Visualizer” will start the visualizer, and play the sound all the way through while visualizing it! I put that under green flag but if you want that somewhere else then move it.
Note: you'll see a lot of variables in the variables section. Don't worry! None of them are global except for one, which is necessary to coordinate the particle clones. So you'll have space for variables in other sprites if you need them.
Another note: Don't reset the timer while the visualizer is running.
Not satisfied with either of my rendering systems? Make your own! Take a look at the code in my 2 rendering custom blocks, one for each rendering mode. The format of the data list is 80 frequency samples per frame, 10 frames per second (so 800 total list values per second of audio).

Next, play the project. If nothing shows up on the visualizer, try setting the scale setting and replaying the project. You can also play with the lower and upper threshold settings. Fiddle with the variables until you get a nice visualization.
Now all that's left is to include some nice graphics instead of my placeholders, and share your project!

Feedback
Questions? Comments? Suggestions?
Post below!

Enjoy, and have fun

- MegaApuTurkUltra

If this is downloaded, it requires risks as well as it not working AND it's really confusing
RedMonster12
Scratcher
100+ posts

Make your own music visualizer! No microphone or "stereo mix" required!

i can't run the java, i'm on chromebook
RedMonster12
Scratcher
100+ posts

Make your own music visualizer! No microphone or "stereo mix" required!

pls make another version of this, i'm on chromebook, so i can't run the files
Theeran09
Scratcher
5 posts

Make your own music visualizer! No microphone or "stereo mix" required!

It can't seem to open, what file is it suppose to be? I only see a few files…

Sorry, I'm new to scratch!

Powered by DjangoBB