Web Player

Веб-плеер для аудио с визуализацией волны, нарезкой и drag-сортировкой плейлиста. Чистый HTML/CSS/JS, без зависимостей и сборки.

Возможности

• Плейлист с drag-and-drop — хватаем строку, тащим, соседи плавно расступаются. У краёв списка работает auto-scroll. Колесо/scrollbar во время drag не «отвязывают» карточку от курсора.
• Воспроизведение — play/pause, перемотка ±5/±10с, громкость, fade-out, цикл (loop) на каждый трек.
• Импорт — выбор файлов или целой папки. Любой аудио-MIME или расширение (mp3/wav/ogg/flac/aac/m4a/opus/wma/ape/aiff/...). Файлы из папки сортируются с числовой коллацией: 02.mp3 идёт перед 10.mp3.
• Анти-priming на импорте — MP3/AAC при импорте декодируются и пере-кодируются в WAV. Это убирает «срезание» первых ~26мс, которые обычно теряются при воспроизведении через <audio> без LAME-header'а.
• Редактор нарезки — точная waveform с DPR, зумом (колесо/щипок), drag-handle'ами, превью выделения, экспорт фрагмента как нового трека в плейлист.
• Сохранение — плейлист (включая loop-флаги, пути, blob-данные) лежит в IndexedDB и переживает перезагрузку страницы.

Использование

Быстрый старт

1. Откройте index.html в браузере (Chrome/Edge/Firefox).
2. + Файлы или + Папка — добавьте треки.
3. Дождитесь плашки «Подготовка треков… N/M» — это перекодировка в WAV (~200–500мс на трек).
4. Клик по треку — играть. Перетащите за строку для сортировки.

Управление треком

Контрол	Действие
Клик по строке	Play / Pause
Drag по строке	Переставить в плейлисте
▲ / ▼	Сдвинуть на одну позицию
✂	Открыть редактор нарезки
✕	Удалить трек
−10 / −5 / +5 / +10	Перемотка в секундах
Слайдер громкости	Громкость
Fade	Плавное затухание и стоп
⟳	Зацикливание трека
⏮	В начало

Редактор нарезки

1. Нажмите ✂ у нужного трека.
2. Тяните зелёные ручки ◀ ▶ для выделения фрагмента.
3. Колесо мыши / щипок на тачскрине — зум; при зуме > 1× — пан.
4. Клик по волне — перемотка превью.
5. Кнопки:
   • Весь — играть весь трек
   • Выделение — играть от начала выделения
   • Превью — только выделенный фрагмент
   • Создать нарезку — добавить выделение как новый трек сразу после оригинала (оригинал не теряется)

Технические детали

• Перетаскивание написано вручную поверх mouse-событий с FLIP-подобной анимацией; HTML5 DnD не использовался — он не двигает соседей плавно.
• Audio-listener'ы (loadedmetadata/ended) и RAF-цикл прогрессбара привязаны к id трека (через findIndex), а не к индексу — поэтому после drag-reorder играющий трек продолжает корректно обновлять UI.
• Редактор берёт байты через blob.arrayBuffer(), а не fetch(blob:...) — последний под текущим CSP иногда блокировался.
• Waveform рисуется на canvas с учётом devicePixelRatio, чёткие 2-px бары на сетке. ResizeObserver перерисовывает волну при открытии панели и при resize окна.
• Поддерживаемые форматы — всё что умеет декодировать decodeAudioData браузера. Файлы, которые браузер не смог декодировать, добавляются как есть (без анти-priming фикса).
• Максимальный размер файла — 300 МБ.
• Память: после импорта 20 треков по 3–5 мин в RAM/IDB лежит ~500 МБ WAV. Норма для desktop-браузера.

Установка / запуск

Открыть index.html напрямую двойным кликом — работает. Для статики через сервер:

# Python
python -m http.server 8080
# Открыть http://localhost:8080

Лицензия

MIT