Completo tutorial de HTML - 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>

---

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∞
**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>

---

Ejemplo con consola:
<embed src="../sonidos/mid.mid" hidden="false"
type="audio/midi" autostart="false" width="150" height="100"></embed>