Ahora aprenderemos a utilizar la etiqueta <audio> en HTML5, un fantástico elemento que nos permite insertar audio en nuestra página HTML, y también veremos los atributos para controlar este elemento.
Etiqueta <audio> en HTML5
La etiqueta <audio> inserta un reproductor de sonido en html5, ahora es posible insertar un audio, una canción o cualquier sonido a nuestra página web.
No olvides, entre la etiqueta de apertura y cierre es recomendable colocar un aviso en texto, este texto se mostrará en caso el navegador del usuario no sea compatible o no reconozca dicho elemento de audio. Te muestro un ejemplo de código:
Por si solo la etiqueta audio no aparece el navegador, pues es necesario indicar cuál es el archivo para reproducir, para ello emplearemos la propiedad src y en su valor indicaremos el nombre del archivo con su respectiva extensión en caso el archivo se encuentre en la misma carpeta que el documento HTML y si se encuentra fuera, colocaremos en su lugar la dirección URL donde este alojado el audio.
Ejemplo de código para insertar audios en HTML5:
Para que el reproductor de sonido aparezca en el navegador será necesario agregar el atributo controls en la etiqueta de apertura, sus valores por defecto harán que aparezca un reproductor con sus iconos para reproducir el sonido, controlar el avance y volumen. A continuación veamos un ejemplo que funciona.
Ejemplo de código con controles:
El resultado aparecerá con un estilo por defecto, definido por cada navegador, veamos:
Resumen
- Con la etiqueta <audio> ya podemos insertar audios en nuestra página.
- Utilizaremos el atributo src y en su valor indicaremos la ubicación de nuestro archivo de audio.
- Utilizaremos el atributo controls para proporcionar controles a nuestro reproductor de sonido en la página.
- Entre la etiqueta de apertura y cierre, antes del cierre colocaremos el texto que se mostrará en caso de que el navegador del usuario no soporte el audio.
Formatos de audio soportados
No todos los formatos de audio que existen se pueden utilizar para insertar en una página web, en esta ocasión conoceremos los formatos más recomendables.
- MP3
- OGG
- WAV
- AAC
- OPUS
Etiqueta <source> para insertar audio
Otra manera de insertar elementos de audio es utilizando la etiqueta <source> dentro de <audio>, dentro de ella se especifica cual es el archivo mediante el atributo src y además se puede especificar el tipo de archivo utilizando el atributo type. Veamos un ejemplo a continuación.
Ejemplo:
Formatos de audio alternativos
Es muy recomendable poner más de un archivo de audio con diferentes formatos para que el navegador pueda reproducir el primer formato que reconozca, para ello nos serviremos de la etiqueta .
Ejemplo:
Resumen del atributo <audio>
- Controls: hará que el audio tenga los controles para que el usuario interactúe.
- Autoplay: hará que el audio se reproduzca automáticamente al cargarse la página, sin consultar al usuario.
- Loop: hará que el audio se reproduzca indefinidamente una vez que se inicia, es decir al finalizar, empezara a reproducirse automáticamente de nuevo.
Basta con colocarlos y harán su función por defecto.
Ejemplo:
Ahora ya puedemos colocar elementos de audio en las páginas web hechas con código HTML.
Te invito a probar todo esto con tus sonidos o musica preferida!!!