Jak Osadzić Darmowy Metronom na Swojej Stronie
Jeśli prowadzisz bloga muzycznego, stronę z lekcjami prywatnymi albo stronę pełną tabulatur, możesz dodać działający metronom bez pisania niczego od zera. Skopiuj mały fragment kodu, wklej go na stronę, a pojawi się pełny metronom: tempo od 20 do 300 BPM, tap tempo, wybór metrum i trzy dźwięki kliknięcia. Wszystko działa bezpośrednio w przeglądarce odwiedzającego, bez instalacji i bez zakładania konta.
Oto cały potrzebny kod.
<div style="max-width:440px;margin:0 auto;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden">
<iframe src="https://pluri.tools/embed/pl/metronom" title="Metronom — pluri.tools" width="100%" height="600" style="border:0;display:block;width:100%" loading="lazy"></iframe>
<a href="https://pluri.tools/pl/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>To cała integracja. Reszta tego poradnika pokazuje, jak dopasować widget do własnego designu, jak wkleić go w WordPressie, Wix czy Notion, oraz jak sprawić, żeby iframe nigdy nie pokazywał paska przewijania.
Dlaczego warto umieścić metronom na stronie
Metronom to jedno z tych narzędzi, których ludzie szukają dokładnie w momencie, gdy czytają Twoje treści, nie wcześniej i nie później. Kilka sytuacji, w których osadzony widget wygrywa z linkiem wysyłającym czytelnika gdzie indziej:
- Strony z lekcjami. Nauczyciel piszący “poćwicz tę skalę w tempie 80 BPM” może umieścić metronom tuż pod ćwiczeniem, gotowy, gdy uczeń tam dotrze.
- Tabulatury i nuty. Pokaż tempo utworu obok zapisu nutowego, żeby muzyk od razu wszedł we właściwym tempie.
- Rutyny ćwiczeniowe. Artykuł o budowaniu szybkości może przy każdym kroku pokazywać narzędzie potrzebne do ćwiczenia.
- Strony zespołów i studiów. Małe narzędzie, które zatrzymuje odwiedzających na stronie dłużej i daje im powód, żeby wrócić.
Ponieważ widget żyje wewnątrz iframe, nigdy nie ingeruje w resztę strony. Nie czyta Twoich treści, nie zmienia adresu URL Twojej witryny i ładuje się samodzielnie.
Wypróbuj tutaj
To dokładnie ten sam snippet co kod powyżej, wczytany na żywo na tej stronie. Użyj przycisków, aby zobaczyć go w jasnym lub ciemnym motywie — kod poniżej dopasuje się automatycznie. Naciśnij Start, przeciągnij tempo albo użyj Tap Tempo w rytm piosenki.
Powered by pluri.tools
Wszystko, co widzisz powyżej, łącznie z niewielkim linkiem atrybucyjnym, to dokładnie to, co zobaczy odwiedzający Twoją stronę, gdy tylko wkleisz kod.
Dopasuj kolory do swojej strony
Domyślnie widget podąża za motywem systemowym odwiedzającego (jasnym lub ciemnym). Jeśli Twoja strona ma stały wygląd, wymuś motyw parametrem theme w adresie URL:
<!-- Zawsze ciemny -->
<iframe src="https://pluri.tools/embed/pl/metronom?theme=dark" ...></iframe>
<!-- Zawsze jasny -->
<iframe src="https://pluri.tools/embed/pl/metronom?theme=light" ...></iframe>Jeśli chodzi o szerokość, kontener ogranicza widget do max-width:440px, a iframe wypełnia go dzięki width="100%", dzięki czemu wypełnia wąskie kolumny na telefonie, ale nie rozciąga się dziwnie na komputerze. Zmień max-width kontenera, jeśli Twój układ jest węższy, oraz jego border-radius, żeby dopasować widget do innych kart na stronie.
Widget jest też dostępny w 13 językach. Zamień pl w ścieżce na wybrany język, na przykład /embed/en/metronome dla angielskiego albo /embed/de/metronom dla niemieckiego. Każdy język ma własny slug w adresie URL, więc użyj tego właściwego.
Koniec z paskiem przewijania: pozwól iframe samodzielnie zmieniać rozmiar
Najbardziej uciążliwą cechą każdego iframe jest stała wysokość. Za niska, i przycina elementy sterujące; za wysoka, i zostaje puste miejsce. Osadzenie rozwiązuje to, zgłaszając swoją rzeczywistą wysokość do strony nadrzędnej przy każdej zmianie. Wystarczy nasłuchiwać tej wiadomości i dopasować rozmiar ramki.
Nadaj iframe atrybut id i dodaj ten krótki skrypt raz, w dowolnym miejscu strony:
<iframe
id="metronom-embed"
src="https://pluri.tools/embed/pl/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>Teraz ramka rośnie i kurczy się samodzielnie zgodnie z zawartością, nigdy nie pokazując paska przewijania. Jeśli pominiesz skrypt, stała wysokość height="600" to bezpieczna wartość domyślna, mieszcząca cały widget.
Uwagi dla poszczególnych platform
Większość kreatorów stron traktuje kod <iframe> inaczej niż zwykły tekst. Zasada jest prosta: wklej go w blok HTML lub osadzania, nigdy w edytor wizualny, który zwykle usuwa iframe’y.
| Platforma | Gdzie wkleić kod |
|---|---|
| WordPress (edytor blokowy) | Dodaj blok Niestandardowy HTML i wklej iframe. Wizualny edytor akapitu go usunie. |
| Wix | Dodaj element Osadź HTML (Osadź widget) i wklej kod. |
| Webflow | Przeciągnij element Embed i wklej iframe. |
| Notion | Wklej sam adres URL https://pluri.tools/embed/pl/metronom i wybierz Utwórz osadzenie. |
| Blogger | Przełącz edycję wpisu na widok HTML i wklej iframe bezpośrednio w kodzie. |
| Czysty HTML | Wklej go w dowolnym miejscu wewnątrz <body>. |
Częste błędy
- Wklejanie w edytorze tekstu sformatowanego. Jeśli widget znika po zapisaniu, użyto złego bloku. Przełącz się na Niestandardowy HTML lub Kod.
- Wysokość, która przycina przyciski. Przyciski Start i Tap Tempo znajdują się blisko dołu. Utrzymuj wysokość co najmniej 600 albo użyj powyższego skryptu automatycznego skalowania.
- Założenie, że potrzebna jest dodatkowa biblioteka. Widget nie potrzebuje żadnego dodatkowego skryptu, żeby działać. Jedynym opcjonalnym skryptem jest nasłuchiwacz wysokości.
- Mieszanie http i https. Zawsze osadzaj przez
https. Kod w tym poradniku już go używa.
Co zawiera osadzenie
Snippet zawiera mały link “Powered by pluri.tools”, tuż pod widgetem, prowadzący z powrotem do narzędzia. Ten link to jedyne, o co prosi osadzenie w zamian, i dzięki niemu metronom pozostaje darmowy. Kto chce pełną stronę, ze wszystkimi 13 językami i możliwymi do udostępnienia adresami tempa, może w niego kliknąć.
Najczęściej zadawane pytania
Czy to naprawdę darmowe?
Tak. Nie potrzeba konta, klucza API ani nie ma limitu użycia. Snippet zawiera jedynie link atrybucyjny, nic więcej.
Czy to spowolni moją stronę?
Iframe używa loading="lazy", więc przeglądarka ładuje go dopiero, gdy pojawi się na ekranie. Sam widget jest lekki i generuje dźwięk za pomocą Web Audio API, bez pobierania jakichkolwiek plików audio.
Czy odwiedzający mogą zmienić tempo, czy jest ono stałe?
Jest w pełni interaktywny. Każdy, kto ogląda Twoją stronę, może ustawić dowolne BPM od 20 do 300, zmienić metrum, wybrać dźwięk i użyć Tap Tempo. Osadzenie otwiera się przy 120 BPM.
Czy działa na telefonie?
Tak. Widget jest responsywny, a dźwięk działa na iOS i Androidzie. Na iOS gra przez głośnik nawet przy włączonym przełączniku wyciszenia, gdy tylko ktoś naciśnie Start.
Czy mogę zmienić język?
Tak. Zamień pl w adresie URL na jeden z 13 obsługiwanych języków, używając slugu tego języka, na przykład /embed/sv/metronom dla szwedzkiego albo /embed/da/metronom dla duńskiego.