How would I go about making a music duration bar?

I’m trying to implement a music system into a game and I want to have a duration bar as shown below from Vibe Airlines:
MusicDurationBar

How would I create the bar transitioning/tweening from one side to the other?

Read the documentation:

I know how to tween and make Gui animations, my main question is how to know the size i would need for the variety of song duration’s to make the progress bar move along with the music.I know it would probably use Tween/Gui animations but I’m wondering how would you make sure every duration of every song that’s played functions perfectly when moving the progress bar along with the song’s duration. (Ex. Bar is at middle when song is halfway done.)

Just make the length of the tween the song length (in seconds).

You can get the ratio of the songs progress to the songs time length with sound.TimePosition / sound.TimeLength

If the TimePosition is 25 and the TimeLength 50 (song is half way) then you would get 0.5. Then resize your bar accordingly

1 Like

Thank you for this! This technique works perfectly! @Katrist, This would work theoretically but when I try to add a play/pause button the tween would have no way of stopping. Thanks for helping me out!

You can just do Tween:Pause()

30

Would you happen to know how to round the numbers divided to the hundredths place? It won’t take the number in the size if it has more decimal places then the hundredths. Right now I’m trying to do 50/119 and I get 0.42016806722689 which it wont take in the size property of a frame. Is there a way to round that number to 0.42?

Use math.round() with functions.

Example code:

local function round(number, decimalPlaces)
	return math.round(number * 10^decimalPlaces) * 10^-decimalPlaces
end

print(round(0.42016806722689, 2))

Output:

0.42