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.

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 --Loops the amount of songs before it restarts
		musicPlayer.SoundId = "rbxassetid://"..songs[count] --Sets the music player's SoundId to the appropriate song
		songInfo = marketplaceService:GetProductInfo(songs[count]) --Gets the info of the song's asset id, which we'll use for currentSongDisplay
		musicPlayer.Loaded:Wait() --Waits until the song has loaded before continuing
		musicPlayer.TimePosition = 0 --Sets the time position to 0, to make sure the music player plays from the start
		musicPlayer:Play()
		currentSongDisplay.Text = "Now playing: "..songInfo.Name --Sets the currentSongDisplay text
		musicPlayer.Ended:Wait() --Waits until the song has ended before continuing
		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])
		musicPlayer.Loaded:Wait()
		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:

50 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!

6 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

6 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:

4 Likes