Cannot find function name

Question

I'm trying to do my first TypeScript/React project and I'm running into issues.

Using this answer, I have managed to read and play sound from my mic and also display some sample analysis data in the console. Now i'm trying to translate it into TS. Going step by step, I've arrived at this:

export class Processor {
    readonly BUFFER_SIZE = 16384;

    audioContext: AudioContext;
    gainNode: GainNode;
    microphoneStream: MediaElementAudioSourceNode;

    constructor() {
        this.audioContext = new AudioContext();

        console.log('audio is starting up ...');

        if (navigator.getUserMedia) {
            navigator.getUserMedia(
                { audio: true },
                function (stream) {
                    startMicrophone(stream);
                },
                function (e) {
                    alert('Error capturing audio.');
                });
        } else {
            alert('Seems like this browser might not be supported.');
        }
    }

    private startMicrophone(stream: MediaStream) {
        this.gainNode = this.audioContext.createGain();
        this.gainNode.connect(this.audioContext.destination);

        this.microphoneStream = 
this.audioContext.createMediaStreamSource(stream);
    }
}

Except the call to startMicrophone gives me

'Cannot find name 'startMicrophone'.'

I also tried to refer to it with this, which results in a different error:

''this' implicitly has type 'any' because it does not have a type annotation.'

I don't know what I'm doing wrong and could really use a bit of guidance.

Rahul Sharma · Accepted Answer · 2018-03-09T12:47:08.170

Recommended: You have to use arrow function if you want to use this because if you write this inside function block it refers current function this not parent this.

export class Processor {
    readonly BUFFER_SIZE = 16384;

    audioContext: AudioContext;
    gainNode: GainNode;
    microphoneStream: MediaElementAudioSourceNode;

    constructor() {
        this.audioContext = new AudioContext();

        console.log('audio is starting up ...');

        if (navigator.getUserMedia) {
            navigator.getUserMedia({
                    audio: true
                },
                (stream) => {
                    this.startMicrophone(stream);
                },
                (e) => {
                    alert('Error capturing audio.');
                });
        } else {
            alert('Seems like this browser might not be supported.');
        }
    }

    private startMicrophone(stream: MediaStream) {
        this.gainNode = this.audioContext.createGain();
        this.gainNode.connect(this.audioContext.destination);

        this.microphoneStream =
            this.audioContext.createMediaStreamSource(stream);
    }
}

Another way is you can assign this to some other variable and use const self= this; use self inside the function.

constructor() {
    const self = this;
    this.audioContext = new AudioContext();
    if (navigator.getUserMedia) {
        navigator.getUserMedia({
                audio: true
            },
            function (stream) {
                self.startMicrophone(stream);
            },
            function (e) {
                alert('Error capturing audio.');
            });
    } else {
        alert('Seems like this browser might not be supported.');
    }
}

Thanks a lot, not only did it work but you also provided explanation on why it worked. I'll refrain from accepting for an hour or two just in case someone provides an even more detailed answer. Thanks! — user622505, Mar 09 '18 at 12:44
@Lasooch that's fine, Check my updated answer you will get more clarity on this. — Rahul Sharma, Mar 09 '18 at 12:48
`self= this` is antipattern in ES6. Because we've got arrows that serve exactly this purpose. — Estus Flask, Mar 09 '18 at 12:52
Is arrow function the official name, or is it just a colloquialism for a lambda function? — user622505, Mar 09 '18 at 12:52
@Lasooch It's official https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions . 'Fat arrow' is colloquialism . — Estus Flask, Mar 09 '18 at 12:53

Cannot find function name

1 Answers1