banner
hace 5 años
883 Views

Audio en Html5

Autor:
banner

 
 
La ultima versión de Html nos proporciona una nueva etiqueta de Audio, con el fin de agregar mas funcionalidades y valor semántico a nuestros proyectos web.
 

La etiqueta Audio en Html5nos permite introducir música a los proyectos de una manera muy sencilla, con tan solo dos o tres lineas de código.

 

Vamos a explicar la etiqueta Audio en Html5

 
Los estándares anteriores de Html, también permitía la inserción de audio en la web, pero generaban problemas de compatibilidad.

Con esta nueva etiqueta esas dificultades y problemas se reducen; aparte le añade valor semántico a la etiqueta, que es una de las grandes novedades del nuevo estándar webHtml5.

 

La etiqueta <audio> goza de una total compatibilidad con los navegadores modernos, aun así  necesitamos tener dos formatos diferentes para funcionar en los navegadores modernos

 

Dos formatos de Audio 

Safari y IE solo reproducirán archivos .mp3

Chrome, Firefox y Opera reproducen archivos .ogg

 

Para convertir los archivos al formato requerido, recomiendo una web, es bastante completa ya que te permite realizar muchas clases de conversiones: audiovídeoimágenes, …

Web Online-Convert


<audio>
<source src="audio.mp3" type="audio/mp3" />
<source src="audio.ogg" type="audio/ogg" />
TU NAVEGADOR NO SOPORTA ESTE FORMATO DE AUDIO
</audio>

 

El texto en mayúscula representa error en compatibilidad de navegadores

 

La nueva etiqueta nos permite configurar mas funcionalidades de la etiqueta de audio Html5

 

 <audio controls="controls" autoplay="autoplay" loop="loop" preload="none">

La función controls permite visualizar unos controles para la música, el autoplay reproduce automáticamente la música al cargar la web, el loop permite repetir la pista de audio al finalizar está; por ultimo tenemos preload este se encarga de cargar el audio, y tenemos 3 opciones: auto, el audio se carga con la web; metadata, se cargan los datos de los archivos de audio; y none, el audio se cargara una vez cargada toda la pagina web.
 

Con esto terminamos la etiqueta de Audio en Html5

Para mas Información

 

Cualquier duda Comentármela

Sendoa

Sendoa

¡Aúpa! Me llamo Sendoa y soy un apasionado del Diseño y Desarrollo Web.

Fundador de WebSdcStudio.es; mi blog personal, donde expongo diferentes contenidos de ayuda, consejos, trucos, recursos... sobre el mundo del Diseño y Desarrollo Web.
Sendoa

Latest posts by Sendoa (see all)

Articulos Relacionados

Tags Artículos:
Artículos Categorías:
Desarrollo Web · Html5
banner

Deja un Comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Left Menu Icon
Web Sdc Studio
Right Menu Icon