Sonido en HTML (V)

  • 23 de abril de 2003
  • Valoración:
  • 11 Comentarios
  • HTML
En este capítulo veremos el potenciál de la etiqueta OBJECT.

La etiqueta OBJECT

Con objeto de normalizar la inclusión de ficheros no nativos en los navegadores web se decidió sustituir las diferentes etiquetas que realizaban este papel (APPLET, BGSOUND, EMBED, etc.), y que no pertenecían a los estándares web, por una etiqueta general, que fuera capaz de incrustar en el navegador todo tipo de ficheros. La etiqueta elegida en el estándar HTML 4.0 fué OBJECT, a la que se dotó de suficientes atributos y flexibilidad para poder realizar correctamente su trabajo. Debido a esto, la propuesta ha sido usar la etiqueta object también para incluir ficheros de audio de todo tipo en las páginas web.

Ahora bien, la aceptación e implementación que la misma a tenido varía según el navegador en particular, así como en función del objeto a incrustar. De este forma, Internet Explorer a realizado su propia implementación de la etiqueta object, incluyendo en ella referencias a filtros y componentes ActiveX específicos para los ficheros de audio. Por su lado, los navegadores Netscape no soportan correctamente este etiqueta para ficheros de este tipo.

Restringiéndonos a Internet Explorer, la polémica sigue, ya que en diferentes manuales nos encontraremos diferentes formas de incrustar sonidos mediante object, unas que funcionan bien, y otras que no. ¿Porqué sucede esto?. Yo creo que porque Microsoft ha ido usando la etiqueta object para implementar todo un grán conjunto de componentes propios, que además han ido adaptándose a las diferentes versiones de Internet Explorer.

Como regla general, válida no sólo para incrustar ficheros de sonido, sino también para otros tipos, la etiqueta object va a definir un objeto o componente externo encargado de la reproducción del fichero, que en el caso de Internet Explorer suele ser algún tipo de control ActiveX. Mediante object se instancia el objeto, se declara su URL y sus principales propiedades generales, y mediante un conjunto de etiquetas especiales, PARAM, se le van pasando los valores que necesita para su correcto funcionamiento o para su configuración deseada.

La sintaxis general de la etiqueta object, para el caso de ficheros de sonido, es del tipo:

<object atributo1="valor1" atributo2="valor2" ... atributoN="valorN">
<param name="nombre" value="valor">
<param name="nombre" value="valor">
...
</object>

Los principales atributos de object, en referencia a ficheros de audio, son:

  • classid="identificador_objeto", que fija la URL del objeto o componenteexterno necesario para reproducir el fichero de audio, y la implementación CLSID de los controles ActiveX necesarios.
  • type="tipo_fichero", atributo importante, que declara el tipo de fichero de audio que estamos usando.
  • width="w", que determina el ancho visible de la consola, en pixels.
  • height="h", que determina el alto visible de la consola, en pixels.
  • 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.


  • 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.
  • standby="mensaje", que presenta en pantalla un mensaje al usuario mientras el fichero se carga.
  • En cuanto a los elementos param, los más importantes son:

  • param name="FileName" value="ruta_fichero", determina la ruta o URL del fichero de audio a reproducir. No es necesario utilizar sólo ficheros WAV o MID, pudiendo reproducirse también ficheros MP3 o Real Audio. El reproductor del primero lo incluye Explorer en ActiveMovie (componente de Windows Media).
  • param name="autostart" value="true/false", indica al navegador si se debe empezar a reproducir el sonido automáticamente al cargar la página o si por el contrario será preciso que el usuario pulse el botón Play para ello.
No son estos todos los atributos y parámetros posibles. Es más, en cuanto nos metemos en componentes Microsoft, podemos encontrarnos multitud de configuraciones posibles, que nos van a permitir fijar muchos aspectos de los mismos. Dejo a cada uno la posibilidad de profundizar en el estudio de aquellos componentes y propiedades que necesite, pero sabiendo que con los elementos vistos arriba tenemos más que suficiente para presentar un fichero de audio en nuestra página web.

xEjemplo:

<object classid="CLSID:05589FA1-C356-11CE-BF01-00AA0055595A" width="150" height="175" type="audio/midi"> <param name="FileName" value="../sonidos/xfiles.mid">
<param name="autostart" value="true">
</object>>

Que podéis ver funcionando en esta ventana (sólo Internet Explorer).

La etiqueta A

Si hasta ahora hemos visto cómo podemos incluir en nuestras páginas sonidos de fondo o inicializados por el usuario mediante interacción con la consola Crescendo, vamos a ver ahora cómo podemos implementar audio mediante el uso de una de las etiquetas más polivalentes en HTML: la etiqueta A.

Efectivamente, los enlaces son la base del hipertexto, base a su vez de la web, y dentro de sus múltiples usos podemos considerar el enlace a ficheros de audio. El fichero enlazado puede ser interpretado directamente por el navegador (porque sea de reproducción directa o se tenga instalado el plugin adecuado) o puede ser ejecutado por un programa independiente que se abra automáticamente (Winamp, Real Audio, etc.), siendo este el caso más común. Si el usuario no dispone del programa o plugin adecuado, se le abrirá una ventana de descarga del fichero, con lo que podrá guardarlo hasta disponer de la aplicación necesaria para su reproducción.

La sintaxis general en este caso será del tipo:

<a href="ruta_fichero">Mensaje</a>

Ejemplo de fichero MID:

<a href="../sonidos/watermark.mid">Música para tí</a>

Que podemos ver en funcionamiento en esta ventana.

Ejemplo de fichero MP3:

<a href="../sonidos/mp3.mp3">Madonna</a>

Que tenemos en esta otra ventana.

Autor

Luciano Moreno

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

Comentarios

Carlos

10/12/2004
Primero que nada gracias por poner a nuestra disposicion todo su conocimiento.En algun lugar de este sitio lei que estaba dirigido no solo a los diseñadores y programadores, sino tambien a los profanos.Yo pertenezco al segundo grupo. Pero me he encontrado con un problema: el manual es grandioso, grafico y explicativo en su mayor parte y no hace falta gran esfuerzo para entenderlo; pero cuando llega a la parte de sonidos se vuelve extremadamente cientifico y no pude entender con claridad como insertar un archivo de sonido en una pagina, ni cuales son las etiquetas y atributos a utilizar en concreto o en que parte del codigo html se deben insertar las etiquetas para dar entrada al archivo de sonido.Les agradeceria que me recomendacen un manual o libro dirigido a un publico mas profanos sobre el sonido en html.Gracias de nuevo y espero su respuesta.

juan

04/2/2007
Hay un error en el capítulo de la URL http://www.desarrolloweb.com/articulos/1132.php
Cuando se hace click en los enlaces para ver los ejemplos de descarga de sonidos mediante la etiqueta <A> se señala la etiqueta de esta forma:

<a href="../sonidos/watermark.mid>Música para tí</object>

el error está a la vista. el cierre de la etiqueta </object> no corresponde.

Saludos juan desde argentina.

Nacho

14/3/2007
Buenas:

Hasta ahora NUNCA habia hecho nada parecido ni de lejos a una pagina web, ni sabía nada acerca de como hacerlas. Ultimamente he tenido curiosidad por hacer una para un momento muy concreto y queria poner de fondo un fichero .mp3.
Con la información que se da en este articulo me ha resultado tremendamente sencillo realizarlo, por lo que estoy muy agradecido y me gustaría transmitir mi agradecimiento al autor.

Aqui teneis las lineas que he añadido para hacerlo. Espero que sirvan de ejemplo a los que no han dado aún con ello. A mi me funciona estupendamente.

<object classid="CLSID:05589FA1-C356-11CE-BF01-00AA0055595A" width="150" height="175" type="audio/mp3" align="left" standby="Espera mientras se carga el sonido">
<param name="FileName" value="musica.mp3">
<param name="autostart" value="true">
</object>

Por supuesto el fichero "musica.mp3" debe estar en la misma carpeta que el fichero html.

Un saludo

Carlos

25/11/2008
por favor me prodrias ayudar... como hago para seleccionar una musica y escuchar en el reproductor que e insetado en mi pagina html,
PODRIAS DAR EL CODIGO

Camila

27/12/2008
probè tu còdigo y me funcionò sòlo la primera vez...còmo hago para que la reproducciòn del audio sea infinita ?...y cuàl serìa el còdigo si deseo probar con el navegador mozilla firefox?

alex

19/3/2009
saludos desde El Salvador a todos tengo una pregunta como puedo añadir un video que sea visible en mi pajina es decir que no sea atravez de vinculos de texto ni nada por el estilo. si no que aparesca de una sola vez



josefinaarbulu

05/10/2009
no se escucha el sonido
Hola...tengo el Internet Explorer 8 y la verdad que en tus ejemplos o links hacia los ejemplos, cuando hago click en ellos sale otra pagina web, mas no algun control de sonido o sonido alguno. No entiendo nada....Gracias

Oscar Mauricio Escobar P.

22/5/2010
Excelente
Realicé un comentario en la secció I, pero hace refenrecia a todo el manual en sí, desde la I hasta el presente V.
Bueno sería un formulario para comentar todo el curso y no tener que realizar comentario a cada parte.
Gracias.

adolfo

16/10/2010
nacho
nacho ya hice eso muchas gracias pero yo tengo las musicas en mi computador como hago para que se reproduscan en el reproductor y lo hice asi
<object classid="CLSID:05589FA1-C356-11CE-BF01-00AA0055595A" width="300" height="300" type="audio/mp3" align="left" standby="Espera mientras se carga el sonido">
<param name="FileName" value="prumm prum.mp3">
<param name="autostart" value="true"> pero como hago para agregarle mas musicas.... gracias espero tu respuestas

ivan sanchez

26/11/2012
no funciona la estencion
no me funciona este codigo

<object classid="CLSID:05589FA1-C356-11CE-BF01-00AA0055595A" width="300" height="300" type="musica/mp3" align="left" standby="Espera mientras se carga el sonido">
<param name="FileName" value="musica.mp3">
<param name="autostart" value="true">
</object>

pues deberia explicar en donde se coloca la estencion del nombre de la cancion y si la cancion iria dentro de alguna carpeta para convocarlo despues como se hace con las imagenes
espero y me colaboren con esto muchas gracias

diminutopia

09/8/2013
Enlaces
He estado mirando el manual y me ha servido para mucho, pero los enlaces de http://www.htmlweb.net no funcionan. Me gustaría ver los ejemplos que se muestran en esa página y tener un ejemplo que me guíe para crear después páginas web con sonido. Si esa página ha "caducado", por favor, vuelvan a crearla.

Gracias

Compartir