How do I make a music toggable button?

  1. What do you want to achieve? Keep it simple and clear!

Hi, all so I want to make a togglable music button.

  1. What is the issue? Include screenshots / videos if possible!

the issue is that when I click the toggle button it doesn’t toggle instantly I have to click it a second time to actually play the music even though I had MouseButton1Click event on it and there is no errors in the output.

  1. What solutions have you tried so far? Did you look for solutions on the Developer Hub?

I did some research on developer forum and google and couldn’t find a solution to this.

--- LocalScript
local player = game.Players.LocalPlayer
local Character = player.Character or player.CharacterAdded:Wait()
local SettingsButton = script.Parent.DisplaySettings.DisplayButtons:WaitForChild("SettingsButton")
local ShopButton = script.Parent.DisplayShop.DisplayButtons:WaitForChild("ShopButton")
local ResetButton = script.Parent.SettingsFrame.TextLabel.Resetbackground:WaitForChild("ResetButton")
local ResetBackground = script.Parent.SettingsFrame.TextLabel:WaitForChild("Resetbackground")
local SettingsFrame = script.Parent:WaitForChild("SettingsFrame")
local MusicButton = script.Parent.SettingsFrame.TextLabel.Musicbackground:WaitForChild("MusicButton")
local Musicbackground = script.Parent.SettingsFrame.TextLabel:WaitForChild("Musicbackground")
local ToggleSound = game.ReplicatedStorage.SoundModule:WaitForChild("ToggleSound")
local Sound = Instance.new("Sound")
local BlurEffect = game.Lighting:WaitForChild("Blur")
local canToggle = true

SettingsButton.MouseButton1Click:Connect(function()
	if SettingsFrame.Visible == false and canToggle then
		canToggle = false
		ToggleSound:Play()
		SettingsFrame.Visible = true
		BlurEffect.Enabled = true
		SettingsFrame:TweenPosition(
			UDim2.new(0.368, 0,0.331, 0),
			Enum.EasingDirection.Out,
			Enum.EasingStyle.Quart,
			.9,
			false
		)
		player.Character:WaitForChild("Humanoid").WalkSpeed = 0
		player.Character:WaitForChild("Humanoid").JumpPower = 0

		delay(1, function()
			canToggle = true
		end)

	elseif canToggle then
		canToggle = false

		ToggleSound:Play()
		SettingsFrame:TweenPosition(
			UDim2.new(0.368, 0,-0.351, 0),
			Enum.EasingDirection.In,
			Enum.EasingStyle.Quart,
			.9,
			false
		)

		delay(1, function()
			player.Character:WaitForChild("Humanoid").WalkSpeed = 16
			player.Character:WaitForChild("Humanoid").JumpPower = 50
			BlurEffect.Enabled = false
			SettingsFrame.Visible = false
			canToggle = true
		end)
	end
end)

MusicButton.MouseButton1Click:Connect(function()
	if MusicButton.Position == UDim2.new(0.054, 0,0.15, 0) then
		MusicButton.Position = UDim2.new(0.688, 0,0.125, 0)
		MusicButton.BackgroundColor3 = Color3.fromRGB(66, 200, 98)
		Musicbackground.BackgroundColor3 = Color3.fromRGB(85, 255, 125)
		Sound.SoundId = "rbxassetid://320597966"
		Sound:Play()
		Sound.Parent = player
	else
		MusicButton.Position = UDim2.new(0.054, 0,0.15, 0)
		MusicButton.BackgroundColor3 = Color3.fromRGB(170, 0, 0)
		Musicbackground.BackgroundColor3 = Color3.fromRGB(86, 86, 86)
		Sound:Stop()
	end
end)

ResetButton.MouseButton1Click:Connect(function()
	if ResetButton.Position == UDim2.new(0.054, 0,0.15, 0) then
		ResetButton.Position = UDim2.new(0.688, 0,0.125, 0)
		ResetButton.BackgroundColor3 = Color3.fromRGB(66, 200, 98)
		ResetBackground.BackgroundColor3 = Color3.fromRGB(85, 255, 125)
		game:GetService("StarterGui"):SetCore("ResetButtonCallback", false)
	else
		ResetButton.Position = UDim2.new(0.054, 0,0.15, 0)
		ResetButton.BackgroundColor3 = Color3.fromRGB(170, 0, 0)
		ResetBackground.BackgroundColor3 = Color3.fromRGB(86, 86, 86)
		game:GetService("StarterGui"):SetCore("ResetButtonCallback", true)
	end
end)

Instead of toggling the music button based on the position, try having a variable that says whether or not the music is toggled, like this.

local musicToggled = false -- Create the toggle button, default to false

MusicButton.MouseButton1Click:Connect(function()
	if not musicToggled then -- Check if the music is toggled. If it isn't, turn it on. If it is, turn it off.
		MusicButton.Position = UDim2.new(0.688, 0,0.125, 0)
		MusicButton.BackgroundColor3 = Color3.fromRGB(66, 200, 98)
		Musicbackground.BackgroundColor3 = Color3.fromRGB(85, 255, 125)
		Sound.SoundId = "rbxassetid://320597966"
		Sound:Play()
		Sound.Parent = player
        musicToggled = true -- Set the toggled variable to TRUE
	else
		MusicButton.Position = UDim2.new(0.054, 0,0.15, 0)
		MusicButton.BackgroundColor3 = Color3.fromRGB(170, 0, 0)
		Musicbackground.BackgroundColor3 = Color3.fromRGB(86, 86, 86)
		Sound:Stop()
        musicToggled = false -- Set the toggle variable to FALSE
	end
end)

I really hope this helps :slight_smile:

YO it works! can I share the variable for the other toggle button or do I have to create a new variable for it?

Do the same thing for the other toggle buttons, I am so glad this helped you!