manuales - recursos -
gráficos - programación...
Sonido en HTML (IV)
por Luciano Moreno, del departamento de diseño web de BJS
Software.
Incluir sonidos en la web.-
Una vez elegidos nuestros ficheros de sonido, es hora de
incluirlos en nuestra página web. Lógicamente, para que un fichero de audio pueda
ser reproducido por un navegador es necesario que su máquina tenga incluida una
tarjeta de sonido y un par de altavoces.
Existen diversas formas de incluir un fichero de
audio en una página, formas que dependen del tipo de fichero y del navegador
usado, y podemos usar diferentes etiquetas para cada una de ellas.
BGSOUND
La etiqueta bgsound incorpora sonidos de fondo en una
página web, sonidos que se ejecutan automáticamente al cargarse la página. Es
una etiqueta propietaria de Microsoft, por lo que sólo es interpretada por
Internet Explorer, admitiendo los formatos de audio MID y WAV, aunque
generalmente también acepta AU y MP3, en versiones actuales del
nevagador o mediante plugins de uso general.
Su sintaxis general, con sus atributos más importantes, es del tipo:
<bgsound src="ruta_fichero" loop="l" balance="b" volume="v"></bgsound>
Donde:
- src="ruta_fichero" fija la ruta en
la que se encuentra el fichero de audio a reproducir. La ruta puede ser
relativa a nuestro sistema de carpetas local, absoluta respecto el
sistema de carpetas del servidor web o una URL completa que localice el
fichero en Internet.
- loop="l" determina el número de veces
(l) que se debe ejecutar el fichero de audio. Si le damos el valor
infinite, el fichero se reproducirá indefinidamente.
- balance="b" determina el balance del sonido
entre los dos altavoces del equipo, es decir, la potencia o intensidad con que
se oirá en cada uno de ellos (derecho e izquierdo). Sus valores
pueden estar entre -10,000 y +10,000, correspondiendo el valor
0 a un balance equilibrado entre los dos altavoces.
- volume="v" fija el volumen al que se oirá
el sonido, y sus valores pueden variar entre -10,000 (mínimo) y 0
(máximo). No es soportado por los equipos MAC.
Ejemplo:
<bgsound src="../sonidos/wav.wav" balance=0 volume=0></bgsound>
Que podéis ver funcionando en esta ventana (sólo Internet
Explorer).
La etiqueta bgsound admite muchas más propiedades
(disabled, delay, id, class, controls, etc.). Asímismo, esta etiqueta es
accesible en Internet Explorer mediante código JavaScript, pudiendo modificar en
tiempo real sus propiedades balance, loop, src, y volume, aunque ésta
última sólo es accesible en plataformas PC. Para una información completa sobre
todas las propiedades y funcionalidades de este etiqueta podéis visitar la
página correspondiente de Microsoft:
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/objects/bgsound.asp
EMBED
Nestcape Navigator implementó la etiqueta embed para
incorporar ficheros de audio. Es ésta una etiqueta de caracter general, que se
usa para la inclusión en las páginas web de todos aquellos archivos ajenos al
navegador y que necesitan por lo tanto la ejecución de algún plugin para su
interpretación.
Paradójicamente, Internet Explorer asumió después el uso
de esta etiqueta para la inclusión de ficheros de audio, para llegar a
interpretarla mejor y ampliarla con más atributos y propiedades, de tal forma
que la ejecución de sonidos con embed es actualmente más cómoda con este
navegador, al incorporar la suite de Microsoft sus propios plugins para la
interpretación de los diferentes formatos de audio. En cambio, si usamos
Netscape Navigator nos encontraremos en muchos casos con un fallo en la
reproducción o con un engorroso mensaje de necesidad de algún plugin especial
(sobre todo en las versiones 6x), lo que nos obligará a visitar la página de
Netscape para su descarga e instalación, que muchas veces no será
efectiva.
Sea como sea, hay que indicar que esta etiqueta nos va a
incluir en la página web un objeto especial, una especie de consola de mando,
denominada Crescendo, que consta de tres
botones, similares al de cualquier reproductor de audio: un botón Play, para
comenzar la reproducción (si no está establecida a automática), un botón Pause,
para detenerla momentáneamente y un botón Stop, para detenerla definitivamente
(puesta a cero). Esta consola es diferente según el navegador usado; en el caso
de Internet Explorer se muestra la típica consola de Windows Media, cuyo tamaño
podemos configurar, mientras que en Netscape se muestra una consola propia, de
tamaño fijo definido.
La sintaxis general de la etiqueta embed es del tipo:
<embed atributo1="valor1" atributo2="valor2"...atributoN="valorN"></embed>
Y en el caso que nos ocupa, de la inclusión de ficheros
de audio, los atributos podemos dividirlos en dos tipos:
1. Atributos referentes al sonido:
- src="ruta_fichero", que fija la ruta en
la que se encuentra el fichero de audio a reproducir. La ruta puede ser
relativa a nuestro sistema de carpetas local, absoluta respecto el
sistema de carpetas del servidor web o una URL completa que localice le
fichero en Internet.
- loop="l/true/false", que determina el número de
veces que se debe ejecutar el fichero de audio. Los valores admitidos son
l (número entero de veces), true (infinitas veces) y
false (sólo una vez). Sólo es reconocida por Netscape Navigator.
- playcount="n", que define el número de
veces (n) que se debe ejecutar en fichero de audio en el caso de Internet Explorer.
- type="tipo_fichero", atributo
importante, que declara el tipo de fichero de audio que estamos usando, con lo
que el navegador web puede ejecutar el programa o plugin adecuado para la reproducción del
fichero. Puede ser audio/midi, audio/wav, etc.
- autostart="true/false", que determina si
el fichero de audio debe empezar a reproducirse por sí sólo al cargarse la
página o si por el contrario será preciso la actuación del usuario (o de código de
script) para que comience la audición.
- pluginspage="URL", que establece, en
caso de ser necesario un plugin especial para reproducir
el fichero, la página web donde se puede descragar el mismo. Sólo se activa en
el caso de que el navegador no sea capaz de reproducir el fichero por sí mismo,
y es soportada tan sólo por Netscape Navigator.
- name="nombre", que asigna un
nombre identificador (debe ser único en la página) a una etiqueta embed determinada,
con objeto de ser accedida luego por lenguajes de script.
- volume="v", que determina el volumen de
reproducción del sonido, y que puede variar entre 0 y 100. Es sólo soportada
por Netscape Navigator, que en la consola muestra el valor establecido en su
indicador de volumen, siendo su valor por defecto 50. En en caso de Internet
Explorer, el valor del volumen por defecto es 50 en plataformas PC, y 75 en
MAC, siendo necesario actuar sobre el control de volumen de la consola para
modificarlo.
2. Atributos referentes a la consola:
- hidden="true/false", que establece si la
consola va a ser visible (false) o no (true). Es éste un aspecto
polémico, ya que si ocultamos la consola obligamos al usuario a oir nuestro fichero, sin
posibilidad de detenerlo ni de modificar el volumen, y si la mostramos estaremos incrustando en
la pantalla un objeto que muchas veces nos romperá
el esquema de diseño de nuestra página. Queda determinar su uso en
cada caso concreto.
- width="w", que determina el ancho visible
de la consola, en pixels. height="h",
que determina el alto visible de la consola, en pixels. Estos
atributos son también muy importantes, caso de que hayamos establecido hidden=
"false", ya que de su valor va a depender la correcta visulazación de la
consola. En el caso de Internet Explorer, que muestra un logo de Windows Media
sobre los controles, el tamaño mínimo aceptable debe ser de 140x100 pixels, ya
que si no la consola saldrá deformada en exceso o recortada. Y en el caso de
Netscape Navigator, deberemos asignar unos valores de 145x60 pixels, que
es lo que ocupa la consola; si ponemos un tamaño menor, la consola será
recortada, perdiendo funcionalidades, y si asignamos un tamaño mayor,
aparecerán espacios grises alrededor de la consola, afeando el aspecto de la
página. Si no especificamos estos atributos y tampoco hidden, nos aparecerán
en la página tan sólo los mandos de la consola, sin logotipos añadidos
(Internet Explorer) o la consola recortada (Netscape Navigator).
- align="top/bottom/center/baseline/left/right/texttop/middle/absmiddle/absbotom",
análogo al de la etiqueta IMG, define la alineación horizontal o vertical
de la consola respecto de los elementos de la página.
- hspace="hs", que establece la separación
horizontal, vspace="vs", que establece
la separación vertical, en pixels, entre la consola y los elementos de la
página que la redean. Análoga a sus equivelentes de la etiqueta IMG.
Estos son los atributos principales, aunque podemos
encontrar referencias de otros admitidos, aunque no suelen ser operativos en la
realidad, ya que no suelen funcionar de forma correcta o son específicos de
Nestcape (como toda la serie de atributos que configuran los controles de la
consola.
Ejemplo sin consola:
<embed src="../sonidos/mid.mid" hidden="true"
type="audio/midi" autostart="true"></embed>
Que podemos ver en funcionamiento en esta ventana.
Ejemplo con consola:
<embed src="../sonidos/mid.mid" hidden="false"
type="audio/midi" autostart="false" width="150" height="100"></embed>
Que tenemos visible (y audible) en esta otra ventana.
