HTML5音频捕获 - 如何截断录制的音频

Question

我正在开发一种功能，可以从麦克风/耳机中捕获HTML5应用程序内的音频。使用MediaStreamRecorder非常好，我能够捕获所有音频。然而，在播放录制的音频期间，我注意到鼠标点击来自用户点击尖叫上的停止录制按钮。我想以某种方式摆脱它。一个想法是从录音中删除最后0.5-1秒，但我不完全确定如何实现这一点。也许还有一些其他更合适的方法......

任何来自专家代码样本的建议都会很棒。

Answer 1

我可以看到针对您的问题的三种解决方案：

• 简单，将其发送到服务器，使用ffmpeg n个剪辑。 con：服务器参与其中。
• 就像dandavis在评论中所说，使用RecorderJS，只有在从数组中形成最终的wav文件时，忽略最后几个条目。 con：乏味，wav文件可能很大（因为它是未压缩的）
• 执行编辑客户端，将录制的视频传输到音频元素（，将其静音），然后使用mozCaptureStream创建一个流并进行记录，并使用set timeout在实际结束前停止.5秒。 con：就像你猜对象一样，现在仅适用于firefox

Answer 2

MediaStreamRecorder.js无法灵活地在任一端修剪录制内容，并为客户端应用程序生成随时可用的WAV编码字节流。因为字节流已经被WAV编码，所以当时很难应用修剪。 Hovever，核心MediaStreamEncoder的一个小变化可以以可配置的方式提供此功能，即客户端应用程序认为它适合。

trimFromFront和trimFromEnd属性必须添加到Recorder，然后可以在WAV编码发生之前使用。

带有采集样本的最终缓冲区在Float32Array中进行管理。我们知道采样率通常为44100 bps。我们可以应用它从最终缓冲区中提取一个子阵列，截断感兴趣的部分。

interleaved = interleaved.subarray(trimFromFront * sampleRate, interleaved.length - trimFrontEnd * sampleRate)

这使我们能够灵活地截断一小部分秒。

所以，如果我想从前面截断2秒，从结束开始5秒，我会做

trimFromFront = 2;
trimFromEnd = 5;

就是这样。最终的WAV编码字节流干净利落。