Jak osadzić widgety muzyczne na swojej stronie: rozmiary, ustawienia i pomysły dla nauczycieli

Strona szkoły muzycznej ma zwykle zakładkę, do której nikt nie wraca: „materiały”, „dla uczniów”, „ćwiczenie w domu”. Widgety eMusic Tools robią z niej coś, z czego uczeń naprawdę korzysta. Jest ich dwanaście (metronom, stroik, koło kwintowe, pętla perkusji, quiz z interwałów i inne), a każdy trafia na stronę jako jeden iframe z małym linkiem pod spodem. Nie trzeba niczego instalować, a konto nie jest potrzebne ani Tobie, ani uczniom.

Góra strony z widgetami eMusic Tools: nagłówek, cztery obietnice (jeden iframe, działa na telefonie, jasny i ciemny motyw, trzy języki) i działający metronom po prawej

Ten poradnik jest dla dwóch osób. Jeśli budujesz albo prowadzisz stronę, dla Ciebie są części o fragmencie kodu i jego ustawieniach. Jeśli uczysz, przejdź od razu do pomysłów na stronę dla uczniów, a potem wróć do instrukcji dla swojej platformy.

Najpierw wypróbuj

To metronom w rozmiarze M, działający na tej stronie z tego samego fragmentu, który wklejasz u siebie. Inne jest tylko tempo: adres ustawia je na 80. Naciśnij Start.

Co wklejasz

Na stronie z widgetami wybierasz kartę i rozmiar, a kod pojawia się obok podglądu, który ładuje dokładnie ten sam adres. Dla metronomu w rozmiarze M strona daje dziś taki fragment:

<!-- eMusic Tools · metronome -->
<iframe src="https://emusic.tools/embed/metronome?v=1&lang=pl&theme=auto&size=m"
  title="Darmowy metronom online" width="100%" height="220"
  style="max-width:560px;border:0;border-radius:12px"
  loading="lazy" allow="autoplay"></iframe>
<p style="margin:6px 0 0;font:12px/1.4 system-ui,sans-serif">
  <a href="https://emusic.tools/pl/tools/metronome?utm_source=embed&utm_medium=widget&utm_campaign=metronome">Darmowy metronom online</a>
  od <a href="https://emusic.tools/?utm_source=embed&utm_medium=widget">eMusic Tools</a>
</p>

Po kolei:

Iframe zajmuje całą szerokość kolumny (width="100%") i przestaje rosnąć na wartości max-width ze stylu. Dzięki temu mała karta nie rozciąga się w kafelek z dziurą w środku.
Wysokość jest stała, bo nie ma skryptu, który zmieniałby rozmiar ramki. Każda karta w każdym rozmiarze ma zmierzoną wysokość, w której mieści się od wąskiej do szerokiej kolumny. Pełna lista jest w tabeli niżej.
loading="lazy" sprawia, że ramka ładuje się dopiero, gdy czytelnik do niej przewinie. Widget na dole długiej strony nic nie kosztuje na starcie.
allow mówi, czego karta może używać: autoplay do dźwięku, a stroik dodatkowo microphone.
Link pod ramką to jedyne, o co widget prosi. Link wewnątrz iframe'a nie liczy się dla wyszukiwarek jako link, więc widget wskazuje na eMusic Tools tylko przez zwykłe <a> na Twojej stronie. Nie ma w nim nofollow, a jego tekst to nazwa narzędzia, nie fraza pod pozycjonowanie.

Sekcja osadzania na stronie z widgetami: trzy kroki, rząd dwunastu przycisków z widgetami, przełącznik rozmiaru S, M, L z wysokościami, kod po lewej i podgląd na makiecie strony lekcji po prawej

Wybierz rozmiar: S, M albo L

Rozmiar decyduje o tym, ile narzędzia mieści się w karcie. Układ to osobna sprawa: każda karta przestawia się pod szerokość, jaką dostaje, więc ta sama karta M działa w dwóch kolumnach na laptopie i na całą szerokość telefonu.

Cztery szkice karty: S kafelek, M rdzeń, L konsola, XL narzędzie, każdy opisany jednym zdaniem

S, kafelek. Główny przycisk i odczyt. Pasuje do paska bocznego albo wąskiej kolumny.
M, rdzeń. Przycisk plus dwie regulacje, bez których narzędzie się nie obejdzie. To rozmiar domyślny i ten, którego chce większość kolumn z tekstem.
L, konsola. Całe narzędzie poza zapisem i eksportem: nieparzyste metra i brzmienia metronomu, szesnaście kroków pętli perkusji, pięćdziesiąt jeden progresji podkładu.
XL to konsola z pełnej strony narzędzia. Strona z widgetami nie daje do niej fragmentu, bo nie zmieści się w kolumnie bloga. Wyjątkiem jest metronom: wpisz w jego adresie size=xl, a w ramce pojawi się jego własna konsola. Tabela niżej kończy się na L, więc wysokość tej ramki ustaw sam. Każda inna karta poproszona o XL pokaże swoje L.

Tak wygląda metronom we wszystkich trzech rozmiarach, na szerokości, jaką dałaby mu typowa strona:

Widget metronomu w rozmiarze S: 120 BPM, przyciski minus i plus oraz Start

Widget metronomu w rozmiarze M: tempo, przycisk Start, suwak tempa, minus, plus i wystukiwanie

Widget metronomu w rozmiarze L: tempo, Start, suwak, wystukiwanie, rząd metrów od 2/4 do 12/8 i panel Dźwięk

Do tego kilka innych kart. Akord dnia w rozmiarze S zmienia się codziennie i gra po dotknięciu. Stroik w M dokłada instrument, strój i dźwięk wzorcowy każdej struny. Koło kwintowe w M pokazuje dźwięki tonacji i gra kadencję I, IV, V, I. Pętla perkusji w L otwiera całą siatkę szesnastu kroków, cztery zestawy i swing.

Widget Akord dnia w rozmiarze S: akord C-dur na małej klawiaturze z przyciskiem odtwarzania

Widget stroika w rozmiarze M: wskazówka, przycisk Słuchaj, wybór instrumentu i stroju oraz sześć przycisków strun

Widget koła kwintowego w rozmiarze M: koło z zaznaczonym C-dur, dźwięki tonacji i kadencja z czterech akordów

Widget pętli perkusji w rozmiarze L: Graj, tempo, wzór Backbeat i siatka szesnastu kroków dla hi-hatu, klaskania, werbla i stopy

Wysokości ramek dla każdego widgetu

Fragment kodu ma już właściwą wysokość. Tabela przyda się tylko wtedy, gdy kreator strony pyta o wysokość osobno, jak Wix.

Widget	S	M	L
Metronom	200	220	320
Stroik	320	490	580
Nazwij interwał	290	360	430
Przeczytaj nutę	250	340	470
Akord dnia	280	340	650
Koło kwintowe	400	580	710
Skala dnia	300	390	820
Pętla perkusji	280	370	510
Pady perkusyjne	220	350	560
Podkład	230	310	510
Progresja	250	350	540
Wystukaj tempo	220	290	590

Wszystkie wartości są w pikselach. Każda to największa wysokość, jaką karta osiąga przy szerokości od 240 do 640 px, zwykle w wąskiej kolumnie, więc na szerokiej stronie karta L może zostawić pod sobą trochę pustego miejsca. Tak ma być.

Ustawienia w adresie

Wszystko, czego ramka potrzebuje, jest w jej src, bo karta na cudzej stronie nie ma konta ani ciasteczka, w którym mogłaby coś zapamiętać. Te wartości możesz zmienić ręcznie:

lang: pl, en albo es. Za nim idą słowa na karcie i nazwy dźwięków, więc przy pl koło kwintowe pisze H i Fis. Każda inna wartość daje wersję angielską.
theme: auto idzie za ustawieniem systemu odwiedzającego, a light albo dark ustawia motyw na stałe, pod Twoją stronę. Własnej palety kolorów nie ma.
size: s, m albo l. Jeśli go zmieniasz, zmień też height według tabeli wyżej.
bpm, tylko w metronomie: liczba całkowita od 30 do 300. Błędna wartość (bpm=abc) daje metronom na 120, a nie stronę błędu.
v=1 to wersja fragmentu. Zostaw ją bez zmian.

Wolny metronom do ćwiczenia, po hiszpańsku, na ciemnej stronie zaczyna się więc tak:

https://emusic.tools/embed/metronome?v=1&lang=es&theme=dark&size=m&bpm=60

Jak dodać widget na swojej platformie

WordPress: dodaj blok „Własny HTML” tam, gdzie ma stanąć widget, wklej fragment i podejrzyj stronę. Blok zostawia iframe i link bez zmian.
Squarespace: przeciągnij blok kodu, przełącz go na HTML i wklej.
Wix: w panelu „Dodaj” wybierz „Osadź kod” (HTML iframe) i wklej fragment jako kod. Wix pyta o wysokość, więc wpisz liczbę z atrybutu height.
Ghost: dodaj kartę HTML do wpisu albo strony i wklej.
Blogger: przełącz edytor wpisu na widok HTML, wklej, potem wróć do widoku „Pisz”.
Google Sites i Notion: oba osadzają po adresie, nie po wklejonym HTML-u. Użyj samego adresu z src i pomiń link, bo żaden z nich nie pozwala postawić zwykłego HTML-a obok osadzenia. Znak wodny w ramce i tak pokaże czytelnikowi, skąd jest widget.
Zwykły HTML: wklej fragment wewnątrz <body>.

Uwagi dla programistów

Karty są zbudowane na container queries i trzymają się do około 220 px. Poniżej robi się ciasno, więc nie wciskaj karty L do paska bocznego.
Nic nie gra przy wczytaniu strony. Dźwięk rusza, gdy czytelnik dotknie karty, bo wcześniej przeglądarki mobilne na to nie pozwalają.
Fragment stroika ma allow="microphone", więc przeglądarka pyta czytelnika o zgodę przy pierwszym dotknięciu „Słuchaj”. Jeśli Twój CMS wytnie ten atrybut, stroik powie, że nie ma mikrofonu, zamiast milczeć.
Ramka nie ustawia ciasteczek i nie korzysta z localStorage. Zapisujemy tylko, że widget uruchomiono na danej domenie, z zahaszowanym IP zamiast jawnego, żeby wiedzieć, które strony go używają.
Adres zawsze serwuje aktualną wersję, więc poprawki trafiają na Twoją stronę bez edytowania czegokolwiek. Warunki obiecują 30 dni uprzedzenia, zanim widget zostanie zmieniony albo wycofany.
Każda ramka to osobna mała strona. Dzięki loading="lazy" ładują się tylko te na ekranie, ale strona z dwunastoma to nadal dwanaście dokumentów, więc wybierz te, których czytelnicy naprawdę potrzebują.

Pomysły dla nauczycieli muzyki

Nie musisz znać HTML-a poza kopiuj i wklej. Na stronie nauczyciela albo szkoły sprawdza się to:

Strona „ćwiczenie w domu” z metronomem i stroikiem, oba w rozmiarze M. Uczeń stroi instrument przed ćwiczeniem i gra utwór na ten tydzień w tempie ustawionym w adresie, na przykład bpm=72.
„Nazwij interwał” i „Przeczytaj nutę” nadają się na krótką rozgrzewkę słuchu i czytania nut. W rozmiarze L karta interwałów pozwala wybrać poziom trudności i kierunek, a karta nut otwiera klucz, osiem tonacji i linie dodane.
Koło kwintowe dobrze stoi obok notatek o znakach przykluczowych, a skala dnia przy temacie o skalach kościelnych. Dotknięcie tonacji na kole obraca je do niej, a przyciski akordów tej tonacji grają po dotknięciu.
Podkład daje uczniom coś do grania: kręci pętlę akordów, basu i perkusji w dowolnej tonacji. W rozmiarze L otwiera pięćdziesiąt jeden progresji, w tym dwunastotaktowego bluesa i II V I, więc jest na czym ćwiczyć improwizację.
W klasie perkusji przyda się pętla perkusji w L, czyli siatka szesnastu kroków ze swingiem, a „Wystukaj tempo” pomaga uczniowi znaleźć tempo nagrania.

Strona szkoły na Google Sites przyjmie tylko adres, więc skopiuj część src z fragmentu. Uczniowie otwierają stronę na telefonie, dotykają i działa, bez logowania.

Galeria widgetów w rozmiarze M: filtry Ćwicz, Odkrywaj, Twórz i Przydatne oraz karty metronomu, stroika, interwałów, czytania nut, akordu dnia i koła kwintowego, każda z przyciskiem Osadź

Warunki w skrócie

Każdy widget możesz osadzić na dowolnej stronie, prywatnej albo komercyjnej, za darmo. Znak wodny w ramce i link pod nią zostają: to cena darmowego narzędzia. Ramka ma motyw jasny i ciemny i nic więcej do przestylowania, bo Twój CSS nie sięga do wnętrza iframe'a.

Wybierz kartę, rozmiar i język na stronie z widgetami, sprawdź ją w podglądzie i skopiuj fragment.