Кастомный аудиоплеер и скрипт для судейства реп-батлов на lotusbattle.ru
lotusbattle.ru
Для площадки рэп-батлов lotusbattle.ru создал кастомный аудиоплеер для удобного прослушивания треков и скрипт интеграции с Google Sheets для облегчения судейства батлов.
Краткое описание
Этот проект представлял собой комплексное решение для автоматизации процессов на платформе рэп-батлов. Включал разработку современного веб-аудиоплеера с поддержкой MP3-файлов и системы визуальных индикаторов для синхронизации данных судейства с Google Sheets.
Функциональность аудиоплеера
Основные возможности
- Веб-аудиоплеер на Howler.js - Использование библиотеки Howler.js v2.2.3 для надёжного управления звуком
- Интуитивный интерфейс - Кнопки воспроизведения/паузы, управления громкостью с Font Awesome иконками
- Интерактивные элементы управления - Ползунок громкости и шкала прогресса с возможностью перемотки
- Информационный дисплей - Отображение названия трека и времени (текущее/общее) в формате MM:SS
Дизайн и UX
- Фиксированное позиционирование - Плеер закреплён в нижней части экрана для удобного доступа
- Корпоративная тёмная тема - Использование цветов #17243C (фон) и #2C7658 (активные элементы)
- Адаптивный дизайн - Flexbox-макет с шириной 61% и отступом слева 360px
- Кастомные элементы управления - Стилизованные ползунки для WebKit и Mozilla браузеров
Автоматизация воспроизведения
- Умное определение ссылок - Автоматический поиск и обработка MP3-ссылок с домена selstorage.ru
- Визуальная обратная связь - Подсветка активной ссылки цветом SeaGreen
- Управление состоянием - Автоматическая пауза текущего трека при выборе нового
Интеграция с Google Sheets
Парсинг и обработка данных
- CSV-парсинг - Использование библиотеки PapaParse для загрузки данных из Google Sheets
- Форматирование имён - Извлечение и очистка имён участников от номеров и лишних пробелов
- Сравнение данных - Сопоставление информации из Google Sheets с данными HTML-формы
Система визуальных индикаторов
- Цветовая индикация - Красные точки для несовпадающих данных, зелёные для совпадающих
- Точное позиционирование - Абсолютное позиционирование индикаторов в правом верхнем углу элементов
- Система нумерации - Использование атрибута data-number для связи элементов с данными
- Обратный поиск - Алгоритм поиска элементов в обратном порядке для предотвращения дублирования
Технические особенности
Архитектура и производительность
- Оптимизация рендеринга - Использование requestAnimationFrame для плавного обновления прогресса воспроизведения
- Обработка событий DOM - Динамическое взаимодействие с элементами страницы через event listeners
- Управление состоянием - Корректная обработка событий завершения трека и сброс состояния
Кроссбраузерная совместимость
- Стилизация элементов управления - Кастомные стили для WebKit (-webkit-appearance) и Mozilla (-moz-appearance)
- Современные веб-стандарты - Использование современных CSS-свойств и JavaScript API
- Библиотеки с поддержкой - Font Awesome v5.15.3 для иконок с широкой браузерной поддержкой
Этапы работы
- Анализ требований - Изучение специфики платформы рэп-батлов и потребностей в автоматизации
- Проектирование архитектуры - Планирование структуры аудиоплеера и интеграции с Google Sheets
- Разработка аудиоплеера - Создание интерфейса и логики воспроизведения с использованием Howler.js
- Интеграция с Google Sheets - Разработка системы парсинга данных и визуальных индикаторов
- Тестирование и отладка - Проверка работы всех компонентов в различных сценариях использования
- Внедрение и оптимизация - Развёртывание решения и настройка производительности
Готовый результат
- Функциональный аудиоплеер - Современный интерфейс с полным набором функций управления воспроизведением
- Автоматизация судейства - Система визуальных индикаторов для отслеживания статуса участников батлов
- Интеграция в реальном времени - Синхронизация данных Google Sheets с веб-интерфейсом
- Улучшенный UX - Значительное упрощение процессов для организаторов и судей батлов
Используемые технологии
- Howler.js v2.2.3 - Библиотека для управления аудио
- Font Awesome v5.15.3 - Иконки для интерфейса
- PapaParse - Парсинг CSV данных из Google Sheets
- HTML5/CSS3 - Современная разметка и стилизация
- JavaScript (ES6+) - Логика приложения и DOM-манипуляции
- Google Sheets API - Интеграция с таблицами для данных судейства
- Flexbox - Адаптивная компоновка интерфейса