How to make a live song Player in your game

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:

  1. image
    Prepare a song that your gonna be playing in the tutorial

  2. image
    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

  1. 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

  1. 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!

7 Likes

Update 1: Added a video for you to check out on what will you expect!

1 Like

Looks good. This can be helpful for my other projects.

Thanks Buddy

1 Like