Sonido en HTML IV
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.
|
Plan Promo
Servidor VPS Linux
Servidor VPS Windows
