Making a music player that displays the current song, as well as a mute and skip button

This tutorial will cover how you can make a music player that can have any number of songs, as well as a mute button, skip button, and a display that shows which song is currently playing.

Edit 03.03.2021: Added a simple line of code to make sure the player won’t get stuck.

I made this tutorial, because I felt like too few people actually know how to make something that shouldn’t be too difficult to set up, and because I wanted to experience what it was like to make a community tutorial for others to read.

Setting up the Gui

Let’s start by adding a new ScreenGui to the StarterGui in the explorer:
image
(The ScreenGui can have any name, but I would recommend something that’s easy to navigate to)

Next, we want to add one TextLabel and two TextButtons to the ScreenGui. We will name the TextLabel “CurrentSongDisplay” and the two buttons “Skip” and “Mute”. We will also insert a Sound to the ScreenGui, named “Music”

Note: The names of these are more important, as we’ll be referring to them in the script
image

Now you want to take your time to set up the Gui. I have mine looking like this:


Note: if the display at the top of the screen shifts down when you test the game, enable IgnoreGuilnset in the ScreenGui

Disabling ResetOnSpawn is also a good idea, to make sure the music player doesn’t reset when the player dies

The script

It’s time to write the script. Start by adding a LocalScript to the ScreenGui:
image

We’ll start this script by writing the local variables:

local muteButton = script.Parent.Mute
local skipButton = script.Parent.Skip
local currentSongDisplay = script.Parent.CurrentSongDisplay
local musicPlayer = script.Parent.Music

We will also be using the MarketplaceService to get the title of all the songs

local marketplaceService = game:GetService("MarketplaceService")

Now, let’s add the songs. We’re going to be using a table to store all the SongId’s:

local songs = {
    3350929665, --Some song that I made a while back
    5217164927, --That "Putin Walk" meme
    4363160087, --Revenge - Jailbreak Parody
    5036927156 --PewDiePie - Floor Gang
}

Pay attention to the fact that the last SongId doesn’t have a comma. That’s to let the script know that there are no more table values to store.

Now, let’s make the mute and skip button do stuff. First, we have to tell the script to run a function when the buttons have been clicked/activated:

muteButton.Activated:Connect(function()
    
end)

skipButton.Activated:Connect(function()
    
end)

For the mute button, we’re actually going to pause the music player instead of turning the volume to 0. This is because it’s both easier to do, and I find it more fitting. If you know what you’re doing, you can of course use the other method, but if you don’t, just follow my instructions:

We’re going to be using “if” statements to check whether the music player is paused or not. This can be done by checking the bool value IsPaused. We’ll also change the text of the mute button to “Unmute” and back to make it more user friendly:

muteButton.Activated:Connect(function()
    if musicPlayer.IsPaused == false then --We know that the music is playing
        musicPlayer:Pause()
        muteButton.Text = "Unmute"
    else --We know that the music is already paused
        musicPlayer:Resume()
        muteButton.Text = "Mute"
    end
end)

The skip button is a lot easier to script. All we have to do is set the music player’s time position to the end of the song. To do this, we can use the value TimeLength:

skipButton.Activated:Connect(function()
    musicPlayer.TimePosition = musicPlayer.TimeLength
end)

It’s time to write the final loop for the script. This loop will make sure all the songs will play in order, as well as changing the currentSongDisplay’s text to the title of the song:

    while true do
	for count = 1, #songs do
		musicPlayer.SoundId = "rbxassetid://"..songs[count]

		songInfo = marketplaceService:GetProductInfo(songs[count])

		if not musicPlayer.IsLoaded then musicPlayer.Loaded:Wait() end --Only waits for the loading to finish if the song isn't already loaded. This is to ensure that the script won't bug out, if the song were to load immediately.

		musicPlayer.TimePosition = 0
		musicPlayer:Play()

		currentSongDisplay.Text = "Now playing: "..songInfo.Name
		musicPlayer.Ended:Wait()
		currentSongDisplay.Text = "Loading next song..."
	end
end

Here’s the full script, both for comparison, and for the lazy users:

local muteButton = script.Parent.Mute
local skipButton = script.Parent.Skip
local currentSongDisplay = script.Parent.CurrentSongDisplay
local musicPlayer = script.Parent.Music

local marketplaceService = game:GetService("MarketplaceService")

local songs = {
	3350929665, --Some song that I made a while back
	5217164927, --That "Putin Walk" meme
	4363160087, --Revenge - Jailbreak Parody
	5036927156 --PewDiePie - Floor Gang
}

muteButton.Activated:Connect(function()
	if musicPlayer.IsPaused == false then
		musicPlayer:Pause()
		muteButton.Text = "Unmute"
	else
		musicPlayer:Resume()
		muteButton.Text = "Mute"
	end
end)

skipButton.Activated:Connect(function()
	musicPlayer.TimePosition = musicPlayer.TimeLength
end)

while true do
	for count = 1, #songs do
		musicPlayer.SoundId = "rbxassetid://"..songs[count]

		songInfo = marketplaceService:GetProductInfo(songs[count])

		if not musicPlayer.IsLoaded then musicPlayer.Loaded:Wait() end

		musicPlayer.TimePosition = 0
		musicPlayer:Play()

		currentSongDisplay.Text = "Now playing: "..songInfo.Name
		musicPlayer.Ended:Wait()
		currentSongDisplay.Text = "Loading next song..."
	end
end

Congrats, you made it to the bottom of the page! I don’t know if I should reward you or anything, but here’s a cookie :cookie:

75 Likes

This topic was really helpful, I like the concept which we can mute and skip. The GUI that displayes on top of the screen might be good for games that has the musical type of style. 8/10!

3 Likes

I’ve also recently learned to use the tweenservice, which you can use to fade the volume down and up, before you either pause or skip a song

3 Likes

Hey! I was also trying to make a music player from this guy aswell great thanks to him too

but once again this vesion’s better cus now i can skip and mute songs!
Big thanks cakeman :slight_smile:

2 Likes

The skip button isn’t working for me and it’s not displaying the current song. Please help D:

You must have typed something incorrectly. You can just copy the entire script from the bottom of the tutorial, and it should work. Just make sure that defining where a button is, is case sensitive.

2 Likes

Thanks! It worked you’re a legend :grin: :slightly_smiling_face:

thanks man you really helped me

2 Likes

Hey! You see i did put an ad sound id, and i want people to not skip it, do you know how?

I absolutely love this music player! I did some tweaking with the code so it randomly selects a song instead of going in order but overall its an amazing system