Puedes integrar archivos de audio en HTML5 con la misma facilidad que los vídeos. HTML5 proporciona un elemento separado para esto con audio.
<audio src="song.mp3"> Tu navegador no soporta el elemento audio </audio>.
El nombre del archivo que se va a reproducir se asigna al elemento de audio mediante el atributo src. Sin embargo, esto todavía no reproduce el archivo. Para ello se necesitan elementos de control.
Si desea mostrar elementos de control, asigne el atributo controls al elemento audio.
<audio src="song.mp3" controls> Tu navegador no soporta el elemento audio </audio>.
Debería verse así en el navegador:
Si falta controls, el elemento integrado mediante audio no es visible. Tiene sentido omitir el atributo si desea insertar sus propios elementos de control mediante JavaScript.
Desafortunadamente, el uso del elemento audio tampoco es posible sin problemas. Una vez más, esto se debe a los navegadores, que soportan formatos diferentes. En la tabla siguiente se indica la situación actual a este respecto.
| Navegador | MP3 | OGG | WAV | AU/SND | AIF |
Firefox | no | sí | sí | no | no |
Safari | sí | no | sí | sí | sí |
Cromo | sí | sí | no | no | no |
Opera | no | sí | sí | sí | no |
¿Qué hacer? El elemento audio también ofrece la posibilidad de definir elementos fuente adicionales. A estos elementos se les asignan los distintos formatos para los respectivos navegadores. He aquí un ejemplo:
<controles de audio> <fuente src="canción.mp3"> <fuente src="canción.ogg"> </audio>
A los atributos src se les asignan los respectivos archivos, que pasan a estar disponibles en los distintos formatos.
Además de los controles, existen otros atributos para el elemento audio. Uno de ellos es la reproducción automática.
<audio controla la reproducción automática> <source src="canción.mp3"> <source src="canción.ogg"> </audio>
Si se establece el atributo, la reproducción del archivo de audio se inicia automáticamente en cuanto se carga. Normalmente, este atributo no se establece, ya que se debe dejar que los visitantes decidan por sí mismos cuándo se reproduce un archivo de audio.
El atributo loop también es interesante. Este atributo garantiza que el archivo se reproduzca en bucle.
Al igual que con la integración de vídeos, también existen los dos atributos type y media para los archivos de audio. Aquí también se pueden especificar los tipos MIME y códecs correspondientes. La especificación HTML5 enumera las siguientes especificaciones típicas para el atributo type:
- type= 'audio/ogg; codecs=vorbis'
- type='audio/ogg; codecs=speex'
- type='audio/ogg; codecs=flac'
Tenga en cuenta que los dos atributos sólo pueden utilizarse para el elemento fuente y no para el elemento de audio.
Integrar Flash & Co.
Las películas Flash podían integrarse en versiones anteriores de HTML utilizando una combinación de embed y object. La sintaxis resultante -muy antiestética, por cierto- tenía este aspecto, por ejemplo
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="800" height="600"> <param name=movie value="intro.swf"> <param name=quality value=high> <embed src="intro.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="800" height="600"> </embed> </object>
Esta es la forma clásica mediante el objeto y el elemento embed, que ha existido en esta forma en HTML durante mucho tiempo.
Sin embargo, "clásico" no significa que esta variante fuera aprobada por el W3C en el pasado. Esto se debe a que el elemento object se favoreció en HTML 4, que también fue interpretado correctamente por Internet Explorer. Netscape Navigator era diferente. Prefería el elemento embed. Esta interpretación diferente hizo necesaria la combinación de los elementos object e embed.
HTML5 ofrece ahora oficialmente los dos elementos object e embed para integrar contenidos activos.embed es un contenedor destinado a mostrar contenido no HTML que no esté cubierto por otros elementos como img, vídeo, audio, etc. Para visualizar el contenido incrustado suelen ser necesarios plug-ins del navegador.
Gracias a la incrustación, ahora es posible integrar películas Flash, por ejemplo, de una manera conforme a la norma. He aquí un ejemplo:
<embed src="http://www.youtube.com/v/v1PgiBpTtao?fs=1&hl=en_DE" type="application/x-shockwave-flash" width="384" height="313" allowscriptaccess="always" allowfullscreen="true" />
Se pueden asignar varios atributos al elemento incrustado. El más importante es, por supuesto, el atributo src. Esto se debe a que, en última instancia, especifica el archivo que se va a incrustar. El tipo MIME se especifica mediante el atributo type.
En el caso de Flash, es application/x-shockwave-flash. Sin embargo, si desea incluir un archivo LaTeX, introduzca application/x-latex. La anchura y la altura del archivo incrustado se controlan mediante width y height.
Por cierto, hay otros atributos que no forman parte oficialmente de HTML5. Sin embargo, permiten controlar el complemento utilizado. En el ejemplo anterior, los dos "atributos Flash" allowcriptaccess y allowfullscreen se utilizaron para especificar que el acceso a scripts y el modo de pantalla completa son posibles. Sin embargo, también existe el atributo quality, que puede utilizarse para determinar la calidad de la película Flash.
<embed src="flash.swf" width="600" height="300" type="application/x-shockwave-flash" quality="high" />
El elemento object
Al igual que embed, el elemento object sirve como contenedor de contenido. Sin embargo, a diferencia de embed, object reconoce tres modelos de contenido diferentes. Si el navegador reconoce que se trata de un gráfico directamente visualizable, se comporta como si fuera un elemento img. Si el objeto referenciado es contenido web, se muestra dentro de un iFrame. (Más adelante hablaremos de los iFrames). Para otros contenidos, el objeto se comporta como embed.
El siguiente ejemplo muestra la integración de una película Flash a través del elemento object.
<object type="application/x-shockwave-flash" data="http://www.youtube.com/v/BzYBY_9rnuA?version=3&hl=en_DE&rel=0" width="400" height="300"> <param name="allowscriptaccess" value="always" /> <param name="allowfullscreen" value="true" /> <p> No hay ningún plugin Flash disponible en su navegador. </p> </object>
La última pregunta es, por supuesto, si debe utilizar object o embed. A primera vista, los dos elementos parecen ser casi idénticos. Y de hecho, el elemento object puede hacer todo lo que puede hacer el elemento embed.
El elemento object debería utilizarse normalmente para incrustar contenido, con la excepción de las imágenes. Este elemento permite especificar el contenido alternativo que se muestra si el elemento incrustado no se puede cargar.
