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

问题描述

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

如果视频（音频）流式传输并且没有预定义的长度，则返回Inf（Infinity）。

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

FF会显示录制媒体的持续时间，如果您确实将录制媒体的 currentTime 设置为超过它的实际持续时间，那么该属性可用铬...

  var recorder，chunks = []，ctx = new AudioContext（），aud = document.getElementById（'aud'）; function exportAudio（）{var blob = new Blob （chunks，{type：'audio / ogg'}）; aud.src = URL.createObjectURL（新的Blob（chunks））; aud.onloadedmetadata = function（）{//它应该已经在这里可用log.textContent ='duration：'+ aud.duration; //处理铬的bug（aud.duration === Infinity）{//设置它大于实际持续时间aud.currentTime = 1e101; aud.ontimeupdate = function（）{this.ontimeupdate =（）=> {return;}解决方法之后的log.textContent + ='：+ 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（）;}函数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（目标）; recorder = new MediaRecorder（dest.stream）; recorder.ondataavailable = saveChunks; recorder.onstop = exportAudio; source.start（0）; recorder.start（）; setTimeout（function（）{recorder.stop（）;}，5000）;} function saveChunks（evt）{if（evt.data.size> 0 ）{chunks.push（evt.data）; }} getData（）;  

< audio id = audcontrols>< / audio>< span id =log>< / span>

因此，这里的建议是将错误报告加上星号，这样铬团队需要一些时间来解决它，即使这种解决方法可以做到这一点......

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

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

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?

解决方案

This is a chrome bug.

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, {
    type: 'audio/ogg'
  });
  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);
  }

}



getData();

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

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屋！