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.
