TECNato – Comunidad Tecnológica del Perú

Bueno para los que aun desconocen, les comento que la ultima version de HTML, nos permite agregar audio y tambien vídeo.
En esta oportunidad les xplicare como insertar audio con la etiqueta llamada audio. 

Su estructura es sencilla y es la siguiente:

<audio></audio> <– dentro de estas tags ira nuestros archivos de sonido

Por Ejemplo:

Quiero reproducir la canción: Beady Eye – The Beat Goes On (esta en formato MP3)
entonces escribimos asi:

<audio id=”reproductor” controls preload>
<source src=”mp3/Beady Eye – The Beat Goes On.mp3″ type=”audio/mp3″ />
</audio>

Previa de como quedaria en Google Crohme 16.0, el cual uso yo:

Explico lo que hemos colocado:
- id = Este nombre (en nuestro caso id=”reproductor”) sirve para aplicarle css, classes, etc ( es decir CSS3, Javascript,
Eventos etc).
- controls = Esta propiedad la escribimos para que nos aparesca los controles (play, pause, etc).
- preload: Carga una cantidad del archivo en el buffer, antes de ser reproducido.
- source src = Acá le indicamos la ubicación de nuestro Archivo

NOTA: En mi caso el archivo de audio que voy a reproducir esta en la carpeta mp3. Entonces escribo asi:

<source src=”mp3/Beady Eye – The Beat Goes On.mp3″ type=”audio/mp3″ />

Tu lo puedes poner en la carpeta que quieras !
y si quieres agregar otro archivo mas, escribe asi:

<source src=”mp3/audio1.mp3″ type=”audio/mp3″ />

<source src=”mp3/audio2.mp3″ type=”audio/mp3″ />

<source src=”mp3/audio3.mp3″ type=”audio/mp3″ />

Puedes usar la cantidad que gustes !

type = Aca Tenemos que indicarle el formato del archivo que quiero reproducir. En mi caso el archivo que quiero reproducir es un MP3, entonces escribo esto:

type=”audio/mp3”

Eso es todo ya tenemos nuestro reproductor creado !

Tambien podemos agregar: autoplay

- autoplay = Reproduce el archivo apenas ingresamos a nuestra pagina.

Para agregar autoplay solo escribimos asi:

<audio id=”reproductor” controls  preload autoplay>
<source src=”mp3/Beady Eye – The Beat Goes On.mp3″ type=”audio/mp3″ />
</audio>

COMPATIBILIDAD CON LOS NAVEGADORES:

HTML5 solo es soportado por navegadores como:

- Google Crohme (Recomiendo la ultima version actualizada) – Descargar
- Mozilla Firefox (Recomiendo la ultima version actualizada) – Descargar
- Internet Explorer 9 a mas (Recomiendo la ultima version actualizada) – Descargar

Pero no te desanimes, para hacer compatible HTML5 con todos nuestros navegadores podemos usar Javascript =).

Lo explicare detalladamente en otro post, por ahora les recomiendo ACTUALIZAR A LAS ULTIMAS VERSIONES o USAR SOLO CROHME O MOZILLA pero eso si en sus ultimas versiones ! las cuales son Gratuitas. (Yo use google Crohme 16.0 ,   para  este post)

OJO: recuerden que demora en cargar un poco ya que estamos usando la propiedad preload.

DEMO (Recuerda la compatibilidad con los navegadores)

EL CODIGO COMPLETO, DEL DEMO Y EL CUAL A MI ME FUNCIONA LO TIENES ACA:

<strong>Cancion : Beady Eye - The Beat Goes On</strong>
<br/>
<audio id="reproductor" controls reload>
  <source src="http://www.beadyeyeperu.com/web_inicial/thebeatgoeson.mp3" type="audio/mp3" />
</audio>

Pasenla bien !