Making a Music Button

In the last tutorial we covered the basics of how to add 2D elements to our game. In this tutorial we learn how to add a button to our game that enables and disables background music.

Adding the button[edit]

We add a button much like we add any other 2D element. First, we need to insert a ScreenGui into StarterGui. Inside that ScreenGui insert an ImageButton. Change the Position property to {0, 5},{0.5, -64} which will put the button on the left middle of the player's screen.

We now need two images for the button to help give our players feedback; one image for when the music is on and one for when it is off. The example uses the following images which you are free to use (simply right click and Save Image As...).

MusicOn.png MusicOff.png

In your game open the View tab and open the Game Explorer. Right click on Assets and select Add Multiple Images to quickly add the two images for the button. Click on the Image property of the ImageButton we added and select the MusicOn image. We can also take this opportunity to make the button a bit smaller to match the image's native size by setting the Size property to {0, 64},{0, 64}.

MusicButton InGame.png

Adding the music[edit]

Let's add the music to our game now. You can upload an mp3 or ogg file to ROBLOX if you have a custom sound to use. To do this, navigate to the Audio tab of the ROBLOX Develop page. There you can upload a local sound file and give it a name.

Uploaded audio files must be in .mp3 or .ogg format, must be 120 seconds or shorter, and smaller than 8192 KB. It currently costs R$100 to upload an audio file.
If you don't want to upload a sound right now, feel free to simply use the SoundId from the example below.

Once you have uploaded a Sound it will be added to your list of sounds on the Develop page. Click on the sound's name to go to it's page. Look at the URL and copy the number at the end.

MusicButton SoundUrl.png

Now we are ready to add the sound to the game. Right click on the ImageButton we added earlier and insert a new Sound. In the SoundId field of this sound type the string "rbxassetid://" followed by the number you copied earlier from the uploaded sound's URL. Also, make sure the Looped Property for the sound is enabled.

MusicButton Properties.png

Now the sound is in our game and ready to play.

Binding function to button click[edit]

The last thing we need to do is bind a function to the click event of our button to turn the music on and off. To do this, we will need a LocalScript. A LocalScript is similar to the Script object we have used in other tutorials. LocalScripts are used to perform actions locally on the player's machine, such as getting input or displaying interface elements. Regular Scripts are used to manipulate things on the Server, such as the position and properties of Parts, accessing data, and most other game logic. In this case we are getting input from the player and changing if music is playing for that player or not. Both of these actions happen on the player's machine, not the Server, so we need a LocalScript.

Insert the LocalScript into the ImageButton we added. Inside the script let's first make a variable for the button itself and for the Sound object we inserted which will play the music. Because sounds can take a bit of time to load, we have to use WaitForChild before we can store the sound in a variable.

local button = script.Parent
local sound = button:WaitForChild('Sound')

Next, lets make a call to start playing the music:

local button = script.Parent
local sound = button:WaitForChild('Sound')
 
sound:Play()

Now we can define the function to handle the button click. When the button is clicked we want to stop the music if it is already playing. If the music isn't playing currently, then we can resume playing. We also need to bind the function to the MouseButton1Click event of the button to make the function fire whenever the player clicks on the button.

local button = script.Parent
local sound = button:WaitForChild('Sound')
 
sound:Play()
 
local function onButtonClick()	if sound.IsPlaying then		sound:Stop()	else		sound:Play()	endend button.MouseButton1Click:connect(onButtonClick)

Lastly, let's change the button's image when the player clicks on it for visual feedback.

local button = script.Parent
local sound = button:WaitForChild('Sound')
 
sound:Play()
 
local function onButtonClick()
	if sound.IsPlaying then
		button.Image = 'rbxgameasset://Images/MusicOff'		sound:Stop()
	else
		button.Image = 'rbxgameasset://Images/MusicOn'		sound:Play()
	end
end
 
button.MouseButton1Click:connect(onButtonClick)

Now if we play our game we have background music that we can toggle on and off with our new button!