Метроном и тюнер для вашего сайта
Чтобы поставить метроном на свой сайт, выберите параметры ниже, нажмите «Копировать код» и вставьте код в HTML-блок вашей страницы. Тюнер работает так же. Это бесплатно, регистрация не нужна, а в виджете нет рекламы.
Соберите свой виджет
Предпросмотр
Ссылка под виджетом ведёт на MetronoTuner. Её можно убрать, но она помогает проекту оставаться бесплатным.
Как разместить на своём сайте
Скопируйте код в генераторе выше и вставьте его на своей платформе:
WordPress
- Откройте страницу или запись в редакторе.
- Нажмите + и выберите блок «Произвольный HTML».
- Вставьте код и опубликуйте.
Wix
- В редакторе нажмите «Добавить элементы» (+) › «Встроить код» › «Встроить HTML».
- Выберите «Код», вставьте и нажмите «Обновить».
- Увеличьте блок, пока виджет не поместится целиком.
Blogger
- В редакторе записи переключитесь на «Просмотр HTML».
- Вставьте код туда, где должен появиться виджет, и вернитесь в обычный вид.
- Для боковой панели: «Макет» › «Добавить гаджет» › «HTML/JavaScript».
Notion
- Здесь нажмите «Копировать только адрес» (Notion не принимает HTML-код).
- На странице Notion введите /embed и выберите «Embed».
- Вставьте адрес и подтвердите.
HTML
- Вставьте код внутри <body>, в том месте страницы, где должен появиться виджет.
- Виджет занимает доступную ширину, но не больше максимума, указанного в коде.
Для тех, кто предпочитает править код
Адрес виджета принимает эти параметры, одинаковые на всех языках (названия и значения остаются как есть, без перевода):
-
bpm - Темп метронома, от 30 до 250. Пример:
bpm=90 -
compasso - Размер и группировка акцентов. Пример:
compasso=7/8:2+2+3 -
instrumento - Инструмент тюнера (без него тюнер хроматический). Пример:
instrumento=ukulele -
afinacao - Строй инструмента (без него — стандартный). Пример:
afinacao=drop-d -
tema - claro (светлая), escuro (тёмная) или auto (по устройству). Пример:
tema=escuro -
tamanho - compacto показывает только самое важное. Пример:
tamanho=compacto -
fundo - transparente оставляет виден фон вашего сайта. Пример:
fundo=transparente
Полные инструменты
Частые вопросы
Виджет бесплатный?
Да. Его может использовать любой сайт: блог, сайт преподавателя, школы или группы. В виджете нет рекламы, и аккаунт не нужен.
Работает ли он на телефоне?
Да. Виджет подстраивается под ширину экрана и работает в браузерах телефона, планшета и компьютера.
Нужна ли регистрация?
Нет. Нужно только скопировать код и вставить его на сайт: ни аккаунта, ни ключа, ни входа.
Работает ли микрофон внутри виджета?
Да, в тюнере. В коде уже есть allow="microphone", который разрешает микрофон внутри iframe, и при первом запуске браузер спрашивает посетителя, можно ли его использовать. Звук анализируется на устройстве и не записывается и не отправляется. Ваш сайт должен работать по HTTPS; на платформах, которые помещают код в ещё одну рамку, например Wix и Notion, браузер может заблокировать микрофон.
Можно ли изменить цвет?
Вы выбираете светлую, тёмную или автоматическую тему, которая следует за устройством посетителя, и можете сделать фон прозрачным, чтобы виджет слился с вашим сайтом. Цвета кнопок — это цвета MetronoTuner.
Замедляет ли виджет мой сайт?
Нет. Код использует loading="lazy": виджет загружается только тогда, когда приближается к экрану. Звук и анализ микрофона работают на устройстве посетителя.