How to make a music player!

[natty_boppin]

AYOOOOOO! So this is my first time doing any kind of tutorial, but if you wanted to make a local (so only the player using it hears it) music player (which I know everyone wants to learn how to make), then uh, you’ve come to the right place

Okay, anyway, I’m going to be slightly more serious now (also, I’m not a perfect scripter, so just chill it might not be the best method)

OH WARNING: You can do this 2 ways you can make a button open the frame that is the music player, or you can just have the frame (for the tutorial showcase part, I made no button, so the frame is always there) so if you want to make it the button way I will show that later

So for the first step, what you want to do is make an ImageButton inside of a ScreenGui named MusicGui and name it to the background as I did here:

(In StarterGui, obviously)
The background can be customized however you want, or you can do it as I did here:

If you want to match colors with me (woo twins), set the ImageColor3 to 181, 75, 62 and you’ll get a fancy, really expensive diner red color its pretty epic. I picked it from a color wheel.

Okay, the next thing is step 2: The stuff inside.
It’s going to be a bit of stuff, and I am really, really bad at GUIs, and it’s going to be really weird how I do my backgrounds, but it’s okay.

Here is the layout. I will go into detail, so you don’t get confused, but here:

Here is the step by step (use the image as a guide):
1: Insert a sound and name it Music
2: Insert a LocalScript and name it MusicGuiHandler (we will get into this later, so just leave it for now)
3: Make an ImageButton and name it LoopingToggle, set the image to this URL in the properties: http://www.roblox.com/asset/?id=5267162614
Then, set the ImageColor3 to 115, 115, 115
Set its size to {0.041, 0},{0.082, 0} and its position to {0.427, 0},{0.652, 0}.
4: Make another ImageButton and name it PlayButton, this time setting the URL to
http://www.roblox.com/asset/?id=5267067484
For this button, make sure you leave the image color unless you want to customize it!
Set its size to {0.041, 0},{0.082, 0} and its position to {0.426, 0},{0.532, 0}.
**Also, I forgot to mention in replicated storage, make a folder and name it Decals. Then, inside, insert 2 decals. Name one Pause and another one Play. Set Pause’s Texture URL to
http://www.roblox.com/asset/?id=5267080246
and set Play’s Texture URL to
http://www.roblox.com/asset/?id=5267067484
This is what it should look like when you are done:

Pause
Play
Next step!
5: Create another ImageButton and name it VolumeDown and set the Image URL to
http://www.roblox.com/asset/?id=5267127680
Set the ImageButton’s size to {0.062, 0},{0.084, 0} and its position to {0.431, 0},{0.916, 0}.
Then, create a TextLabel inside of the button and set the text to Volume Down. Set the TextLabel’s size to {1.746, 0},{0.773, 0}. I have my font for every text set to GothamBold and the color white for the text, as well as TextScaled enabled, but this is all optional. I encourage you to play with the text and customize it!
Then, insert a LocalScript inside the button as well. You can rename this if you want, although I just left it unnamed.
6: Insert an ImageButton and name it VolumeToggle. Set the Image URL to
http://www.roblox.com/asset/?id=5267140011
Set the ImageColor3 to 115, 115, 115.
Set its size to {0.062, 0},{0.084, 0} and its position to {0.292, 0},{0.916, 0}.
Insert another TextLabel and set the text to Mute. Again, I used the same font and color as before.
Set the TextLabel’s size to {0.98, 0},{0.775, 0} and its position to {1.112, 0},{0.078, 0}.
7: Insert an ImageButton and name it VolumeUp. Set the Image URL to
http://www.roblox.com/asset/?id=5267123906
Set its size to {0.062, 0},{0.084, 0} and its position to {0.578, 0},{0.916, 0}.
Then, insert a LocalScript (again, you can rename it if you want) and also insert a TextLabel and set the Text to Volume Up.
Set the TextLabel’s size to {1.228, 0},{0.775, 0} and its position to {0.992, 0},{0.109, 0}.
8: Insert a TextBox and name it MusicInput. Set its size to {0.282, 0},{0.08, 0} and its position to {0.359, 0},{0.417, 0}. I added a UICorner to it with the CornerRadius set to 0,12, but this is all optional. Here is the color I used to go with the background color we set earlier (All the backgrounds will use this color):
Here is the Text info:
9: (I’m sorry it’s a lot but this is complex and I want to be as descriptive and helpful as possible)
Insert a frame. Set its size to {0.373, 0},{0.13, 0} and its position to {0.312, 0},{0.046, 0}. This will be called MusicInfo. I used the same color as I did for the TextBox, as well as the same font. I also put in a UICorner with the same radius as the TextBox. Nothing will go in here as this serves as a background that we will put text on later.
10: Make a frame and name it LoopButtonFrame. Set its size to {0.156, 0},{0.1, 0} and its position to {0.422, 0},{0.644, 0}. This is a background for the loop button and it will look BEAUTIFUL. Inside will be a TextLabel with the Text set to Loop and a UICorner. Set the TextLabel’s size to {0.737, 0},{0.651, 0} and its position to {0.261, 0},{0.173, 0}
11: Quick shortcut for the play background. Copy the loop background and paste it into the main background frame we created in the beginning. Rename it to PlayButtonFrame and set its size to {0.156, 0},{0.1, 0} and its position to {0.422, 0},{0.644, 0} (The TextLabel will be good if you copied and pasted it). Then just set the text to Play instead of Loop.
12: (Almost done with the stuff inside the frame!) Make a TextLabel and name it MusicName. Set the text to Not Playing. Set its size to {0.373, 0},{0.083, 0} and its position to {0.314, 0},{0.046, 0} Copy that, paste it into the background, and name the copy MusicOwner. Set that text to just blank. (So just get rid of the text like this)
and set its size to {0.373, 0},{0.05, 0} and its position to {0.313, 0},{0.117, 0}.
13: Make a TextLabel and name it MusicTimePos. Set the text to 00:00 and insert a UICorner (optional) Set its size to {0.324, 0},{0.081, 0} and its position to {0.338, 0},{0.199, 0}.
14: (Last thing!) Insert a TextLabel and name it VolumeAmount. Insert a UICorner and set the text to 10. Set its size to {0.415, 0},{0.101, 0} and its position to {0.291, 0},{1, 0}.

Step 3: First thing, good work on that last part it was a lot for me to type and for you to do so that’s cool now you’re like 85 steps closer to a music player! Anyway, this part is scripting! Okay so go back to that script that we made earlier, called MusicGuiHandler
Here’s my evidence btw

Insert a LocalScript and name it MusicGuiHandler (we will get into this later, so just leave it for now)

So first we start by defining variables (i feel professional now)

local mps = game:GetService("MarketplaceService")


local bg = script.Parent

local playBtn = bg:WaitForChild("PlayButton")
local loopingBtn = bg:WaitForChild("LoopingToggle")
local timePos = bg:WaitForChild("MusicTimePos")

local volumeToggleBtn = bg:WaitForChild("VolumeToggle")
local volumeUp = bg:WaitForChild("VolumeUp")
local volumeDown = bg:WaitForChild("VolumeDown")
local volumeAmount = bg:WaitForChild("VolumeAmount")

local musicName = bg:WaitForChild("MusicName")
local musicOwner = bg:WaitForChild("MusicOwner")

local musicInputBox = bg:WaitForChild("MusicInput")

local music = bg:WaitForChild("Music")


local isLooping = false
local isPlaying = false
local isMuted = false

local currentVolume = 10
local minVolume = 0
local maxVolume = 10

SHEESH THATS A LOT OF VARIABLES

Now, we set the text. This is in case you set the preset text on the TextLabels we made before to MEMEZMEMEZMEMEZ, the script gotchu.

musicName.Text = "Not Playing"
musicOwner.Text = ""
volumeAmount.Text = "10"
timePos.Text = "00:00"

Now it’s time for all the functions and the other stuff (basically just the rest of the script)

musicInputBox.FocusLost:Connect(function()
	
	local input = musicInputBox.Text
	local success, info = pcall(mps.GetProductInfo, mps, input)
	
	if success and info.AssetTypeId == 3 then
		
		music:Stop()
		isPlaying = false	
		playBtn.Image = game.ReplicatedStorage.Decals.Play.Texture
		
		music.SoundId = "rbxassetid://" .. input
		
		musicName.Text = info.Name
		musicOwner.Text = " By " .. info.Creator.Name
	end
end)

playBtn.MouseButton1Click:Connect(function()
	
	if isPlaying then
		isPlaying = false
		
		playBtn.Image = game.ReplicatedStorage.Decals.Play.Texture
		bg.PlayButtonFrame.TextLabel.Text = "Play"
		music:Pause()
		
	else
		isPlaying = true
		
		playBtn.Image = game.ReplicatedStorage.Decals.Pause.Texture
		bg.PlayButtonFrame.TextLabel.Text = "Pause"
		music:Resume()
	end
end)

loopingBtn.MouseButton1Click:Connect(function()
	
	if isLooping then
		isLooping = false
		
		music.Looped = false
		
		loopingBtn.ImageColor3 = Color3.fromRGB(95, 95, 95)
		
	else
		
		isLooping = true
		
		music.Looped = true
		
		loopingBtn.ImageColor3 = Color3.fromRGB(255, 255, 255)
	end
end)

volumeToggleBtn.MouseButton1Click:Connect(function()
	
	if isMuted then 
		isMuted = false
		
		volumeToggleBtn.ImageColor3 = Color3.fromRGB(95, 95, 95)
		
		music.Volume = currentVolume / 10
		
	else
		isMuted = true
		
		volumeToggleBtn.ImageColor3 = Color3.fromRGB(255, 255, 255)
		
		music.Volume = 0
	end
end)

volumeUp.MouseButton1Click:Connect(function()
	
	isMuted = false
	volumeToggleBtn.ImageColor3 = Color3.fromRGB(95, 95, 95)
	
	currentVolume = math.clamp(currentVolume + 1, minVolume, maxVolume)
	
	music.Volume = currentVolume / 10
	volumeAmount.Text = currentVolume
end)
volumeDown.MouseButton1Click:Connect(function()
	
	isMuted = false
	volumeToggleBtn.ImageColor3 = Color3.fromRGB(95, 95, 95)
	
	currentVolume = math.clamp(currentVolume - 1, minVolume, maxVolume)
	
	music.Volume = currentVolume / 10
	volumeAmount.Text = currentVolume
end)

game:GetService("RunService").RenderStepped:Connect(function()
	
	local musicTimePos = math.floor(music.TimePosition)
	
	local musicTimePosSecs = musicTimePos % 60
	local musicTimePosMins = math.floor(musicTimePos / 60)
	
	if string.len(musicTimePosSecs) < 2 then musicTimePosSecs = "0" .. musicTimePosSecs end
	if string.len(musicTimePosMins) < 2 then musicTimePosMins = "0" .. musicTimePosMins end
	
	timePos.Text = musicTimePosMins .. ":" .. musicTimePosSecs
end)

Okay that’s the handler WOO
Now, we will code the volume part in the scripts we inserted into the buttons. Go to volume up and volume down and paste this into the scripts we inserted into them (they have the same script; its just a tween to make it cute!)

script.Parent.MouseButton1Click:Connect(function()
	script.Parent.Parent.VolumeToggle:TweenPosition(UDim2.new(0.292, 0, 0.795, 0),"Out","Sine",0.2)
	script.Parent.Parent.VolumeUp:TweenPosition(UDim2.new(0.578, 0, 0.795, 0),"Out","Sine",0.2)
	script.Parent.Parent.VolumeDown:TweenPosition(UDim2.new(0.431, 0, 0.795, 0),"Out","Sine",0.2)
	script.Parent.Parent.VolumeAmount:TweenPosition(UDim2.new(0.291, 0, 0.879, 0),"Out","Sine",0.2)
	wait(3)
	script.Parent.Parent.VolumeAmount:TweenPosition(UDim2.new(0.291, 0, 1, 0),"Out","Sine",0.2)
	script.Parent.Parent.VolumeToggle:TweenPosition(UDim2.new(0.292, 0, 0.916, 0),"Out","Sine",0.2)
	script.Parent.Parent.VolumeUp:TweenPosition(UDim2.new(0.578, 0, 0.916, 0),"Out","Sine",0.2)
	script.Parent.Parent.VolumeDown:TweenPosition(UDim2.new(0.431, 0, 0.916, 0),"Out","Sine",0.2)
end)

Step 4: Scaling
If you’d like to scale your UIs that we made to fit on all devices (why wouldnt you want to its basically epic ui on all screens) I recommend the plugin AutoScale Lite - Roblox to scale your UIs to fit on all devices. I’m not going to go in detail on how to use this plugin, its pretty straightforward.

I scale the position and size, I don’t touch offset.

Step 5: Making a button open player
So I said I would show how to do this at the beginning like 3 hours ago and I am. So, if you just want the frame to be there, SKIP THIS STEP. You are finished! If you want a button, here is how.
Insert a TextButton into the MusicGui (not the background), and name it Close.
Set the BackgroundColor3 to 46, 46, 46, the size to {0, 200},{0, 50} and the position to {0.012, 0},{0.014, 0}. Insert a UICorner into the button. Set the text to Open Player. Insert a LocalScript in the button and type this:

local active = false
script.Parent.Parent.Background.Visible = false
script.Parent.MouseButton1Click:Connect(function()
	if active == false then
		active = true
		script.Parent.Parent.Background.Visible = true
		script.Parent.Text = "Close Player"
	else
		script.Parent.Parent.Background.Visible = false
		script.Parent.Text = "Open Player"
		active = false
	end
end)

Okay, so you finished WOO! I know you needed that and I know my keyboard needed that. Let’s see what it should look like when you’re finished so you know what it should look like.

Finished product:

(If you didn’t make the button obviously it won’t be there)

Now I will record a test woo

Thats what your product should look like. I hope this tutorial helped someone out there and I hope it wasn’t too confusing as I said it’s my first tutorial ever or anything like this so please criticize me in the replies. Okay goodnightttttttttttttttttttttttttttttt

fancy, really expensive diner red color