Add Dynamic Subtitles and Closed Captions to Your Roblox Game

Resources Community Tutorials
, , , ,
#1

Hello all,

I wanted to share a recent tutorial I created, outlining the process of developing a custom closed captioning or subtitle system for Roblox. To make the process easier, the provided model includes all necessary components and examples.

Overview

Roblox lacks a native closed captioning or subtitle system, so we need to create a custom solution. This guide will demonstrate how to implement a custom subtitle system using a LocalScript and a settings ModuleScript that automatically adapts to any playing audio within Roblox. The system uses the SubRip (SRT) format for subtitles.

Required model
Get the “DynamicSRT” model from the Roblox developer catalogue. This model includes all necessary components like ScreenGui, LocalScript, ModuleScript, and TextBox.

Instructions

  1. Insert the model

    • Insert the “DynamicSRT” model from the Roblox developer catalogue into your game.

  2. Setup the ScreenGui

    • Move the ScreenGui from the model into StarterGui.
    • Ensure the ScreenGui contains a TextBox which will display the subtitles.

  3. Move the LocalScript

    • Inside the ScreenGui, there should be a LocalScript named DynamicSRT.
    • Make sure this LocalScript is a child of the ScreenGui.

  4. Verify the Settings ModuleScript

    • Inside the DynamicSRT script, ensure there is a ModuleScript named Settings.
    • The Settings ModuleScript contains default settings for the subtitles, such as the TextBox reference and clear text settings.

  5. Add subtitles to audio

    • For each Sound instance in your game that you want to add subtitles to, create a ModuleScript as a child of the Sound.
    • Name the ModuleScript with “SRT” in its name (e.g., “ExampleSRT”).
    • The ModuleScript should follow the template provided below, containing the SRT subtitles.

Example “ExampleSRT” ModuleScript

local Settings = {
    -- Optional setting overrides for subtitles
    TextLabel = nil, -- Text object to display captions
    ClearText = "", -- Text to set the TextBox when cleared
    ClearOnSubtitleEnd = true, -- Clear the TextBox when a subtitle ends
    ClearOnAudioEnd = true, -- Clear the TextBox when audio ends
    UpdateInterval = 0, -- Wait interval (in seconds) to update the text with new captions
    
    -- SRT file for parent Sound
    SRT = [[
1
00:00:00,000 --> 00:00:01,000
<b>Warning.</b>

2
00:00:01,000 --> 00:00:03,740
Medical facility quarantine breach detected.
    ]],
}

return Settings

The SRT format

  • Each subtitle entry starts with a unique ID.
  • The ID is followed by a timestamp indicating the start and end times for the subtitle, separated by an arrow (-->).
  • Below the timestamp, the subtitle text is written.
  • Example:
    1
00:00:00,000 --> 00:00:01,000
Warning.

2
00:00:01,000 --> 00:00:03,740
Medical facility quarantine breach detected.
  • If rich text is enabled, you can use HTML-like tags to format the subtitles.
  • Example:
    1
00:00:00,000 --> 00:00:01,000
<b>Warning.<b/> (Bold text.)

2
00:00:01,000 --> 00:00:03,740
<i>Medical facility quarantine breach detected.</i> (Italic text.)

Join the game to see the subtitles in action. The LocalScript will automatically adapt to any Sound instance and display the corresponding subtitles in the TextBox. This will only affect the client side, so you must join the game rather than simply running it.

You can customize the appearance of the TextBox in ScreenGui to match your game’s design.

SRT files can be created manually or with automatic transcription services like the one I have linked at the bottom of the post. You’ll usually want to modify automatic transcriptions so they align properly.

Feel free to provide any feedback or questions you may have. Your input is greatly appreciated.

Thank you!

13 Likes
#2

Can we see some videos of it in action?

1 Like
#3

It is 100% dependent on your design choices. However, I’ve recorded a demo of what the tutorial would produce based on the default elements provided in the model on the Roblox Creator Store.

Here you go!