Cómo agregar un código de música HTML de fondo

Diversos métodos para incrustar música en una página web han sido populares desde los primeros días de la World Wide Web. Notablemente, la etiqueta "embed" en HTML, reproductores de audio basados en Java y reproductores basados en Flash son opciones posibles para agregar música de fondo, pero ninguna solución ha sido universalmente adoptada ni es totalmente compatible con todos los navegadores y plataformas. El estándar HTML5 más reciente incluye la etiqueta "audio", diseñada específicamente para la reproducción de audio incrustado.

Paso 1

Agrega el siguiente código en cualquier parte del cuerpo de tu documento HTML para incrustar un archivo de música y reproducirlo automáticamente cuando un visitante navegue por tu sitio web.

Cambia el atributo "src" para que contenga la ruta y el nombre del archivo de música que deseas incrustar.

Paso 2

Agrega el atributo "loop" si quieres que el archivo de música se reproduzca en bucle continuo:

Paso 3

Utiliza múltiples etiquetas "source" en lugar del atributo "src" de la etiqueta "audio" si quieres ofrecer al navegador del usuario una selección de varios formatos de archivo:

<source src="music/MP3file.mp3" type="audio/mpeg">
<source src="music/OGGfile.ogg" type="audio/ogg">

En este ejemplo, el navegador del usuario decidirá si reproduce el archivo MP3 o el OGG. Esta técnica puede ser útil para apuntar a dispositivos móviles que solo pueden reproducir ciertos formatos de audio.

Paso 4

Anida la etiqueta "embed" dentro de la etiqueta "audio" para proporcionar compatibilidad con navegadores antiguos que carecen de soporte HTML5. Ten en cuenta que este uso de la etiqueta "embed" está obsoleto (ya no es oficialmente requerido), así que solo experimenta con esta técnica si sospechas que tus usuarios utilizarán navegadores web desactualizados. Aquí tienes un ejemplo:

<embed src="music/file.mp3" autostart="true" loop hidden>

Consejo

Considera agregar el atributo "controls" a la etiqueta "audio" para permitir al usuario detener la música y cambiar el volumen. Además, evita usar el atributo "autoplay" a menos que haya una buena razón para este comportamiento del navegador. Muchos usuarios encuentran molesta la música de fondo incrustada que se reproduce inesperadamente sin su permiso y abandonarán tu sitio web inmediatamente.