Skip to main content

SoundProgressStateInfo

The progressInfo object on a progress event. While a sound plays with progress tracking on, the hub dispatches SoundEventsEnum.PROGRESS every 50 ms by default, and this object tells you where the sound is.

export interface SoundProgressStateInfo {
  soundId: string;
  currentTime: number;
  duration: number;
  rawDuration: number;
  progress: number; // 0-1
}
FieldTypeDescription
soundIdstringThe sound the event is for. For an overlapping instance this is the instance id, like 'click:2'.
currentTimenumberPosition in seconds, adjusted for the playback rate.
durationnumberLength in seconds, adjusted for the playback rate. At rate 2 a 60 second file reports 30. 0 when unknown.
rawDurationnumberLength of the file itself in seconds, whatever the rate. 0 when unknown.
progressnumberHow far along the sound is, from 0 to 1.

SoundProgressStateInfo is exported from soundhub as a type. There is no percentage or remaining time field: multiply progress by 100, or subtract currentTime from duration.

Example​

import { SoundHub, SoundEventsEnum } from 'soundhub';

const soundHub = new SoundHub();
await soundHub.loadSound('music', '/audio/theme.mp3');

soundHub.addEventListener(
  SoundEventsEnum.PROGRESS,
  (event) => {
    const info = event.progressInfo;
    if (!info) return;

    bar.style.width = `${info.progress * 100}%`;
    label.textContent = `${formatTime(info.currentTime)} / ${formatTime(info.duration)}`;
  },
  { soundId: 'music' },
);

soundHub.play('music');

function formatTime(seconds: number): string {
  const mins = Math.floor(seconds / 60);
  const secs = Math.floor(seconds % 60);
  return `${mins}:${secs.toString().padStart(2, '0')}`;
}

Try it​

Start the sound and watch the progress values arrive as progress events fire.

Try it

Read the playback position

Idle
getCurrentTime()0.0 s
getDuration()0.0 s
getProgress()0.000
getProgressPercentage()0%

0:00 of 0:00. getProgress is a ratio from 0 to 1, getProgressPercentage the same value from 0 to 100.

Code
Your clicks show up here as soundhub calls

Good to know​

  • Progress tracking is on by default: trackProgress in SoundHubConfig is true, and sounds and streams take it from there. Turn it off per sound with play(id, { trackProgress: false }), or switch it by hand with startProgressTracking and stopProgressTracking.
  • The same values are also on the event itself: event.currentTime, event.duration and event.progress, plus the full SoundStateInfo in event.state.
  • Tracking stops by itself when the sound is no longer playing, so a paused sound sends no progress events.
  • setProgressUpdateInterval changes how often the events fire, for every sound.
  • For a stream, rawDuration and duration are both the length the audio element reports.

See also​