threlte logo
@threlte/extras

<Audio>

Create a non-positional (global) audio object. This uses the Web Audio API.

You need to have an <AudioListener> component in your scene in order to use <Audio>and <PositionalAudio>components. The <AudioListener> component needs to be mounted before any <Audio> or <PositionalAudio> components:

<T.PerspectiveCamera makeDefault>
  <AudioListener />
</T.PerspectiveCamera>

<PositionalAudio />

Example

<script>
  import { T, Canvas } from '@threlte/core'
  import { AudioListener, Audio } from '@threlte/extras'
</script>

<Canvas>
  <T.PerspectiveCamera
    makeDefault
    position={[3, 3, 3]}
    lookAt={[0, 0, 0]}
  >
    <AudioListener />
  </T.PerspectiveCamera>

  <Audio src={'/audio/track.mp3'} />
</Canvas>

Component Signature

<Audio> extends <T.Audio> and supports all its props, slot props, bindings and events.

Props

name
type
required
default
description

src
string | AudioBuffer | HTMLMediaElement | AudioBufferSourceNode | MediaStream
yes

autoplay
boolean
no

detune
number
no

id
string
no
default
The id of the AudioListener this Audio will be attached to.

loop
boolean
no

playbackRate
number
no

volume
number
no
The value should range between 0 to 1. Be cautious, values outside this range might cause unintended loudness.

Events

name
payload
description

load
AudioBuffer
Fired when the audio has loaded.

progress
ProgressEvent<EventTarget>
Fired when the audio is loading.

error
ErrorEvent
Fired when the audio fails to load.

Bindings

name
type

play
(delay?: number) => Promise<THREE.Audio>

pause
() => THREE.Audio

stop
() => THREE.Audio