How to make gui music like this?

Help and Feedback Scripting Support
,
5

I believe you’d use PlaybackLoudness for this.

You get the folder containing your music audios, and run a loop or RenderStepped event that randomly adjusts the height of the bars in your UI depending on the loudness of the music.

Sort of like this:

local PlayingSound = nil

for _, sound in pairs(MusicFolder:GetChildren() do
  if sound then
    sound.Played:Connect(function)
    PlayingSound = sound -- When the sound starts playing update this one to be the one that is being visualized.
  end)
end

game:GetService("RunService").Stepped:Connect(function()
  for _, bar in pairs(BarHoldingFrame:GetChildren()) do
    if bar:IsA("Frame") then
      bar.Visible = true
      local loudnessScale= PlayingSound.PlaybackLoudness /1000 -- max loudness is 1000
      local randomHeight = math.random(7, 10) / 10 * loudnessScale -- randomize it (divide random by 10 since it doesnt work with decimals)
      bar.Size = Udim2.new(bar.Size.X.Scale, bar.Size.X.Offset, randomHeight, 0)
end -- I can't cant this indned right in the editor...
  end
end)

You would probably have to tweak it around and I’m not sure if that actually works properly, but I believe thats the concept behind it.

There is also an open source version of this, not sure if it works well or if its to your liking, but its a good place to start:

5 Likes