Obtener el audio de un usuario desde el navegador puede ser una tarea bastante provechosa para un buen proyecto web. Como bien sabemos, en la actualidad existen librerías que nos sirven para realizar cualquier tarea, esto es bastante útil, pero a la misma vez, se convierte en un problema de rendimiento para el proyecto. Aun mas útil que las librerías, son las APIs,  y son mayormente útiles en los navegadores que actualmente soportan HTML5.  Recordando, anteriormente habíamos hablado sobre como usar la API de vibración para móviles desde el navegador web.

---

Con la API MediaRecorder (MediaStream Recording)  podemos grabar flujos multimedia desde el dispositivo del usuario y al instante usarlos en nuestra aplicación.

Uso De La API MediaRecorder

Para el ejemplo de como usar esta API, es necesario tener algunas grabaciones para trabajar con y para utilizar getUserMedia. Simplemente, luego, con una sentencia if, llamaremos la reproducción del archivo.

[js]

navigator.getUserMedia = ( navigator.getUserMedia || navigator.webkitGetUserMedia ||navigator.mozGetUserMedia || navigator.msGetUserMedia);
if (navigator.getUserMedia) {
console.log(‘getUserMedia supported.’);
navigator.getUserMedia (
{
audio: true
},
function(stream) {
//Codigo para funcionar aquí
},
);

[/js]

Todo lo que realmente hicimos fue probar el soporte para  getUserMedia y si el navegador tiene soporte para el audio que usamos para el ejemplo, como parámetro se envía la función que reproducirá aquel archivo de audio.  Ahora que tenemos el audio del usuario, podemos empezar a utilizar el API  de MediaRecorder y para ello tenemos en primer lugar, crear una nueva instancia de este dentro de nuestro callback de éxito:

[js]var mediaRecorder = new MediaRecorder(stream);[/js]

Esto tomara lo que se ha capturado y ahora tenemos que empezar la grabación real y para ello utilizar el siguiente codigo:

[js]mediaRecorder.start();[/js]

Y esto comienza el proceso de grabación. Si prueba ingresando MediaRecorder.state verá que después de que haya comenzado devolverá un valor de ‘recording‘. Si desea que el usuario finalice la grabación, se debe usar el siguiente bloque:

[js]

$("#stop").click(function() {
mediaRecorder.stop();
});

[/js]

Después de que el usuario ha pulsado el botón y la grabación haya finalizado, por fin tenemos la nota de audio graba,  lista para ser escuchada de nuevo por el usuario. Cuando esto sucede el evento DataAvailable es iniciado para que podamos hacer lo que queramos, ya sea guardarlo o enviarlo al usuario.
En nuestro ejemplo, cuando esto sucede todo lo que realmente haremos es crear un elemento de audio y reproducir la grabación del usuario de nuevo a él. Para esto utilizamos:

[js]

mediaRecorder.ondataavailable = function(e) {
var audio = $("body").append("<audio controls></audio>")
}

[/js]

Después tenemos el elemento creado en la página y todos los datos disponibles para nuestro uso colocando la grabación en la página es tan simple como la creación como la fuente de audio:

[js]

var audioURL = window.URL.createObjectURL(e.data);
audio.src = audioURL

[/js]

Y esto es todo lo que necesita, sin codificación ni nada manual, sólo conseguir los datos utilizando window.URL.createObjectURL (e.data) y colocándola como la fuente de la grabación de audio de forma que después de que el usuario ha realizado la grabación de un elemento de audio se creó y pulsando el botón de reproducción se reproducirá el audio grabado.

Finalmente

En términos de soporte para los navegadores actuales, sólo podemos usar esto en Firefox móvil y de escritorio, no te desanimes por esto ;) Recuerda que grandes herramientas han comenzado con un soporte muy limitado, y esta API seguramente no es la excepción. Ahora puedes usar esta herramienta para crear proyectos interesantes en los que puedas capturar la grabación del usuario. ¿Alguna aplicación en mente?