javascript - HTML5 音频录制太大

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

推荐的方法可能是使用 API already there in your browser而不是用我们现有的糟糕工具自己重写它。

因此，要录制音频流，(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>

这会将您的流录制为 OPUS/ogg，如果您想要 wav，只需 do the conversion server side .