Sound Visualization - Another way to make your experience Accessible

hi friends,

It’s been a while since I’ve posted here. Today I wanted to share a project I started working on in March.

Accessibility is important- it’s a way for those who may have impairments or other forms of disabilities to play your game. It enables them to fully experience games in ways that accommodate their disabilities, whether visual, audio, or physical. At RDC24, I did a lightning talk on why adding accessibility is important. I shared 3 settings that you can incorporate accessibility into your game. You can check it out here:

One of the settings I brought up was sound visualization. Sound visualization indicates where sound is coming from and how far you’re from the sound- allowing those who have hearing impairments to experience games that depend on sound to immerse themselves into your game.

Today, I’d like to release a module that does just that, introducing my module: Sound Visualization

Suppose your game depends on sound as a key element of your game, such as hearing gunshots in an FPS game and deciding where your next movement will be. Try playing your game with volume 0- can you play it? Most likely not. Sound visualization indicates where the sound is coming from and shows how far you are from the source (that being through transparency; the more transparent, the further you are from the source.)

Implementation

  1. Get the Audio Visualizer model here: https://create.roblox.com/store/asset/113552812309569/Audio-Visualizer
  2. Load into your place and insert the module into ReplicatedStorage
  3. Create a LocalScript in either StarterGui or StarterPlayer>StarterPlayerScripts
  4. Require the AudioVisualizer module and call the new() constructor as seen in the code below:
local ReplicatedStorage = game:GetService("ReplicatedStorage")

local AudioVisualizer = require(ReplicatedStorage:WaitForChild("AudioVisualizer"))

local Visual = AudioVisualizer.new()
  1. Create a part in Workspace that has a sound parented to it like seen here:
    image

  2. Set the SoundId property to a sound you’d like, in this case, I used this: rbxassetid://1848354536

  3. We will want to edit the Emitter properties so that you can’t hear the sound from a very far distance. In my case, I set the RollOffMaxDistance to 50. All RollOffMode’s are supported.
    image

  4. Back in the local script, we need to add the sound object for the visualizer to track. We can do so by calling the AddSound() method. AddSound() takes 2 parameters: Sound Object and Visualizer settings (more info below). Let’s also have the sound Loop and start Playing.

Visual:AddSound(workspace:WaitForChild("AudioSource"):WaitForChild("Sound"))

workspace:WaitForChild("AudioSource"):WaitForChild("Sound").Looped = true
workspace:WaitForChild("AudioSource"):WaitForChild("Sound"):Play()
  1. Once we add all our sources, just call :Init() to enable and run the system.
Visual:Init()

API

.new() - Construct the AudioVisualizer

local Visual = AudioVisualizer.new()

:Init() - Enable the audio visualizer system and have the sources that are being tracked visualize their location and how far you are from the source (Transparency is used; more transparent the frame, the further away you are.)

Visual:Init()

:AddSound(Sound: Sound, VisualizerSettings: {}) - Add a sound to be tracked; Sound must be parented to a BasePart, Model, or Tool to work; it needs to be physically in the workspace- BasePart recommended. VisualizerSettings add customization to how the visualization of the sound Is perceived.

{
   Image: string -- Image shown when audio is visualized
   ArcColor: Color3 -- Color of the Arc
   ArcVisible: boolean -- show/hide the arc 
}

Example Code:

Visual:AddSound(workspace:WaitForChild("AudioSource"):WaitForChild("Sound"), {
	Image = "rbxassetid://0",
	ArcColor = Color3.fromRGB(255, 85, 255),
	ArcVisible = false
})

:RemoveSound(Sound: Sound) - Removes the sound from the visualizer and is no longer tracked.

Visual:RemoveSound(workspace:WaitForChild("AudioSource"):WaitForChild("Sound"))

:Disable() - Disables the system, no longer is tracking anything, and the frames are hidden

Visual:Disable()

:Destroy() - Destroys the system, making it no longer usable.

Visual:Destroy()

Notes

In order for this system to effectively work, it is recommended that the sound you are tracking is parented to a BasePart. I can’t track the sound’s position in a 3D space sadly, so this is the best alternative. The goal of this module is to make experiences more accessible- be empathetic on what you are visualizing. You should really only visualize sound that is important to the gameplay- minor sounds should be avoided as players may confuse it as a major part of the gameplay.

You can alter the module’s source code! You can change it however you’d like, but I can’t really help you if you alter it and it no longer works as intended.

If you have any questions or concerns, please let me know! Happy to help make more experiences accessible so more people can enjoy your games :grin:

Until next time,
WooleyWool :heart:

15 Likes

Thank you for this and making it open sourced.

I’d like to add this to my next game, and I’m eternally appreciative of you putting all the steps and making it easy.

3 Likes

This is great for many applications. Great job!

1 Like