无法在Rails环境中使用Recorder.js记录麦克风输入

Question

I want to record user's voice in my Rails project.

So I tried to use [AudioRecorder][1] , but I couldn't. I checked the example HTML works fine by using python -m SimpleHTTPServer .

Then I copied 'audiodisplay.js', 'main.js', 'recorder.js' and 'recorderWorker.js' to app/assets/javascripts/recorder/ directory.

And copy sample HTML to app/views/static_pages/home.html.erb without unnecessary tag:

<style>
...styles for the page
</style>
<div id="viz">
  <canvas id="analyser" width="1024" height="500"></canvas>
  <canvas id="wavedisplay" width="1024" height="500"></canvas>
</div>
<div id="controls">
  <img id="record" src="img/mic128.png" onclick="toggleRecording(this);">
  <a id="save" href="#"><img src="img/save.svg"></a>
</div>

The graph changes by surrounding sounds, so the recording seem to be working, but after stopping the sound the download button stay transparent.

In the console I can get audioRecorder instance, but audioRecorder.exportWAV(doneEncoding) returns undefined .

> audioRecorder
< Recorder {context: AudioContext, node: ScriptProcessorNode}
> audioRecorder.exportWAV(doneEncoding)
< undefined

What am I doing wrong?

Answer 1

I found the problem the recorder.js uses variable in it's function.

var WORKER_PATH = 'js/recorderjs/recorderWorker.js';

And it failed to read the file.

To solve the problem I followed this answer .

• Put recorderWorker.js in /public/javascripts

• Rewrite path name in recorder.js

  var WORKER_PATH = "<%= javascript_path 'recorderWorker.js' %>";

• Rename recorder.js to recorder.js.erb