Otro elemento que se agrega al HTML5 es el AUDIO. El objetivo de esta etiqueta es permitir la carga y ejecución de archivos de audio sin requerir un plug-in de Flash, Silverlight o Java.
El comité de estandarización W3C deja abierto a cada empresa que desarrolla navegadores los formatos que quieran soportar (así tenemos que algunos soportan mp3, wav, ogg, au)
Un ejemplo de disponer el elemento audio dentro de una página sería:
<audio src="sonido.ogg" autoplay controls loop></audio>
Las propiedades que podemos utilizar con la marca audio son:
- src: La URL donde se almacena el archivo de audio. Si no definimos la URL la busca en el mismo directorio donde se almacena la página.
- autoplay: En caso de estar presente el archivo se ejecuta automáticamente luego de cargarse la página sin requerir la intervención del visitante.
- loop: El archivo de audio se ejecuta una y otra vez.
- controls: Indica que se deben mostrar la interface visual del control en la página (este control permite al visitante arrancar el audio, detenerlo, desplazarse etc.)
- autobuffer: En caso de estar presente indica que primero debe descargarse el archivo en el cliente antes de comenzar a ejecutarse.
Como no hay un formato de audio universalmente adoptado por todos los navegadores el elemento audio nos permite agregarle distintas fuentes:
<audio controls autoplay loop> <source src="sonido.ogg"> <source src="sonido.mp3"> <source src="sonido.wav"> <source src="sonido.au"> </audio>
El elemento source indica a través de la propiedad src la ubicación del archivo de audio respectivo. El orden que disponemos estas fuentes es importante. Primero el navegador busca la primera fuente y verifica que puede reproducir dicho archivo, en caso negativo pasa a la siguiente fuente.
Una página que muestra el control de audio:
<!DOCTYPE HTML> <html> <head> <title>Título de la página</title> <meta charset="UTF-8"> </head> <body> <audio controls> <source src="http://www.tutorialesprogramacionya.com/audios/gallo.ogg"> <source src="http://www.tutorialesprogramacionya.com/audios/gallo.mp3"> <source src="http://www.tutorialesprogramacionya.com/audios/gallo.wav"> </audio> </body> </html>
Según el navegador el control de reproducción de audio puede variar.
En Firefox:
En Chrome:
En Microsoft Edge:
En el caso que solo necesitemos reproducir un único formato de archivo podemos evitar los elementos HTML "source" y disponer la propiedad src directamente en la etiqueta "audio":
<audio controls src="http://www.tutorialesprogramacionya.com/audios/gallo.mp3"> </audio>