Skip to main content

SoundProgressStateInfo

The SoundProgressStateInfo interface provides detailed progress information about a sound's playback. It is emitted with the PROGRESS event when progress tracking is enabled.

export interface SoundProgressStateInfo {
  currentTime: number; // Current playback position in seconds
  duration: number; // Total duration in seconds
  progress: number; // Progress as a ratio from 0 to 1
  percentage: number; // Progress as a percentage from 0 to 100
  remaining: number; // Remaining time in seconds
  soundId: string; // The sound ID
  instanceId?: string; // Instance ID for multi-instance sounds
}

Enabling Progress Tracking​

Progress tracking can be enabled when playing a sound using the trackProgress option.

const mySoundManager = new SoundManager();
await mySoundManager.loadSound('podcast', '/audio/podcast.mp3');

// Enable progress tracking when playing
mySoundManager.play('podcast', {
  trackProgress: true,
});

Getting Progress Directly​

You can also get progress information directly without events:

const mySoundManager = new SoundManager();
await mySoundManager.loadSound('song', '/audio/song.mp3');
mySoundManager.play('song', { trackProgress: true });

// Get progress as a ratio (0 to 1)
const progress = mySoundManager.getProgress('song');
console.log(`Progress: ${Math.round(progress * 100)}%`);

// Get progress as a percentage (0 to 100)
const percentage = mySoundManager.getProgressPercentage('song');
console.log(`Progress: ${percentage}%`);

// Get current playback position
const currentTime = mySoundManager.getCurrentTime('song');
console.log(`Current time: ${currentTime} seconds`);

// Get total duration
const duration = mySoundManager.getDuration('song');
console.log(`Duration: ${duration} seconds`);

Listening for Progress Events​

const mySoundManager = new SoundManager();
await mySoundManager.loadSound('lecture', '/audio/lecture.mp3');

mySoundManager.play('lecture', { trackProgress: true });

// Listen for progress updates
mySoundManager.addEventListener(SoundEventsEnum.PROGRESS, (event: SoundEvent) => {
  const info = event.progressInfo as SoundProgressStateInfo;
  
  if (info) {
    console.log(`Progress: ${info.percentage.toFixed(1)}%`);
    console.log(`Time: ${formatTime(info.currentTime)} / ${formatTime(info.duration)}`);
    console.log(`Remaining: ${formatTime(info.remaining)}`);
  }
});

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

Controlling Progress Tracking​

const mySoundManager = new SoundManager();
await mySoundManager.loadSound('track', '/audio/track.mp3');

mySoundManager.play('track');

// Start tracking progress manually
mySoundManager.startProgressTracking('track');

// Change the update interval (global)
mySoundManager.setProgressUpdateInterval(100); // Update every 100ms

// Stop tracking progress
mySoundManager.stopProgressTracking('track');

Practical Example: Progress Bar​

const mySoundManager = new SoundManager();
await mySoundManager.loadSound('music', '/audio/music.mp3');

mySoundManager.play('music', { trackProgress: true });

mySoundManager.addEventListener(SoundEventsEnum.PROGRESS, (event: SoundEvent) => {
  const info = event.progressInfo as SoundProgressStateInfo;
  
  if (info) {
    const barWidth = 50;
    const filled = Math.round(info.progress * barWidth);
    const empty = barWidth - filled;
    const bar = '█'.repeat(filled) + '░'.repeat(empty);
    const timestamp = `${formatTime(info.currentTime)} / ${formatTime(info.duration)}`;
    
    console.log(`[${bar}] ${timestamp} (${info.percentage.toFixed(1)}%)`);
  }
});

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