Kostenloses Metronom in die eigene Website einbetten

Wer einen Musikblog, eine Unterrichtsseite oder eine Seite voller Songtexte betreibt, kann ein funktionierendes Metronom einbinden, ohne es selbst zu bauen. Ein kurzes Code-Snippet kopieren, in die Seite einfügen, fertig ist ein vollständiges Metronom: Tempo von 20 bis 300 BPM, Tap-Tempo, Taktarten und drei Klick-Klänge. Alles läuft direkt im Browser der Besucher, ohne Installation und ohne Konto.

Das ist der gesamte Code.

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

Mehr braucht es nicht. Der Rest dieser Anleitung zeigt, wie es sich ins eigene Design einfügt, wie man es in WordPress, Wix oder Notion einsetzt, und einen Trick, mit dem der iframe nie eine Bildlaufleiste zeigt.

Warum ein Metronom auf der eigenen Seite

Ein Metronom gehört zu den Tools, die Leute genau in dem Moment suchen, in dem sie Ihren Inhalt lesen, nicht davor und nicht danach. Ein paar Fälle, in denen ein eingebettetes Widget besser ist als ein Link, der die Leser wegschickt:

• Unterrichtsseiten. Eine Lehrkraft, die schreibt „übe diese Tonleiter bei 80 BPM”, kann das Metronom direkt unter die Übung setzen, bereit, sobald die Schülerin oder der Schüler dorthin scrollt.
• Songtexte und Noten. Das Tempo eines Stücks direkt neben der Notation zeigen, damit Musiker sofort im richtigen Tempo einsteigen.
• Übungsroutinen. Ein Beitrag über sauberes Tempoaufbauen kann jeden Schritt mit dem passenden Werkzeug verbinden.
• Band- und Studio-Websites. Ein kleines Werkzeug, das Besucher länger auf der Seite hält und ihnen einen Grund gibt wiederzukommen.

Da das Widget in einem iframe lebt, greift es nie in den Rest der Seite ein. Es liest keine Inhalte, ändert nicht die URL der Website und lädt sich selbst.

Gleich hier ausprobieren

Das ist genau das Snippet aus dem Code oben, live auf dieser Seite geladen. Mit den Schaltflächen zwischen hellem und dunklem Design wechseln — der Code darunter wird automatisch angepasst. Auf Start drücken, das Tempo verschieben oder mit Tap-Tempo im Rhythmus eines Songs tippen.

Alles, was Sie oben sehen, einschließlich des kleinen Attributions-Links, ist genau das, was Besucher Ihrer Website sehen, sobald Sie den Code eingefügt haben.

Farben an die eigene Website anpassen

Standardmäßig folgt das Widget dem Systemthema des Besuchers (hell oder dunkel). Wer eine feste Optik hat, erzwingt das Thema über den Parameter theme in der URL:

<!-- Immer dunkel -->
<iframe src="https://pluri.tools/embed/de/metronom?theme=dark" ...></iframe>

<!-- Immer hell -->
<iframe src="https://pluri.tools/embed/de/metronom?theme=light" ...></iframe>

Bei der Breite begrenzt der Container das Widget auf max-width:440px, während der iframe es mit width="100%" ausfüllt, damit es schmale Spalten auf dem Handy füllt, ohne auf dem Desktop unschön breit zu werden. Passen Sie die max-width des Containers an, wenn Ihr Layout enger ist, und seinen border-radius, damit es zu den anderen Elementen passt.

Das Widget gibt es außerdem in 13 Sprachen. Ersetzen Sie das de im Pfad durch die gewünschte Sprache, zum Beispiel /embed/en/metronome für Englisch oder /embed/fr/metronome für Französisch. Jede Sprache hat ihren eigenen Slug in der URL, also den passenden verwenden.

Keine Bildlaufleiste mehr: den iframe automatisch skalieren

Der unangenehmste Punkt bei jedem iframe ist die feste Höhe. Zu niedrig, und Bedienelemente werden abgeschnitten; zu hoch, und es bleibt leerer Platz. Das Embed löst das, indem es seine tatsächliche Höhe bei jeder Änderung an die übergeordnete Seite meldet. Man muss nur auf diese Nachricht hören und den Rahmen entsprechend anpassen.

Dem iframe eine id geben und dieses kleine Skript einmal irgendwo auf der Seite einfügen:

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

Jetzt wächst und schrumpft der Rahmen passend zum Inhalt, ohne dass je eine Bildlaufleiste erscheint. Ohne das Skript ist die feste Höhe height="600" ein sicherer Standardwert, der das komplette Widget fasst.

Hinweise je Plattform

Die meisten Website-Baukästen behandeln <iframe>-Code anders als normalen Text. Die Regel ist einfach: in einen HTML- oder Embed-Block einfügen, nie in den visuellen Editor, der iframes gern entfernt.

Plattform	Wo der Code hinkommt
WordPress (Block-Editor)	Einen Benutzerdefiniertes HTML-Block hinzufügen und den iframe einfügen. Der visuelle Absatz-Editor entfernt ihn sonst.
Wix	Das Element HTML einbetten (Widget einbetten) hinzufügen und den Code einfügen.
Webflow	Ein Embed-Element platzieren und den iframe einfügen.
Notion	Die einfache URL https://pluri.tools/embed/de/metronom einfügen und Einbettung erstellen wählen.
Blogger	In der Beitragsbearbeitung zur HTML-Ansicht wechseln und den iframe direkt in den Code einfügen.
Reines HTML	Irgendwo im <body> einfügen.

Häufige Fehler

• In den Rich-Text-Editor einfügen. Verschwindet das Widget beim Speichern, war es der falsche Block. Auf Benutzerdefiniertes HTML oder Code wechseln.
• Eine Höhe, die Buttons abschneidet. Start und Tap-Tempo liegen nahe am unteren Rand. Höhe mindestens 600 halten oder das Skript zur automatischen Größenanpassung oben verwenden.
• Annehmen, dass eine zusätzliche Bibliothek nötig ist. Das Widget braucht für sich kein weiteres Skript. Das einzige optionale Skript ist der Höhen-Listener.
• http und https mischen. Immer über https einbetten. Der Code in dieser Anleitung tut das bereits.

Was im Embed enthalten ist

Das Snippet enthält einen kleinen Link „Powered by pluri.tools” direkt unter dem Widget, der zurück zum Werkzeug führt. Dieser Link ist alles, was das Embed im Gegenzug verlangt, und dadurch bleibt das Metronom kostenlos. Wer die vollständige Seite mit allen 13 Sprachen und teilbaren Tempo-URLs möchte, kann ihm folgen.

Häufig gestellte Fragen

Ist es wirklich kostenlos?

Ja. Kein Konto, kein API-Schlüssel, kein Nutzungslimit. Das Snippet enthält lediglich einen Attributionslink, sonst nichts.

Wird meine Website dadurch langsamer?

Der iframe nutzt loading="lazy", der Browser lädt ihn also erst, wenn er ins Bild scrollt. Das Widget selbst ist leichtgewichtig und erzeugt den Klang mit der Web Audio API, ohne Audiodateien herunterzuladen.

Können Besucher das Tempo ändern, oder ist es fest?

Es ist voll interaktiv. Jeder, der die Seite betrachtet, kann ein beliebiges BPM von 20 bis 300 einstellen, die Taktart wechseln, den Klang wählen und Tap-Tempo nutzen. Das Embed startet bei 120 BPM.

Funktioniert es auf dem Handy?

Ja. Das Widget ist responsiv, und Audio funktioniert auf iOS und Android. Auf iOS spielt es über den Lautsprecher, selbst wenn der Stummschalter aktiviert ist, sobald man auf Start tippt.

Kann ich die Sprache ändern?

Ja. Das de in der URL durch eine der 13 unterstützten Sprachen ersetzen, mit dem jeweiligen Slug dieser Sprache, zum Beispiel /embed/it/metronomo für Italienisch oder /embed/nl/metronoom für Niederländisch.