如何使用 recorder.js 对象调用此函数“.record()”？

Posted 2023-02-25

【中文标题】如何使用 recorder.js 对象调用此函数“.record()”？

【英文标题】：How do I call this function ".record()" with a recorder.js object?

【发布时间】：2020-07-04 15:09:38

【问题描述】：

我有一个简单的 aurelia.js 应用程序，它应该使用 recorder-js 录制音频。

我正在使用名为“simple-recorderjs-demo”的 github 项目中的代码来启动 recorder-js 记录器。它在他们的演示中运行良好，这是现场https://addpipe.com/simple-recorderjs-demo/。

但是我创建的记录器对象上不存在函数“.record()”。我怎样才能让它工作？

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

【参考方案1】：

第一个解决方案： 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
  

第二种解决方案：

  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
  

更新 添加样品 https://gist.dumber.app/?gist=c04207dc496d5bb5a0344983497a7c18

【讨论】：

不要采用第二种解决方案 - 这是非常糟糕的做法。并且您忘记在分离时删除事件侦听器。第一个想法是正确的方法。只需使用delegate 而不是trigger - 你不需要id。

如果您不确定何时使用委托与触发此 SO 帖子每次都有帮助：Aurelia delegate vs trigger: how do you know when to use delegate or trigger? TLDR：除非您不能使用委托，否则请使用委托。