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:

<audio src="musica.mp3" controls>
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.

Las políticas de experiencia de usuario recomiendan no usar audio automático en las páginas web. Solo debe iniciarse cuando lo indique el usuario

Audio y formatos en HTML 5

Al igual que con el elemento videos, el audio puede presentarse en varios formatos y podemos especificarlo en la página para asegurar la compatibilidad con diferentes exploradores .

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:

<audio autoplay>
  <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
audio/mpeg
audio/wav

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

<audio controls>
<source src="imgs/Baby.mp3" type="audio/mp3">
Este explorador no reconoce el elemento audio
</audio>