TECNato – TIC's Perú

Insertar Audio con HTML5

martes, 27 de diciembre del 2011 16 comentarios

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 !


Escrito por para TECNato

16 comentarios

  • Hana Momoiro
    27 de noviembre del 2012

    Muchas gracias!!! :D

  • Diseñador
    5 de diciembre del 2012

    Es justo la información que andaba buscando, gracias por el aporte. Un saludo.

  • Angel Sansores
    14 de diciembre del 2012

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

  • HTML5 | Annotary
    26 de junio del 2013

    […] Hammer Sort Share tecnato.com       1 minute […]

  • diseño web
    1 de octubre del 2013

    WOOOO muchas gracias…. muy buen datos

    saludos

  • Aseo de casas
    1 de octubre del 2013

    excelente info… :)

  • diseño web
    1 de octubre del 2013

    Muy buena informacion sobre audio para HTML5

  • Steven
    3 de febrero del 2015

    Esto Sirve Para Streaming

  • Juan Castro Lurita
    3 de febrero del 2015

    si pero tienes que agregar funciones adicionales.

  • Alex
    8 de marzo del 2016

    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

  • celina
    5 de agosto del 2016

    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

  • Juan Castro Lurita
    5 de agosto del 2016

    Hola Celina, claro que si! , la etiqueta audio de HTML5 funciona con imagenes sin problema.

  • Enrique Jara
    7 de noviembre del 2016

    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!

  • Juan Castro Lurita
    7 de noviembre del 2016

    Eso seria un lista de reproducción, te dejo el código, espero te sirva:
    http://jsfiddle.net/WsXX3/33/

  • Adrian Nicolas Salas Barreto
    2 de junio del 2019

    no puedo crear mi radio por internet e intentado por varios medios y nada, anteriormente tenia creada con el nombre de Radio Hurakan parece que esta bloqueado y estaba a nombre otra persona como puedo hacer crear otra, si pudieran crearme les agradecería, Dios los bendiga

Deja tu comentario

(Iniciar sesión)

TECNato

TECNato nace de la idea de crear una comunidad tecnológica, un espacio virtual para compartir conocimientos sobre TIC’s (Tecnologías de la Información y Comunicación).

Hazte miembro

TECNato es libre y abierto a nuevos miembros que estén dispuestos a compartir sus conocimientos en TIC’s, así que no dudes en escribirnos para mas detalles.

Soporte

Diseño Web:
Grupo Sistemas
CMS:
WordPress