TECNato – TIC's 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: Oasis – Stop Crying Your Heart Out (esta en formato MP3)
entonces escribimos asi:

<audio id=»reproductor» controls preload>
<source src=»http://rojer.pp.ru/misc/music/Oasis_-_04_-_Stop_Crying_Your_Heart_Out.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/http://rojer.pp.ru/misc/music/Oasis_-_04_-_Stop_Crying_Your_Heart_Out.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=»http://rojer.pp.ru/misc/music/Oasis_-_04_-_Stop_Crying_Your_Heart_Out.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 : Oasis - Stop Crying Your Heart Out On</strong>
<br/>
<audio id="reproductor" controls reload>
  <source src=http://rojer.pp.ru/misc/music/Oasis_-_04_-_Stop_Crying_Your_Heart_Out.mp3" type="audio/mp3" />
</audio>

Pasenla bien !