Insertar audios en mi sitio web

Anteriormente el introducir un audio dentro de nuestra pagina web era un poco tedioso ahora con HTML5  es muy sencillo ya que contamos con el elemento <audio>.

Nuestro elemento cuenta con una serie de atributos que podemos utilizar según nuestra necesidad.

Atributos

• autoplay: Especificando este atributo nuestro audio comenzara a reproducirse automáticamente tan pronto cargue nuestro sitio web, sin detenerse hasta la finalización de su tiempo de reproducción.
• autobufer: Es un atributo que se puede leer para determinar qué intervalos de tiempo de multimedia se han almacenado en búfer.
• controls: Utilizando este atributo especificamos que deseamos tener los controles que tiene un reproductor de audio,incluyendo volumen, reproducir/pausar, reanudar reproducción.
• height: Con esto especificamos la altura de nuestro reproductor en nuestro sitio web.
• loop: Si se especifica este atributo, estaremos realizando un bucle infinito de nuestro audio, al llegar al final comenzara a reproducirse desde el principio una y otra vez.
• preload: Si especificamos este atributo su función es brindar una alternativas a nuestro usuario final en el sitio web, para obtener la mejor experiencia en este. Puede tener uno de los siguientes valores:

• none: Permite que el servidor minimice el trafico, ya que el usuario final puede no consultar este audio, haciendo innecesaria el almacenamiento del audio en la cache.

• metadata: Sugiere que aunque el autor piensa que el usuario final no tendrá que consultar este audio, es razonable capturar los metadatos.

• auto: Esta sugerencia indica que, si es necesario, se puede descargar el audio completo, incluso aunque el usuario final no vaya a usarlo en ningún momento.

• Si la cadena es vacía: El navegador tomara este valor como auto.

• Si no está configurado, su valor predeterminado está definido por el navegador (es decir, cada navegador puede elegir su propio valor predeterminado).

• src: Especificamos la dirección donde tenemos ubicado nuestro audio que vamos a introducir en el sitio web.
• width: Indicamos el ancho de nuestro reproductor en el sitio web.

Ver ejemplo: