Главная / Программирование и IT / Веб-плеер музыки с визуализацией и эквалайзером

Веб-плеер музыки с визуализацией и эквалайзером

Описание промпта

Создай современный веб-плеер на HTML5, CSS3 и JavaScript с использованием Web Audio API. Реализуй адаптивный интерфейс с обложками альбомов, визуализацией звука и управлением плейлистом (включая drag-and-drop). Добавь функции: воспроизведение, перемотка, громкость, скорость, shuffle/repeat, 10-поло…

Что делает этот промпт

Генерирует код для сложного веб-плеера с расширенным функционалом: визуализация, эквалайзер, управление плейлистом и интеграция с системными API.

Преимущества

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

Для кого подходит

Фронтенд-разработчики, студенты, изучающие Web Audio API, и энтузиасты, желающие создать кастомный медиаплеер.

Инструкция по использованию промпта

Скопируй prompt_text в чат с AI. Уточни детали дизайна (цвета, стиль) или специфические требования к форматам аудио, если нужно. AI сгенерирует полный код файлов (index.html, style.css, script.js).

Что нужно предоставить

Знание JavaScript (ES6+), HTML5, CSS3 и API Web Audio. Понимание принципов адаптивной верстки и работы с медиа-событиями.

Что ожидать в результате

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

Рекомендации

Для работы визуализации и эквалайзера браузер должен поддерживать Web Audio API. Рекомендуется тестировать в современных версиях Chrome, Firefox или Safari.

Ограничения

Не включает серверную часть для загрузки файлов. Работа с DRM-контентом может быть ограничена политиками безопасности браузера. Зависит от поддержки Media Session API в целевой ОС.

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

Текст промпта

ChatGPT / Claude / Llama Войти для копирования

Выступи в роли опытного фронтенд-разработчика и создай полнофункциональный веб-плеер музыки. Используй HTML5, CSS3 и JavaScript с Web Audio API.

Твоя задача — реализовать современный, отзывчивый интерфейс, который корректно работает на всех устройствах. Включи следующие ключевые функции:

1. **Визуализация и UI**: Отображение обложек альбомов и динамическая визуализация звука. Используй CSS для создания стильного и современного дизайна.
2. **Управление плейлистом**: Реализуй список треков с возможностью drag-and-drop для изменения порядка. Поддержка добавления/удаления треков.
3. **Аудио-контролы**: Кнопки play/pause, skip (вперед/назад), seek (перемотка), регулировка громкости и скорости воспроизведения. Визуальные индикаторы для режимов shuffle и repeat.
4. **Эквалайзер**: Внедри 10-полосный графический эквалайзер с возможностью выбора пресетов (например, Rock, Pop, Jazz) и ручной настройки.
5. **Форматы и метаданные**: Поддержка нескольких аудиоформатов с graceful fallback. Извлечение и отображение метаданных (название, исполнитель, альбом) из аудиофайлов.
6. **Дополнительно**: Горячие клавиши для управления воспроизведением и интеграция с Media Session API для фоновой игры (отображение в ОС).

Напиши чистый, модульный код. Используй современные стандарты ES6+. Убедись, что архитектура позволяет легко расширять функционал. Не используй внешние библиотеки, если это не критично для производительности.

Веб-плеер музыки с визуализацией и эквалайзером

Поделитесь в социальных сетях

Комментарии