javascript - grabar - mediarecorder api

¿Cómo puedo agregar una longitud predefinida al audio grabado desde MediaRecorder en Chrome?

Question

Estoy en el proceso de reemplazar RecordRTC con el MediaRecorder incorporado para grabar audio en Chrome. El audio grabado se reproduce en el programa con la API de audio. Tengo problemas para que funcione la propiedad audio.duration. Dice

Si el video (audio) se transmite y no tiene una duración predefinida, se devuelve "Inf" (Infinito).

Con RecordRTC, tuve que usar ffmpeg_asm.js para convertir el audio de wav a ogg. Supongo que en algún lugar del proceso RecordRTC establece la longitud de audio predefinida. ¿Hay alguna forma de establecer la longitud predefinida usando MediaRecorder?

Answer 1

Este es un error de cromo .

FF expone la duración de los medios grabados, y si establece el duration actual de los medios grabados en más de su duration real, entonces la propiedad está disponible en 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>

Por lo tanto, el consejo aquí sería destacar el informe de error para que el equipo de Chrome tome algún tiempo para solucionarlo, incluso si esta solución puede hacer el truco ...

Answer 2

Gracias a @Kaiido por identificar el error y ofrecer la solución de trabajo.

Preparé un paquete npm llamado get-blob-duration Duration que puede instalar para obtener una buena función envuelta en Promesa para hacer el trabajo sucio.

El uso es el siguiente:

// Returns Promise<Number>
getBlobDuration(blob).then(function(duration) {
  console.log(duration + '' seconds'');
});

O ECMAScript 6:

// yada yada async
const duration = await getBlobDuration(blob)
console.log(duration + '' seconds'')

Answer 3

Un error en Chrome, detectado en 2016, pero aún abierto hoy (marzo de 2019), es la causa principal de este comportamiento. Bajo ciertos escenarios, audioElement.duration devolverá Infinity .

Información de errores de Chrome here y here

El siguiente código proporciona una solución alternativa para evitar el error.

Uso : Cree su audioElement y llame a esta función una sola vez, proporcionando una referencia de su audioElement . Cuando se resuelve la promise devuelta, la propiedad audioElement.duration debe contener el valor correcto. (También soluciona el mismo problema con videoElements )

/**
 *  calculateMediaDuration() 
 *  Force media element duration calculation. 
 *  Returns a promise, that resolves when duration is calculated
 **/
function calculateMediaDuration(media){
  return new Promise( (resolve,reject)=>{
    media.onloadedmetadata = function(){
      // set the mediaElement.currentTime  to a high value beyond its real duration
      media.currentTime = Number.MAX_SAFE_INTEGER;
      // listen to time position change
      media.ontimeupdate = function(){
        media.ontimeupdate = function(){};
        // setting player currentTime back to 0 can be buggy too, set it first to .1 sec
        media.currentTime = 0.1;
        media.currentTime = 0;
        // media.duration should now have its correct value, return it...
        resolve(media.duration);
      }
    }
  });
}

// USAGE EXAMPLE :  
calculateMediaDuration( yourAudioElement ).then( ()=>{ 
  console.log( yourAudioElement.duration ) 
});