Insertar música en el blog con la etiqueta </audio>

Insertar música en el blog con la etiqueta </audio>

Hace poco vimos la forma de insertar vídeos gracias a la etiqueta </video> de HTML5, en esta oportunidad veremos la etiqueta </audio>, la cual nos permite insertar música en el blog de manera fácil y efectiva.


Al igual que la etiqueta anterior el procedimiento es muy sencillo y los parámetros son muy similares. Pero para ampliar la compatibilidad es necesario insertar 2 pistas: Una en formato .mp3 (Para Internet Explorer) y otra en .ogg (Para los demás navegadores ya que Firefox no reproduce .mp3 con esta etiqueta).

El resultado es el siguiente:




Para usar 2 pistas, es necesario crear dentro de la etiqueta </audio> 2 etiquetas </source>, en las cuales especificaremos la dirección de ambos archivos de audio:
<audio controls="controls">
<source src="archivo.mp3"></source>
<source src="archivo.ogg"></source>
</audio>

Es importante saber que la primera pista tiene que ser la en formato .mp3, ya que Internet Explorer detecta el orden, si no la especificas no se reproducirá en dicho navegador.

Al igual que la etiqueta </video> puedes usar varias de los atributos, por ejemplo:
  • autoplay: Define si quieres que se reproduzca automáticamente el audio, tienes que establecerlo en autoplay (autoplay="autoplay").
  • loop: Permite que la canción se reproduzca nuevamente al finalizar, establecer en loop (loop="loop").
  • preload: Con esto hacemos que el audio precargue sin necesidad de intervención, establecer en auto, metadata o none.
Los valores mute y poster no están incluídos ya que no tienen sentido en el reproductor de audio.

Recuerda que si no tienes un convertidor a mano puedes usar media.io, un servicio online de conversión de archivos de audio gratuito.
Artículo aleatorio
BuySellAds
BuySellAds
BuySellAds
BuySellAds
BuySellAds
Artículos destacados
Marca de agua en las imágenes con CSS # - Marca de agua en las imágenes con CSS
Efecto de desenfoque con CSS # - Efecto de desenfoque con CSS
Botones para subir y bajar en Blogger # - Botones para subir y bajar en Blogger
Insertar una página externa en una entrada en Blogger # - Insertar una página externa en una entrada en Blogger
Ocultar entradas con determinada etiqueta en el inicio de Blogger # - Ocultar entradas con determinada etiqueta en el inicio de Blogger