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)
Before you do make this player, please do mind to be familiar with this topics:
These will help you to understand the tutorial much better!
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
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
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!
I am always happy to help!