Увидеть звук

## Звук становится видимым — промпт для продакшена

Создайте **«Звук становится видимым»** — проработанный интерактивный научный проект для широкой аудитории на базе **Three.js**. Превратите звук в красивые отзывчивые 3D-формы, которые сможет изучать любой человек без музыкальной или научной подготовки. Подготовьте **развёрнутый сайт** и **кинематографичное демонстрационное видео MP4**.

Проект должен напоминать интерактивный научный музей высокого уровня: впечатляющий визуально, понятный с первого взгляда, увлекательный и научно достоверный. Рассчитайте его на широкую аудиторию пользователей настольных компьютеров и мобильных устройств.

### ПЕРВОЕ ВПЕЧАТЛЕНИЕ

Начните со светящейся, медленно движущейся звуковой скульптуры на фоне глубокого полуночно-синего неба. Используйте тёплую типографику цвета слоновой кости, электрический циан, фиолетовый и сдержанные коралловые акценты. Сохраните элегантную композицию и минималистичный интерфейс.

Покажите заголовок **«Узнайте, на что способен звук».** Предложите три понятных варианта:

- **Включить звук** — сразу запустить подобранный аудиопример и его визуализацию.
- **Использовать микрофон** — визуализировать голос пользователя или окружающие звуки.
- **Загрузить аудио** — изучить локальный аудиофайл.

Позвольте посетителям получить впечатляющий результат одним нажатием. Добавьте встроенные примеры, чтобы доступ к микрофону и загрузка файлов были необязательными. Перед воспроизведением запускайте чётко обозначенный бесшумный предпросмотр.

### ТРИ СПОСОБА ИССЛЕДОВАТЬ

**1. Звуковая скульптура — художественная визуализация аудио**

Создайте скульптурное поле из частиц и плавных лент, которое мягко реагирует на анализ аудио в реальном времени. Свяжите низкие частоты с широкими движениями, средние — со структурными деталями, а высокие — с тонкими мерцающими акцентами. Громкость должна влиять на масштаб и энергию без резких скачков.

Речь, хлопки, напевание и музыка должны давать заметно разные реакции. Обозначьте этот режим как художественную интерпретацию звука.

**2. Исследователь волны — понять сигнал**

Покажите анимированную форму волны рядом с частотным спектром, при необходимости добавив пространственное представление. Объясните просто: форма волны показывает, как сигнал меняется во времени; спектр показывает его частотный состав.

Добавьте интерактивный генератор тона с чётко подписанными регуляторами частоты и громкости. Пользователи должны иметь возможность сравнить чистый тон с более насыщенным и увидеть разницу. Используйте умеренную громкость по умолчанию, плавные аудиопереходы и заметную кнопку остановки. Объясните, что визуальная амплитуда отражает уровень входного сигнала, а не откалиброванную физическую громкость.

**3. Резонансные узоры — исследовать колебания**

Покажите виртуальную вибрирующую пластину с похожими на песок частицами, образующими узловые узоры. Реализуйте несколько тщательно проработанных режимов вибрации, которые пользователи смогут исследовать, меняя частоту возбуждения.

Основывайте узоры на документированной модели пластины с заданной геометрией и граничными условиями. Объясните, что частицы скапливаются в областях минимальной вибрации. Обозначьте проект как образовательную симуляцию и опишите её упрощения. Визуально отделите декоративные эффекты от научной модели.

### СДЕЛАЙТЕ ИССЛЕДОВАНИЕ ПРОСТЫМ

Предлагайте короткие контекстные подсказки, например **«Попробуйте напевать ровный звук», «Хлопните один раз»** и **«Сравните низкий и высокий тон».** Каждая из них должна сопровождаться мгновенно заметной реакцией.

Держите расширенные элементы управления свёрнутыми. Добавьте управление паузой, сбросом, полноэкранным режимом, чувствительностью и интенсивностью движения. При переключении режимов сохраняйте понятные состояния источника аудио и воспроизведения. Дайте краткое доступное объяснение для каждого режима, не закрывая сцену.

### АУДИО И КОНФИДЕНЦИАЛЬНОСТЬ

Используйте **Web Audio API** для воспроизведения и анализа, со стабильным сглаживанием и разумной нормализацией. Запрашивайте доступ к микрофону только после выбора пользователем этого варианта. Обрабатывайте вход микрофона и загруженные файлы локально; не загружайте, не храните и не передавайте аудио пользователей. Оформите все три режима в теме полярного сияния: добавьте на полуночно-синий фон медленно дрейфующий зелёно-фиолетовый градиент сияния, перекрасьте частицы и ленты звуковой скульптуры в бирюзовый и фиолетовый, а частицам резонансных узоров придайте слабое холодное свечение. Сохраните текст цвета слоновой кости, уменьшите общую яркость, чтобы создать настроение наблюдения за ночным небом, и не меняйте взаимодействия. Показывайте постоянный индикатор микрофона и понятную кнопку **«Отключить микрофон»**, которая освобождает микрофон. Отключите мониторинг микрофона через динамики, чтобы предотвратить обратную связь. Корректно обрабатывайте отказ в разрешении, недоступные устройства, неподдерживаемые файлы, тишину и прерванное аудио.

Используйте проверенное встроенное аудио CC0 или аудио с подходящей лицензией и приложите реестр лицензий на ресурсы.

### ВИЗУАЛЬНОЕ И ТЕХНИЧЕСКОЕ КАЧЕСТВО

Используйте качественный рендеринг частиц, убедительную глубину, контролируемое свечение, плавную анимацию и сдержанное движение камеры. Сохраняйте чёткость текста и читаемость элементов управления. Избегайте агрессивного мерцания и избыточного визуального шума.

Создайте поддерживаемое приложение Three.js с эффективными для GPU геометрией и шейдерами, повторно используемыми буферами, ограниченной плотностью пикселей, адаптивным количеством частиц и настройками качества. Анализируйте аудио локально, чтобы одновременные посетители не требовали серверной обработки аудио. Размещайте оптимизированные статические ресурсы в хостинге, совместимом с CDN.

Обеспечьте плавную работу на настольных компьютерах и приемлемую производительность на смартфонах среднего класса. Измерьте фактическую частоту кадров, использование памяти и поведение загрузки на тестируемых устройствах. При скрытии страницы приостанавливайте ненужный рендеринг и корректно освобождайте аудио- и GPU-ресурсы.

Поддерживайте сенсорное управление, навигацию с клавиатуры, видимые состояния фокуса, элементы управления, доступные для программ чтения с экрана, и уменьшенное движение. Предусмотрите лёгкий 2D-резервный вариант, если WebGL недоступен. Убедитесь, что ключевая информация понятна не только по цвету или аудио.

### РЕЗУЛЬТАТЫ

Разверните готовый сайт по работающему публичному **HTTPS URL**.

Подготовьте скачиваемое **30–45-секундное видео H.264 MP4 в разрешении 1920 × 1080** с синхронизированным лицензированным аудио, отрендеренное из самого приложения. Покажите, как чистый тон становится формой волны, как более насыщенный звук преобразует скульптуру, а также последовательность резонансных узоров. Для чистого результата используйте детерминированное воспроизведение и стабильный захват кадров.

Передайте исходный проект, локальные ресурсы, реестр лицензий, документированные научные модели и соответствия визуализации, инструкции по развёртыванию и краткий отчёт о проверке. Протестируйте развёрнутый проект в настольных и мобильных макетах, сценарии разрешений на микрофон, воспроизведение аудио, загрузку файлов, переключение режимов, доступность и воспроизведение видео. Точно укажите протестированные среды и оставшиеся ограничения.

**НЕ ВКЛЮЧАЙТЕ:** декоративные эффекты, представленные как физические симуляции; запросы разрешения на микрофон при загрузке страницы; загрузку аудио на сервер; автовоспроизведение звука; обратную связь из динамиков; перегруженные элементы управления; быстрое мерцание; нечитаемые подписи; заглушки вместо функций; неработающие мобильные макеты; водяные знаки или необоснованные заявления о готовности к продакшену.

## Звук становится видимым — промпт для продакшена

Создайте **«Звук становится видимым»** — проработанный интерактивный научный проект для широкой аудитории на базе **Three.js**. Превратите звук в красивые отзывчивые 3D-формы, которые сможет изучать любой человек без музыкальной или научной подготовки. Подготовьте **развёрнутый сайт** и **кинематографичное демонстрационное видео MP4**.

Проект должен напоминать интерактивный научный музей высокого уровня: впечатляющий визуально, понятный с первого взгляда, увлекательный и научно достоверный. Рассчитайте его на широкую аудиторию пользователей настольных компьютеров и мобильных устройств.

### ПЕРВОЕ ВПЕЧАТЛЕНИЕ

Начните со светящейся, медленно движущейся звуковой скульптуры на фоне глубокого полуночно-синего неба. Используйте тёплую типографику цвета слоновой кости, электрический циан, фиолетовый и сдержанные коралловые акценты. Сохраните элегантную композицию и минималистичный интерфейс.

Покажите заголовок **«Узнайте, на что способен звук».** Предложите три понятных варианта:

- **Включить звук** — сразу запустить подобранный аудиопример и его визуализацию.
- **Использовать микрофон** — визуализировать голос пользователя или окружающие звуки.
- **Загрузить аудио** — изучить локальный аудиофайл.

Позвольте посетителям получить впечатляющий результат одним нажатием. Добавьте встроенные примеры, чтобы доступ к микрофону и загрузка файлов были необязательными. Перед воспроизведением запускайте чётко обозначенный бесшумный предпросмотр.

### ТРИ СПОСОБА ИССЛЕДОВАТЬ

**1. Звуковая скульптура — художественная визуализация аудио**

Создайте скульптурное поле из частиц и плавных лент, которое мягко реагирует на анализ аудио в реальном времени. Свяжите низкие частоты с широкими движениями, средние — со структурными деталями, а высокие — с тонкими мерцающими акцентами. Громкость должна влиять на масштаб и энергию без резких скачков.

Речь, хлопки, напевание и музыка должны давать заметно разные реакции. Обозначьте этот режим как художественную интерпретацию звука.

**2. Исследователь волны — понять сигнал**

Покажите анимированную форму волны рядом с частотным спектром, при необходимости добавив пространственное представление. Объясните просто: форма волны показывает, как сигнал меняется во времени; спектр показывает его частотный состав.

Добавьте интерактивный генератор тона с чётко подписанными регуляторами частоты и громкости. Пользователи должны иметь возможность сравнить чистый тон с более насыщенным и увидеть разницу. Используйте умеренную громкость по умолчанию, плавные аудиопереходы и заметную кнопку остановки. Объясните, что визуальная амплитуда отражает уровень входного сигнала, а не откалиброванную физическую громкость.

**3. Резонансные узоры — исследовать колебания**

Покажите виртуальную вибрирующую пластину с похожими на песок частицами, образующими узловые узоры. Реализуйте несколько тщательно проработанных режимов вибрации, которые пользователи смогут исследовать, меняя частоту возбуждения.

Основывайте узоры на документированной модели пластины с заданной геометрией и граничными условиями. Объясните, что частицы скапливаются в областях минимальной вибрации. Обозначьте проект как образовательную симуляцию и опишите её упрощения. Визуально отделите декоративные эффекты от научной модели.

### СДЕЛАЙТЕ ИССЛЕДОВАНИЕ ПРОСТЫМ

Предлагайте короткие контекстные подсказки, например **«Попробуйте напевать ровный звук», «Хлопните один раз»** и **«Сравните низкий и высокий тон».** Каждая из них должна сопровождаться мгновенно заметной реакцией.

Держите расширенные элементы управления свёрнутыми. Добавьте управление паузой, сбросом, полноэкранным режимом, чувствительностью и интенсивностью движения. При переключении режимов сохраняйте понятные состояния источника аудио и воспроизведения. Дайте краткое доступное объяснение для каждого режима, не закрывая сцену.

### АУДИО И КОНФИДЕНЦИАЛЬНОСТЬ

Используйте **Web Audio API** для воспроизведения и анализа, со стабильным сглаживанием и разумной нормализацией. Запрашивайте доступ к микрофону только после выбора пользователем этого варианта. Обрабатывайте вход микрофона и загруженные файлы локально; не загружайте, не храните и не передавайте аудио пользователей. Превратите проект в учебное пособие по физике для средней школы: подпишите длину волны, амплитуду и частоту их китайскими терминами и единицами измерения в режимах формы волны и спектра, а в режиме резонанса объясните стоячие волны и узлы с помощью короткой схемы. Каждый режим должен начинаться с вводного текста для урока объёмом не более 60 китайских символов и заканчиваться вопросом с вариантами ответа прямо на странице; правильный ответ открывает следующий режим вибрации. Показывайте постоянный индикатор микрофона и понятную кнопку **«Отключить микрофон»**, которая освобождает микрофон. Отключите мониторинг микрофона через динамики, чтобы предотвратить обратную связь. Корректно обрабатывайте отказ в разрешении, недоступные устройства, неподдерживаемые файлы, тишину и прерванное аудио.

Используйте проверенное встроенное аудио CC0 или аудио с подходящей лицензией и приложите реестр лицензий на ресурсы.

### ВИЗУАЛЬНОЕ И ТЕХНИЧЕСКОЕ КАЧЕСТВО

Используйте качественный рендеринг частиц, убедительную глубину, контролируемое свечение, плавную анимацию и сдержанное движение камеры. Сохраняйте чёткость текста и читаемость элементов управления. Избегайте агрессивного мерцания и избыточного визуального шума.

Создайте поддерживаемое приложение Three.js с эффективными для GPU геометрией и шейдерами, повторно используемыми буферами, ограниченной плотностью пикселей, адаптивным количеством частиц и настройками качества. Анализируйте аудио локально, чтобы одновременные посетители не требовали серверной обработки аудио. Размещайте оптимизированные статические ресурсы в хостинге, совместимом с CDN.

Обеспечьте плавную работу на настольных компьютерах и приемлемую производительность на смартфонах среднего класса. Измерьте фактическую частоту кадров, использование памяти и поведение загрузки на тестируемых устройствах. При скрытии страницы приостанавливайте ненужный рендеринг и корректно освобождайте аудио- и GPU-ресурсы.

Поддерживайте сенсорное управление, навигацию с клавиатуры, видимые состояния фокуса, элементы управления, доступные для программ чтения с экрана, и уменьшенное движение. Предусмотрите лёгкий 2D-резервный вариант, если WebGL недоступен. Убедитесь, что ключевая информация понятна не только по цвету или аудио.

### РЕЗУЛЬТАТЫ

Разверните готовый сайт по работающему публичному **HTTPS URL**.

Подготовьте скачиваемое **30–45-секундное видео H.264 MP4 в разрешении 1920 × 1080** с синхронизированным лицензированным аудио, отрендеренное из самого приложения. Покажите, как чистый тон становится формой волны, как более насыщенный звук преобразует скульптуру, а также последовательность резонансных узоров. Для чистого результата используйте детерминированное воспроизведение и стабильный захват кадров.

Передайте исходный проект, локальные ресурсы, реестр лицензий, документированные научные модели и соответствия визуализации, инструкции по развёртыванию и краткий отчёт о проверке. Протестируйте развёрнутый проект в настольных и мобильных макетах, сценарии разрешений на микрофон, воспроизведение аудио, загрузку файлов, переключение режимов, доступность и воспроизведение видео. Точно укажите протестированные среды и оставшиеся ограничения.

**НЕ ВКЛЮЧАЙТЕ:** декоративные эффекты, представленные как физические симуляции; запросы разрешения на микрофон при загрузке страницы; загрузку аудио на сервер; автовоспроизведение звука; обратную связь из динамиков; перегруженные элементы управления; быстрое мерцание; нечитаемые подписи; заглушки вместо функций; неработающие мобильные макеты; водяные знаки или необоснованные заявления о готовности к продакшену.