usePlayer

Controls the timeline and playback engine. Used to play, stop, and seek through animations and video/audio items.

Import

import { usePlayer } from '@asset-studio/core'

Usage

function PlaybackControls() {
  const { play, stop, isPlaying, currentTime, onSeekStart, onSeek, onSeekEnd } = usePlayer()

  return (
    <div>
      <button onClick={isPlaying ? stop : play}>
        {isPlaying ? 'Stop' : 'Play'}
      </button>
      <input
        type="range"
        min={0}
        value={currentTime}
        onMouseDown={onSeekStart}
        onChange={e => onSeek(Number(e.target.value))}
        onMouseUp={onSeekEnd}
      />
    </div>
  )
}

Return Value

Property / Function	Type	Description
isPlaying	boolean	Whether the timeline is currently playing.
isVideo	boolean	Whether the canvas contains video items.
currentTime	number	Current playback position in milliseconds.
play	() => void	Start playback from the current position.
stop	() => void	Stop playback.
onSeekStart	() => void	Call when the user begins scrubbing (e.g. onMouseDown).
onSeek	(timeMs: number) => void	Call as the user scrubs to update the current time.
onSeekEnd	() => void	Call when the user finishes scrubbing (e.g. onMouseUp).

Notes

• The player controls both animation timings and video/audio playback simultaneously.
• Use onSeekStart, onSeek, and onSeekEnd together when building a scrubber — splitting the events prevents conflicts with active playback.

Related

• useStudio
• Animations