Будування браузерного таймера фокусування з Web Audio API та Picture-in-Picture
https://ift.tt/XhvmD3y
Я створив Pomoria, браузерний таймер фокусування, який поєднує послідовності роботи та перерв, генерацію амбієнтного звуку, нотатки та Picture-in-Picture.
З першого погляду це може здаватися ще одним таймером Помодоро. Але найбільш цікавим для мене виявився не сам зворотний відлік. А створення маленького фокус-оточення прямо всередині браузера.
Більшість додатків Pomodoro базуються на фіксованому циклі 25/5. Це підходить для деяких завдань, але не для всього. Підготовка до іспиту, письмо, кодинг або перегляд великого проекту часто має інший ритм.
Наприклад, навчальна сесія може виглядати так:
налаштування
60-хвилинна спроба
коротка перерва
огляд
виправлення
остудження
Я хотів таймер, де кожен крок може мати власну тривалість, нотатки та звуковий контекст.
Звуковий двигун
Ядро аудіосистеми побудовано за допомогою Web Audio API.
Замість того щоб лише грати фонові аудіофайли, Pomoria генерує та змішує кілька звукових шарів локально у браузері:
білий шум
рожевий шум
бурий шум
обстановка з дощем
бінуральні тони
метрономні звуки
преміум-звукові лупи
Додаток створює AudioContext і будує просту майстер-ланцюг з гейном, еквалайзером, компресором, аналайзером та вихідними вузлами.
Концептуально аудіограф виглядає так:
звукові шари
-> атмосфера / бінуральні / генеративні шляхи
-> майстер-гейн
-> EQ
-> компресор
-> вихідний гейн
-> аналайзер
-> динаміки
Це дозволяє контролювати всю звукову середу з одного місця, водночас кожен шар може поводитися автономно.
Фізика шуму
Білий шум генерується шляхом заповнення аудіобуфера випадковими значеннями.
Рожевий та бурий шум потребують трохи більше формування.
Рожевий шум здається м’якшим та більш збалансованим порівняно з білим шумом. Бурий шум глибший та тепліший. Ця різниця важлива, бо в фокусуючому додатку звук — не просто прикраса. Він впливає на те, наскільки агресивно або спокійно працює середовище.
Я хотів, щоб користувачі могли обирати той вид маскування, який підходить для сесії.
Плавні переходи
Одне з речей, які я швидко зрозумів: різкі зміни звуку відволікають.
Тому зміни гучності заплановані поступово, а не раптово. Для довших лупів звукового ландшафту я також використав крос-фейдінг, щоб повтор не розпочинався помітно заново.
Це дрібна деталь, але вона має велике значення для програми, яка має допомагати людям залишатися сфокусованими.
Picture-in-Picture без реального відео
Ще одна річ, яку я хотів: таймер, який залишається видимим під час роботи в іншій вкладці чи застосунку.
Щоб досягти цього, Pomoria малює інтерфейс таймера на полотні (canvas), перетворює це полотно на джерело відео і відправляє відеоелемент у Picture-in-Picture.
Тож вікно PiP — це не звичайне відео. Це живий перегляд таймера.
Воно може показувати поточний крок, залишок часу, візуальний прогрес та різні стильові варіанти таймера.
Я також під’єднав стан таймера до Media Session API, тож контроль відтворення та паузи може відображати стан сесії.
Чому саме так?
Бо я думаю, що таймер фокусування — це не лише вимірювання часу.
Це також ритм, звук, видимість і потік.
Звичайний таймер запитує: скільки часу залишилося?
Я хотів, щоб Pomoria ставив трохи інше питання: який вид середовища допомагає вам залишатися з роботою?
Ось чому я намагаюся описати його як середовище фокусування, а не лише як таймер Pomodoro.
Що я дізнався
Web Audio API достатньо потужний для легковагого генеративного амбієнсу.
Picture-in-Picture може бути корисним навіть коли застосунок не є відео-застосунком.
Обмеження браузерного автопр play вимушують вас розробляти через взаємодію з користувачем.
Маленькі UX-деталі, як ефекти гасіння та постійна видимість, мають велике значення в інструментах продуктивності.
Таймер стає цікавішим, коли час, звук, нотатки та структура сесії розроблені разом.
Спробуйте
Pomoria живе тут:
Буду радий зворотному зв’язку, особливо щодо аудіоконтролів, досвіду Picture-in-Picture та того, чи має сенс позиціонування як «середовище фокусування».
HI-FI News
через DEV Community: javascript https://ift.tt/I2eNW5c
31 травня 2026 р. о 09:31
May 31, 2026 at 09:31AM
Залишити відповідь