Etiqueta de audio HTML5 – Cómo crear un reproductor de audio

Ahora aprenderemos a utilizar la etiqueta <audio> en HTML5, un fantástico elemento que nos permite insertar audio en nuestra página HTML, además conoceremos los atributos para controlar este maravilloso elemento. Estoy seguro de que terminarás esta lección con ganas de poner música de fondo a tu página web. Entonces ¡vamos por ello!

 Etiqueta audio en HTML5

La etiqueta <audio> sirve para inserta un reproductor de sonido en html5, ahora es posible insertar un audio, una canción o cualquier música para dar vida y alegría 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:

<audio>Este es un elemento de audio no soportado por tu navegador, prueba con otro... </audio>

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:

<audio src="miaudio.mp3" > este es un elemento de audio no soportado por tu navegador, prueba con otro </audio>

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 para insertar audio en HTML5 con controles:

<audio src="miaudio.mp3" controls> este es un elemento de audio no soportado por tu navegador, prueba con otro </audio>

El resultado aparecerá con un estilo por defecto, definido por cada navegador, veamos los obtenidos en Google Chrome y Mozilla Firefox.

Resultado en Ghrome

Resultado en Firefox

Resumen de todo lo anterior respecto a la etiqueta <audio> de HTML5

• 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:

<audio controls>

   <source src="miaudio.mp3"  type="audio/mp3">
Este es un elemento de audio no soportado por tu navegador, prueba con otro

</audio>

Formatos de audio alternativos en HTML5

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 <source>.

Ejemplo:

<audio controls>

       <source src="miaudio.mp3"  type="audio/mp3">

       <source src="miaudio.ogg"  type="audio/ogg">

       <source src="miaudio.wav"  type="audio/wav">

Este es un elemento de audio no soportado por tu navegador, prueba con otro

</audio>

Resumen de los atributo HTML para <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:

<audio controls  autoplay  loop>
  
         <source src="miaudio.mp3"  type="audio/mp3">

</audio>

¡Fantástico! ¿Verdad?, pues ahora ya puedes colocar elementos de audio en tus páginas web hechas con código HTML.

[popup_anything id=»4434″]