typingfreaks/src/audio.ts

import * as youtube from './youtube';

export class AudioManager {
  context: AudioContext;
  volume: GainNode;
  output: AudioNode;

  constructor() {
    this.context = new AudioContext();
    this.volume = this.context.createGain();
    this.volume.connect(this.context.destination);
    this.output = this.volume;
  }

  getTime(): number {
    return this.context.currentTime;
  }

  async loadTrack(url: string): Promise<FileTrack> {
    const response = await window.fetch(url);
    const buffer = await response.arrayBuffer();
    const audioBuffer = await this.context.decodeAudioData(buffer);
    return new FileTrack(this, audioBuffer);
  }

  async loadTrackFromFile(file: File): Promise<FileTrack> {
    const promise = new Promise<ArrayBuffer>((resolve, _) => {
      const reader = new FileReader();
      reader.onload = () => resolve(reader.result as ArrayBuffer);
      reader.readAsArrayBuffer(file);
    });
    const buffer = await promise;
    const audioBuffer = await this.context.decodeAudioData(buffer);
    return new FileTrack(this, audioBuffer);
  }

  async loadTrackWithProgress(
    url: string,
    listener: (percentage: number) => void
  ): Promise<FileTrack> {
    const promise = new Promise<ArrayBuffer>((resolve, reject) => {
      let xhr = new XMLHttpRequest();
      xhr.open('GET', url);
      xhr.responseType = 'arraybuffer';
      xhr.onprogress = (event) => {
        if (event.lengthComputable) {
          // only up to 80 to factor in decoding time
          let percentage = (event.loaded / event.total) * 80;
          listener(percentage);
        }
      };
      xhr.onload = () => resolve(xhr.response);
      xhr.onerror = () => reject();
      xhr.send();
    });
    const buffer = await promise;
    const audioBuffer = await this.context.decodeAudioData(buffer);
    return new FileTrack(this, audioBuffer);
  }

  async loadTrackFromYoutube(
    id: string,
    element: HTMLElement,
    listener: (percentage: number) => void
  ): Promise<YoutubeTrack> {
    await youtube.loadYoutubeApi();
    listener(30);
    const player = await youtube.createPlayer(element);
    listener(60);
    const track = new YoutubeTrack(player, id);
    await track.preload();
    listener(90);
    return track;
  }
}

export enum PlayState {
  UNSTARTED = 'unstarted',
  PLAYING = 'playing',
  PAUSED = 'paused',
  STOPPED = 'stopped',
}

export type TrackListener = (track: Track, state: PlayState) => void;

export abstract class Track {
  private listeners: TrackListener[] = [];

  addListener(listener: TrackListener) {
    this.listeners.push(listener);
  }

  clearListeners() {
    this.listeners = [];
  }

  emit(state: PlayState) {
    this.listeners.forEach((l) => l(this, state));
  }

  abstract start(fromTime?: number, duration?: number): void;
  abstract pause(): void;
  abstract stop(): void;
  abstract exit(): void;
  abstract getState(): PlayState;
  abstract getTime(): number;
  abstract getDuration(): number;
}

export class FileTrack extends Track {
  manager: AudioManager;
  buffer: AudioBuffer;
  source: AudioBufferSourceNode | null;
  playStartTime: number;
  resumeTime: number;
  state: PlayState;

  constructor(manager: AudioManager, buffer: AudioBuffer) {
    super();
    this.manager = manager;
    this.buffer = buffer;
    this.source = null;
    this.playStartTime = 0;
    this.resumeTime = 0;
    this.state = PlayState.UNSTARTED;
  }

  /**
   * Play and forget useful for SFX and the like
   */
  play(): void {
    const source = this.manager.context.createBufferSource();
    source.buffer = this.buffer;
    source.connect(this.manager.output);
    source.start();
  }

  start(fromTime?: number, duration?: number): void {
    if (this.state === PlayState.PLAYING) {
      this.stop();
    }
    if (fromTime !== undefined) {
      this.resumeTime = fromTime;
    }
    this.source = this.manager.context.createBufferSource();
    this.source.buffer = this.buffer;
    this.source.connect(this.manager.output);
    this.source.onended = (event) => {
      if (this.source == event.target) {
        this.resumeTime = this.manager.getTime() - this.playStartTime;
        if (this.resumeTime > this.getDuration()) {
          this.resumeTime = 0;
          this.setState(PlayState.STOPPED);
        } else {
          this.setState(PlayState.PAUSED);
        }
      }
    };
    this.playStartTime = this.manager.getTime() - this.resumeTime;
    this.setState(PlayState.PLAYING);
    this.source.start(0, this.resumeTime, duration);
  }

  pause(): void {
    if (
      this.state === PlayState.UNSTARTED ||
      this.state === PlayState.PAUSED ||
      this.state === PlayState.STOPPED
    )
      return;
    this.resumeTime = this.manager.getTime() - this.playStartTime;
    if (this.source) {
      this.source.stop();
    }
    this.setState(PlayState.PAUSED);
  }

  stop(): void {
    this.resumeTime = 0;
    if (this.source) {
      this.source.stop();
    }
    this.setState(PlayState.STOPPED);
  }

  exit(): void {
    this.stop();
  }

  getState(): PlayState {
    return this.state;
  }

  getTime(): number {
    if (this.state === PlayState.UNSTARTED) {
      return 0;
    } else if (
      this.state === PlayState.PAUSED ||
      this.state === PlayState.STOPPED
    ) {
      if (this.resumeTime > 0) {
        return this.resumeTime;
      } else {
        return this.getDuration();
      }
    } else {
      return this.manager.getTime() - this.playStartTime;
    }
  }

  getDuration(): number {
    return this.buffer.duration;
  }

  private setState(state: PlayState): void {
    this.state = state;
    this.emit(state);
  }
}

export class YoutubeTrack extends Track {
  private timeoutHandle?: number;

  constructor(readonly player: YT.Player, readonly id: string) {
    super();
  }

  preload(): Promise<void> {
    return new Promise((resolve) => {
      let loaded = false;
      const onStateChange: YT.PlayerStateChangeListener = ({ data }) => {
        if (data === YT.PlayerState.PLAYING) {
          if (!loaded) {
            loaded = true;
            this.player.pauseVideo();
            this.player.seekTo(0);
            this.player.unMute();
            resolve();
          }
        }
        this.emit(this.mapState(data));
      };
      this.player.addEventListener('onStateChange', onStateChange);
      this.player.mute();
      this.player.loadVideoById(this.id);
    });
  }

  start(fromTime?: number, duration?: number): void {
    this.clearTimeout();
    if (duration) {
      this.timeoutHandle = setTimeout(() => {
        this.player.pauseVideo();
      }, duration * 1000);
    }
    if (fromTime !== undefined) {
      this.player.seekTo(fromTime, true);
    }
    this.player.playVideo();
  }

  pause(): void {
    this.clearTimeout();
    this.player.pauseVideo();
  }

  stop(): void {
    this.clearTimeout();
    this.player.stopVideo();
  }

  exit(): void {
    // the element gets removed by the background manager and stops that way
  }

  getState(): PlayState {
    return this.mapState(this.player.getPlayerState());
  }

  getTime(): number {
    return this.player.getCurrentTime();
  }

  getDuration(): number {
    return this.player.getDuration();
  }

  private clearTimeout(): void {
    if (this.timeoutHandle) {
      clearTimeout(this.timeoutHandle);
    }
  }

  private mapState(ytState: YT.PlayerState): PlayState {
    switch (ytState) {
      case YT.PlayerState.PLAYING:
        return PlayState.PLAYING;
      case YT.PlayerState.ENDED:
        return PlayState.STOPPED;
      case YT.PlayerState.UNSTARTED:
      case YT.PlayerState.CUED:
        return PlayState.UNSTARTED;
      case YT.PlayerState.BUFFERING:
      case YT.PlayerState.PAUSED:
        return PlayState.PAUSED;
    }
  }
}