I no longer suggest using my tutorial as it is buggy. I recommend using this persons one instead:
Old post
Hello there!
Today I’m going to show you how to make your very own, Music Player GUI! (As you could guess from the title) It includes a progress bar, a mute button and more! (See reference image below) So lets get started!
First, you’ll need to create a new ScreenGui in StarterGui, name it MusicGui, then insert a Frame, scale it how you want. Inside the Frame, create two more Frames, one called Background and one called OverlayFrame. Make these both the same size and a long thin rectangle shape and make sure the OverlayFrame is on top of the Background frame. To do this, change the index of the OverlayFrame to 2.
Now create two TextLabels and position them like in the image below.
You can start to change the colours of it as we go along.
Name the top one
NowPlaying and name the bottom one SongName. You don’t need text for SongName but in NowPlaying, change the text to Now Playing:.
I know this might be getting a bit boring so I’m going to try to make you more awake with this BIG text.
Feeling awake now? Good! 
Now inside the OverlayFrame, create another frame called ProgressBar and scale it to {1, 0},{1, 0} so it covers the whole of the OverlayFrame. Then insert a LocalScript inside the ProgressBar. So your Explorer should look something like this:
Inside the LocalScript, paste the following text in;
local RunService = game:GetService("RunService")
local Player = game.Players.LocalPlayer
local PlayerGui = Player:WaitForChild("PlayerGui")
local MusicProgress = PlayerGui.MusicGui.Frame
local Songs = game.Workspace.Sounds
RunService.RenderStepped:Connect(function()
for _, Song in pairs(Songs:GetChildren()) do
if Song:IsA("Sound") and Song.IsPlaying == true then
MusicProgress.SongName.Text = Song.Name
local Progress = Song.TimePosition / Song.TimeLength
MusicProgress.OverlayFrame.ProgressBar.Size = UDim2.new(Progress, 0, 1, 0)
end
end
end)
We’re almost done, hang in there!
Next, insert a Folder into Workspace and name it Sounds. Create a Script and name it SoundManager and paste the following text in;
local Songs = game.Workspace.Sounds:GetChildren()
while true do
local RandomSong = Songs[math.random(1, #Songs)]
if RandomSong:IsA("Sound") then
RandomSong:Play()
RandomSong.Ended:Wait()
RandomSong:Stop()
end
end
Then go into your toolbox and find some audio’s, choose which ones you’d like and insert them into the folder or go to the Roblox Library and copy the ID’s of the audio’s you’d like.
This is what your Explorer will look a bit like:
Sorry, almost forgot the mute button! Create a new ImageButton inside the main Frame and name it MuteButton. Change the Image to http://www.roblox.com/asset/?id=6664390892. Then insert a LocalScript inside it. Copy and paste this text into it;
local Songs = game.Workspace.Sounds
local mute = false
script.Parent.MouseButton1Click:Connect(function()
for _, Song in pairs(Songs:GetChildren()) do
if Song:IsA("Sound") then
Song.Volume = mute and 0.5 or 0
end
end
script.Parent.Image = mute and "rbxassetid://6664390892" or "rbxassetid://6664391914"
mute = not mute
end)
And that should be you done!
If you think I have missed anything out or it isn’t working for you, send me a reply on this post!
But if you are too lazy and honestly I feel you because sometimes I get pretty lazy and creating this actually took me quite a bit of time so you can go ahead and download this Music Player GUI below!
Music Player GUI.rbxm (9.6 KB)
Or you can get it off the Roblox library!
https://www.roblox.com/library/7850640503/Music-Player-GUI
I’m sorry if I didn’t do a good job at explaining this but this is my first forum tutorial so tell me how I did!
Special Thanks:
xXxLoILPxXx (@ShyFlooo)
deafaultyboii1324 (@deafaultyboii1324)
Jackscarlett (@JackscarIitt)
Afrxzo (@Afrxzo)
EmbatTheHybrid (@EmbatTheHybrid)
LucasTutoriaisSaimo (@LucasTutoriaisSaimo)
sworded333 (@sworded333)
AmitRoblox1987 (@AmitRoblox1987)
FlabbyBoiii (@FlabbyBoiii)
change the last three to your sizes but not the one that says Progress.
