tz.md 5.4 KB
Техническое задание
Это одностраничное интерактивное образовательное веб-приложение по физике на тему «Акустоэлектрическое преобразование». Оформлено в стиле старых ЭЛТ-мониторов: тёмный фон, янтарные и золотистые светящиеся элементы, сканлайны, анимации на Canvas.
Что делает проект
Это лендинг с вертикальной прокруткой, по которому пользователь последовательно проходит 6 глав и итоговый блок:
Титульный экран Крупный заголовок, анимированный фон, перечисление всех разделов курса и подсказка о том, что в каждой главе есть интерактив, а текст можно озвучить.
Звук — это колебания воздуха Анимация бегущей звуковой волны от динамика. Внизу экрана ползунок громкости, который в реальном времени меняет амплитуду волны и размер молекул воздуха.
Диафрагма ловит волну Схема колеблющейся мембраны микрофона. По мембране можно кликнуть — она получает механический толчок и затухает, как настоящая.
Катушка в магнитном поле Магнит с полюсами N и S, между ними катушка. Её можно перетаскивать мышью, а стрелка гальванометра реагирует на движение — показывает возникающий ток.
Закон электромагнитной индукции График зависимости ЭДС от времени, формула ε = −dΦ/dt. На экране есть кнопка «Магнит: вкл/выкл» — при выключении ЭДС исчезает.
Электрический сигнал Осциллограмма выходного сигнала микрофона. Ползунок усиления и кнопка «Шум» — сигнал можно усилить или зашумить.
Лаборатория Три режима работы с сигналом: — Генератор: синтез волны заданной частоты, амплитуды, формы и модуляции. — Микрофон: захват звука с микрофона пользователя, визуализация волны и спектра в реальном времени, запись и воспроизведение. — Текст: озвучивание введённой фразы с отображением текста на экране и синхронной волной.
Внизу — спектрограмма-водопад, которая показывает историю частот сигнала, как в звуковых редакторах.
Итоги Список ключевых положений курса и области практического применения акустоэлектрического преобразования.
Техническая реализация
HTML5 + CSS3 + JavaScript (ES2020+) Canvas 2D — анимации волн, мембраны, катушки, графиков, спектрограммы. Есть поддержка HiDPI для чёткой картинки на Retina-экранах. Web Audio API — захват микрофона, анализ сигнала, спектр частот, запись через MediaRecorder. Web Speech API — озвучка текста глав и введённых фраз, с разбиением на короткие предложения и паузами между ними. IntersectionObserver — анимации запускаются только когда секция попадает в область видимости, чтобы не грузить процессор. Обработка мыши и touch-событий — интерактив работает и на телефоне. Всё в одном HTML-файле, без внешних библиотек и зависимостей.
Идея и аудитория
Проект рассчитан на школьников и студентов, изучающих основы акустики и электромагнетизма. Это интерактивный материал, который сочетает теорию, визуализацию физических процессов и живые эксперименты с сигналом. Есть голосовое сопровождение текста и возможность полностью его отключить.
Как запустить
Открыть index.html в браузере.
Для режима «Микрофон» нужен локальный сервер, потому что браузеры блокируют доступ к микрофону со страницы-файла:
python -m http.server 8000
Потом открыть http://localhost:8000