Cómo Insertar un Metrónomo Gratis en tu Web
Si llevas un blog de música, una web de clases particulares o una página llena de tablaturas, puedes poner un metrónomo funcional sin programar nada. Copia un pequeño fragmento de código, pégalo en tu página y aparece un metrónomo completo: tempo de 20 a 300 BPM, tap tempo, elección de compás y tres sonidos de click. Todo funciona en el navegador de quien visita tu web, sin instalar nada ni crear ninguna cuenta.
Esto es todo:
<div style="max-width:440px;margin:0 auto;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden">
<iframe src="https://pluri.tools/embed/es/metronomo" title="Metrónomo — pluri.tools" width="100%" height="600" style="border:0;display:block;width:100%" loading="lazy"></iframe>
<a href="https://pluri.tools/es/metronomo/" target="_blank" rel="noopener" style="display:flex;align-items:center;justify-content:center;gap:6px;padding:6px 8px;border-top:1px solid #e2e8f0;font:500 12px system-ui,sans-serif;color:#64748b;text-decoration:none">
<img src="https://pluri.tools/favicon.svg" alt="" width="16" height="16" style="display:block" />
Powered by pluri.tools
</a>
</div>Esa es la integración completa. El resto de esta guía explica cómo encajarlo con tu diseño, cómo pegarlo en WordPress, Wix o Notion, y un truco para que el iframe nunca muestre barra de desplazamiento.
Por qué poner un metrónomo en tu página
Un metrónomo es de esas herramientas que la gente busca justo en el momento en que está leyendo tu contenido, ni antes ni después. Algunos casos en los que un widget integrado gana a un enlace que se lleva al lector:
- Páginas de clase. Un profesor que explica “practica esta escala a 80 BPM” puede colocar el metrónomo justo debajo del ejercicio, listo cuando el alumno llegue ahí.
- Tablaturas y partituras. Muestra el tempo de la pieza junto a la notación para que el músico entre directo en el tiempo correcto.
- Rutinas de práctica. Un post sobre ganar velocidad puede acompañar cada paso con la herramienta que el lector necesita para practicarlo.
- Webs de bandas y estudios. Una pequeña utilidad que mantiene a la gente más tiempo en tu página y le da un motivo para volver.
Como el widget vive dentro de un iframe, nunca interfiere con el resto de tu página. No lee tu contenido, no cambia la URL de tu web y carga por sí solo.
Pruébalo aquí mismo
Este es exactamente el mismo snippet del código de arriba, cargado en vivo en esta página. Usa los botones para verlo en claro u oscuro; el código de abajo se actualiza para coincidir. Pulsa Iniciar, arrastra el tempo o usa el Tap Tempo al ritmo de una canción.
Powered by pluri.tools
Todo lo que ves arriba, incluido el pequeño enlace de atribución, es exactamente lo que verá quien visite tu web en cuanto pegues el código.
Ajusta los colores a tu web
Por defecto el widget sigue el tema del sistema de quien lo visita (claro u oscuro). Si tu página tiene un estilo fijo, fuerza el tema con el parámetro theme en la URL:
<!-- Siempre oscuro -->
<iframe src="https://pluri.tools/embed/es/metronomo?theme=dark" ...></iframe>
<!-- Siempre claro -->
<iframe src="https://pluri.tools/embed/es/metronomo?theme=light" ...></iframe>Para el ancho, el contenedor limita el widget a max-width:440px mientras el iframe lo rellena con width="100%", así llena columnas estrechas en móvil sin estirarse demasiado en escritorio. Cambia el max-width del contenedor si tu diseño es más ajustado, y su border-radius para que combine con el resto de tus tarjetas.
El widget también está disponible en 13 idiomas. Cambia el es de la ruta por el idioma que quieras, por ejemplo /embed/en/metronome en inglés o /embed/pt/metronomo en portugués. Cada idioma tiene su propio slug en la URL, así que usa el que corresponda.
Sin barra de desplazamiento: deja que el iframe se ajuste solo
El punto más incómodo de cualquier iframe es la altura fija. Muy baja y corta los controles, muy alta y sobra espacio vacío. El embed resuelve esto avisando a la página madre de su altura real cada vez que cambia. Solo tienes que escuchar ese mensaje y ajustar el tamaño del marco.
Ponle un id al iframe y añade este pequeño script una vez en cualquier parte de tu página:
<iframe
id="metronomo-embed"
src="https://pluri.tools/embed/es/metronomo"
title="Metrónomo — pluri.tools"
width="100%"
height="600"
style="border:0;max-width:440px;border-radius:12px"
loading="lazy"
></iframe>
<script>
window.addEventListener('message', function (event) {
if (event.data && event.data.type === 'pluri-embed-height') {
var frame = document.getElementById('metronomo-embed')
if (frame) frame.style.height = event.data.height + 'px'
}
})
</script>Ahora el marco crece y se encoge solo según su contenido, y nunca aparece una barra de desplazamiento. Si te saltas el script, la altura fija height="600" es un valor seguro que encaja el widget completo.
Notas por plataforma
La mayoría de los constructores de webs tratan el código <iframe> de forma distinta al texto normal. La regla es simple: pégalo en un bloque de HTML o de inserción, nunca en el editor visual, que suele eliminar los iframes.
| Plataforma | Dónde pegar el código |
|---|---|
| WordPress (editor de bloques) | Añade un bloque HTML personalizado y pega el iframe. El editor visual de párrafo lo elimina. |
| Wix | Añade el elemento Insertar HTML (Insertar un widget) y pega el código. |
| Webflow | Arrastra un elemento Embed y pega el iframe. |
| Notion | Pega la URL simple https://pluri.tools/embed/es/metronomo y elige Crear inserción. |
| Blogger | Ve a la vista HTML de la entrada y pega el iframe directamente en el código. |
| HTML plano | Pégalo en cualquier parte dentro del <body>. |
Errores comunes
- Pegar en el editor de texto enriquecido. Si el widget desaparece al guardar, usaste el bloque equivocado. Cambia a HTML personalizado o Código.
- Una altura que corta los botones. Los controles de Iniciar y Tap Tempo están cerca de la parte inferior. Mantén la altura en 600 o más, o usa el script de autoajuste anterior.
- Pensar que hace falta otra librería. El widget no necesita ningún script adicional para funcionar. El único script opcional es el que escucha la altura.
- Mezclar http y https. Inserta siempre por
https. El código de esta guía ya lo usa.
Qué incluye el embed
El snippet incluye un pequeño enlace “Powered by pluri.tools”, justo debajo del widget, que apunta de vuelta a la herramienta. Ese enlace es lo único que el embed pide a cambio, y así es como el metrónomo se mantiene gratis. Quien quiera la página completa, con los 13 idiomas y URLs de tempo compartibles, puede seguirlo.
Preguntas frecuentes
¿Es realmente gratis?
Sí. No hace falta cuenta, clave de API ni tiene límite de uso. El snippet incluye solo un enlace de atribución, y nada más.
¿Va a ralentizar mi web?
El iframe usa loading="lazy", así que el navegador solo lo carga cuando entra en la pantalla. El widget en sí es ligero y genera el sonido con la Web Audio API, sin descargar ningún archivo de audio.
¿Los visitantes pueden cambiar el tempo, o es fijo?
Es totalmente interactivo. Cualquiera que vea tu página puede ajustar el BPM de 20 a 300, cambiar el compás, elegir el sonido y usar el Tap Tempo. El embed se abre a 120 BPM.
¿Funciona en el móvil?
Sí. El widget es responsivo y el audio funciona en iOS y Android. En iOS suena por el altavoz incluso con el interruptor de silencio activado, en cuanto la persona pulsa Iniciar.
¿Puedo cambiar el idioma?
Sí. Cambia el es de la URL por cualquiera de los 13 idiomas disponibles, usando el slug de ese idioma, por ejemplo /embed/fr/metronome en francés o /embed/ja/metronomu en japonés.