How do I make a music bar like this?

Help and Feedback Scripting Support
#1

How do I make a music bar like this:

Screenshot 2022-04-22 165728

the video for it too: Roblox Creeper Chaos Gameplay - YouTube

#2 
function labelChange()
TEXTPATHHERE.Text = SOUNDHERE.TimePosition
end

game:GetService("RunService").RenderStepped:Connect(labelChange)

use math.floor to convert them into 0:00

#3

what I meant was it goes up and down

#4

oh a bass visualizer, not sure got to search that one up

#5

yeah I looked it up just now, and I’ll be able to do it. Thanks for answering though

Edit: I am having a little trouble because this is a GUI version

1 Like
#6

No problem! Good day to u…

  • 30
#7

Use Sound.PlaybackLoudness, Linking this with a music system should work.

*if you need help with this I can help.

#8

so I would just take the loudness, then add a randomization to it?

#9

No, that will give it a trashy look so when the music is down the objects are randomly high.

Use RenderStepped and check the audios playback loudness which changes while the audio plays.

#10

well I want it to respond to frequencies of the sound. Just so you know, I don’t want it to be an audio visualizer. This one I want to look like the video

#11 
game.RunService.RenderStepped:Connect(function()
audio.PlaybackLoudness — this is the height that the bars should be
end)

The property changes every frame. So you can also use GetPropertyChangedSignal to check for differennces.

#12

there is a example at the bottom of this page

https://developer.roblox.com/en-us/api-reference/property/Sound/PlaybackLoudness

its not possible to get the loudness at specific frequencys so you can only fake having multiple bars

#13

what I want it to do is do exactly what the video has on their music bar

#14

something like this

local runService = game:GetService("RunService")
local bars = {script.Parent.Bar1, script.Parent.Bar2, script.Parent.Bar3, script.Parent.Bar4, ...}
local sound = script.Parent.Sound
local tweenSpeed = 0.2 -- adjust from 0.000001 to 0.999999

-- set the size for all bars in a table called sizes
local sizes = {}
for i, bar in ipairs(bars) do
	sizes[i] = 0
end

-- every frame call this function
RunService.Heartbeat:Connect(function(deltaTime)
	-- get the sounds loudness
	local amplitude = sound.PlaybackLoudness / 10
	-- loop all bars
	for i, bar in ipairs(bars) do
		-- get a random offset for each bar
		local randomOffset = math.random() * amplitude / 10
		-- tween the size towards the new size
		sizes[i] += (amplitude + randomOffset - sizes[i]) * tweenSpeed
		-- set the bars size
		bar.Size = UDim2.new(0, 10, 0, sizes[i])
	end
end)
4 Likes
#15

omg this might work, I’ll solution in a bit if it does!

#16

okay so I made it, and I kind of want it to go up and down, like in the video

#17

and how is it going up and down now i don’t have roblox on this laptop so i cant test it

maybe you can explain whats different or share a video?

#18

okay I fixed it so that it goes up and down by using the anchor point, but right now I’m figuring out how I can make the bars go bigger

#19

instead of dividing by 10 divide by 5 or 2

sound.PlaybackLoudness has a range of 0 to 1000

so because i divided by 10 that would make the bars have a height from 0 to 100
but if you divide by 5 (1000 / 5 = 200) or if you did 2 then (1000 / 2 = 500)

#20

hey I think I just figured it out, thanks so much!