Building

npm run build OR tsc build

npm install path-to-this-directory

Usage example

let player = new XFadePlayer(container);

// Add item to player queue (properties listed here are required, but not restricted to additional/other)
player.addToQueue({
    fadeInDuration: 5,
    fadeOutDuration: 5,
    url: "https://example.com/track.mp3"
});

player.play();

// To pause
player.pause();

// To skip current song (must have items in queue)
player.skip();

Player events are triggered from the container:

<div #container (ended)="ended($event)" (timeupdate)="timeupdate($event)"></div>

  timeupdate(e: any) {
    console.log('timeupdate');

    // Track progress
    this.currentTime = player.currentTime();

    // duration - fadeOutDuration
    this.duration = player.duration();

    // Full track duration
    this.realDuration = player.realDuration();
  }

  ended(e: any) {
    console.log('track ended')
  }

Additional methods

// Number of items in the queue. Currently playing item is excluded
player.getQueueLength();

// Returns currently playing object as provided to addToQueue()
player.getCurrentlyPlaying();

// Get array of all the items in the queue as provided to addToQueue(), excluding currently playing item
player.getQueue();

// Clear items in the queue, excluding currently playing item
player.clearQueue();

// Get duration, in seconds, of currently playing item minus the fadeOutDuration. Returns 0 if currently playing item is not available
player.getDuration();

// Get current time, in seconds, of currently playing item. Returns 0 if currently playing item is not available
player.getCurrentTime();

// Get full duration, in seconds, of currently playing item. Returns 0 if currently playing item is not available
player.getRealDuration();

// Seek to time, accepts seconds. Method does not allow seeking beyond duration - fadeOutDuration
player.seek(120);