Insertar audio en HTML
HTML cuenta con las etiquetas necesarias para insertar audio en tus sitios web con muy poco código, al menos en la versión 5 del lenguaje.
Insertar audio
Crea o abre un archivo html con la estructura básica, entre las etiquetas body coloca el código siguiente para agregar el reproductor de audio.
<audio controls>
<source src="forelisa.mp3" type="audio/mp3">
Tu navegador no soporta audio HTML5.
</audio>- Coloca la propiedad control a la etiqueta de audio para mostrar los controles de reproducir, pausar, volumen, etc.
- En la etiqueta source debes colocar el audio a reproducir, y tipo de formato.
- Debes de agregar un mensaje para indicar los casos en el que el navegar no soporte audio de html.
Puedes agregar más de una etiqueta source para agregar los diferentes formatos soportados por los diferentes exploradores.
Al agregar más de un formato tu código puede quedar de la siguiente manera.
<audio controls>
<source src="forelisa.mp3" type="audio/mp3">
<source src="forelisa.ogg" type="audio/ogg">
<source src="forelisa.wav" type="audio/wav">
Tu navegador no soporta audio HTML5.
</audio>El explorador web buscara el formato adecuado de la lista de recursos para cargarlo en pantalla.
Ejecuta tu archivo html (con o sin ejecutar en un servidor) y podrás observar un reproductor como el siguiente.
El diseño es por defecto del explorador, sin embargo, aplicando estilos css podrás personalizarlo de acuerdo con tu sitio.
Podría interesarte Agregar reproductor de video en HTML
Formatos soportados
Es posible reproducir diferentes formatos de audio con el ejemplo anterior, sin embargo, entre los más soportados tenemos los siguientes.
- mp3
- ogg
- wav
Como primera opción y con mayores soportes por la mayoría es el formato MP3, coloca a tu código como opción inicial.
Observaciones
Para que las etiquetas puedan reconocer los audios es indispensable colocar la dirección url del archivo y no la ubicación en el disco duro.
Podría interesarte Acceder al servidor local por internet con ngrok
Por esa razón las puedes almacenar en la misma ruta de tu sitio web o en otro sitio siempre que te genera una url del archivo.
En el siguiente video podrás ver la explicación del contenido del post.
hola, como se hace para que se ejecute solo al abrir la pagina? gracias
Debes de colocar el atributo autoplay
Gracias, pero sigue sin funcionar. Es una pagina que hice hace 20 años con tecnologia de hace 20 años, entonces tenia algo parecido pero ha dejado de funcionar, ya tenia el autoplay puesto e iba, pero con este codigo no arranca solo. Tengo esto puesto
Gracias
sin espacios
Acabo de realizar una prueba de esta manera:
< audio id="au" controls preload autoplay>< source src="forelisa.mp3" type="audio/mpeg">
< source src="forelisa.ogg" type="audio/ogg">
Tu navegador no soporta audio HTML5.
< /audio>
Desde Javascript inicio la reproduccion al cargar la pagina:
< script src="js/jquery-3.4.1.min.js">< script>
$ (document).ready(function () {
var audi = document.getElementById("au");
audi.play();
});
< /script>
Recuerda agregar la libreria de jquery a la carpeta; Agregue espacios al codigo para que sea visible
muchas gracias, he puesto la superior de la ultima y parece que funciona, Según he leído, chrome bloquea el autoarranque de los audios, pero en algunos funciona, también he hecho unos cambios y ahora lo he puesto en otra página, ya no está en el index sino en la segunda. Muchas gracias por su ayuda.
Hola, disculpa cuál sería el procedimiento y código para insertar una canción mp3 desde un enlace de Google drive en una página web de los sitios web de google?. Estoy haciendo una invitación y no logro que funcione.
Que tal,
creo que en google drive no puedes generar urls públicos, por lo tanto, no podrás agregar canciones. Puedes intentar cargar las canciones en otro servicio que te genere los enlaces públicos.
Hola Gerardo Saludo cordial
Estoy intentando hacer correr el código en un Mailing que enviaré desde https://us17.admin.mailchimp.com/ pero no me trae el audio que tengo disponible como publico en https://podcasters.ivoox.com
Agradecería tu ayuda
No creo que sea posible que se pueda reproducir un audio enviado por correo, los servicios de correo tienen varias restricciones de scripts incrustados;
lo que puedes hacer es que en el correo agregues una liga de enlace a un sitio con el audio.
Como se puede hacer con un enlace al youtube?
De esta forma no es posible enlazar videos de YouTube, pero puedes integrar alguna librería que te facilite la tarea.
com puedo posicionar el reproductor en otras zonas, por ejemplo a la derecha? Gracias!
Puedes utilizar css para posicionar el reproductor.
se puede cambiar el color? si si, como serie un ejemplo con css?
Como se podría hacer reproducir varias canciones?
Tendrás que utilizar JavaScript para la lista de canciones y la auto reproducción cada vez que acabe una canción, por ahora no tengo un ejemplo.
Hola coloque este código
Audio
Pero el reproductor me aparece como desactivado no reproduce
Revisa que este bien la url del archivo de audio, y que se esté ejecutando sobre un servidor web.
no me funciona el reproductor de audio en html 5
Como puedo hacer que se reproduzca un tema sin que se vea el control..? o sea que se escuche solamente el tema de fondo de la página..?
Se podria colocar el reproductor en un div, ese div ocultarlo mediante css; solo agrgearle que se reproduzca en automatico y en loop.
como descargo música para ello? no se :((