viernes, 30 de mayo de 2014

Multimedia en HTM5

Parte 1: Audio - Reproducción de Archivos

1. Formatos de Audio
Para reproducir Audio en HTML5 se usa el elemento <audio>, el cual dependiendo del navegador debe soportar los formatos:
·         WAV (Waveform Audio Format): Formato de audio no comprimido desarrollado por IBM y Microsoft.
·         Ogg Vorbis: Formato de audio comprimido de código abierto desarrollado por la fundación Xiph.Org.
·         MP3: Formato de audio comprimido desarrollado por Moving Picture Experts Group (MPEG).

2. El elemento <audio>
Este elemento se compone de varios atributos entre los cuales tenemos:
·         src: Especifica el archivo de audio a reproducir.
·         autoplay: Inicia automáticamente la reproducción.
·         loop: Reinicia el audio cuando termina.
·         controls: Muestra los controles predeterminados para manejar el audio: detener, continuar, tiempo, etc.

3. El elemento <source>
El elemento <audio> puede contener varios elementos de tipo <source> que especifica recursos de audio alternativos al atributo src especificado en el elemento <audio>, es decir, si el Navegador (Browser) no soporta un tipo de archivo de audio especificado en el atributo src del elemento <audio> se generaría un error, sin embargo, si no especificamos el atributo scr y definimos una lista de <source> el navegador reproducirá el primer formato que soporte, tal como se muestra en el siguiente ejemplo:
  <audio controls>
    <source src="Archivo.wav">
    <source src="Archivo.ogg">
    <source src="Archivo.mp3">
  </audio>
El elemento <source> a su vez tiene 2 atributos:
·         src: Especifica el archivo de audio a reproducir si soporta el formato el Navegador.
·         type: Especifica el tipo de recurso multimedia referenciado. Este tiene 2 parametros: un tipo MIME y un Codec. Como se muestra en el siguiente ejemplo:
  <audio controls>
    <source src="Archivo.wav" type="audio/wav; codecs=1">
    <source src="Archivo.ogg" type="audio/ogg; codecs=vorbis">
    <source src="Archivo.mp3" type="audio/mpeg; codecs=mp3">
  </audio>
Nota: No es necesario especificar el tipo (atributo type), mejor es que el navegador lo determine.

Más información:

Parte 2: Audio - Las APIs de Audio

1. Introducción
Actualmente hay 2 APIs de Audio para la Web en la W3C:
·         Audio Data API: Desarrollada por Mozilla e implementada en su navegador Firefox.
·         Web Audio API: Estandar W3C propuesto por Google e implementado en los navegadores Chrome, Firefox y Safari.
Nota: Audio Data API, no es un estándar solo funciona en Mozilla Firefox.
Las APIs de audio permiten programar audio, es decir, realizar las 2 operaciones básicas:
·         Leer archivos de audio y extraer muestras de audio.
·         Crear sonidos o generar datos de audio.
Todo audio, sea en un archivo de sonido o en uno de video, tiene un número fijo de muestras de audio al que se conoce como "FrameBuffer". La interpretación de esta información depende de 2 ajustes de codificación del recurso que son:
·         El número de canales presentes de audio.
·         La frecuencia de muestreo de la grabación.
Nota: A estos 2 se le conocen como Metadatos.

2. Audio Data API
La API de Audio de Mozilla tiene 2 eventos en los cuales se programa la lectura de datos de audio:
·         MozAudioAvailable: Se acciona por cada fragmento de datos de audio que haya sido decodificado.
·         loadedmetadata: Ocurre cuando se carga la información del FrameBuffer, es decir los canales y la frecuencia.
Una vez cargada la metadata se puede acceder a 3 atributos del objeto audio:
·         mozChannels: Número de canales.
·         mozSampleRate: Frecuencia de muestreo (Tasa).
·         mozFrameBufferLength : Número de FrameBuffers.
Ejemplo:
<audio id="audio" src="Archivo.mp3"></audio>
<script>
  var audio = document.getElementById("audio");
  audio.addEventListener('MozAudioAvailable', audioAvailableFunction, false);
  audio.addEventListener('loadedmetadata', loadedMetadataFunction, false);
</script>

Más información:

3. Web Audio API
El objeto principal de la API de Audio Web es "AudioContext" y solo debe existir uno por página. Entre sus miembros tenemos:
·      Propiedades: destination, sampleRate, currentTime, listener.
· Métodos: createBuffer, createBufferSource, createMediaElementSource, createMedia StreamSource, createMediaStreamDestination, createScriptProcessor, createAnalizer, createGain, createDelay, etc.
Las operaciones de audio básicas son realizadas mediante nodos de audio, representado por el objeto "AudioNode", el cual tiene los siguientes miembros:
· Propiedades: context, numberOfInputs, numberOfOutputs, channelCount, channelCount Mode, channelInterpretation.
·        Métodos: connect, disconnect.
Los nodos de audio están unidos a través de sus entradas y salidas. Cada entrada o salida está compuesta por varios canales representando un diseño de canal específico.
Otros objetos importantes de Web Audio API son: AudioBuffer, AudioListener, AudioParam, DelayNode, GainNode, OscillatorNode, PannerNode, ScriptProcessorNode, etc. También existen eventos como: audioprocess, complete y ended.

Más información:

Parte 3: Video - Reproducción de Archivos

1. Formatos de Video
Para reproducir Video en HTML5 se usa el elemento <video>, el cual dependiendo del navegador debe soportar los formatos:
·         WebM: Formato de Video basado en el contenedor MKV de Matroska. Alberga codecs VP8 y Vorbis.
·         Ogg: Formato de video de código abierto desarrollado por la fundación Xiph. Alberga codecs Theora, Vorbis, Speex, FLAC.
·         MP4: Formato de video desarrollado por Moving Picture Experts Group (MPEG). Contenedor de codecs MP3, AAC y H.264.

2. El elemento <video>
El elemento <video> se compone de algunos atributos similares al <audio> entre los cuales tenemos:
·         src: Especifica el archivo de video a reproducir.
·         autoplay: Inicia automaticamente la reproducción.
·         loop: Reinicia el video cuando termina.
·         controls: Muestra los controles predeterminados para manejar el video: detener, continuar, tiempo, etc.
Pero el elemento <video> tiene otros atributos que no tiene el elemento <audio>, entre ellos:
·         poster: Muestra una imagen representativa del video.
·         width: Especifica el ancho del video.
·         height: Especifica el alto del video.

3. El elemento <source>
Al igual que el elemento <audio>, el elemento <video> puede contener varios elementos de tipo <source> que especifican los recursos de video a intentar reproducirse, tal como se muestra en el siguiente ejemplo:
  <video controls>
    <source src="Archivo.webm">
    <source src="Archivo.ogv">
    <source src="Archivo.mp4">
  </video>

4. Conversión de Formatos
Si se desea convertir cualquier formato de video a MP4 (MPEG-4 H.264) existen muchas herramientas, pero la mas útil y de código abierto es FFmpeg, que trabaja por línea de comandos, la versión para Windows se llama Zeranoe FFmpeg. A partir de esta se puede construir una GUI por ejemplo en .NET que permita convertir cualquier tipo de archivo de video en MP4.

Más información:

Parte 4: Video - La API Javascript Multimedia

1. Introducción
La mayoría de objetos de HTML están disponibles para su acceso de 2 formas:
·         Declarativa: Mediante la definición de elementos, por ejemplo para multimedia: <audio> y <video>.
·         Programática: Mediante el uso de Javascript y el Modelo de Objetos de Documento (DOM).
Nota: Para esta última, existe un Lenguaje de Definición de Interfaz Web (WebIDL) que expecifica cada tipo y sus miembros, es decir, cada clase, y las propiedades, metodos y eventos que debe exponer.

2. Atributos
En general, podemos clasificar a los atributos de 2 formas:
·         Atributos de contenido: Definidos en tiempo de diseño en el elemento respectivo, por ejemplo para los elementos <audio> y <video> tenemos los atributos src, autoplay, loop y controls.
·         Atributos IDL: Definidos en tiempo de ejecución o por programación usando las APIs de Javascript, es decir las propiedades. Conocidos también como atributos DOM, para el caso de multimedia reflejan el estado en que se encuentra un elemento multimedia.
Nota: En IDL el recurso multimedia es de tipo HTMLMediaElement, el audio es de tipo HTMLAudioElement y el video de tipo HTMLVideoElement. Estos 2 últimos comparten la misma interfaz HTMLMediaElement.

3. Propiedades
A continuación clasificamos los atributos IDL o propiedades multimedia:
·         Propiedades sobre caracteristicas generales de recursos multimedia: currentSrc, startTime, duration, volume, muted, videoWidth y videoHeight.
·         Propiedades asociadas a la reproducción del recurso multimedia: currentTime, seeking, paused, ended, defaultPlaybackRate, playbackRate.
·         Propiedades referidas a los estados del elemento multimedia: networkState, readyState, error, buffered (TimeRanges), played (TimesRanges), seekable (TimesRanges).

4. Métodos
Solo existen 4 métodos de los elementos multimedia que son los siguientes:
·         load: Carga el recurso realizando los siguientes pasos: inicialización, selección del recurso, obtención del recurso, iniciar la reproducción si autoplay es true.
·         play: Solo ejecuta la reproducción del recurso multimedia a la vez que obtiene y almacena los datos en el buffer.
·         pause: Este método detiene la reproducción del recurso multimedia.
·         canPlayType: Este método toma como parámetro una cadena de tipo MIME y devuelve si el navegador puede reproducir dicho recurso multimedia.

5. Eventos
En realidad son muchos eventos que tiene un recurso multimedia, entre los principales tenemos:
·         loadstart: Ocurre cuando el navegador comienza a buscar la información multimedia.
·         progress: El navegador está obteniendo datos multimedia.
·         suspend: El navegador ha pausado la obtención de datos multimedia pero el recurso todavía no está descargado.
·         playing: Ocurre cuando el recurso se está reproduciendo.
·         ended: Ocurre cuando el recurso termino de reproducirse, etc.

Más información:

Parte 5: Voz - Síntesis con la API de Voz Web

1. Introducción
Web Speech API es la propuesta de Google para implementar voz en las aplicaciones Web con HTML5, actualmente está disponible solo en Chrome, no en los demás navegadores, ya que todavía No es un estándar W3C, sino solo una especificación.

2. Clase SpeechSynthesis
Esta clase permite implementar la síntesis o emisión de voz y presenta los siguientes miembros:
·         Propiedades: pending, speaking y paused.
·         Métodos: speak, cancel, pause, resume y getVoices.

3. Clase SpeechSynthesisUtterance
Esta clase contiene el mensaje a pronunciar (Utterance) por el objeto SpeechSynthesis y contienen los siguientes miembros:
·         Propiedades: text, lang, voiceURI, volume, rate y pitch.
·         Eventos: start, end, error, pause, resume, mark y boundary.

4. Ejemplo de Síntesis
<script>
  var msg = new SpeechSynthesisUtterance();
  var voices = window.speechSynthesis.getVoices();
  msg.voice = voices[10];
  msg.voiceURI = 'native';
  msg.volume = 1; // 0 a 1
  msg.rate = 1; // 0.1 a 10
  msg.pitch = 2; //0 a 2
  msg.text = 'Hola me llamo Luis Dueñas';
  msg.lang = 'es-PE';
  msg.onend = function(e) {
    console.log('Finalizo en ' + event.elapsedTime + ' segundos.');
  };
  speechSynthesis.speak(msg);
</script>

Mas información:

Parte 6: Voz - Reconocimiento con la API de Voz Web

1. Introducción
Mientras la síntesis consiste en reproducir un texto en forma hablada (emisión o salida de voz), el reconocimiento de voz consiste en capturar la voz y convertirla en texto (captura o entrada de voz). Para lo cual también se usa Web Speech API desarrollado por Google e implementado en Chrome.

2. Clase SpeechRecognition
Es la principal clase para el reconocimiento de voz y tiene los siguientes miembros:
·         Propiedades: grammars, lang, continuous, interimResults, maxAlternatives y serviceURI.
·         Métodos: start, stop y abort.
·         Eventos: audiostart, soundstart, speechstart, speechend, soundend, audioend, result, nomatch, error, start y end.

3. Clase SpeechRecognitionError
Esta clase contiene información sobre los errores del reconocimiento de voz. Es usada por el evento "error" del objeto SpeechRecognition. Contiene solo 2 propiedades o atributos:
·         error: Su propiedad principal es errorCode que es una enumeración con los valores no-speech, aborted, audio-capture, network, not-allowed, service-not-allowed, bad-grammary language-not-supported.
·         message: Mensaje de error especifico del reconocimiento de voz. Puede variar por navegador.

4. Ejemplo de Reconocimiento
<script>
    var recognition = new webkitSpeechRecognition();
    recognition.continuous = true;
    recognition.interimResults = false;
    recognition.onresult = function(event) {
      var rpta = event.results[event.results.length-1][0].transcript;
      alert(rpta);
    };
    recognition.lang = "es-PE";
    recognition.start();
</script>
Nota: Para ejecutar cualquier ejemplo de Reconocimiento de Voz es necesario tener un Micrófono conectado, además por seguridad no acepta ejecución local sino en un servidor, por ejemplo IIS, Apache, etc. No olvidar que solo corre en Google Chrome.

5. Ingresos de Textos por Voz
En HTML5 podemos realizar el ingreso de texto por voz, tan solo aumentando el atributo "x-webkit-speech" a los input type="text", tal como se muestra abajo:
<input type="text" x-webkit-speech>
Nota: Aparecerá un icono con un micrófono, dar clic y empezar a hablar, lo que se pronuncie se escribirá sobre dicho texto. Recordar que por ahora solo está disponible en Chrome.

Más información:

Parte 7: Conclusión y Comentarios

En este artículo de 6 partes tratamos sobre Multimedia en HTML5, en la primera parte vimos como trabajar con el elemento <audio> para reproducir archivos de sonido, en la segunda parte tratamos de como programar audio usando las APIs de audio: Audio Data API de Mozilla (solo para Firefox) y Web Audio API que es estándar W3C.

En la tercera parte tratamos sobre como Reproducir archivos de Video usando el elemento <video> y en la cuarta parte vimos como programar tanto el audio como el video usando la API de Javascript para Multimedia.

Finalmente, en los 2 últimas partes tratamos sobre Voz, usando la Web Speech API de Google disponible solo para Chrome hasta que se convierta en estándar W3C, primero mostramos como hacer síntesis (texto a voz) y luego como hacer reconocimiento (voz a texto).

Sin duda, un tema muy interesante que ya está usándose en Aplicaciones Web Comerciales y también en Juegos. Audio y Video ya son estándares, Voz muy pronto lo será y lo mejor sería adelantarnos a lo que viene.

1 comentario: