Visit the Documentation of the upcoming Threlte 6.
  1. @threlte/core
  2. PositionalAudio

@threlte/core

PositionalAudio

This module will be moved to @threlte/extras at some point in the future. Please read the update notice.

Creates a positional audio entity. This uses the Web Audio API.

TIP

You need to have an <AudioListener> component in your scene in order to use <Audio>and <PositionalAudio>components.

Music: legrisch

Import

Source

Github View Source Code

Package

NPM View Package

Related Docs


Example

<script>
  import { Canvas, PerspectiveCamera, AudioListener, PositionalAudio } from '@threlte/core'
  import Car from './Car.svelte'
</script>

<Canvas>
  <PerspectiveCamera position={{ x: 3, y: 3, z: 3 }} lookAt={{ x: 0, y: 0, z: 0 }}>
    <AudioListener />
  </PerspectiveCamera>

  <Car>
    <PositionalAudio autostart loop refDistance={10} volume={0.2} source={'/audio/car-noise.mp3'} />
  </Car>
</Canvas>

Properties

// optional
viewportAware: boolean = false
position: Position | undefined = undefined
scale: Scale | undefined = undefined
rotation: Rotation | undefined = undefined
lookAt: LookAt | undefined = undefined
castShadow: boolean | undefined = undefined
receiveShadow: boolean | undefined = undefined
frustumCulled: boolean | undefined = undefined
renderOrder: number | undefined = undefined
visible: boolean | undefined = undefined
dispose: boolean | undefined = undefined
userData: Record<string, any> | undefined = undefined
autoplay: boolean | undefined = undefined
detune: number | undefined = undefined
source: string | AudioBuffer | HTMLMediaElement | AudioBufferSourceNode | MediaStream | undefined = undefined
volume: number | undefined = undefined
loop: boolean | undefined = undefined
filters: BiquadFilterNode[] | BiquadFilterNode | undefined = undefined
playbackRate: number | undefined = undefined
id: string | undefined = undefined
directionalCone:
  | {
      coneInnerAngle: number
      coneOuterAngle: number
      coneOuterGain: number
    }
  | undefined = undefined
refDistance: number | undefined = undefined
rolloffFactor: number | undefined = undefined
distanceModel: string | undefined = undefined
maxDistance: number | undefined = undefined

Bindings

audio: THREE.PositionalAudio
inViewport: boolean
play: (delay?: number) => Promise<THREE.PositionalAudio>
pause: () => THREE.PositionalAudio
stop: () => THREE.PositionalAudio

Events

viewportenter: undefined
viewportleave: undefined
load: AudioBuffer
progress: ProgressEvent<EventTarget>
error: ErrorEvent