Imágenes no es el único tipo de medio que puede usarse en HTML, el manejo de Audio en HTML5 se ha desarrollado en la última década y ha permitido que hoy en día se tenga un soporte estandarizado del uso del audio en los navegadores sin necesidad de extensiones como Flash, Windows Media o RealPlayer.
Formatos de Audio
Diferentes navegadores soportan diferentes formatos de audio, para manejar audio en HTML existen 4 formatos: MP3, AAC, Ogg Vorbis y WAV.
MP3 es soportado por Safari, IE 9, Chrome, Firefox y también Flash.
AAC es soportado por Safari, IE 9, Chrome, Firefox y también Flash, sin embargo tiene mejor calidad que MP3 y se cree que será el estándar próximamente.
Ogg Vobis y WAV no se usan comúnmente en proyectos HTML, pero llegado el caso y la necesidad con cualquier formato, pueden mirar el soporte de cada uno de ellos en:
https://caniuse.com/?search=audio%20wav
Estructura de Elementos de Audio
Para manejar archivos de audio se usa el elemento audio <audio>, usando etiquetas de apertura y de cierre. Y para adicionar los diferentes tipos de archivos que se quieran soportar se utilizan elementos source <source> o fuente, uno para cada tipo de audio que se quiera soportar.
<audio>
<source src="audio/archivo.ogg" type="audio/ogg; codec=opus">
<source src="audio/archivo.mp3" type="audio/mpeg">
Lo sentimos, el navegador que está usando no soporta archivos de audio.
</audio>
Para cada formato de audio que se quiera soportar, el elemento source debe contener los atributos src (la ubicación del archivo) y type (el tipo de archivo)
Por ultimo para mantener compatibilidad con navegadores que no soporten audio (no es común actualmente) se puede colocar un texto informativo.
Atributos de Elementos de Audio
Hay dos métodos que proveen información adicional acerca de la tabla, un subtítulo y un sumario. El subtítulo se muestra con la tabla de manera visual en los navegadores, mientras que el sumario no se muestra pero puede ser usado por dispositivos de asistencia y la lectura de las maquinas.
El atributo ‘controls’
Controls es un atributo booleano (falso o verdadero) que nos permite adicionar controles para el elemento audio. Los controles adicionados corresponden a los controles provistos por el navegador de manera predeterminada.
<audio controls>
El Atributo ‘autoplay’
autoplay es un atributo booleano (falso o verdadero) que nos permite hacer que el audio se reproduzca automáticamente apenas pueda hacerlo, en el caso de archivos de audio que se deban descargar de la red, apenas descargue la cantidad suficiente para ejecutarse.
<audio autoplay>
Deja una respuesta