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

Escrito por michael carroll | Traducido por daniela laura arjones
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo agregar un código de música a un fondo HTML
Añade música fondo en tu página web para que los usuarios disfruten mientras navegan. (Jupiterimages/Brand X Pictures/Getty Images)

Varios métodos de incrustar la música en una página Web se han usado desde los primeros días de la World Wide Web. La etiqueta "embed" en reproductores de audio HTML basados en Java basada y en Flash son todas las posibles opciones para añadir música de fondo a una página Web, pero hay una solución que ha sido universalmente aceptada y es totalmente compatible con todos los navegadores y plataformas. El estándar HTML5 es compatible con la mayoría de navegadores web publicados desde 2010 y promete ser el sistema más fiable de los estándares web en el futuro. HTML5 incluye la etiqueta "audio", que se define específicamente para la reproducción de audio incorporado.

Nivel de dificultad:
Fácil

Otras personas están leyendo

Instrucciones

  1. 1

    Agrega el código siguiente en cualquier parte del cuerpo del documento HTML para incrustar un archivo de música y reproducirlo de forma automática cuando un usuario navega por tu página web.

    <audio src="music/file.mp3" autoplay="autoplay"></audio>

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

  2. 2

    Agrega el atributo "loop" si deseas que el archivo de música se reproduzca una y otra vez:

    <audio src="music/file.mp3" autoplay="autoplay" loop="loop"></audio>

  3. 3

    Usa varias etiquetas "Fuente" en lugar del atributo "Src" de la etiqueta "Audio" si quieres ofrecer al navegador del usuario una selección de múltiples formatos de archivo:

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

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

  4. 4

    Anida la etiqueta "Embed" dentro de la etiqueta "audio" para proporcionar soporte a los navegadores antiguos que carecen de soporte HTML5. Ten en cuenta que está desechado este uso de la etiqueta "embed" (lo que significa que ya no está soportado), por lo que sólo experimenta con esta técnica si sospechas que tus usuarios van a usar navegadores obsoletos. Aquí hay un ejemplo:

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

Consejos y advertencias

  • Considera agregar el atributo "Controles" a la etiqueta "Audio" para permitir al usuario detener la música y cambiar el volumen. Además, considera no utilizar 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 incorporada que se repite de forma inesperada y sin su permiso y dejarán tu sitio web inmediatamente.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles