1

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

Uma Shankar
  • 41
  • 6

1 Answers1

3

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

Vasiliy Saiganov
  • 71
  • 1
  • 7
  • 4
    don't go with the second solution - it's very bad practice. and you forgot to remove the event listener on detached. the first idea is the right way. just use `delegate` instead of `trigger` - and you don't need the `id`. – avrahamcool Jul 06 '20 at 19:57
  • 1
    If you are unsure when to use delegate vs trigger this SO post helps everytime: [Aurelia delegate vs trigger: how do you know when to use delegate or trigger?](https://stackoverflow.com/questions/33904248/aurelia-delegate-vs-trigger-how-do-you-know-when-to-use-delegate-or-trigger) TLDR: Use delegate except when you cannot use delegate. – DarkMikey Jul 08 '20 at 10:50