Comment Intégrer un Métronome Gratuit sur Votre Site

Si vous tenez un blog musical, un site de cours particuliers ou une page pleine de tablatures, vous pouvez ajouter un métronome fonctionnel sans écrire une ligne de code. Copiez un petit extrait de code, collez-le sur votre page, et un métronome complet apparaît : tempo de 20 à 300 BPM, tap tempo, choix de la mesure et trois sons de click. Tout tourne directement dans le navigateur du visiteur, sans rien installer ni créer de compte.

Voici l’intégralité du code.

<div style="max-width:440px;margin:0 auto;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden">
  <iframe src="https://pluri.tools/embed/fr/metronome" title="Métronome — pluri.tools" width="100%" height="600" style="border:0;display:block;width:100%" loading="lazy"></iframe>
  <a href="https://pluri.tools/fr/metronome/" 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>

C’est toute l’intégration. Le reste de ce guide explique comment l’adapter à votre design, comment le coller dans WordPress, Wix ou Notion, et une astuce pour que l’iframe n’affiche jamais de barre de défilement.

Pourquoi mettre un métronome sur votre page

Un métronome fait partie de ces outils que l’on cherche précisément au moment où l’on lit votre contenu, ni avant ni après. Quelques cas où un widget intégré vaut mieux qu’un lien qui envoie le lecteur ailleurs :

• Pages de cours. Un professeur qui explique « travaillez cette gamme à 80 BPM » peut placer le métronome juste sous l’exercice, prêt dès que l’élève arrive à cet endroit.
• Tablatures et partitions. Affichez le tempo du morceau à côté de la notation pour que le musicien démarre directement au bon rythme.
• Routines de pratique. Un article sur la montée en vitesse peut associer à chaque étape l’outil dont le lecteur a besoin pour la travailler.
• Sites de groupes et de studios. Un petit utilitaire qui garde les visiteurs plus longtemps sur votre page et leur donne une raison d’y revenir.

Comme le widget vit dans un iframe, il n’interfère jamais avec le reste de votre page. Il ne lit pas votre contenu, ne change pas l’URL de votre site et se charge tout seul.

Essayez-le ici même

C’est exactement le même snippet que le code ci-dessus, chargé en direct sur cette page. Utilisez les boutons pour le voir en clair ou en sombre : le code ci-dessous s’ajuste en conséquence. Appuyez sur Démarrer, faites glisser le tempo ou utilisez le Tap Tempo au rythme d’une chanson.

Tout ce que vous voyez ci-dessus, y compris le petit lien d’attribution, c’est exactement ce que verra un visiteur de votre site dès que vous aurez collé le code.

Adaptez les couleurs à votre site

Par défaut, le widget suit le thème système du visiteur (clair ou sombre). Si votre page a un style fixe, forcez le thème avec le paramètre theme dans l’URL :

<!-- Toujours sombre -->
<iframe src="https://pluri.tools/embed/fr/metronome?theme=dark" ...></iframe>

<!-- Toujours clair -->
<iframe src="https://pluri.tools/embed/fr/metronome?theme=light" ...></iframe>

Pour la largeur, le conteneur limite le widget à max-width:440px tandis que l’iframe le remplit avec width="100%", afin qu’il remplisse les colonnes étroites sur mobile sans s’étirer bizarrement sur ordinateur. Ajustez le max-width du conteneur si votre mise en page est plus resserrée, et son border-radius pour l’accorder à vos autres blocs.

Le widget existe aussi en 13 langues. Remplacez le fr dans le chemin par la langue voulue, par exemple /embed/en/metronome en anglais ou /embed/de/metronom en allemand. Chaque langue a son propre slug dans l’URL, utilisez donc celui qui correspond.

Fini la barre de défilement : redimensionnez l’iframe automatiquement

Le point le plus délicat de tout iframe est la hauteur fixe. Trop basse, elle coupe les contrôles ; trop haute, elle laisse un espace vide. L’intégration résout ce problème en signalant sa hauteur réelle à la page parente à chaque changement. Il suffit d’écouter ce message et d’ajuster la taille du cadre.

Donnez un id à l’iframe, puis ajoutez ce petit script une seule fois n’importe où sur votre page :

<iframe
  id="metronome-embed"
  src="https://pluri.tools/embed/fr/metronome"
  title="Métronome — 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('metronome-embed')
      if (frame) frame.style.height = event.data.height + 'px'
    }
  })
</script>

Le cadre grandit et rétrécit désormais tout seul selon son contenu, sans jamais afficher de barre de défilement. Si vous ignorez ce script, la hauteur fixe height="600" reste une valeur sûre qui contient tout le widget.

Notes par plateforme

La plupart des créateurs de site traitent le code <iframe> différemment du texte ordinaire. La règle est simple : collez-le dans un bloc HTML ou d’intégration, jamais dans l’éditeur visuel, qui a tendance à supprimer les iframes.

Plateforme	Où coller le code
WordPress (éditeur de blocs)	Ajoutez un bloc HTML personnalisé et collez l’iframe. L’éditeur de paragraphe visuel le supprime.
Wix	Ajoutez l’élément Intégrer du HTML (Intégrer un widget), puis collez le code.
Webflow	Placez un élément Embed et collez l’iframe.
Notion	Collez l’URL simple https://pluri.tools/embed/fr/metronome et choisissez Créer l’intégration.
Blogger	Passez en vue HTML de l’article et collez l’iframe directement dans le code.
HTML brut	Collez-le n’importe où dans le <body>.

Erreurs fréquentes

• Coller dans l’éditeur de texte enrichi. Si le widget disparaît à l’enregistrement, c’est le mauvais bloc. Passez à HTML personnalisé ou Code.
• Une hauteur qui coupe les boutons. Les commandes Démarrer et Tap Tempo se trouvent près du bas. Gardez une hauteur de 600 minimum, ou utilisez le script de redimensionnement automatique ci-dessus.
• Penser qu’une bibliothèque est nécessaire. Le widget n’a besoin d’aucun script supplémentaire pour fonctionner. Le seul script optionnel est celui qui écoute la hauteur.
• Mélanger http et https. Intégrez toujours en https. Le code de ce guide l’utilise déjà.

Ce que l’intégration inclut

Le snippet inclut un petit lien « Powered by pluri.tools », juste sous le widget, qui renvoie vers l’outil. Ce lien est la seule chose que l’intégration demande en retour, et c’est ainsi que le métronome reste gratuit. Les visiteurs qui veulent la page complète, avec les 13 langues et des URL de tempo partageables, peuvent le suivre.

Questions fréquentes

Est-ce vraiment gratuit ?

Oui. Aucun compte, aucune clé d’API, aucune limite d’utilisation. Le snippet inclut uniquement un lien d’attribution, rien de plus.

Cela va-t-il ralentir mon site ?

L’iframe utilise loading="lazy", donc le navigateur ne le charge que lorsqu’il entre dans l’écran. Le widget lui-même est léger et génère le son via la Web Audio API, sans aucun fichier audio à télécharger.

Les visiteurs peuvent-ils changer le tempo, ou est-il fixe ?

Il est entièrement interactif. Toute personne consultant votre page peut régler n’importe quel BPM de 20 à 300, changer la mesure, choisir le son et utiliser le Tap Tempo. L’intégration s’ouvre à 120 BPM.

Fonctionne-t-il sur mobile ?

Oui. Le widget est responsive et l’audio fonctionne sur iOS et Android. Sur iOS, il joue par le haut-parleur même avec l’interrupteur silencieux activé, dès que la personne appuie sur Démarrer.

Puis-je changer la langue ?

Oui. Remplacez le fr de l’URL par l’une des 13 langues prises en charge, en utilisant le slug de cette langue, par exemple /embed/es/metronomo en espagnol ou /embed/ja/metronomu en japonais.