Como Incorporar um Metrônomo Grátis no Seu Site

Se você mantém um blog de música, um site de aulas particulares ou uma página cheia de cifras, dá para colocar um metrônomo funcional no ar sem programar nada. Basta copiar um pequeno trecho de código, colar na página e um metrônomo completo aparece: tempo de 20 a 300 BPM, tap tempo, escolha de compasso e três sons de click. Tudo roda direto no navegador de quem visita, sem instalar nada e sem criar conta.

É só isso aqui:

<div style="max-width:440px;margin:0 auto;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden">
  <iframe src="https://pluri.tools/embed/pt/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/pt/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>

Essa é a integração inteira. O resto deste guia mostra como encaixar no visual do seu site, como colar em WordPress, Wix ou Notion, e um truque para o iframe nunca aparecer com barra de rolagem.

Por que colocar um metrônomo na sua página

Um metrônomo é daquelas ferramentas que a pessoa procura exatamente no momento em que está lendo o seu conteúdo, nem antes nem depois. Alguns casos em que o widget dentro da página vence um link que manda o leitor embora:

• Páginas de aula. Um professor explicando “treine essa escala a 80 BPM” pode colocar o metrônomo logo abaixo do exercício, já pronto quando o aluno rolar a página até ali.
• Cifras e partituras. Mostre o tempo da música ao lado da cifra para o músico já entrar no andamento certo.
• Rotinas de estudo. Um post sobre ganhar velocidade pode acompanhar cada etapa com a ferramenta que o leitor precisa para praticar.
• Sites de banda e estúdio. Um utilitário simples que mantém a pessoa mais tempo na página e dá um motivo para voltar.

Como o widget vive dentro de um iframe, ele nunca interfere no resto da página. Não lê o seu conteúdo, não muda a URL do seu site e carrega sozinho.

Teste aqui mesmo

Este é exatamente o mesmo snippet do código acima, carregado ao vivo nesta página. Use os botões para ver em claro ou escuro — o código abaixo se atualiza sozinho para combinar. Aperte Iniciar, arraste o tempo ou use o Tap Tempo no ritmo de uma música.

Tudo que você vê acima, incluindo o linkzinho de atribuição, é exatamente o que quem visitar seu site vê assim que você colar o código.

Combine com as cores do seu site

Por padrão o widget segue o tema do sistema do visitante (claro ou escuro). Se a sua página tem um visual fixo, force o tema com o parâmetro theme na URL:

<!-- Sempre escuro -->
<iframe src="https://pluri.tools/embed/pt/metronomo?theme=dark" ...></iframe>

<!-- Sempre claro -->
<iframe src="https://pluri.tools/embed/pt/metronomo?theme=light" ...></iframe>

Para a largura, o container limita o widget em max-width:440px enquanto o iframe preenche com width="100%", assim ele ocupa colunas estreitas no celular sem esticar demais no desktop. Ajuste o max-width do container se o seu layout for mais apertado, e o border-radius dele para combinar com os outros cartões da página.

O widget também existe em 13 idiomas. Troque o pt no caminho pelo idioma que quiser, por exemplo /embed/en/metronome em inglês ou /embed/es/metronomo em espanhol. Cada idioma tem seu próprio slug na URL, então use o que corresponder.

Sem barra de rolagem: deixe o iframe se redimensionar sozinho

O ponto mais chato de qualquer iframe é a altura fixa. Baixa demais e corta os controles; alta demais e sobra espaço vazio. O embed resolve isso avisando a própria altura para a página pai toda vez que ela muda. Basta escutar essa mensagem e ajustar o tamanho do quadro.

Dê um id ao iframe e adicione este script uma vez em qualquer lugar da página:

<iframe
  id="metronomo-embed"
  src="https://pluri.tools/embed/pt/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>

Agora o quadro cresce e encolhe sozinho conforme o conteúdo, sem nunca mostrar barra de rolagem. Se você pular o script, a altura fixa height="600" já é um valor seguro que encaixa o widget inteiro.

Notas por plataforma

A maioria dos construtores de site trata código <iframe> de forma diferente de texto comum. A regra é simples: cole em um bloco de HTML ou embed, nunca no editor visual, que costuma remover iframes.

Plataforma	Onde colar o código
WordPress (editor de blocos)	Adicione um bloco HTML Personalizado e cole o iframe. O editor visual de parágrafo remove o código.
Wix	Adicione o elemento Incorporar HTML (Incorporar um Widget) e cole o código.
Webflow	Arraste um elemento Embed e cole o iframe.
Notion	Cole a URL simples https://pluri.tools/embed/pt/metronomo e escolha Criar incorporação.
Blogger	Vá em HTML na edição da postagem e cole o iframe direto no código.
HTML puro	Cole em qualquer lugar dentro do <body>.

Erros comuns

• Colar no editor de texto rico. Se o widget sumir ao salvar, você usou o bloco errado. Troque para HTML Personalizado ou Código.
• Altura que corta os botões. Os controles de Iniciar e Tap Tempo ficam perto do rodapé. Mantenha a altura em 600 ou mais, ou use o script de redimensionamento automático acima.
• Achar que precisa de mais alguma biblioteca. O widget não precisa de nenhum script extra para funcionar. O único script opcional é o listener de altura.
• Misturar http e https. Sempre incorpore usando https. O código deste guia já usa.

O que o embed inclui

O snippet inclui um pequeno link “Powered by pluri.tools”, logo abaixo do widget, que leva de volta à ferramenta. Esse link é a única coisa que o embed pede em troca, e é assim que o metrônomo continua grátis. Quem quiser a página completa, com os 13 idiomas e URLs de tempo compartilháveis, pode clicar nele.

Perguntas frequentes

É realmente grátis?

Sim. Não precisa de conta, chave de API nem tem limite de uso. O snippet inclui só um link de atribuição, e nada mais.

Vai deixar meu site lento?

O iframe usa loading="lazy", então o navegador só carrega o widget quando ele entra na tela. O widget em si é leve e gera o som com a Web Audio API, sem baixar nenhum arquivo de áudio.

O visitante consegue mudar o tempo, ou é fixo?

É totalmente interativo. Qualquer pessoa vendo sua página pode ajustar o BPM de 20 a 300, trocar o compasso, escolher o som e usar o Tap Tempo. O embed abre em 120 BPM.

Funciona no celular?

Sim. O widget é responsivo e o áudio funciona em iOS e Android. No iOS ele toca pelo alto-falante mesmo com a chave de silêncio ativada, assim que a pessoa apertar Iniciar.

Dá para trocar o idioma?

Sim. Troque o pt na URL por qualquer um dos 13 idiomas disponíveis, usando o slug daquele idioma, por exemplo /embed/fr/metronome em francês ou /embed/ja/metronomu em japonês.