El nuevo elemento audio de HTML5 soporta la reproducción nativa de archivos de audio en el navegador sin la necesidad de plug-ins o reproductores. El elemento audio comienza con la etiqueta <audio> y termina con la etiqueta </audio>.

Elemento <audio>

Tendrás que proporcionar varias versiones del archivo de audio debido a la compatibilidad con el navegador de diferentes códecs. Planea suministrar archivos de audio en al menos dos contenedores diferentes, incluyendo OGG y MP3. Es típico omitir los atributos src y type de la etiqueta de audio y, en su lugar, configurar múltiples versiones del archivo de audio con el elemento source.

En la siguiente tabla se enumeran los atributos del elemento audio.

Atributos del elemento Audio
AtributoValorUso
srcNombre del archivoOpcional; nombre del archivo de audio.
typeTipo MIMEOpcional; el tipo MIME del archivo de audio, como audio/mpeg o audio/ogg.
autoplayautoplayOpcional; indica si el audio debe comenzar a reproducirse automáticamente; usar con precaución.
controlscontrolsOpcional; indica si se deben mostrar los controles; recomendado.
looploopOpcional; Indica si el audio debe reproducirse una y otra vez.
preloadnone, metadata,
auto
Opcional; valores: none (sin precarga), metadata (solo descargar metadatos de archivos de medios) y auto (descargar el archivo de medios)
titleDescripción de textoOpcional; Especifica una breve descripción de texto que pueden mostrar los navegadores o las tecnologías de asistencia.

Elemento Source

El elemento source es una etiqueta autocontenida, o nula, que especifica un archivo multimedia y un tipo MIME. El atributo src identifica el nombre del archivo del archivo multimedia. El atributo type indica el tipo MIME del archivo. Codifica type="audio/mpeg" para un archivo MP3. Codifica type="audio/ogg" para archivos de audio usando el codec Vorbis. Configura un elemento source para cada versión del archivo de audio. Coloca el elemento source antes de la etiqueta audio de cierre.

Audio HTML5 en una página web

El siguiente ejemplo de código se configura una página web para mostrar un archivo de audio:

<audio controls="controls">
  <source src="https://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg" type="audio/ogg" />
  <source src="http://www.noiseaddicts.com/samples_1w72b820/2514.mp3" type="audio/mpeg" />
  <a href="http://www.noiseaddicts.com/samples_1w72b820/2514.mp3">Descargar este Audio</a> (MP3)
</audio>

Las versiones actuales de Safari, Chrome, Firefox, Microsoft Edge y Opera soportan el elemento audio HTML5. Mientras que Internet Explorer (versión 9 y posteriores) es compatible con el elemento de audio, las versiones anteriores de Internet Explorer no lo son. Los controles que muestra cada navegador son diferentes.

Revise el código anterior y observa el hipervínculo colocado entre el segundo elemento source y la etiqueta de cierre de audio. Cualquier elemento HTML o texto colocado en esta área es generado por navegadores que no soportan el elemento de audio HTML5. Esto se denomina contenido alternativo; si el elemento audio no es compatible, la versión MP3 del archivo está disponible para la descarga.

Etiqueta AUDIO
5 (100%) 9 votos




Alex Walton

Alex Walton

Aprender desde Cero es tu web para conocer todo sobre informática. Mi nombre es Alex y me gustaría que dejes tu comentario ante cualquier duda o aporte.
"Si no lo consigues a la primera, llámalo versión 1.0"

Comparte este artículo:

Facebook
Google+
Twitter
LinkedIn
WhatsApp
Email
Deja tu comentario
Contenido Relacionado
Etiqueta VIDEO HTML5 con ejemplo

Etiqueta VIDEO

El nuevo elemento video HTML5 es compatible con la reproducción nativa de archivos de vídeo en el navegador sin necesidad ...
Leer Más
Etiqueta EMBED HTML5 con ejemplos

Etiqueta EMBED

El elemento embed es un elemento autónomo, o vacío (no se utiliza etiqueta de cierre), cuyo propósito es proporcionar un ...
Leer Más
Etiqueta FORM Ejemplo Formularios HTML

Etiqueta FORM

Cada vez que utilizas un motor de búsqueda, realiza un pedido o te unes a una lista de correo electrónico, ...
Leer Más
SOBRE NOSOTROS

Somos una web que busca el libre conocimiento en temas relacionados a la informática.

Todos los cursos son gratis. La publicidad nos mantiene activos así que por favor visita a nuestros anunciantes.

RECIBE MUCHOS REGALOS