Progress bar on music system

Help and Feedback Scripting Support
#1

Hello! I have been working on this music system for a bit now and have been struggling a little. I’ve come across another issue, the progress bar.

I want the progress bar to fill up to this
image
but it keeps going past the overlay frame
image

Overlay position and size:
image
Progress bar position and size:
image

The script:

local RunService = game:GetService("RunService")
local Player = game.Players.LocalPlayer
local PlayerGui = Player:WaitForChild("PlayerGui")
local MusicProgress = PlayerGui.music.Background
local Songs = game.Workspace.Sounds



RunService.RenderStepped:Connect(function()
	for _, Song in pairs(Songs:GetChildren()) do
		if Song:IsA("Sound") and Song.IsPlaying == true then
			MusicProgress.Parent.SongName.Text = Song.Name
			local Progress = Song.TimePosition / Song.TimeLength
			MusicProgress.progress.Size = UDim2.new(Progress, 0.190, 0.08, 0.300)
		end
	end
end)

Any help is appreciated, thanks!

2 Likes
#2

I’d make the song progress bar like a health bar

local healthslider = -- your progress bar
while true do
local function refreshHealth()
	local healthRatio = math.clamp(Humanoid.Health / Humanoid.MaxHealth, 0, 1) -- Humanoid.Health would be the songs current length, then Humanoid.MaxHealth would be the songs full length
	game.TweenService:Create(healthSlider, TweenInfo.new(0.2, Enum.EasingStyle.Sine), {
		Size = UDim2.new(healthRatio, 0, 0.76, 6)
	}):Play()
	end
wait(0.1)
	refreshHealth()
end

Also make sure your slider/progress bar (the white thing) is a child(Inside) a container.
For example,

Bruh
Bruh697×46 3.82 KB

Add a box under the progress bar, like that grey bar in the picture, to make a container. You can make it invisible.

#3

Do you think there’s any other way? Would it be possible to keep the current script I have.

#4

You’re using both Scale and Offset, so its going to go over the bar because Progress will get to 1, which is finished, then you have extra 0.190 for some reason.

MusicProgress.progress.Size = UDim2.new(Progress, 0, 0.08, 0)

That should be better. Also try printing Progress to see if it goes over 1, if not then you need to reparent the bar

#5

This is what it went to,
image

This is what the bar went to,
image

#6

Try this:

local RunService = game:GetService("RunService")
local Player = game.Players.LocalPlayer
local PlayerGui = Player:WaitForChild("PlayerGui")
local MusicProgress = PlayerGui.music.Background
local Songs = game.Workspace.Sounds

local Origin = MusicProgress.progress.AbsoluteSize

RunService.RenderStepped:Connect(function()
	for _, Song in pairs(Songs:GetChildren()) do
		if Song:IsA("Sound") and Song.IsPlaying == true then
			MusicProgress.Parent.SongName.Text = Song.Name
			local Progress = (Song.TimePosition / Song.TimeLength)*Origin
			MusicProgress.progress.Size = UDim2.new(0.19,Progress, 0.08, 0)
		end
	end
end)

leave the size of the bar at the maximum it can find

#7

I put the script in and the bar started a little bigger than usual and it didn’t move at all,
image
it stayed like this the entire song.

#8

Try multiplying the Progress variable by the largest length you want the bar to reach (replace ORIGINAL_LENGTH).

local RunService = game:GetService("RunService")
local Player = game.Players.LocalPlayer
local PlayerGui = Player:WaitForChild("PlayerGui")
local MusicProgress = PlayerGui.music.Background
local Songs = game.Workspace.Sounds

RunService.RenderStepped:Connect(function()
	for _, Song in pairs(Songs:GetChildren()) do
		if Song:IsA("Sound") and Song.IsPlaying == true then
			MusicProgress.Parent.SongName.Text = Song.Name
			local Progress = Song.TimePosition / Song.TimeLength
			MusicProgress.progress.Size = UDim2.new((Progress*ORIGINAL_LENGTH), 0.190, 0.08, 0.300)
		end
	end
end)

Sorry if this doesn’t work! I’m away from my computer right now and I wasn’t able to test it.

2 Likes
#9

This works!! Thank you so much I am very grateful.

2 Likes