javascript - 如何为 Chrome 中从 MediaRecorder 录制的音频添加预定义长度？

Question

我正在用内置的 MediaRecorder 替换 RecordRTC，以便在 Chrome 中录制音频。然后使用音频 api 在程序中播放录制的音频。我无法使 audio.duration 属性正常工作。它说

If the video (audio) is streamed and has no predefined length, "Inf" (Infinity) is returned.

使用 RecordRTC，我必须使用 ffmpeg_asm.js 将音频从 wav 转换为 ogg。我的猜测是 RecordRTC 设置预定义音频长度的过程中的某个地方。有什么方法可以使用 MediaRecorder 设置预定义长度吗？

Answer 1

这是一个 chrome bug .

FF 确实公开了录制媒体的持续时间，如果您确实将录制媒体的 currentTime 设置为超过其实际 duration，则该属性可用在 Chrome ...

var recorder,
  chunks = [],
  ctx = new AudioContext(),
  aud = document.getElementById('aud');

function exportAudio() {
  var blob = new Blob(chunks);
  aud.src = URL.createObjectURL(new Blob(chunks));

  aud.onloadedmetadata = function() {
    // it should already be available here
    log.textContent = ' duration: ' + aud.duration;
    // handle chrome's bug
    if (aud.duration === Infinity) {
      // set it to bigger than the actual duration
      aud.currentTime = 1e101;
      aud.ontimeupdate = function() {
        this.ontimeupdate = () => {
          return;
        }
        log.textContent += ' after workaround: ' + aud.duration;
        aud.currentTime = 0;
      }
    }
  }
}

function getData() {
  var request = new XMLHttpRequest();
  request.open('GET', 'https://upload.wikimedia.org/wikipedia/commons/4/4b/011229beowulf_grendel.ogg', true);
  request.responseType = 'arraybuffer';
  request.onload = decodeAudio;
  request.send();
}


function decodeAudio(evt) {
  var audioData = this.response;
  ctx.decodeAudioData(audioData, startRecording);
}

function startRecording(buffer) {

  var source = ctx.createBufferSource();
  source.buffer = buffer;
  var dest = ctx.createMediaStreamDestination();
  source.connect(dest);

  recorder = new MediaRecorder(dest.stream);
  recorder.ondataavailable = saveChunks;
  recorder.onstop = exportAudio;
  source.start(0);
  recorder.start();
  log.innerHTML = 'recording...'
  // record only 5 seconds
  setTimeout(function() {
    recorder.stop();
  }, 5000);
}

function saveChunks(evt) {
  if (evt.data.size > 0) {
    chunks.push(evt.data);
  }

}

// we need user-activation
document.getElementById('button').onclick = function(evt){
  getData();
  this.remove();
}

<button id="button">start</button>
<audio id="aud" controls></audio><span id="log"></span>

所以这里的建议是给 bug report 加注星标所以 Chromium 的团队需要一些时间来修复它，即使这个解决方法可以解决问题......