Etiqueta de audio HTML5 – Cómo crear un reproductor

Anterior
Avanzar

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

Te recomendamos leer:  Etiqueta de vídeo HTML5 - Atributos y propiedades

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

Te recomendamos leer:  LINEAS SVG EN HTML5

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.

Lecciones de HTML5
Anterior
Avanzar
0 0 votar
Calificación
guest
0 Comentarios
Comentarios en línea
Ver todos los comentarios

HTML5 comprende la continuación de HTML, aquí dispones de las lecciones para aprender HTML5.

Temario HTML5

1.- Introducción a curso HTML5
2.- Declaración de documento HTML5
3.- Categorías de contenidos HTML5

4.- Estructura de una pagina HTML5

5.- Etiqueta de audio HTML5 – Cómo crear un reproductor
6.- Etiqueta de vídeo HTML5 – Atributos y propiedades
7.- Barras de progreso en HTML5
8.- SVG en HTML5
9.- Lineas SVG en HTML5
10.- Polilineas en html5
11.- Rectángulos en svg HTML5
12.- Polígonos SVG en HTML5
13.- Círculos svg en html5
14.- Elipses SVG en HTML5
15.- Texto SVG en HTML5
16.- Animaciones SVG, Trazos y Canvas en html5
17.- Formularios en html5

HTML5 comprende la continuación de HTML, aquí dispones de las lecciones para aprender HTML5.

Temario HTML5

1.- Introducción a curso HTML5
2.- Declaración de documento HTML5
3.- Categorías de contenidos HTML5

4.- Estructura de una pagina HTML5

5.- Etiqueta de audio HTML5 – Cómo crear un reproductor
6.- Etiqueta de vídeo HTML5 – Atributos y propiedades
7.- Barras de progreso en HTML5
8.- SVG en HTML5
9.- Lineas SVG en HTML5
10.- Polilineas en html5
11.- Rectángulos en svg HTML5
12.- Polígonos SVG en HTML5
13.- Círculos svg en html5
14.- Elipses SVG en HTML5
15.- Texto SVG en HTML5
16.- Animaciones SVG, Trazos y Canvas en html5
17.- Formularios en html5