Audio en HTML 5

Una de las cosas mas bellas que tiene HTML5 es el soporte nativo para medios, basicamente hablamos de las etiquetas <audio> y < vídeo >.

Anteriormente para poner un medio en un sitio web teniamos que “empotrarlo” con un <embed> o de plano hacer una pelicula en flash, y empotrarlo en el sitio. Desde hace ya algun tiempo el uso de flash ha caido en desuso, y básicamente lo usabamos para videos, (youtube) pero ahora es muy sencillo reproducir vídeo o audio desde un explorador web con HTML5.

Las diferencias entre ambas etiquetas; audio y vídeo, es mínima, y básicamente es el nombre, asi que en esta ocasión solo veremos el uso de audio, y les recomiendo que ustedes mismo implementen vídeo, después los invito a que me cuenten como les fue, y quien se anime le publicamos su articulo.

Acompañado de este articulo encontraran un videotutorial de como hacer un menú o botonera con sonidos sin usar flash, espero les guste.

 

La etiqueta Audio en HTML5

Su uso es bastante sencillo simplemente agregaremos a nuestro código base…

1
2
<audio>
</audio>

Dentro de esta etiqueta agregaremos un texto que se desplegara si el explorador no soporta HTML5
1
2
3
<audio>
Tu explorador no soporta audio en HTML5
</audio>

Ahora agreguemos un atributo en la etiqueta audio
1
2
3
<audio src="mimp3.mp3" preload autoplay controls loop>
Tu explorador no soporta HTML 5, te recomiendo actualizarlo
</audio>

Como pueden ver tenemos los siguientes atributos:

  • src, en el cual especificaremos el archivo a reproducir.
  • preload, Este manda a cargar el audio antes de reproducirlo, de este modo al oprimir reproducir, no hay que esperar a que se cargue.
  • autoplay, Como su nombre lo indica el atributo autoplay en la etiqueta audio, o vídeo hace que el medio se reproduzca automáticamente, si habilitamos este atributo, no es necesario usar “preload”, de hecho su uso se vuelve redundante.
  • controls, despliega los controles del medio, ya sea audio o vídeo.
  • loop, reproduce el audio o vídeo continuamente.
Como notaron hay atributos a los cuales no se les pone valor, estos por default si se escriben en el codigo tendran un valos “true” y si no se escriben sera “false” por lo cual en HTML 5 no es necesario escribir siempre el valor del atributo.

¿Que exploradores soportan MP3 en HTML5 y cuales OGG?

Des-afortunadamente si estamos usando HTML5 debemos saber que no todos los exploradores soportan mp3 y no todos ogg, aqui les dejo una lista de cuales exploradores soportan determinado archivo.

Explorador MP3 Wav Ogg
Internet Explorer 9 yes,right,correct,ok dialog,cancel,stop,no,close dialog,cancel,stop,no,close
Firefox dialog,cancel,stop,no,close yes,right,correct,ok yes,right,correct,ok
Google Chrome yes,right,correct,ok yes,right,correct,ok yes,right,correct,ok
Apple Safari yes,right,correct,ok yes,right,correct,ok dialog,cancel,stop,no,close
Opera dialog,cancel,stop,no,close yes,right,correct,ok yes,right,correct,ok

Como pueden ver ni Firefox ni Opera soportan mp3 por lo cual tendremos que trabajar extra y pasar nuestro archivo a ogg. El uso de wav ni siquiera lo vamos a discutir…

Pero… ¿Como pongo varios archivos en una sola etiqueta de audio HTML5?

Muy fácil, podemos tener varias fuentes de archivos de audio para la etiqueta audio en html5 esto ese hace con las etiquetas <source> de la siguiente manera.

1
2
3
4
5
<audio preload autoplay controls loop>
<source src="mimp3.ogg" type="audio/ogg" />
<source src="mimp3.mp3" type="audio/mpeg" />
Tu explorador no soporta HTML 5, te recomiendo actualizarlo
</audio>

 Poner sonido a botones con HTML5 sin flash

Espero les haya servido, y a usarlo, espero sus comentarios, y experiencias en el uso de esta etiqueta, saludos…


¿ Te Gusto ? Comenta y compartelo!