Volume Slider

beginner

By: Henrique Campos - July 18, 2020

Let’s see how to let players control your game’s audio volume with sliders. You can use that in your game’s audio settings, both on desktop and mobile platforms.

There’s a dedicated node built into Godot: the HSlider.

Create a new scene with an HSlider and rename it to VolumeSlider. In the Inspector, set the node’s Max Value to 1.0 and the Step to a low value like 0.05. Doing so makes the slider produce values ranging from 0 to 1 in increments of 0.05. Here, we want a value of 1 to represent 100% audio volume or -0 dB.

Audio volume is measured in decibels (dB), a logarithmic scale. An increase of three dB doubles the volume, so it’s hard to work directly with this scale. GDScript has two built-in functions to help us turn decibels into a linear scale in the [0.0, 1.0] range and back: db2linear and linear2db.

Volume slider setttings

Controlling mixer tracks with a slider

Add a new script to the VolumeSlider node.

The idea here is that we sync the VolumeSlider > Value to an Audio Bus volume. So we need to know which Audio Bus it syncs to. For that, we can export a String variable that represents the Audio Bus name. You can access and manage audio buses on the Audio tab at the bottom of the editor. From there, you know the name of the Audio Bus you want to sync. By default, the VolumeSlider syncs to the “Master” bus.

extends HSlider


export var audio_bus_name := "Master"

onready var _bus := AudioServer.get_bus_index(audio_bus_name)


func _ready() -> void:
	value = db2linear(AudioServer.get_bus_volume_db(_bus))


func _on_value_changed(value: float) -> void:
	AudioServer.set_bus_volume_db(_bus, linear2db(value))

Since we can only set the volume of an Audio Bus using its index, we need to retrieve its index by requesting it the Audio Server to find the Audio Bus index using the audio_bus_name. We can do that using an onready variable.

Right when the slider is ready, we sync its value to the Audio Bus volume, of course converting the volume to linear.

We need to change the bus volume every time our VolumeSlider value changes, so let’s connect its value_changed signal to itself, here we renamed the signal callback to _on_value_changed.

Volume slider value changed signal connection

And there we have it, an easy way to allow players to interact with the game’s audio. Now a quick tip, Sliders in Godot don’t lose focus automatically when we stop interacting with them, which can cause some unexpected behaviors. Connect the mouse_exited signal directly to the builtin release_focus method to ensure that as soon as the mouse is out the VolumeSlider, it loses the focus and stop consuming inputs.

Releasing volume slider focus on mouse exited

Made by

Our tutorials are the result of careful teamwork to ensure we produce high quality content. The following team members worked on this one:

Henrique Campos

Tutor

Nathan Lovato

Founder

Related courses

Banner image

Godot Node Essentials 60$

Learn to create professional 2D games with the Godot game engine.

Banner image

Ultimate Godot course bundle 295$

This ultimate bundle gives you access to ALL our current and future Godot courses, at a discount. It’s like a lifetime membership.

Related tutorials

1 comment

Hey I noticed that the slider continues to move up and down when you press the left and right keys, are there any solutions to this?
Reply to Josiah

Enter your email to get notified when someone replies to your comment.
We encrypt your addres with a strong 256-bit AES encryption.
We'll only use your address for notifications. You can unsubscribe anytime.