WebMaestro - 15. Sonidos

15. Sonidos

Una página del Web puede tener sonidos incorporados, bien sea como un fondo sonoro que se ejecuta automáticamente al cargar la página, o como una opción para que la active el propio usuario.

Capacidades sonoras de los navegadores

Para poder escuchar los sonidos es necesario disponer, como es lógico, de una tarjeta de sonido con sus correspondientes altavoces. Pero esto no es suficiente, pues no todos los programas navegadores están capacitados en la misma medida.

Explorer de Microsoft

Es el que está mejor adaptado para el sonido, pues a partir de la versión 2.0 es capaz de reproducir fondos sonoros sin necesidad de añadir nada, y no hay ninguna complicación con los servidores, como ocurre con el Netscape. Además, a partir de la versión 3.0 del Explorer, es incluso compatible con los plug-ins del Netscape.

Netscape

Las versiones anteriores a la 2.0 no son capaces de reproducir fondos sonoros que se ejecuten automáticamente, sino que requerirá que se activen los programas auxiliares asociados a los formatos .wav o .mid.
La versión 2.0 sí es capaz de reproducir un fondo sonoro, pero es necesario que tenga instalado un plug-in llamado Crescendo que se obtiene en LiveUpdate (Una vez obtenido hay que instalarlo manualmente en el directorio 'plugins' del Netscape 2.0).
La versión 3.0 lleva implícito el plug-in Live Audio (pero sólo la versión completa, no la reducida). En caso afirmativo, es capaz de reproducir un fondo sonoro.
Pero a todas estas complicaciones de las distintas versiones de los navegadores de los usuarios, hay otra más y es que el servidor donde esté alojada la página del Web debe tener configurados como MIME los formatos .mid y .wav. Si esto no es así, aunque depositemos en el servidor nuestro documento HTLM acompañado por el correspondiente fichero de sonido, éste no se ejecutará. En dicho caso, es necesario ponerse en contacto con los administradores del servidor para que configuren como MIME los formatos .mid y .wav.
Este problema no existe, sin embargo para el Explorer, con el que no nos tenemos que preocupar por este tema.

Hemos visto hasta aquí las distintas capacidades de los navegadores. Ahora vamos a ver las etiquetas que debemos poner en nuestro documento HTML para que se puedan oir los sonidos en uno y otro navegador, y que lamentablemente no son iguales, pero que se pueden combinar, como veremos más adelante.

Fondo sonoro para el Microsoft Internet Explorer

Para las versiones 2.0 en adelante, se utiliza la etiqueta:

<BGSOUND SRC="fichero_de_sonido" LOOP=n>

El fichero de sonido puede estar en formato .mid o .wav.

El atributo LOOP (en inglés, lazo) sirve para especificar el número (n) de veces que se debe ejecutar el fichero de sonido. Si se escoje el número n=-1 o se pone LOOP=infinite, el sonido se ejecutará indefinidamente. Se puede omitir este atributo, y entonces el fichero se ejecutará una sola vez.

Ejemplo 1

La etiqueta para que se ejecute el fichero prv89.mid dos veces en el Explorer es:

<BGSOUND SRC="prv89.mid" LOOP=2>

Este es el resultado.
(Para poder oirlo, hay que estar utilizando el Explorer)

Fondo sonoro para el Netscape

La etiqueta básica para el Netscape es:

<EMBED SRC="fichero_de_sonido" WIDTH=xxx HEIGHT=yy>

donde WIDTH es la anchura y HEIGHT la altura de una consola que aparece, y que tiene diferentes teclas (play, stop, pausa, etc.). Más adelante veremos los valores xxx e yy que debemos atribuirles.

El fichero de sonido puede estar en formato .mid o .wav, pero recuérdese la advertencia hecha anteriormente, de que estos formatos deben estar configurados como MIME por el servidor donde esté alojada la página.

Dentro de la etiqueta se pueden añadir los siguientes atributos opcionales:

AUTOSTART="true" (arranca automáticamente)
LOOP="true" (se ejecuta ininterrumpidamente)

Ejemplo 2

Vamos a ver una etiqueta para que aparezca en el Netscape una consola con sus teclas. Pulsando la tecla play se ejecutará el fichero prv89.mid.

Con respecto a las dimensiones de la consola, tenemos el problema de que son distintas para los diferentes plug-ins que existen para el Netscape, y no sabemos cuál de ellos estarán usando los distintos usuarios de nuestra página. En este ejemplo se van a poner las dimensiones de la consola del plug-in Crescendo del Netscape 2.0 (200 de ancho por 55 de alto), pero es posible que si se está utilizando otro distinto se vean zonas en blanco.

La etiqueta queda de esta manera:

<EMBED SRC="prv89.mid" WIDTH=200 HEIGHT=55>

Este es el resultado.
(Para poder ver la consola, y ejecutar el fichero es necesario utilizar el Netscape 2.0 o superior, y tener instalado algún plug-in de sonido)

Ejemplo 3

Vamos a crear una etiqueta para el Netscape, en la que la consola sea invisible y el fichero se ejecute automáticamente al cargar la página.

Para conseguir que la consola sea invisible hay que añadirle el atributo HIDDEN="true".

<EMBED SRC="prv89.mid" HIDDEN="true">

Este es el resultado.
(Para que se ejecute el fichero es necesario utilizar el Netscape 2.0 o superior, y tener instalado algún plug-in de sonido)

Fondo sonoro combinado para el Explorer y el Netscape

Se pueden combinar los dos tipos distintos de etiquetas para conseguir que un fondo sonoro sea escuchado por usuarios que utilicen tanto el Explorer como el Netscape (siempre que éste último esté preparado para ello). En este caso, el Explorer ignorará la etiqueta del Netscape, y a la inversa.

Ejemplo 4

Vamos a ver las dos etiquetas necesarias para que se ejecute el fichero prv89.mid como sonido de fondo, tanto por el Explorer como por el Netscape (lo hará una sola vez):

<BGSOUND SRC="prv89.mid"> <EMBED SRC="prv89.mid" HIDDEN="true">

Este es el resultado.

Ejemplo 5

Ahora vamos a las etiquetas para que el fichero prv89.mid se ejecute como sonido de fondo, tanto por el Explorer como por el Netscape y que se ejecute indefinidamente.

A la etiqueta del Explorer basta con añadirle el atributo LOOP=infinite, como se ha visto anteriormente.

Y con respecto a la etiqueta del Netscape, teóricamente debería también bastar añadirle el atributo LOOP="true", pero curiosamente esto no es así, porque hay que poner las dimensiones de la consola (que no se va a ver).

Las dos etiquetas quedan de esta manera:

<BGSOUND SRC="prv89.mid" LOOP=infinite&GT; <EMBED SRC="prv89.mid" WIDTH=200 HEIGHT=55 AUTOSTART="true" LOOP="true" HIDDEN="true">

Este es el resultado.

Activación del sonido por el propio usuario

Hasta aquí hemos visto cómo poner un sonido de fondo en una página. Hay otra opción, mucho más sencilla, y es la de poner un enlace a un fichero de sonido, de tal manera, que al pulsarlo se ejecute el fichero. (Ver el Capítulo 3, en el que se explica cómo crear enlaces).

Por ejemplo, vamos a poner un enlace al fichero prv89.mid:

Escucha esta <A HREF="prv89.mid">musica</A>

Que resulta como: Escucha esta musica

Al pulsar el enlace se activa, en una ventana aparte, el programa que ejecuta el sonido. Esto es válido para todos los navegadores, incluso las versiones más antiguas, con la única condición de que se haya configurado un programa auxiliar capaz de ejecutar ficheros .mid o .wav.

Se puede hacer el enlace con un icono (Ver el Capítulo 4)

Ejemplo 6

Vamos a hacer un enlace con el icono sound1.gif

al fichero de sonido problemo.wav:

<A HREF="problemo.wav"><IMG SRC="sound1.gif"></A>

Que resulta:

Ejemplo práctico

En el capítulo anterior creamos una versión con frames, en la que aparece inicialmente en el frame de la derecha una página de presentación, (que guardamos con el nombre de mipagpre.html)

Vamos a poner a esta página una música de fondo (xfiles.mid), para que sea ejecutada por el Explorer y el Netscape. Para ello debemos seguir los siguientes pasos:

1) En el documento mipagpre.html debemos añadir entre las etiquetas </SRONG&GT; y </FONT&GT; (situadas al final), lo siguiente:

<BR><FONT COLOR="#FF0000">¡Escucha la música de fondo!</FONT>
<BGSOUND SRC="xfiles.mid">
<EMBED SRC="xfiles.mid" WIDTH=2 HEIGHT=0 AUTOSTART="true">

Guardamos este documento con el nombre mippre15.html

2) El documento del frame de la izquierda mipagind.html servía de índice de lo que se ve en el de la derecha. Como ahora se debe de ver el documento mippre15.html en vez del que estaba antes (mipagpre.html), debemos sustituir uno por otro en el documento mipagind.html, con lo que queda:

<HTML>
<HEAD>
<TITLE> Indice </TITLE>
</HEAD>
<BODY BGCOLOR="#FFBB00">
<P><A HREF="mippre15.html" TARGET="principal"> Presentación </A>
<P><A HREF="mipag13.html" TARGET="principal"> Mi página </A>
<P><IMG SRC="glogoan2.gif">
</BODY>
</HTML>

Guardamos este documento con el nombre mipind15.html

3) Como han variado los nombres de los documentos de ambos frames, tenemos que reflejarlo en el documento de definición de los frames, y que llamábamos mipagina.html, con lo que dicho documento queda ahora así:

<HTML>
<HEAD>
<TITLE>Mi pagina con frames</TITLE>
</HEAD>
<FRAMESET COLS="20%, 80%">
<FRAME SRC="mipind15.html">
<FRAME SRC="mippre15.html" NAME="principal">
</FRAMESET>
<NOFRAMES>
Estas utilizando un navegador que no soporta frames.
<P>Pulsa para visitar mi <A HREF="mipag13.html"> página</A>.
</NOFRAMES>
</HTML>

Guardamos este documento con el nombre mipag15.html. Este es el documento principal que hay que cargar, para ver el ejemplo. Pero todavía falta una cosa: tener en nuestro disco duro el fichero xfiles.mid

4) Para conseguirlo, pulsa este enlace. Obtendrás el fichero xfiles.zip, que es el fichero comprimido, y que por lo tanto hay que descomprimir y guardar junto con los documentos anteriores.

Cargando el documento mipag15.html obtendremos el resultado final.