Introducir audio con html5 en página web

Gracias a html5 podremos introducir audio en nuestra web de una forma bastante más sencilla y sobre todo mucho más fiable que anteriormente.

Entre las novedades de html5 hay una etiqueta con una serie de nuevos y no tan nuevos atributos llamada <audio> … </audio>. Gracias a ésta etiqueta podremos introducir audio en nuestra web.

Al igual que la etiqueta de vídeo, la de audio también admite mostrar algo en caso de que el navegador no pueda reproducir el audio por cualquier motivo, para hacer esto, deberíamos poner algo como:

<audio>
    <p>Tu navegador no puede reproducir el audio, pero puedes descargarlo<br/>
    <a href="audio.mp4"> AQUÍ </a></p>
</audio>

Como imaginamos, el archivo de audio debe estar subido al servidor, o a otro servidor web del que tengamos la ruta para poder reproducirlo… Y entonces solo nos faltaría añadir la ruta a la etiqueta que hemos preparado anteriormente:

<audio>
    <source src="nombre_audio.mp3" type="audio/mp3">
    <p>Tu navegador no puede reproducir el audio, pero puedes descargarlo<br/>
    <a href="nombre_audio.mp3"> AQUÍ </a></p>
</audio>

Y ya tendríamos nuestro archivo de audio subido y listo para ser reproducido. Ni que decir tiene que en caso de que el audio no sea mp3, no le podemos decir al navegador que lo es. Si por ejemplo el audio fuese “nombre_archivo.ogg”, evidentemente el type sería “audio/ogg”… y así con todos.

Por último, veremos una serie de atributos de la etiqueta audio, son muy parecidos a los de la etiqueta <video> que hemos visto unos post atrás…

  • autoplay: la utilizaremos cuando queramos que el audio se reproduzca únicamente cuando esté completamente cargado, no antes…
  • controls: empleada para determinar si los controles del reproductor de audio (play/pause…) han de mostrarse o no.
  • loop: reproducción circular del audio, la utilizaremos cuando queramos que el audio, una vez terminada a reproducción, comience de nuevo desde el principio.
  • preload: ya veremos cómo utilizar esta complicada etiqueta, desde mi punto de vista no muy útil pero que con un buen uso puede realizar cosas muy curiosas… Sirve para determinar la forma de la que debe cargarse el audio cuando se cargue la página…
  • src: etiqueta obligatoria ya que la emplearemos para especificar dónde está alojado el audio (la ruta para reproducirlo).

Y hasta aquí el post de cómo introducir audio en nuestra web gracias a html5… Un saludo!

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: