dev@31
|
1 import {Component} from '@angular/core';
|
dev@37
|
2 import {AudioPlayerService} from "./services/audio-player/audio-player.service";
|
dev@47
|
3 import {FeatureExtractionService} from "./services/feature-extraction/feature-extraction.service";
|
dev@47
|
4 import {ExtractorOutputInfo} from "./feature-extraction-menu/feature-extraction-menu.component";
|
angular-cli@0
|
5
|
angular-cli@0
|
6 @Component({
|
angular-cli@0
|
7 selector: 'app-root',
|
angular-cli@0
|
8 templateUrl: './app.component.html',
|
angular-cli@0
|
9 styleUrls: ['./app.component.css']
|
angular-cli@0
|
10 })
|
angular-cli@0
|
11 export class AppComponent {
|
dev@31
|
12 audioBuffer: AudioBuffer; // TODO consider revising
|
dev@49
|
13 canExtract: boolean;
|
dev@1
|
14
|
dev@47
|
15 constructor(private audioService: AudioPlayerService,
|
dev@48
|
16 private piperService: FeatureExtractionService) {
|
dev@49
|
17 this.canExtract = false;
|
dev@48
|
18 }
|
dev@16
|
19
|
dev@31
|
20 onFileOpened(file: File) {
|
dev@49
|
21 this.canExtract = false;
|
dev@31
|
22 const reader: FileReader = new FileReader();
|
dev@31
|
23 const mimeType = file.type;
|
dev@31
|
24 reader.onload = (event: any) => {
|
dev@31
|
25 this.audioService.loadAudioFromUrl(
|
dev@31
|
26 URL.createObjectURL(new Blob([event.target.result], {type: mimeType}))
|
dev@31
|
27 );
|
dev@31
|
28 // TODO use a rxjs/Subject instead?
|
dev@31
|
29 this.audioService.decodeAudioData(event.target.result).then(audioBuffer => {
|
dev@31
|
30 this.audioBuffer = audioBuffer;
|
dev@48
|
31 if (this.audioBuffer)
|
dev@49
|
32 this.canExtract = true;
|
dev@31
|
33 });
|
dev@31
|
34 };
|
dev@31
|
35 reader.readAsArrayBuffer(file);
|
dev@16
|
36 }
|
dev@47
|
37
|
dev@48
|
38 extractFeatures(outputInfo: ExtractorOutputInfo): void {
|
dev@50
|
39 if (!this.canExtract || !outputInfo) return;
|
dev@49
|
40 this.canExtract = false;
|
dev@47
|
41 this.piperService.process({
|
dev@47
|
42 audioData: [...Array(this.audioBuffer.numberOfChannels).keys()]
|
dev@47
|
43 .map(i => this.audioBuffer.getChannelData(i)),
|
dev@47
|
44 audioFormat: {
|
dev@47
|
45 sampleRate: this.audioBuffer.sampleRate,
|
dev@47
|
46 channelCount: this.audioBuffer.numberOfChannels
|
dev@47
|
47 },
|
dev@47
|
48 key: outputInfo.extractorKey,
|
dev@47
|
49 outputId: outputInfo.outputId
|
dev@50
|
50 }).then(() => {
|
dev@49
|
51 this.canExtract = true;
|
dev@49
|
52 }).catch(err => console.error(err));
|
dev@47
|
53 }
|
angular-cli@0
|
54 }
|