12. Audio y video

12.1 Tipos de elementos de sonido y su incorporación

Hay dos maneras de incorporar sonido a un sitio: a) mediante un enlace: al hacer clic en éste, el archivo de sonido se abre con el dispositivo correspondiente para poder ser escuchado; b) automáticamente, como sonido de fondo.

Tipos de archivo

Los formatos de audio que más utilizaremos en nuestras páginas web serán: WAV, MID y MP3. Veamos las características básicas de cada uno de ellos:

WAV: es un formato de audio sin compresión, propiedad de Microsoft. Se utiliza para grabar y reproducir sonidos y audio. Soporta los canales mono y estéreo y distintas resoluciones y velocidades. Al no tener compresión, los archivos generados en este formato suelen ser muy pesados, pero de una alta calidad de sonido. La extensión es .wav.

MID: Un archivo midi (Musical Instrument Digital Interface o Interfaz Digital de Instrumentos Musicales) no es un sonido propiamente dicho. Son una serie de instrucciones sobre cómo ejecutar los sonidos que trae la tarjeta de sonido de la computadora. En un archivo .mid (es la extensión) se puede precisar una melodía monofónica (un solo instrumento) o polifónica (varios instrumentos) mediante códigos de instrumentos, de intensidades, de tiempos y de notas (como los ringtones). Este archivo tiene la ventaja de ser mucho más liviano que un archivo wav o mp3, aunque no siempre se reproduce de la misma manera porque depende de la tarjeta de sonido que tenga el usuario.

MP3: Es un formato de audio digital comprimido. Alrededor de 1987 se comenzó a investigar y desarrollar un formato de audio comprimido para la transmisión digital. En 1992 se aprobó la licencia del MPEG1 Audio Layer 3 (o MP3). La compresión se basa en quitar los sonidos inaudibles al oído humano. El concepto es similar a la compresión de las imágenes JPG, a mayor compresión, menor calidad del sonido y archivo de menor peso. La extensión de estos archivos es .mp3.

Incorporación de sonidos mediante enlaces:

<a href="sonido1.wav">Clic aquí para escuchar un sonido.</a>
<a href="cancion1.mid">Clic aquí para escuchar una canción.</a>
<a href="cancion2.mp3">Clic aquí para escuchar una canción.</a>

En cualquiera de estos casos, al hacer clic sobre el enlace, se abrirá el plugin (programa añadido al navegador) correspondiente para escuchar el archivo o el reproductor asociado a dicha extensión. En algunos casos se descargará a la pc, según el navegador o dará opción de abrirlo con el soft asociado.

Sonidos de fondo

Una etiqueta ampliamente difundida durante un tiempo por su facilidad de uso fue <BGSOUND>. El único inconveniente es que sólo funciona en IExplorer. La sintaxis es la siguiente:

<bgsound src="musica.mid" loop="infinite">

No tiene cierre, y la podemos colocar en cualquier parte del documento.

Los atributos que admite son:

src: es la ruta del archivo de sonido, puede ser absoluta o relativa (ver rutas en el Módulo 7: imágenes).
loop: cantidad de veces que se repite el archivo de sonido. Puede ser un valor numérico o "infinite" para que se reproduzca indefinidamente.

¿Qué pasa en los otros navegadores? Se utiliza la etiqueta <EMBED> o javascript y también Flash aunque este último está cayendo en desuso por la popularización del código HTML5. Más adelante en este módulo explicamos el uso de esta etiqueta para música y video.

12.2 Tipos de elementos de video

Los elementos de video que podemos incorporar en nuestra página web dependen en gran medida de los plugins presentes en el navegador que utilizan para ver el sitio. Los archivos más comunes son:

MOV: es el nombre de archivo y extensión proveniente de Macintosh. Se requiere el reproductor Quick Time instalado para ver estos arvchivos.

AVI, ASF y WMV: Extensiones de archivos comprimidos de Microsoft. Generalmente se ven con el reproductor Windows Media Player instalado y otros genéricos como Winamp (en este último caso, descargando el video previamente).

MPEG y sus diferentes versiones (1, 2 y más recientemente 4) es el formato de video comprimido equivalente al de audio mp3. Su extensión es mpg.

RealVideo (extensión .ram) es el único formato diseñado especialmente para el vídeo en Internet. Requiere tener instalado el Real Player para su correcta visualización.

Incorporación de videos mediante enlaces:

Al igual que con el audio, utilizamos la etiqueta <A>:

<a href="video.avi">Clic aquí para ver el video en Windows Media Player.</a>
<a href="video.mov">Clic aquí para ver el video en Quick Time.</a>
<a href="video.ram">Clic aquí para ver el video en Real Player.</a>
<a href="video.mpg">Clic aquí para ver el  video en MPEG Player o Windows Media.</a>

Al hacer clic en el vínculo, existen dos alternativas: a) que el video se abra con el plugin instalado en el navegador en forma automática; b) que se descargue en la computadora del visitante y/o se abra con el reproductor asociado a la extensión del archivo.

Video incorporado al documento html. Etiqueta IMG

Aquí comienzan las variantes... encontramos varias etiquetas para incorporar videos a nuestros documentos (para verlos on-line). La primera etiqueta que se utilizó a este fin -y aún funciona en muchos navegadores- es la etiqueta <img>. De la siguiente manera:

<img src="imagen_video.jpg" dynsrc="video.avi">

Además de los atributos que vimos en el Módulo imágenes, se añaden:

dynsrc: es la ruta del archivo de video, puede ser absoluta o relativa (ver rutas en el Módulo imágenes).
loop: cantidad de veces que se reproducirá el video, las variantes son: un valor numérico o "infinite". El valor por defecto es "1".
start="fileopen/mouseover": indica si el archivo se abrirá inmediatamente al cargarse (valor por defecto, fileopen) o cuando el mouse pase sobre el mismo -mouseover-.

La imagen que incorporamos mediante el atributo src sirve a fin de mostrar un gráfico en caso que el reproductor asociado no se encuentre instalado en el navegador.

Algo muy importante a tener en cuenta en el uso de esta etiqueta es que el archivo se descarga completamente en el caché de la computadora del usuario antes de comenzar a mostrarse, por lo que necesitaremos utilizar videos cortos, o de baja resolución para que resulten livianos; o mostrar una leyenda para que el visitante espere la descarga.

12.3 Etiqueta <EMBED>

Esta etiqueta se desarrolló para unificar y estandarizar la utilización de archivos de audio y video en diferentes navegadores. En la actualidad Firefox no la reconoce, el que mejor responde a esta etiqueta es Chrome. Originariamente no tenía cierre, pero puede incluirse.

Con la llegada de HTML5, se incorporaron nuevas etiquetas para audio y video que funcionan en las versiones más recientes de los navegadores más utilizados (Chrome, Firefox, IExplorer o Edge, Opera, Safari) y tiende a convertirse en el nuevo estándar.

Código de video embebido:

<embed src="video.avi" type="video/avi" autostart="1" width="200" height="170"></embed>

Esta etiqueta se puede utilizar sin cierre. El reconocimiento dependerá de cada navegador.

Listado de atributos

Para insertar música de fondo en mp3, el código es:

<embed src="musica.mp3" loop="true">

En el caso de arriba, se muestra la consola de sonido. En el de abajo utilizamos el atributo hidden para ocultarla. Y en la línea de abajo, seteamos los valores alto y ancho en 0 (otra manera de ocultarla).

<embed src="musica.mp3" loop="true" hidden="true">
<embed src="musica.mp3" loop="true" width="0" height="0">

Algunos navegadores no reconocen esta etiqueta. De forma similar a cuando utilizamos marcos, disponemos de la etiqueta <NOEMBED> para agregar un mensaje alternativo (esta etiqueta se utiliza con cierre):

<embed src="conferencia.mp3" loop="false" width="200" height="60">
<noembed><a href="conferencia_texto.htm">Transcripción de la conferencia.</a></noembed>
</embed>

12.4 Etiqueta OBJECT

Hacemos mención a esta etiqueta, que se utiliza para incluir videos, imágenes, elementos flash, audio, applets java, en sitios web y que está siendo desplazada (al igual que las otras etiquetas de este módulo) por las correspondientes de HTML5.

Los elementos de audio y video dependen de los plugins que tenga instalado el navegador del usuario para visualizarse correctamente.

Más información sobre la etiqueta OBJECT.

Actualización: enero, 2021. Elena Navntoft.