El elemento AUDIO
La cosa es tan fácil como usar la nueva etiqueta <audio, que define un contenedor dentro del cual definimos el origen del video que queremos mostrar y su formato. Mira este ejemplo de código:
Este navegador no soporta la etiqueta audio video de html5
</audio>
Así de sencillo, ya tendrías un reproductor de audio colocado en tu web. Admite más atributos: para autoejecutarse, ejecutarse en bucle, mostrar controles. Muy parecido al elemento video. Si el navegador no puede aceptar la etiqueta audio mostrará la frase escrita. Los atributos que soporta este elemento multimedia en HTML 5 son
| Nombre | Valores | Uso |
|---|---|---|
| autoplay | Para que el sonido suene automáticamente | |
| controls | Muestra controles de ejecución, pausa, sonido. | |
| loop | Reproducción en bucle. | |
| muted | Para no reproducir el sonido | |
| preload | auto metada none |
El sonido se carga cuando la página se carga Solo carga metadatos el cargar la página El sonido NO se carga con la página (lo hace al final) |
| src | URL | Dirección del archivo de sonido que se va a reproducir. |
| metadata | Datos para los scripts |
Tambien en audio existen los metadata, es decir, información extra que acompaña al archivo de sonido como por ejemplo: título, autor, album... depende de cada caso.
Si el explorador no reconoce la etiqueta audio o ninguno de los formatos de sonio se mostrará el texto que aparezca entre las etiquetas <audio>, puede ser un simple texto de aviso o un enlace por ejemplo para descargar el archivo o enviarlo a una página de explicaciones.
Audio y formatos en HTML 5
Pueden existir varios elementos <source>, el elemento hijo de audio, que permiten indicar el archivo de sonido que se debe reproducir para cda formato . Cada explorador reproducirá el archivo compatible. Mira este ejemplo de código:
<source src="musica.mp3" type="audio/mpeg">
<source src="musica.ogg" type="audio/ogg">
<source src="musica.wav" type="audio/wav">
Este explorador no reconoce la etiqueta video.
</audio>
Así de sencillo, son estos tres formatos aseguramos que cualquier explorador reproducirá nuestro archivo de audio. He aquí un resumen de los atributos que permite el elemento source
| Nombre | Valores | Uso |
|---|---|---|
| src | url | la dirección web del archivo de audio |
| type | audio/ogg |
Formato de audio usado, o sea, el tipo MIME de datos. El mpeg es para mp3 |
Al igual que ocurre con los videos, estos tipos MIME deben estar declarados en el servidor. Una forma es mediante un archivo .htaccess cuyo contenido sería de la forma
AddType audio/mpeg .mpeg
Aunque habitualmente los servidores tiene esta asociación en su configuración.
Y aquí una muestra
Con el código usado para este ejemplo
<source src="imgs/Baby.mp3" type="audio/mp3">
Este explorador no reconoce el elemento audio
</audio>