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.
| Atributo | Valor | Uso |
|---|---|---|
| src | Nombre del archivo | Opcional; nombre del archivo de audio. |
| type | Tipo MIME | Opcional; el tipo MIME del archivo de audio, como audio/mpeg o audio/ogg. |
| autoplay | autoplay | Opcional; indica si el audio debe comenzar a reproducirse automáticamente; usar con precaución. |
| controls | controls | Opcional; indica si se deben mostrar los controles; recomendado. |
| loop | loop | Opcional; Indica si el audio debe reproducirse una y otra vez. |
| preload | none, metadata, auto | Opcional; valores: none (sin precarga), metadata (solo descargar metadatos de archivos de medios) y auto (descargar el archivo de medios) |
| title | Descripción de texto | Opcional; 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.
gracias 😀
Para servirte 🙂