annotate src/app/app.component.ts @ 40:f7244f2155a3

Setup some scaffolding for bootstrapping a worker and loading into a service, providing a mechanism for implementing most of the logic which runs inside the worker in TypeScript.

import {Component} from '@angular/core';
import {AudioPlayerService} from "./services/audio-player/audio-player.service";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  audioBuffer: AudioBuffer; // TODO consider revising

  constructor(private audioService: AudioPlayerService) {}

  onFileOpened(file: File) {
    const reader: FileReader = new FileReader();
    const mimeType = file.type;
    reader.onload = (event: any) => {
      this.audioService.loadAudioFromUrl(
        URL.createObjectURL(new Blob([event.target.result], {type: mimeType}))
      );
      // TODO use a rxjs/Subject instead?
      this.audioService.decodeAudioData(event.target.result).then(audioBuffer => {
        this.audioBuffer = audioBuffer;
      });
    };
    reader.readAsArrayBuffer(file);
  }
}