Es una nueva comunidad sobre el reciente estándar de la web Html5, donde puedes encontrar tutoriales, tips, consejos, información, noticias y demás en un solo lugar.

¿Cómo grabar audio con HTML5 y API nativas en Chrome?


  Publicado hace |  Etiquetas: , , , , , , ,

Como saben, Flash sigue siendo usado aún en el tema multimedia ya que a HTML5 le falta tener madurez en ésta parte, como el caso de YouTube y su contenido, su reproductor HTML5 aún no está finalizado para ser usado por las masas, pero ha demostrado ser una buena alternativa que promete mucho.

En este caso no hablaremos mucho del consumo, si no de la creación o grabación del contenido multimedia,  específicamente audio. Uno de los navegadores que trabaja fuertemente en esto, es Google Chrome, recientemente en una de sus últimas versiones tiene algo muy curioso pero que no viene habilitado por defecto, es “Web Audio Input” que permite usar el micrófono o entrada de audio nativamente desde el navegador.

Iniciemos con el tutorial

Ejemplo de la ventana

Vamos a crear una sencilla interfaz que permita iniciar grabación y también detenerla con 2 botones, un reproductor para escuchar lo que hemos grabado y por ultimo un párrafo que nos diga lo que sucede.

 <input onclick="grabar()" type="button" value="Grabar ahora" />
  <input onclick="parar()" type="button" value="Parar y escuchar" />
 

Nuestro código JavaScript

Algo que tiene esta API, es que el audio que devuelve no es reproducible por nuestro navegador aún, podríamos decir que lo devuelve crudo y tendríamos que procesarlo en el Backend para devolver algún MP3 u otro formato permitido, pero esto es algo que no queremos ver ahora, para eso tenemos una librería que nos permite crear un buffer que nos devuelve el audio listo para escucharlo, se llama “Recorder.js” y lo vamos a implementar.


<script type="text/javascript" src="recorder.js"></script>

 

Creamos una función para que en caso de tener algún error nos haga saberlo y lo imprima en nuestro log.


 //Función en caso de error
  var error = function(e) {
  console.log('¡No pude grabarte!', e);
  };

 

Otra donde nos permita saber si todo sucedió correctamente y proceder con nuestra grabación, dentro de esta hacemos la conexión a nuestra entrada de audio, obtenemos el flujo de datos  y utilizamos nuestra librería para procesar esos datos y obtenerlos reproducibles.


 //Función cuando todo tenga exito
  var exito = function(s) {
  var context = new webkitAudioContext(); //Conectamos con nuestra entrada de audio
  var flujo = context.createMediaStreamSource(s); //Obtenemos el flujo de datos desde la fuente
  recorder = new Recorder(flujo); //Todo el flujo de datos lo pasamos a nuestra libreria para procesarlo en esta instancia
  recorder.record(); //Ejecutamos la función para procesarlo
  }

 

Otra de las cosas que tenemos que hacer, es hacer que el reproductor pueda tener un link donde obtenga nuestro audio y para eso tenemos que convertir en URL nuestro objeto.


 //Convertirmos el objeto en URL
  window.URL = window.URL || window.webkitURL;
  navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

 

Ahora seleccionamos la etiqueta audio para prepararla, en cuanto tengamos algo para reproducir, se lo damos.


 var recorder; //Es nuestra variable para usar la libreria Recorder.js
  var audio = document.querySelector('audio'); //Seleccionamos la etiqueta audio para enviarte el audio y escucharla

 

Ahora solo tenemos que habilitar las funciones para acceder al micrófono y pasar los parámetros que en este caso son las funciones que obtendrán de getUserMedia, para hacer su trabajo cuando el botón grabar sea pulsado.


 //Funcion para iniciar el grabado
  function grabar() {
  if (navigator.getUserMedia) { //Preguntamos si nuestro navegador es compatible con esta función que permite usar microfono o camara web
  navigator.getUserMedia({audio: true}, exito, error); //En caso de que si, habilitamos audio y se ejecutan las funciones, en caso de exito o error.
  } else {
  console.log('¡Tu navegador no es compatible!, ¿No lo vas a acutalizar?'); //Si no es compatible, enviamos este mensaje.
  }
  }

 

Para parar la grabación y que automáticamente se escuche, solo paramos nuestra librería y enviamos la URL del objeto a nuestra etiqueta de audio.


 //Funcion para parar la grabación y escucharla
  function parar() {
  recorder.stop(); //Paramos la grabación
  recorder.exportWAV(function(s) { //Exportamos en formato WAV el audio
  audio.src = window.URL.createObjectURL(s); //Y convertimos el valor devuelto en URL para pasarlo a nuestro reproductor.
  });
  }

 

Nota: Para poder usar esto, tenemos que ir a chrome://flags en el navegador y habilitar la opción “Web Input Audio” y correr todo en un servidor local.

Espero que les sirva para posteriores proyectos, esta API está bastante experimentada y se puede notar que en Google ya están por dejarlo habilitado en siguientes versiones de Chrome.

Para algo más concreto e incluso con Video visiten HTML5 Rocks

El ejemplo funcional esta por aquí

El código fuente pueden verlo en GitHub: https://github.com/html5facil/graba-audio-html5-chrome

comments powered by Disqus