Question

我设法使用HTML5创建一个完整的录像机。我的问题是创建的 WAV文件的大小，它太大而无法发送到我的服务器。我使用exportWAV函数很多用户似乎都在使用。此函数从音频BLOB创建WAV文件：

function encodeWAV(samples){
  var buffer = new ArrayBuffer(44 + samples.length * 2);
  var view = new DataView(buffer);

  writeString(view, 0, 'RIFF');
  view.setUint32(4, 32 + samples.length * 2, true);
  writeString(view, 8, 'WAVE');
  writeString(view, 12, 'fmt ');
  view.setUint32(16, 16, true);
  view.setUint16(20, 1, true);
  view.setUint16(22, 1, true);
  view.setUint32(24, sampleRate, true);
  view.setUint32(28, sampleRate * 4, true);
  view.setUint16(32, 4, true);
  view.setUint16(34, 16, true);
  writeString(view, 36, 'data');
  view.setUint32(40, samples.length * 2, true);
  floatTo16BitPCM(view, 44, samples);

  return view;
}

我正在浏览其他选择，但其中没有一个足够或足够简单：

压缩文件 - 不能正常工作并且存在一些安全问题。
转换为MP3 - 使过程变得更加复杂，也存在安全问题，并导致声音失去很多质量。

我的问题是 - HTML5 getUserMedia仅将导出为.WAV文件吗？如果有一个函数，例如我使用的encodeWAV，那就是encodeMP3 - 这将是完美。

解决此类问题的推荐方法是什么？

如果可能的话，我很想得到一个简单的工作示例。

感谢。

Answer 1

The recommended way is probably to use the API already there in your browser instead of rewriting it yourself with the poor tools we've got.

So to record an audio stream, (https fiddle for chrome)

// get our audio stream
navigator.mediaDevices.getUserMedia({
  audio: true
}).then(setup);

function startRecording(stream) {
  let recorder = new MediaRecorder(stream);
  let chunks = []; // here we'll store all recorded chunks
  // every time a new chunk is available, store it
  recorder.ondataavailable = (e) => chunks.push(e.data);
  recorder.onstop = () => {
    let blob = new Blob(chunks);
    saveRecordedAudio(blob);
  };
  recorder.start();
  return recorder;
}

function saveRecordedAudio(blob) {
  // do whatever with this audio file e.g:
  // var form = new FormData();
  // form.append('file', blob, 'myaudio.ogg');
  // xhr.send(form)

  // for demo here, we'll just append a new audio with the recorded audio
  var url = URL.createObjectURL(blob);
  var a = new Audio(url);
  a.controls = true;
  document.body.appendChild(a);
  a.onload = () => URL.revokeObjectURL(url);// better to always revoke blobURLs...
}

function setup(stream) {
  let btn = document.querySelector('button');
  let recording = false;
  var recorder; // weird bug in FF when using let...
  btn.onclick = (e) => {
    if (recording = !recording) {
      recorder = startRecording(stream);
    } else {
      recorder.stop();
    }
    e.target.textContent = (recording ? 'stop' : 'start') + ' recording';
  };
}

<button>start recording</button>

This will record your stream as an OPUS/ogg, if you want wav, simply do the conversion server side.

Answer 2

HTML5 getUserMedia是否仅导出到.WAV文件？

getUserMedia根本不会导出任何内容。 getUserMedia仅返回MediaStream以进行某种音频/视频捕获。

此MediaStream与Web Audio API结合使用，您可以在其中访问PCM示例。 WAV文件通常包含原始PCM样本。（WAV是一种容器格式.PCM是样本格式，是数字编码音频最流行的方式。）

压缩文件 - 效果不佳并且存在一些安全问题。

当您考虑约束并且没有固有的安全问题时，它可以正常工作。在这种情况下，您将获得音频数据的无损压缩。像这样的东西的特征是压缩不会使尺寸减小超过15％-30％左右。

转换为MP3 - 使这个过程变得更加复杂，也有安全问题，并导致声音失去很多质量。

您可以在录制时进行编码，因此速度不是问题。复杂......也许起初但不是真的一旦你使用它。这里的问题是你担心质量问题。

不幸的是，你不能选择完美的质量和小巧的尺寸。这些都是权衡，没有灵丹妙药。您使用的任何有损压缩（如MP3，AAC，Opus，Vorbis）都会通过删除我们通常无法察觉的部分音频来显着减小您的数据量。带宽越少，此过程产生的伪像越多。您必须决定数据大小和质量。

如果我可以提出建议......请使用MediaRecorder API。 https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API这是一个非常容易使用的API。您创建一个MediaRecorder，给它一个流，告诉它记录，然后以你想要的任何方式处理它给你的数据。大多数支持MediaRecorder API的浏览器也支持Opus用于音频编解码器，它在大多数比特率下都能提供良好的性能。您可以选择所需的比特率，并且知道您可以获得有关该带宽量的最佳音质。

Answer 3

你需要对mp3进行编码，这样才能占用更少的空间......

libmp3lame.js是适合您的工具......

here中的完整文章 - 如何录制到mp3。

HTML5录音太大了

3 个答案: