如何为 Chrome 中从 MediaRecorder 录制的音频添加预定义的长度? [英] How can I add predefined length to audio recorded from MediaRecorder in Chrome?

问题描述

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

I am in the process of replacing RecordRTC with the built in MediaRecorder for recording audio in Chrome. The recorded audio is then played in the program with audio api. I am having trouble getting the audio.duration property to work. It says

如果视频(音频)是流式传输的并且没有预定义的长度，则返回Inf"(无限).

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

使用 RecordRTC，我不得不使用 ffmpeg_asm.js 将音频从 wav 转换为 ogg.我的猜测是在 RecordRTC 设置预定义音频长度的过程中.有没有办法使用 MediaRecorder 设置预定义的长度?

With RecordRTC, I had to use ffmpeg_asm.js to convert the audio from wav to ogg. My guess is somewhere in the process RecordRTC sets the predefined audio length. Is there any way to set the predefined length using MediaRecorder?

推荐答案

这是一个 chrome 错误.

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

FF does expose the duration of the recorded media, and if you do set the currentTimeof the recorded media to more than its actual duration, then the property is available in 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>

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

So the advice here would be to star the bug report so that chromium's team takes some time to fix it, even if this workaround can do the trick...

这篇关于如何为 Chrome 中从 MediaRecorder 录制的音频添加预定义的长度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！