HTML5 permite añadir archivos de audio en una página web para reproducir sonidos, podcasts o música de fondo. Para esto, podemos utilizar el elemento <audio> el cual permite insertar un reproductor de audio de un sin requerir un plug-in o complemente de terceros.
La sintaxis de este elemento es sencilla:
<audio controls> <source src="nombre_archivo.wav" type=”audio/wav”> <source src="nombre_archivo.ogg" type=”audio/ogg”> <source src="nombre_archivo.mp3" type=”audio/mp3”> <source src="nombre_archivo.webm" type=”audio/webm”> </audio>
controls: permite que el navegador añade los botones para la reproducción / pausa y el control del volumen.
Source: permite que el navegador reproduzca el archivo de audio en diferentes formatos. Dentro de este añadimos el atributo src para definir la URL o ruta del archivo de audio a reproducir.
type: indica al navegador cual es el formato del archivo de audio.
La razón por la cual declaramos diferentes formatos de audio se debe a que no existe un formato de audio estándar adoptado por todos los navegadores, principalmente por problemas de patentes, razón por la cual no todos los navegadores pueden rerpoducir los formatos de audio disponible.
Por tanto es necesario emplear el elementos <souce> y definir el archivo de audio en diferentes formatos para de esta forma asegurarnos de que puede ser reproducido por todos los navegadores. De esta forma, en función del navegador que utilicen los usuarios, el elemento <audio> seleccionará el que pueda reproducir.
Vamos a ver un ejemplo sencillo para ver como funciona el elemento audio:
<h2>Audio HTML</h2>
<audio controls>
<source src="multimedia/bark.wav" type="audio/wav">
<source src="multimedia/bark.ogg" type="audio/ogg">
<source src="multimedia/bark.mp3" type="audio/mpeg">
<p>El audio no ha podido reproducirse debido a que este formato de archivo no es compatible con su navegador.</p>
</audio>Fíjate que hemos añadido un elemento <p> en el código como contenido alternativo, de modo que los navegadores que no soporten los diferentes tipos de formatos definidos informen a los usuarios acerca del problema de soporte. Obviamente, si el navegador soporta al elemento <audio>, el contenido alternativo no será mostrado.
Atributos específicos
src: la URLdel recurso de medios que será reproducido.
crossorigin: un valor enumerado que indica si la petición hecha a un servidor externo debe presentar credenciales CORS o no. Los dos valores posibles son anonymous y use-credentials.
preload: indica como realizar la precarga del audio. El atributo puede definir tres estados: auto metadata y none.
autoplay: un valor booleano que indica al navegador que debe reproducir el audio automáticamente.
loop: un valor booleano que indica al navegador que debería recomenzar automáticamente la reproducción del archivo de medios una vez que ésta llega a su fin.
muted: un valor booleano que indica al navegador que debería reproducir el archivo de audio pero sin sonido.
controls: un valor booleano que indica al navegador que debería mostrar los botones de reproducción.
Inicialmente me formé como Técnico en Anális y Diseño de sistemas. Luego ingresé a la escuela de negocios, hice una licenciatura en Administración y obtuve una especialización (Post-grado) en Alta Dirección Empresarial. Desde el año 2007 me dedico a la creación de sitios web, lo cual combino con la consultoría y la capacitación de tecnologías de Internet.
- Cascada CSS - agosto 24, 2023
- El objeto Math - agosto 23, 2023
- Diferencia entre null y undefined en JavaScript - agosto 16, 2023
