javascript - grabar - mediarecorder api
¿Cómo puedo agregar una longitud predefinida al audio grabado desde MediaRecorder en Chrome? (3)
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 ...
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?
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'')
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
.
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 )
});