Before we start I want to mention @Aytillia for the inspiration in this topic and also this is my first ever tutorial here, so please forgive me If I made any mistakes.
Tnx @pranvexploder for some help!
Today I wanna show you how to make a song player like this:
The tutorial is split by different parts to help you out.
Goal: robloxapp-20200910-1938462.wmv (521.2 KB)
Requirements
Before you do make this player, please do mind to be familiar with this topics:
- Tweening
- Strings
- Properties
These will help you to understand the tutorial much better!
Materials
Here are the materials that your gonna be needing for this simple tutorial:
-
Prepare a song that your gonna be playing in the tutorial -
Make the UI that you are gonna be needing for this tutorial, I would recommend you to make your own design but here is some reference:
- The First Frame in the UI is the main frame or the background of the music player
- The second one is the PlaceHolder Frame for the bar which will be moving
- Make sure to size the frame
Please do note that I am not requiring you to make the player full screen, I made the player fullscreen here because this is the only topic of thistutorial
- Make sure the size of the place holder (2nd frame) and the bar is on the scale properties, try not to make it offset for it would ruin music player or it might not work properly
Scripting
local song = game.ReplicatedStorage.Songs["The Fat Rat | Unity"] --The song that you will be playing
local songDuration = song.TimeLength --Gets the Duration of the song
local frame = script.Parent.Frame --The Main Frame of the UI
local startSize = UDim2.new(0,0,1,0) --The Starting Size of the Bar
local finalSize = UDim2.new(1,0,1,0) --The final position of the Bar
local function digital_format(n) --Converts seconds into a mm:ss timer
return string.format("%d:%02d", math.floor(n/60), n%60)
end
while true do
frame.Frame.Bar.Size = startSize --We need to set it to the Starting size for every new song that willl be played!
song:Play() --Plays the Song
frame.NowPlaying.Text = song.Name --gets the Name Propery of the Song
frame.MaxDuration.Text = digital_format(songDuration) --Converted the Duration into the mm:ss timer
frame.Frame.Bar:TweenSize(finalSize, Enum.EasingDirection.InOut,Enum.EasingStyle.Linear, songDuration) --Tweens the player
local duration = 0 --The variable we will be using for the duration
repeat --repeats the whole proccess until the command is given
duration = duration + 1 --for every 1 second, it adds 1 to the value
frame.Duration.Text = digital_format(duration) --Converts the duration into a mm:ss timer
wait(1) --waits 1 (most important, because every second counts to 1 second)
until duration == math.round(songDuration) -- We need to round the song Duration because the Duration isn't a fully Integer yet, it's still a float
duration = 0 --We need to reset this value!
end
Conclusion
In conclusion, this tutorial is not yet officialy done for I will update always to have more features in this music player
Future Updates in this Tutorial
- Play / Mute Button
- Song Queue
- Next Song Skip
- Adjust the volume
For this update, this it for now, I will be updating this as soon as possible it’s because of my online class!
Welp here you go folks, How to make a music player in your game!
Please do note again that this is my first tutorial here and I want you all to tell me if I have any problems in the scripting, discussing and the explaining part of this tutorial. Please do tell me if there are any bugs involving this, just dm me if you have any questions!
Discord: DerpyGProductions#6918
Twiter: @DerpyGProducti1
I am always happy to help!
