Sonido en HTML (IV)

  • 23 de abril de 2003
  • Valoración:
  • 10 Comentarios
  • HTML
En este capítulo veremos la manera de incluir los archivos de música en el HTML.
En este artículo vamos a seguir tratando temas relacionados con el sonido en páginas web, viendo la etiqueta BGSOUND (sonido de fondo) y EMBED (propietaria del antiguo navegador Netscape para embeber distintos contenidos multimedia). Veremos algunos ejemplos de ambas formas de añadir un sonido, ya sea música o cualquier otro tipo de sample en una página web.

Antes de empezar, permitirme recordar que estas cosas se tienen que utilizar con cuidado, porque no a todo el mundo le gusta que las páginas web emitan sonidos durante su visita y tampoco todos los tipos de páginas son adecuadas para tener una banda sonora.

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

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>

Autor

Luciano Moreno

Consultor, diseñador y desarrollador web en ParaRedeBJS. Especialista en usabillidad y diseño centrado en el usuario.

Comentarios

martin

30/9/2005
la etiqueta bgsound funciona en la versión 8 de opera

ernesto

25/6/2009
gracias
muchas gracias
me fue muy util

saludos

Jarif

03/10/2009
urgente!
disculpa pero, cuando haces el programa, ?en que parte introducis el "bgsound"?

Gracias.

karen LÓPEZ

21/7/2010
SALUDOS
MUY BUENOS DATOS, GRACIAS, LA VERDAD ME SIRVIERON PARA ENTENDER EL FORMATO EN EL QUE ESTA EL CODIGO QUE LE INTRODUJE A MI BLOG, PERO COMO ES EL CODIGO DE UNA LISTA DE REPRODUCCION LO UNICO QUE HACE FALTA ES AVERIGUAR COMO HACER QUE SE REPRODUZCAN TODAS LAS CANCIONES DE MI LISTA Y NO SOLO LA PRIMERA. ME GUSTARIA QUE ME AYUDARAN CON ESTO, ESTARE REALMENTE AGRADECIDA.

Alberto

06/3/2011
Código autostart="true/false"
Muchas gracias por el aporte, me he vuelto loco buscando esta información, no sabía como poner el reproductor en Inicio manual o autostart=false... No sé por qué motivo , cuando inserto el plugin, el reproductor por defecto hace el autostart=true pero resulta que me voy al código y no aparece nada del autostart en la linea del plugin insertado, muchas gracias y ya puedo completar una de las páginas de mi web gracias a tu ayuda.. un saludo..

DARIO

10/6/2011
GRACIAS SOY ESTUDIANTE
MAE AYUDASTE FULL CON TUS CONOCIMIENTOS ¡ ¡ ¡ ¡ ¡ ¡

ENRIQUE

25/8/2011
CONSULTA
HOLA, YO TENGO UNA PAGINA WEB, Y LE HE COLOCADO AUDIO, EL PROBLEMA QUE ME OCURRE ES QUE AL ENTRAR A LA PAGINA EL AUDIO COMIENZA A FUNCIONAR, PERO A MEDIDA QUE COMIENZO A NAVEGAR POR LA MISMA Y PASO A OTRAS CAPAS DE MI PAGINA WEB EL AUDIO SE CORTA SO SE INICIA DE NUEVO UNA VEZ QUE VUELVO A LA PAGINA DE INICIO. COMO PODRIA SOLUCIONAR ESTO.

Godo

13/1/2013
Cómo hacer invisible el reproductor en Firefox
A mí se me ha colgado al intentar hacer invisible el reproductor con Firefox, pero si uso width="1" height="1" se reduce el reproductor a un punto casi invisible, y no se cuelga.

Francisco

27/1/2013
Sonido en una imagen de sustitución
Como podría incluir un sonido que sea, por ejemplo, siempre el mismo cada vez que alguien se pone encima de cualquier imagen de sustitución de mi pagina? Por ejemplo que se oiga un clic o una gotita de agua? El sonido ya lo tengo solo es saber como ponerlo en esa imagen al igual que hagocon la orden border="0" que le quita el borde azul a esa imagen. Muchas Gracias.

angie eliana giraldo

11/2/2013
agradecer
es increible esto le dara otro aspecto ami blog ............ muchas gracias por siempre agradecida !!!!!!!

Compartir