LeCodesdocs

Media

AudioPlayer plays a sound; VideoPlayer plays a video and additionally exposes a 3D Texture. Both share the same playback surface (an internal MediaPlayer base), so play/pause, volume, loop, seek, and the events are identical between them.

At a glance

TypeScript
const music = new AudioPlayer(asset('./theme.mp3'))
music.loop = true
music.volume = 0.4
music.play()

const sting = new AudioPlayer(asset('./win.wav'))
sting.addEventListener('completed', () => sting.dispose())
sting.play()

Creating

TypeScript
new AudioPlayer(src?: string)   // asset('./sound.mp3') or a remote URL
new VideoPlayer(src?: string)

Playback

TypeScript
player.play()               // start / resume
player.pause()              // pause, keeping position
player.playing = true       // settable boolean — play()/pause() are aliases for it
player.volume = 0.5         // 0..1; default 1
player.loop = true          // loop at the end instead of stopping; default false
player.time = 12.5          // current position in SECONDS — set to seek
player.duration             // total length in seconds (read-only); 0 until metadata loads

Events

TypeScript
player.addEventListener('completed',   () => { })   // reached the end while loop === false; playing becomes false
player.addEventListener('loopReached', () => { })   // fired at EACH loop boundary while loop === true

Exactly one of the two fires per play-through, decided by loop at the moment the end is reached: looping players emit loopReached once per lap and keep playing; non-looping players stop (playing flips to false) and emit completed once.

Lifecycle

TypeScript
player.dispose()    // release the host media resource (decoder, network, buffers); idempotent
player.disposed     // true once dispose() has run (read-only)

dispose() also drops all event listeners. Players don't free themselves — dispose anything you created when its screen closes.

Note

after dispose() the player is dead — touching play(), volume, time, etc. throws ("MediaPlayer has been disposed"). Calling dispose() again is fine.

Video texture

TypeScript
const movie = new VideoPlayer(asset('./clip.mp4'))
movie.loop = true
movie.play()
const tex = movie.texture                                     // a 3D Texture sampling the video
const screen = Mesh.plane({ material: Material.video(tex) })

texture returns a 3D Texture that samples the live video — feed it to Material.video(...) to put video on a 3D surface. For video in the UI, use UIVideo(player) instead — see UI content.

Note

each texture read constructs a new Texture wrapper — read it once and keep the reference rather than accessing player.texture per frame.

See also

← BacklocalStorageNext →Files & sharing