Build a Voice Transcription Panel in Banter

The Banter scene API can start voice detection, stop a tracked transcription request, and report the result through the transcription event. Banter UI controls can expose that flow inside the space.

Transcription Panel Workflow

Create a world-space panel, add start and stop buttons, then display voice and transcription events in a label.

Create a BanterUIPanel with a status label.
Call StartTTS(true) and StopTTS() from UI buttons.
Update the label when Banter emits voice-started or transcription.

Create the Panel and Status Label

const panelObject = new BS.GameObject({
  name: "VoiceTranscriptionPanel",
  localPosition: new BS.Vector3(0, 2, 3)
});

const panel = panelObject.AddComponent(
  new BS.BanterUIPanel({
    resolution: new BS.Vector2(800, 600),
    screenSpace: false,
    enableHaptics: true,
    enableSounds: false
  })
);

const statusLabel = new BS.UILabel();
statusLabel.SetProperty(
  BS.PN.text,
  "Press Start Listening"
);
statusLabel.style.fontSize = "28px";
statusLabel.style.color = "#FFFFFF";
panel.root.AppendChild(statusLabel);

The label text is changed later with the same documented SetProperty() pattern.

Add the Start Button

Pass true to StartTTS() to enable voice detection:

const startButton = new BS.UIButton();
startButton.SetProperty(
  BS.PN.text,
  "Start Listening"
);
startButton.style.width = "220px";
startButton.style.height = "50px";

startButton.OnClick(() => {
  scene.StartTTS(true);
});

panel.root.AppendChild(startButton);

Add the Stop Button

The ID passed to StopTTS() is returned with the transcription result and can be used to track the request:

const requestId = "caption-request-1";

const stopButton = new BS.UIButton();
stopButton.SetProperty(
  BS.PN.text,
  "Stop and Transcribe"
);
stopButton.style.width = "220px";
stopButton.style.height = "50px";

stopButton.OnClick(() => {
  scene.StopTTS(requestId);
});

panel.root.AppendChild(stopButton);

Use a distinct request ID when the script needs to distinguish separate transcription operations.

Show the Listening State

Banter emits voice-started when TTS begins listening:

scene.On("voice-started", () => {
  statusLabel.SetProperty(
    BS.PN.text,
    "Listening..."
  );
});

Display the Transcription

The transcription event includes id and message:

scene.On("transcription", (event) => {
  if (event.detail.id !== requestId) {
    return;
  }

  statusLabel.SetProperty(
    BS.PN.text,
    event.detail.message
  );
});

Checking the returned ID prevents this panel from displaying a result intended for a different tracked request.

Keep Event Registration Together

Register voice listeners when the rest of the panel is created so the controls and their feedback use the same label and request ID:

scene.On("voice-started", handleVoiceStarted);
scene.On("transcription", handleTranscription);

The functions in this shortened example refer to handlers containing the same label updates shown above.

Common Questions

Why does my Banter transcription handler ignore the result?

Compare event.detail.id with the exact ID passed to StopTTS(). A different ID indicates a different tracked request.

Why does the label stay on Listening?

Confirm that the stop button calls StopTTS() and that the transcription listener is registered before the result is returned.