Audio Visualizer Bars

Resources Community Resources
,
#1

I decided to make an audio visualizer module again. I just really like audio visualizers. They’re neat.
This time, I made it more user friendly and I’m open sourcing it!

The usage is super easy. The module takes care of basically everything for you. You specify a bar amount, and the module will automatically determine the sampling rate and bar falloff for you.

API:

function VisualizerModule.new(Frame, BarCount)

Creates a new visualizer

Frame: Instance The GuiObject the bars will be put in
BarCount: number How many bars the visualizer should use

returns a Visualizer
.

property Visualizer.Color

The color of the visualizer bars

Can be a Color3 for a constant color for all bars, or a ColorSequence where 0 is the silence and 1 is the loudest
.

function Visualizer:LinkToSound(Sound)

Makes the visualizer display the given Sound

SoundObject: Instance The sound to visualize

returns void
.

function Visualizer:UnlinkFromSound()

Makes the visualizer stop displaying the currently linked sound

returns void

.

function Visualizer:Destroy()

Cleans up the visualizer

returns void

Usage:

APIs are sometimes hard to understand without an example, so here you go. It really is simple.

local VisualizerModule = require(script.Visualizer)

local Visualizer = VisualizerModule.new(GuiFrame, 80)
Visualizer:LinkToSound(script.Music)

script.Music:Play()

Demo:

Here’s a demo of various bar counts: (YouTube cuz file is way too large to embed directly)

It was designed for voicelines, but it can handle any audio.

You can call :LinkToSound() without even unlinking and just rapidly hotswap between audios with no problem.

Source:

Enjoying my work? I love to create and share with the community, for free.

If you’d like to help fund my work, consider sponsoring me on GitHub or donating on BuyMeACoffee!

121 Likes
Playlist system I literally just finished making in my game
#2

This is awesome! A nice little module that people can play with.

It’d be amazing to add features like color modulation (rainbow or based on a certain sound property), bar shape (rounded?), etc.

Also, can you include the benchmarking with various bar numbers? I can imagine this can get quite expensive beyond several hundred bars, so a nice little warning with an example would be amazing!

5 Likes
#3

Coloring would be easy to add, sure.

I didn’t bother benchmarking because it was running at 400+ FPS even in studio. It costs memory but not speed.

Edit: Just tried it with 1000 bars. Still ran like butter at 400+ FPS, just used more memory.

4 Likes
#4

I love it! I will 100% use this in a future project keep up the good work boarbomber!

3 Likes
#5

Does this work with surface guis?

#6

This covers the whole screen is this possible to minimise this

#7

Just adjust the size of the Frame that you pass as the first argument in VisualizerModule.new() the bar should automatically size to that.

@ op

Wow, another fantastic creation by boatbomber. This is really neat and the simplified API is really nice. I was surprised to see the moving component in it, as I had imaged a static audio visualizer, but this makes it a characteristic that sets this apart from other static audio visualizers. Nice job!

1 Like
#8

Yes. It’s just Frames, any gui container will do.

#9

It covers the whole screen because that’s the frame I put it in for the demo. You can set it to whatever size you want, obviously. Just make a frame that’s sized and positioned where you want and put the visualizer in that.

#10

Update!

  • Added Visualizer.Color

You can set this to a Color3 that will apply to all the bars, or you can set this to a ColorSequence where 0 is the color of the silence and 1 is the color of the loudest.

This video also shows that it works on SurfaceGuis and not full screen because apparently that wasn’t clear to some readers

4 Likes
#11

Look’s great!

Question: Can you edit the gui so its smaller so for example you have :
Song Name / Bars / Song id

I think it would be awesome then.

#12

Clearly I’ve explained something poorly because no one seems to understand what this is.

You can do that with absolutely no changes to this module!

You make your own GUI- this module simply places moving bars inside a GuiObject of your choosing.

If you make a GUI like this:

image
image730×408 41.8 KB

and then create a Visualizer with the “bars go here” area, you get this:

image
image730×411 28.6 KB

You make your own controls and labels and whatever. This just makes bars where you ask it to.

7 Likes
#13

Good, might use this. It seems good.

#14

Here’s another example usage to show all the ways you can use this:

Subtitle
Subtitle1735×725 175 KB

You can use it to keep your dialogue/subtitles from being super static and boring by just tossing some bars under the avatar!

5 Likes
#15

it doesnt work for me :frowning:
image

#16

You have to parent your Frame to the datamodel before you can link to sound. The error makes that pretty clear. You’re making it attempt to tween the bars but you haven’t put the bars anywhere tweenable.

1 Like
#17

This is an actual good audio visualizer that isn’t outdated or not working and the gui work is very smooth as well!

One thing is that maybe there should be a way to change it from a vertical to horizontal/bar type visualizer for people who want to use this as a music GUI as well? :+1:

1 Like
#18

Just rotate your GUI?

image
image948×703 125 KB

#19

Something like this for people who want in a bar graph type of way?

image
image728×614 54.5 KB

#20

Super easy to just change the anchor point and Y position of the bars in the module if that’s what you want. I don’t think I need to add usage complexity for things that take 2 seconds to change yourself.

1 Like