Insertar Audio con HTML5

Insertar Audio con HTML5

Insertar Audio con HTML5
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 VERSIONESUSAR 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 !

Autor: Juan Castro Lurita

Engineer especialista en Web development, también especializado en multimedia, gráfica e impresiones, Blender 3D, Autocad 3D, etc. Actualmente vivo en Lima - Perú. Amo la informática y la Web. Twitter: @pepoflex

15 opiniones en “Insertar Audio con HTML5”

  1. Probado en los navegadores arriba mencionados y funciona a la perfección, muchas gracias por el aporte!
    Saludos…

  2. Pingback: HTML5 | Annotary
  3. Hola amigo:

    ¿Como puedo hacer para que la funcion autoplay se active en los dispositivos moviles?

    Me funciona de maravilla en el ordenador de sobre mesa pero no hay manera de hacer que el autoplay se active en moviles y tabletas.

    ¿Que puedo hacer?

    Gracias

  4. HOLA queria saber si puedo poner sonido con la etiqueta audio. a una imagen de sustituciona modo de boton ?. porque no quiero usar flash.
    muchisimas gracias

  5. Hola buen día.

    He insertado 7 audios a mi web y funciona bien.
    El tema es el siguiente. Cuando pongo «autoplay» y «loop» y que no me aparezca el reproductor, para que la música se escuche de fondo, solo reproduce el primer audio y se repite (obviamente por el «loop») pero mi idea es que se reproduzcan los 7 audios como audios de fondo y que finalizado de reproducir todos vuelvan nuevamente a reproducirse.
    ¿Es posible hacerlo?
    ¡Gracias!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *