Skip to content

Instantly share code, notes, and snippets.

@malerba118
Last active July 22, 2024 18:25
Show Gist options
  • Save malerba118/4d2ca84eb482c1ad2d98b7aa327eeef1 to your computer and use it in GitHub Desktop.
Save malerba118/4d2ca84eb482c1ad2d98b7aa327eeef1 to your computer and use it in GitHub Desktop.

TrackManager and PlayerManager Documentation

This documentation covers two main classes: TrackManager and PlayerManager, which are used for managing audio tracks and playback.

Table of Contents

  1. Enums
  2. TrackManager
  3. PlayerManager

Enums

LoadState

Represents the loading state of a track.

enum LoadState {
  Before = "before",
  Loading = "loading",
  Loaded = "loaded",
  Error = "error"
}

LoadStrategy

Defines the strategy for loading tracks.

enum LoadStrategy {
  Eager = "eager",
  Lazy = "lazy"
}

TrackManager

The TrackManager class is responsible for managing individual audio tracks.

Constructor

constructor({ id, src, strategy = LoadStrategy.Eager }: TrackManagerParams)
  • id: Unique identifier for the track
  • src: Source URL of the audio file
  • strategy: Loading strategy (default: LoadStrategy.Eager)

Properties

  • id: String - Unique identifier for the track
  • src: String - Source URL of the audio file
  • audio: HTMLAudioElement - The underlying audio element
  • state: LoadState - Current loading state of the track
  • strategy: LoadStrategy - Loading strategy for the track
  • duration: number | undefined - Duration of the track in seconds
  • currentTime: number - Current playback position in seconds
  • progress: number - Playback progress as a fraction (0 to 1)
  • playing: boolean - Whether the track is currently playing

Methods

  • load(): Promise - Loads the audio track
  • play({ startAt?: number }): Promise - Plays the track, optionally starting at a specific time
  • pause(): Promise - Pauses the track
  • setCurrentTime(val: number): void - Sets the current playback position
  • setProgress(val: number): void - Sets the playback progress as a fraction (0 to 1)

PlayerManager

The PlayerManager class manages the currently active track and provides an interface for playback control.

Constructor

constructor()

Properties

  • activeTrack: TrackManager | null - The currently active track
  • playing: boolean - Whether the active track is currently playing
  • currentTime: number - Current playback position of the active track
  • progress: number - Playback progress of the active track as a fraction (0 to 1)
  • duration: number | undefined - Duration of the active track in seconds

Methods

  • isActive(track: TrackManager | null | string): boolean - Checks if the given track is currently active
  • setTrack(track: TrackManager | null): void - Sets the active track
  • play({ track?: TrackManager | null, startAt?: number }): Promise - Plays the active track or a specified track
  • pause(): Promise - Pauses the active track
  • setCurrentTime(val: number): void - Sets the current playback position of the active track
  • setProgress(val: number): void - Sets the playback progress of the active track as a fraction (0 to 1)

Usage Example

// Create a TrackManager instance
const track = new TrackManager({
  id: "track1",
  src: "https://example.com/audio.mp3",
  strategy: LoadStrategy.Lazy
});

// Create a PlayerManager instance
const player = new PlayerManager();

// Load and play the track
await player.play({ track });

// Pause the track
await player.pause();

// Set playback position to 30 seconds
player.currentTime = 30;

// Set playback progress to 50%
player.setProgress(0.5);

This documentation provides an overview of the TrackManager and PlayerManager classes, their properties, and methods. For more detailed information on each method and property, refer to the inline comments in the source code.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment