Cómo insertar widgets musicales en tu web: tamaños, ajustes e ideas para profes

Casi todas las webs de escuelas de música tienen esa sección que nadie abre dos veces: «recursos», «para alumnos», «estudio en casa». Con los widgets de eMusic Tools esa página pasa a tener algo que el alumno usa de verdad. Son doce (un metrónomo, un afinador, un círculo de quintas, un loop de batería, un test de intervalos y más), y cada uno se pega como un solo iframe con un enlace pequeño debajo. No hay nada que instalar, y ni tú ni tus alumnos necesitáis cuenta.

Parte superior de la página de widgets de eMusic Tools: el título, cuatro ventajas (un iframe, funciona en el móvil, modo claro y oscuro, tres idiomas) y un metrónomo funcionando a la derecha

Esta guía sirve a dos personas. Si montas o mantienes webs, lo tuyo son las secciones sobre el fragmento y sus ajustes. Si das clase, salta a las ideas para la página de alumnos y vuelve luego a las instrucciones de tu plataforma.

Pruébalo antes

Esto es el metrónomo en tamaño M, funcionando en esta página con el mismo fragmento que pegarías tú. Lo único distinto es el tempo, que la dirección fija en 80. Dale a Iniciar.

Lo que pegas

En la página de widgets eliges una tarjeta y un tamaño, y el código aparece junto a una vista previa que carga exactamente la misma dirección. Para el metrónomo en M, hoy te da esto:

<!-- eMusic Tools · metronome -->
<iframe src="https://emusic.tools/embed/metronome?v=1&lang=es&theme=auto&size=m"
  title="Metrónomo online gratis" width="100%" height="220"
  style="max-width:560px;border:0;border-radius:12px"
  loading="lazy" allow="autoplay"></iframe>
<p style="margin:6px 0 0;font:12px/1.4 system-ui,sans-serif">
  <a href="https://emusic.tools/es/tools/metronome?utm_source=embed&utm_medium=widget&utm_campaign=metronome">Metrónomo online gratis</a>
  por <a href="https://emusic.tools/?utm_source=embed&utm_medium=widget">eMusic Tools</a>
</p>

Parte por parte:

El iframe ocupa todo el ancho de su columna (width="100%") y deja de crecer en el max-width de su estilo. Así una tarjeta pequeña no se estira hasta quedar como un mosaico con un hueco en medio.
La altura es fija, porque no hay ningún script que redimensione el marco. Cada tarjeta y cada tamaño tiene una altura medida que le vale de la columna más estrecha a la más ancha. La lista completa está en la tabla de más abajo.
loading="lazy" hace que el marco cargue solo cuando el lector se acerca a él. Un widget al final de una página larga no cuesta nada al abrirla.
allow dice qué puede usar la tarjeta: autoplay para el sonido y, en el afinador, también microphone.
El enlace bajo el marco es lo único que pide el widget a cambio. Para los buscadores, un enlace dentro de un iframe no cuenta como enlace, así que la única forma de que el widget apunte a eMusic Tools es un <a> normal en tu página. No lleva nofollow, y su texto nombra la herramienta, no una palabra clave.

Sección de inserción de la página de widgets: tres pasos, una fila con los doce widgets, un selector de tamaño S, M, L con sus alturas, el código a la izquierda y una vista previa sobre una página de clase de ejemplo a la derecha

Elige tamaño: S, M o L

El tamaño decide cuánta herramienta cabe en la tarjeta. La maquetación va aparte: cada tarjeta se reorganiza según el ancho que recibe, así que la misma tarjeta M funciona en una rejilla de dos columnas en el portátil y a todo lo ancho en el móvil.

Cuatro bocetos de tarjeta: S el mosaico, M el núcleo, L la consola, XL la herramienta, cada uno con una línea de descripción

S, el mosaico. El control principal y su lectura. Va bien en una barra lateral o en una columna estrecha.
M, el núcleo. El control más los dos ajustes que la herramienta siempre necesita. Es el tamaño por defecto y el que piden casi todas las columnas de texto.
L, la consola. La herramienta entera salvo guardar y exportar: los compases irregulares y los sonidos del metrónomo, los dieciséis pasos del loop de batería, las cincuenta y una progresiones de la pista de acompañamiento.
XL es la consola de la página completa de la herramienta. La página de widgets no da fragmento para ella, porque no cabe en la columna de un blog. La excepción es el metrónomo: pon size=xl en su dirección y el marco muestra su propia consola. La tabla de abajo llega hasta L, así que la altura de ese marco la eliges tú. Cualquier otra tarjeta a la que pidas XL dibuja su L.

Así queda el metrónomo en los tres tamaños, al ancho que le daría una página normal:

Widget de metrónomo en tamaño S: 120 BPM, botones de menos y más y el botón Iniciar

Widget de metrónomo en tamaño M: el tempo, el botón Iniciar, un deslizador de tempo, menos, más y marcar

Widget de metrónomo en tamaño L: tempo, Iniciar, deslizador, marcar, una fila de compases de 2/4 a 12/8 y el panel Sonido

Y otras tarjetas. El acorde del día en S cambia cada día y suena al tocarlo. El afinador en M añade el instrumento, la afinación y un tono de referencia por cuerda. El círculo de quintas en M muestra las notas de la tonalidad y toca su cadencia I, IV, V, I. El loop de batería en L abre la rejilla completa de dieciséis pasos, cuatro kits y swing.

Widget Acorde del día en tamaño S: un acorde de Do mayor en un teclado pequeño con botón de reproducir

Widget de afinador en tamaño M: la aguja, el botón Escuchar, los menús de instrumento y afinación y seis botones de cuerda

Widget del círculo de quintas en tamaño M: la rueda con Do mayor seleccionado, sus notas y una cadencia de cuatro acordes

Widget de loop de batería en tamaño L: Reproducir, tempo, el patrón Backbeat y una rejilla de dieciséis pasos para charles, palmas, caja y bombo

Altura del marco de cada widget

El fragmento ya trae la altura correcta. Esta tabla solo hace falta si el constructor de webs te pide la altura por separado, como Wix.

Widget	S	M	L
Metrónomo	200	220	320
Afinador	320	490	580
Nombra el intervalo	290	360	430
Lee la nota	250	340	470
Acorde del día	280	340	650
Círculo de quintas	400	580	710
Escala del día	300	390	820
Loop de batería	280	370	510
Pads de batería	220	350	560
Pista de acompañamiento	230	310	510
Progresión	250	350	540
Marca el tempo	220	290	590

Todo en píxeles. Cada valor es la mayor altura que alcanza la tarjeta entre 240 y 640 px de ancho, casi siempre en la columna estrecha, así que en una página ancha una tarjeta L puede dejar algo de espacio vacío debajo. Es normal.

Ajustes en la dirección

Todo lo que necesita el marco va en su src, porque una tarjeta en la web de otra persona no tiene cuenta ni cookie donde guardar nada. Puedes cambiar estos valores a mano:

lang: es, en o pl. Los textos de la tarjeta y los nombres de las notas lo siguen, así que con es el círculo de quintas escribe Do, Re, Mi. Cualquier otro valor da la versión en inglés.
theme: auto sigue la configuración del sistema de quien visita, y light o dark lo fijan para que case con tu web. No hay paleta de colores propia.
size: s, m o l. Si lo cambias, cambia también height según la tabla de arriba.
bpm, solo en el metrónomo: un número entero de 30 a 300. Un valor erróneo (bpm=abc) te deja un metrónomo a 120, no una página de error.
v=1 es la versión del fragmento. Déjala como está.

Un metrónomo lento para estudiar, en español y en una web oscura, empieza así:

https://emusic.tools/embed/metronome?v=1&lang=es&theme=dark&size=m&bpm=60

Cómo añadirlo en tu plataforma

WordPress: añade un bloque de HTML personalizado donde quieras el widget, pega el fragmento y previsualiza. El bloque respeta el iframe y el enlace tal cual.
Squarespace: arrastra un bloque de código, cámbialo a HTML y pega.
Wix: en «Añadir», elige «Insertar widget» (HTML iframe) y pega el fragmento como código. Wix pide una altura, así que escribe el número del atributo height.
Ghost: añade una tarjeta HTML a la entrada o la página y pega.
Blogger: cambia el editor a vista HTML, pega y vuelve a «Redactar».
Google Sites y Notion: los dos insertan por dirección, no con HTML pegado. Usa solo la dirección del src y quita el enlace, porque ninguno te deja poner HTML normal junto a la inserción. La marca de agua dentro del marco sigue diciendo de dónde sale el widget.
HTML normal: pega el fragmento dentro de <body>.

Notas para desarrolladores

Las tarjetas están hechas con container queries y aguantan hasta unos 220 px. Por debajo van apretadas, así que no metas una L en una barra lateral.
Nada suena al cargar. El sonido arranca cuando el lector toca la tarjeta, porque antes los navegadores móviles no lo permiten.
El fragmento del afinador lleva allow="microphone", así que el navegador pide permiso la primera vez que el lector toca Escuchar. Si tu CMS elimina ese atributo, el afinador avisa de que no tiene micrófono en lugar de quedarse callado.
El marco no pone cookies ni usa localStorage. Registramos que un widget se ha usado en un dominio, con la IP cifrada en un hash y nunca en claro, para saber qué webs lo usan.
La dirección sirve siempre la versión actual, así que las mejoras llegan a tu página sin que edites nada. Las condiciones prometen 30 días de aviso antes de cambiar o retirar un widget.
Cada marco es una pequeña página propia. Con loading="lazy" solo cargan los que están a la vista, pero una página con doce sigue siendo doce documentos, así que elige los que tus lectores necesitan.

Ideas para profesores de música

No hace falta saber HTML más allá de copiar y pegar. Esto funciona bien en la web de un profe o de un conservatorio:

Una página de «estudio en casa» con el metrónomo y el afinador, los dos en M. El alumno afina antes de empezar y toca la obra de la semana al tempo que fijas en la dirección, por ejemplo bpm=72.
«Nombra el intervalo» y «Lee la nota» sirven de calentamiento corto de oído y lectura. En L, la tarjeta de intervalos deja elegir dificultad y dirección, y la de notas abre la clave, ocho armaduras y las líneas adicionales.
El círculo de quintas encaja al lado de los apuntes sobre armaduras, y la escala del día en una página sobre modos. Al pulsar una tonalidad en la rueda, la rueda gira hasta ella, y los botones de sus acordes suenan al pulsarlos.
La pista de acompañamiento le da al alumno algo sobre lo que tocar: repite en bucle acordes, bajo y batería en cualquier tonalidad. En L abre cincuenta y una progresiones, entre ellas el blues de doce compases y el II V I, de sobra para practicar improvisación.
Para la clase de batería está el loop en L, una rejilla de dieciséis pasos con swing, y «Marca el tempo» ayuda al alumno a sacar la velocidad de una grabación.

Si la web del centro está en Google Sites, solo acepta la dirección: copia la parte src del fragmento. Los alumnos abren la página en el móvil, tocan y funciona, sin iniciar sesión en nada.

Galería de widgets en tamaño M: filtros Practicar, Explorar, Crear y Utilidades y las tarjetas de metrónomo, afinador, intervalos, lectura de notas, acorde del día y círculo de quintas, cada una con su botón Insertar

Las condiciones, en corto

Puedes insertar cualquier widget en cualquier web, personal o comercial, gratis. La marca de agua dentro del marco y el enlace de debajo se quedan: es el precio de una herramienta gratuita. El marco tiene tema claro y oscuro y nada más que retocar, porque tu CSS no llega al interior de un iframe.

Elige tarjeta, tamaño e idioma en la página de widgets, compruébalo en la vista previa y copia el fragmento.