<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, snippets, 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.

Exports

name

type

---

play

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

---

pause

() => THREE.Audio

---

stop

() => THREE.Audio