Widgets gratis de metrónomo, afinador y piano para tu sitio web

Tienes tres widgets para elegir. El primero es un metrónomo en línea con un tempo de 20 a 300 BPM, tap tempo y compases de 2/4, 3/4, 4/4, 5/4, 6/8 y 7/8. El primer tiempo recibe un clic de 1000 Hz. Los demás usan 800 Hz. Así, tú o el estudiante pueden identificar el inicio del compás sin depender de una cuenta en voz alta.

Para una actividad de guitarra, comienza entre 60 y 72 BPM. Para una cumbia en 2/4, usa primero el metrónomo con una nota por clic y solo después agrega la síncopa. En un ejercicio de bachata, el estudiante puede marcar cuatro pulsos con el tap tempo y comprobar si el pulso quedó cerca del tempo que pretende estudiar.

El segundo es un afinador de guitarra en línea para la afinación estándar E2, A2, D3, G3, B3 y E4. Usa el micrófono del dispositivo de quien visita la página. La indicación de afinado considera un rango de ±5 cents, pero el resultado depende del micrófono, el entorno, el volumen del instrumento y la forma en que se pulsó la cuerda. El audio se analiza en el propio navegador y no se envía a ningún otro lugar.

El afinador no reemplaza la escucha. Si la indicación oscila, aleja el celular de la caja de la guitarra, reduce el ruido alrededor y toca una cuerda a la vez. Espera a que la nota se estabilice antes de girar la clavija. En guitarras con cuerdas nuevas, repite la comprobación después de algunos segundos, porque la tensión puede variar.

El tercero es un piano virtual con dos octavas. Cuando el espacio disponible es reducido, muestra una octava. El widget permite cambiar de octava, usar sustain y tocar con el teclado de la computadora cuando está enfocado. Es útil para localizar notas, comprobar intervalos y probar ideas de armonía sin abrir una segunda página.

Puedes usar el piano para localizar la tónica de una tonalidad, comparar la tercera mayor y la tercera menor o experimentar con una progresión como I–V–vi–IV. En una clase de MPB, esto ayuda al estudiante a escuchar la función de cada acorde sin reproducir la letra ni la cifra completa de una obra protegida.

Estas son las herramientas disponibles para insertar. No hay catálogo de canciones, búsqueda de enlaces, conexión con videos ni envío de audio. Si buscas otras herramientas para una clase o un artículo, consulta todas las herramientas de Cantivy y elige solo lo que combine con la actividad propuesta.

Comienza eligiendo el widget en esta página. Selecciona la herramienta, el ancho y el idioma. El generador muestra el código iframe correspondiente. Copia todo el fragmento, incluida la línea de atribución que aparece justo debajo del widget. No cambies la dirección fija del código ni elimines el atributo allow="microphone" del afinador.

Después, abre el editor de la página donde quieres colocar la herramienta y usa el bloque de HTML personalizado o de inserción de tu plataforma. Pega el código en el campo indicado y publica o actualiza la página. Algunas plataformas gratuitas no aceptan iframe. En ese caso, el bloque puede eliminarse, bloquearse o mostrarse como texto.

Haz esta prueba en tres etapas. Primero, guarda o publica la página. Segundo, abre la dirección como visitante, sin permanecer solamente en el modo de edición. Tercero, interactúa con los controles. En el metrónomo, toca junto con él durante ocho compases y comprueba que el acento del primer tiempo sea claro. En el piano, presiona una tecla de la computadora cuando el widget esté enfocado. En el afinador, autoriza el micrófono y toca una cuerda a la vez.

Si el piano no responde al teclado, haz clic sobre el widget antes de presionar las teclas. Si el afinador no muestra señal, comprueba el permiso del micrófono, el volumen del instrumento y el uso de HTTPS. Si el bloque aparece como texto, busca en la plataforma una opción llamada “HTML personalizado”, “Código insertado” o “Embed”.

El código apunta a una dirección fija de Cantivy. Si la herramienta recibe mejoras, no necesitas cambiar el fragmento que ya pegaste. Para eliminar el widget, solo borra el código de la página y la línea de atribución asociada. El contenido de tu sitio no se modifica al realizar esta eliminación.

Hay cuatro opciones de ancho: 100%, 360 px, 560 px y 800 px. La opción de 100% es responsiva y respeta el límite de 800 px. Úsala cuando la página recibe estudiantes en celulares y computadoras diferentes. Las opciones fijas ayudan cuando estás armando una columna, una ficha de ejercicio o una página con dos áreas lado a lado.

Elige 360 px para una columna estrecha o para una página pensada primero para celular. Usa 560 px en una clase con texto al lado o debajo. Reserva 800 px para una página de recursos en la que el widget ocupa casi todo el ancho. Si no sabes cuál elegir, comienza con 100% y pruébalo en una pantalla de aproximadamente 360 px de ancho.

La altura ya está calculada para cada herramienta. Por eso, no es necesario adivinar un valor ni crear una barra de desplazamiento dentro del iframe. En una pantalla estrecha, el piano se reduce a una octava. En el metrónomo y el afinador, los controles se ajustan al espacio elegido.

Puedes seleccionar portugués, español, inglés, indonesio, francés, alemán, italiano, ruso, turco o polaco. Elige el idioma pensando en el público de esa página. Un profesor que da clases en portugués puede mantener los controles en ese idioma incluso cuando comparte un ejercicio con un estudiante que vive fuera de Brasil.

La ubicación del widget cambia la experiencia. Coloca el metrónomo cerca del conteo del ejercicio. Deja el afinador junto a la explicación sobre las seis cuerdas. Coloca el piano junto a un análisis de intervalo o de una progresión como I–V–vi–IV. En una página larga, coloca una introducción breve antes de la herramienta y las instrucciones de práctica justo después.

Para una ficha de estudio, un orden funcional es: objetivo del ejercicio, herramienta, tempo o tonalidad, número de repeticiones y criterio para avanzar. Ejemplo: “Toca la escala a 60 BPM durante cuatro repeticiones. Sube a 64 BPM solo si no hay interrupciones”. Esta estructura le da al estudiante una acción inmediata y un límite claro.

El afinador necesita escuchar el sonido mediante el micrófono del dispositivo de quien visita la página. El código ya incluye allow="microphone". Sin este atributo, el navegador bloquea el acceso al micrófono dentro del widget. El sitio que integra el afinador también debe usar HTTPS. En una página sin conexión segura, el navegador no habilita esta función.

En el primer intento, el navegador puede mostrar una solicitud de permiso. La persona debe permitir el uso del micrófono para afinar la guitarra. Si lo rechaza, el resto de la página sigue disponible, pero el afinador no recibe señal. También ayuda cerrar las aplicaciones que estén usando el micrófono y tocar una cuerda a la vez, con el instrumento cerca del dispositivo.

En celulares, coloca el dispositivo a una distancia aproximada de 20 a 50 centímetros de la guitarra. Evita apoyar el teléfono sobre la caja del instrumento. En computadoras, usa el micrófono seleccionado por el navegador y reduce las fuentes cercanas de ruido, como el televisor, el ventilador u otra persona tocando.

El sonido se analiza en el propio navegador y no se envía a ningún lugar. Aun así, el resultado no sustituye una medición de laboratorio. El afinador depende del micrófono del celular, la tableta o la computadora, del ruido del entorno y de la forma en que se toca la cuerda. Para obtener una lectura estable, espera a que la nota deje de oscilar y haz pequeños ajustes en la clavija.

El tono detectado es una estimación. El afinador puede confundir una nota con otra en entornos ruidosos o mostrar una lectura inestable. Si la indicación parece estar una octava arriba o abajo, verifica la cuerda elegida y vuelve a tocarla. La lectura de una cuerda al aire no debe considerarse una medición exacta en cualquier dispositivo.

Explícaselo al estudiante antes del ejercicio. En una clase en línea, pídele que verifique si aparece el candado de seguridad en el navegador, autorice el micrófono y toque E2, A2, D3, G3, B3 y E4 por separado. Si tiene dudas sobre los datos y los permisos, consulta la política de privacidad.

Una actividad sencilla comienza entre 60 y 72 BPM. Pídele al alumno que toque una nota por clic durante cuatro compases. Después, cambia a 3/4 y haz tres ataques por compás. El clic de 1000 Hz en el primer tiempo ayuda a percibir dónde comienza de nuevo el ciclo. Para un ejercicio de cumbia, puedes usar 2/4 y pedirle que mantenga la pulsación con la mano derecha antes de agregar la síncopa.

Para convertir esto en una tarea de 10 minutos, usa tres bloques. En el primero, el alumno toca cuatro compases con una nota por clic. En el segundo, repite la misma figura en 3/4. En el tercero, mantiene la pulsación y agrega un cambio de acorde cada cuatro compases. Anota el tempo inicial y el tempo final para compararlos en la siguiente clase.

El tap tempo sirve para aproximar el tempo de una canción que el alumno ya conoce. Puede dar cuatro golpes siguiendo el pulso de una bachata o una balada romántica y comprobar el número indicado. Después, ajusta el BPM a un valor cómodo. Si la ejecución se traba, reduce entre 8 y 12 BPM. Cuando se vuelva consistente, aumenta de 4 en 4 BPM.

El tempo detectado por el tap tempo es una referencia. Cuatro golpes pueden dar como resultado la mitad o el doble del BPM buscado, sobre todo cuando el alumno marca solo un lado del pulso. Compara el número con la sensación del compás y corrígelo con un toque antes de comenzar el ejercicio.

El piano ayuda en actividades de escucha y ubicación. Pídele al alumno que encuentre la tónica, la tercera mayor y la quinta usando una octava. En una clase de MPB, puedes comparar el movimiento I–V–vi–IV sin escribir la cifra completa de una obra protegida. Después, el alumno toca cada acorde en el piano e identifica si la tercera es mayor o menor.

También puedes preparar un ejercicio de gospel en cuatro etapas: ubicar la tónica, tocar la quinta, alternar entre tercera mayor y menor y repetir la progresión en otra octava. En el repertorio de rock en español, usa el piano para comparar el bajo de la tónica con el de la quinta. En la bachata, pídele al alumno que mantenga el metrónomo en 2/4 mientras identifica la nota más grave de cada acorde.

Para las clases de guitarra, combina los tres widgets. Primero, el alumno usa el afinador para comprobar las seis cuerdas. Después, marca 70 BPM en el metrónomo y toca un rasgueo sencillo. Por último, encuentra en el piano las notas de la escala o el bajo de una progresión. Esta secuencia separa afinación, tiempo y percepción armónica, tres tareas que suelen mezclarse cuando el alumno empieza a tocar.

Dentro del widget no hay anuncios, contador de visitas, cookies ni scripts de terceros. Solo carga la página de la herramienta, la fuente y el script de cantivy.com. Esto mantiene el área de práctica enfocada en los controles del metrónomo, el afinador o el piano.

El estudiante no necesita crear una cuenta, proporcionar su correo electrónico ni ingresar una clave. El profesor tampoco necesita administrar una lista de usuarios. Solo hay que abrir la página publicada y usar la herramienta. En el afinador, el único permiso específico es el acceso al micrófono, solicitado por el navegador para analizar el sonido en el propio dispositivo.

El widget no promete funcionar sin internet. Se ejecuta en el navegador con la página abierta y necesita cargar los recursos de Cantivy. La disponibilidad también depende de la conexión y de las reglas de la plataforma donde pegaste el código. Si el bloque no aparece, verifica si la plataforma acepta iframe, si la dirección de la página se publicó correctamente y si alguna política de seguridad bloqueó el contenido incorporado.

Si el objetivo es ofrecer una herramienta de estudio, describe la tarea en la propia página. Indica el avance, el compás, la cantidad de repeticiones y lo que el estudiante debe escuchar. No presentes el widget como un servicio de búsqueda, almacenamiento o procesamiento de música, porque no cumple esas funciones.

El uso es gratuito, sin registro y sin clave. La condición es mantener el crédito «por Cantivy». El código ya incluye un enlace dentro del widget y una línea de texto justo debajo. Este crédito identifica el origen de la herramienta y debe permanecer visible en la página publicada.

No edites la dirección fija del iframe para ocultar el crédito, cambiar el origen o insertar tus propios scripts dentro del widget. Puedes elegir el ancho, el idioma y el lugar donde aparece la herramienta. También puedes eliminar todo en cualquier momento, borrando el código de la página.

Si tu editor agrega estilos alrededor del widget, deja espacio suficiente para la línea de crédito. En una columna de 360 px, comprueba que el texto no quede cortado. Después de publicar, abre la página en una ventana de incógnito o en otro navegador para verificar la vista de quienes no iniciaron sesión en el panel.

El código está diseñado para seguir siendo válido mientras la dirección de la herramienta esté disponible. Pueden llegar mejoras al widget sin que tengas que cambiar el fragmento insertado. Aun así, prueba la página después de hacer cambios en tu tema, en el editor o en las reglas de seguridad de la plataforma.

Para consultar las reglas completas, lee los términos de uso. Si el código no carga, el crédito aparece con problemas o encuentras una situación que no está explicada aquí, contáctanos y envía la dirección de la página donde intentaste insertar la herramienta.

Puedes colocar tres herramientas musicales dentro de tu propia página: metrónomo, afinador de guitarra y piano virtual. El estudiante practica sin ser enviado a otro sitio.

Lo principal es copiar el código generado en esta página, pegarlo en el bloque de HTML personalizado o de inserción y probarlo como visitante. La primera publicación suele requerir únicamente elegir el ancho, el idioma y la ubicación del widget.

• Elige el widget y configura el ancho, el idioma y la herramienta antes de copiar el código.
• Usa HTTPS en el sitio que recibe el afinador y conserva allow="microphone" en el iframe.
• Comienza los ejercicios de tempo entre 60 y 72 BPM y aumenta el tempo en pasos pequeños.
• Usa el tap tempo como referencia y comprueba que el valor no haya aparecido a la mitad ni al doble del pulso previsto.
• Usa el piano para ubicar notas, intervalos y progresiones como I–V–vi–IV.
• Prueba el widget en la página publicada, no solo en el editor de la plataforma.
• Conserva el crédito “por Cantivy” y la línea de texto debajo del widget.
• Borra el código de la página si quieres eliminar la herramienta.