使用Node和Angular2录制音频并保存到文件

Question

我尝试通过浏览器中的麦克风录制音频，然后使用Node和二进制服务器将其保存到文件服务器端。我使用此tutorial作为指南，但我无法使用Angular2。目前它似乎将某种类型的文件保存到服务器，但它不是任何类型的可播放音频。这是我的所有代码：

import { Component } from '@angular/core';
import { ContributorService } from './contributor.service';
import { CardDetailService } from './card-detail.service';
import { CardDetailComponent } from './card-detail.component';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { Location } from '@angular/common';
declare let navigator: any;
declare let MediaRecorder: any;
declare let BinaryClient: any;



@Component({
selector: 'contributor',
template: `
    <h1>Record Message</h1>

    <button (click)='start()'>Start</button>
    <button (click)='stop()'>Stop</button>
    <button (click)='play()'>Play</button>

    <a>{{hf}}</a>

    <button class="go-back" (click)="goBack()">Done</button>

`
})
export class ContributorComponent {
private chunks: any[] = [];
private recorder;
private audio;
private counter = 1;
private Stream;
private recording = false;

constructor(
    private contributorService: ContributorService,
    private cardDetailService: CardDetailService,
    private location: Location,
    private route: ActivatedRoute,
    private router: Router,
) {}

ngOnInit() {
    let client = new BinaryClient('ws://localhost:9001');

    client.on('open', function() {
        let Stream = client.createStream();

    });

    let audio = {
        tag: 'audio',
        type: 'audio/ogg',
        ext: '.ogg',
        gUM: {audio: true}
    };
    let context = new AudioContext();

    if (!navigator.getUserMedia) {
        navigator.getUserMedia = navigator.getUserMedia ||     navigator.webkitGetUserMedia ||
        navigator.mozGetUserMedia || navigator.msGetUserMedia;
    }

    if (navigator.getUserMedia) {
        navigator.getUserMedia({audio: true }, this.success,     function(e) {
            alert('Error capturing audio.');
        });
        } else {
            alert('getUserMedia not supported in this browser.');
        }
}

start() {
    this.recording = true;
}

stop() {
    this.recording = false;
    this.Stream.end();
}

recorderProcess(e) {
    let left = e.inputBuffer.getChannelData(0);
    this.Stream.write(this.convertFloat32ToInt16(left));
}

success(e) {
    let context = new AudioContext();

  // the sample rate is in context.sampleRate
    let audioInput = context.createMediaStreamSource(e);

    let recorder = context.createScriptProcessor(2048, 1, 1);

    this.recorder.onaudioprocess = function(e){
        if (!this.recording) { return; };
        console.log ('recording');
        var left = e.inputBuffer.getChannelData(0);
        this.Stream.write(this.convertoFloat32ToInt16(left));
    };

    audioInput.connect(this.recorder);
    this.recorder.connect(context.destination); 
}

convertFloat32ToInt16(buffer) {
    let l = buffer.length;
    let buf = new Int16Array(l);
    while (l--) {
        buf[l] = Math.min(1, buffer[l]) * 0x7FFF;
    }
    return buf.buffer;
}


goBack() {
    this.location.back();
}
}

以下是它抛出的错误：

contributor.component.ts:96Uncaught TypeError：无法读取属性＆＃39;录音机＆＃39; of undefined（...）ContributorComponent.success @ contributor.component.ts:96 core.umd.js：3004 EXCEPTION：./ ConsttributorComponent类中的错误ContributorComponent - 内联模板：4：10导致：无法读取属性＆＃39; end＆＃39; of undefinedErrorHandler.handleError