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.
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 Juan Castro Lurita para TECNato
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
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).
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.
Diseño Web:
Grupo Sistemas
CMS:
WordPress
16 comentarios
27 de noviembre del 2012
Muchas gracias!!! :D
5 de diciembre del 2012
Es justo la información que andaba buscando, gracias por el aporte. Un saludo.
14 de diciembre del 2012
Probado en los navegadores arriba mencionados y funciona a la perfección, muchas gracias por el aporte!
Saludos…
26 de junio del 2013
[…] Hammer Sort Share tecnato.com 1 minute […]
1 de octubre del 2013
WOOOO muchas gracias…. muy buen datos
saludos
1 de octubre del 2013
excelente info… :)
1 de octubre del 2013
Muy buena informacion sobre audio para HTML5
3 de febrero del 2015
Esto Sirve Para Streaming
3 de febrero del 2015
si pero tienes que agregar funciones adicionales.
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
8 de marzo del 2016
Revisa este post:
http://www.codeproject.com/Tips/677451/Workaround-to-Fix-Audio-Autoplay-on-Mobile-Browser
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
5 de agosto del 2016
Hola Celina, claro que si! , la etiqueta audio de HTML5 funciona con imagenes sin problema.
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!
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/
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