How do I call this function ".record()" with a recorder.js object?

Question

I have a simple aurelia.js application, which is supposed to record audio using recorder-js.

I am using code from a github project called "simple-recorderjs-demo" to start a recorder-js recorder. It works fine in their demo, which is live https://addpipe.com/simple-recorderjs-demo/.

But the function ".record()" does not exist on the recorder object that I created. How can I get it to work ?

https://github.com/addpipe/simple-recorderjs-demo/blob/master/js/app.js

Answer 1

First solution: app.html

<template>
  <button click.trigger="startRecording()" id="recordButton">Record</button>
</template>

app.ts

export class App {
  gumStream: any;
  rec: any;
  input: any;
  AudioContext = window.AudioContext;
  audioContext: AudioContext;
  startRecording(){
    // copy code from example here without dom elements refs
  }
}

Second solution:

  attached() {
    // all magic with dom/jquery plugins, etc here
    let recordButton = <HTMLButtonElement>document.getElementById("recordButton");
    recordButton.addEventListener("click", this.startRecording);
  }
  startRecording(){
    // code here
    // don't use native html elements(like document.getById('#id')) here
  }

update add sample https://gist.dumber.app/?gist=c04207dc496d5bb5a0344983497a7c18