Es una nueva comunidad sobre el reciente estándar de la web Html5, donde puedes encontrar tutoriales, tips, consejos, información, noticias y demás en un solo lugar.


Apoya la comunidad con $1 USD, queremos mejorar y compartir más conocimiento.

Uso básico de la etiqueta Audio en HTML5


  Publicado hace |  Etiquetas: , , , ,

Una de las principales cosas que llama la atención cuando hablamos de HTML5, son las famosas etiquetas <audio> y <video>. Estas etiquetas tienen su gran fama por que nos permiten consumir multimedia sin necesidad de instalar plugins adicionales al navegador o en nuestra computadora.

Ahora el navegador haría el trabajo solo, no dependería de nadie, por ejemplo, el famoso Flash Player quien dicen muchos que esta temblando de miedo por que probablemente pueda desaparecer o no.

Empecemos con el tutorial, hoy vamos a aprender el Uso básico de la etiquetas Audio en HTML5, es un buen inicio para comprender el funcionamiento y empezar a crear cosas mas avanzadas que después veremos.

Veamos la etiqueta audio

Uso básico de la etiqueta Audio en HTML5

Vista previa del reproductor por defecto de Google Chrome

La etiqueta <audio> es la mas sencilla de las dos, por que solo implica un reproductor de audio. Para implementarla es muy sencillo:

<audio width="300" height="32" src="micancion.mp3" controls="controls" autoplay="autoplay" preload="">

</audio>

Expliquemos los atributos de la etiqueta:

  • SRC: Nos enlaza el archivo de audio que queremos reproducir.
  • CONTROLS: Nos permite implementar los controles del reproductor por defecto del navegador como, botón play-pause, seek y volumen.
  • AUTOPLAY: Nos permite reproducir el archivo de audio desde que se carga la pagina.
  • PRELOAD: Nos carga un poco el archivo de audio antes de iniciar la reproducción en el buffer para que no se trabe por reproducir mas de lo que carga.

Como pueden ver, es demasiado sencillo para empezar a jugar con esta etiqueta. Pero aquí aun no termina todo, como es  algo nuevo de implementar, los navegadores luchan por cual formato de audio debe liderar la web, entonces hay que atender a todos.

Implementación de formatos de audio

Tenemos muchos navegadores con diferente compatibilidad, pero lo que mas nos interesa son los Motores de Renderizado, estos se encargan de renderizar el código de nuestra pagina web e implementar ahora el contenido multimedia.

Veamos cuales motores corresponden a cada navegador:

  • Google Chrome: WebKit
  • Safari: WebKit
  • Mozilla FireFox: Gecko
  • Internet Explorer: Trident
  • Opera: Presto

Estos son los Navegadores mas importantes hasta ahora, y ahora veamos la compatibilidad con los archivos de audio.

Uso básico de la etiqueta Audio en HTML5

Ahora que se tiene conocimiento de que motores o navegadores aceptan un formato, pasamos a hacer compatible AUDIO con todos ellos.

Es algo diferente de implementar ahora, por que hay que decirle los diferentes archivos que existen para que el navegador tome alguno de los que puede reproducir.

<audio controls autoplay preload>
<source src="cancion.ogg" type="audio/ogg" />
<source src="cancion.mp3" type="audio/mpeg" />
<source src="cancion.wav" type="audio/wav" />
Tu navegador no soporta esta caracteristica
</audio>

Es casi lo miso, solo que ahora quitamos el SRC y solo dejamos las demas propiedades pero ahora dentro de las etiquetas de apertura y cierre ponemos una etiqueta SOURCE para decirle que archivo va enlazar y que tipo de audio es.

  • SRC: Nos enlaza el archivo de audio que queremos reproducir.
  • Type: Le decimos que tipo de audio o codec va reproducir

Con esto ya hacemos compatible con todos los motores de renderizado o navegadores (excepto IE8 y anteriores, IE9 si es compatible).

Espero que les agrade y les sirva este tutorial, Gracias por visitarnos.

comments powered by Disqus