Etiqueta de audio HTML5 – Cómo crear un reproductor

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 ver:  Formularios en html5

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 ver:  Rectángulos en svg 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
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

Es posible que te falte desarrollar las lecciones de HTML.

Curso HTML

1.- Introducción a HTML
2.- Qué es HTML
3.- Estructura básica de un documento HTML
4.- Etiquetas HTML tipos y ejemplos
5.- Atributos en HTML
6.- Etiquetas para texto HTML y formatos HTML
7.- Cómo poner hipervínculos o enlaces en HTML
8.- Cómo insertar una imagen en HTML
9.- Listas en HTML – Cómo crear y poner viñetas
10.- Cómo hacer tablas en HTML
11.- Formularios en HTML – Cómo crear y personalizar
12.- Etiqueta div y span en HTML
13.- Atributo id y class en HTML
14.- Elementos Inline y Block en HTML
15.- Maquetación web en HTML

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

Es posible que te falte desarrollar las lecciones de HTML.

Curso HTML

1.- Introducción a HTML
2.- Qué es HTML
3.- Estructura básica de un documento HTML
4.- Etiquetas HTML tipos y ejemplos
5.- Atributos en HTML
6.- Etiquetas para texto HTML y formatos HTML
7.- Cómo poner hipervínculos o enlaces en HTML
8.- Cómo insertar una imagen en HTML
9.- Listas en HTML – Cómo crear y poner viñetas
10.- Cómo hacer tablas en HTML
11.- Formularios en HTML – Cómo crear y personalizar
12.- Etiqueta div y span en HTML
13.- Atributo id y class en HTML
14.- Elementos Inline y Block en HTML
15.- Maquetación web en HTML