Last reviewed 31 Jul 2026
Applies to
Banter VR JavaScript SDK Spatial audio Object events
Difficulty Intermediate

Build a Spatial Sound Button in Banter

BanterAudioSource plays audio in 3D space. Add it to a clickable GameObject and call PlayOneShotFromUrl() to play a sound from the object's position.

Spatial Sound Workflow

Build the button, attach a 3D audio source, and play a sound URL from its click handler.

  1. Create visible button geometry with a collider.
  2. Add BanterAudioSource with spatialBlend: 1.
  3. Call PlayOneShotFromUrl() from the GameObject's click event.

Create the Sound Button

const soundButton = new BS.GameObject({
  name: "SpatialSoundButton",
  localPosition: new BS.Vector3(0, 1.2, 3)
});

soundButton.AddComponent(
  new BS.BanterBox({
    width: 0.5,
    height: 0.25,
    depth: 0.5
  })
);

soundButton.AddComponent(
  new BS.BoxCollider({
    isTrigger: false,
    center: new BS.Vector3(0, 0, 0),
    size: new BS.Vector3(0.5, 0.25, 0.5)
  })
);

Add the Audio Source

const audio = soundButton.AddComponent(
  new BS.BanterAudioSource({
    volume: 1,
    pitch: 1,
    mute: false,
    loop: false,
    playOnAwake: false,
    bypassEffects: false,
    bypassListenerEffects: false,
    bypassReverbZones: false,
    spatialBlend: 1
  })
);

The official reference defines spatialBlend as 0 for 2D audio and 1 for 3D audio.

Play a Sound URL on Click

const soundUrl =
  "https://example.com/sound.mp3";

soundButton.On("click", (event) => {
  console.log("Clicked at:", event.detail.point);
  audio.PlayOneShotFromUrl(soundUrl);
});

Replace the example URL with the sound file the space should play.

Configure Volume and Pitch

The audio component accepts:

  • volume from 0 to 1
  • pitch for playback speed
  • mute
  • loop
  • playOnAwake
  • effect, listener-effect, and reverb-zone bypass settings
  • spatialBlend from 2D to 3D

Set those values when the component is created:

const audio = soundButton.AddComponent(
  new BS.BanterAudioSource({
    volume: 0.6,
    pitch: 0.9,
    mute: false,
    loop: false,
    playOnAwake: false,
    spatialBlend: 1
  })
);

Other Playback Methods

The official API also provides:

audio.Play();
audio.PlayOneShot(0);

PlayOneShot() selects a clip by index. PlayOneShotFromUrl() accepts a sound URL directly.

Common Questions

Why does my Banter sound not feel positioned in 3D?

Set spatialBlend to 1 on the audio source. The official reference defines 1 as 3D and 0 as 2D.

Why does the Banter sound play as soon as the object is created?

Set playOnAwake to false when playback should begin only from the click handler.

Official References

Related Navigation