учебный путь · javascript
Музыкальный сервис «Волна»
Соберите клиентскую логику стриминга: каталог треков, плейлисты без дублей, очередь воспроизведения с иммутабельными шагами, статистику прослушиваний и детерминированный «Микс дня». Каждая задача — рабочий модуль сервиса.
AI-ассистент ведёт подсказками, но решение не выдаёт
intro
Что тебя ждёт в этом пути
Что ты построишь
Музыкальный сервис «Волна» на чистом JavaScript — каталог треков, конструктор плейлистов, очередь воспроизведения, статистика прослушиваний и генератор «Микса дня». Каждый модуль — реальная фича стримингового сервиса: от кнопки «добавить в плейлист» без дублей до детерминированного тасования и отчёта об итогах месяца.
Для кого
Ты знаешь основы JavaScript — переменные, функции, массивы — и готов впервые написать что-то большее, чем учебный скрипт. Опыт с DOM или браузером не нужен: весь путь — чистые функции и структуры данных.
Чему научишься
- Работа с массивами: map, filter, reduce и иммутабельные операции
- Управление очередью воспроизведения: позиция, перемотка, вставка
- Агрегация статистики: счётчики, процентные метрики, поиск лидера
- Детерминированное тасование без Math.random
- Сборка конвейера из независимых функций-модулей
- Числовые ключи объектов и неочевидное поведение при автоприведении типов
curriculum
Задачи пути — 5 модулей, 25 задач
Каждый модуль — навык. Решаешь задачи по порядку, и к финалу из них собирается рабочий результат.
1.1
Подпись трека
Соберите единую подпись трека «Исполнитель — Название» — первый модуль музыкального сервиса «Волна»
1.2
Трек по id
Найдите трек в каталоге по идентификатору — базовый поиск, на который обопрётся вся «Волна»
1.3
Треки исполнителя
Посчитайте треки исполнителя в каталоге — счётчик со строгим сравнением для страницы артиста
1.4
Полка жанра
Соберите названия треков жанра в новый массив — жанровая полка каталога не трогает оригинал
1.5
Карточка трека
Соберите карточку «Транзит — Кофеин (3:08)» из двух готовых модулей каталога и форматирования длительности
2.1
Длительность плейлиста
Сложите секунды треков плейлиста, молча пропуская id, которых в каталоге уже нет
2.2
Уже в плейлисте?
Проверьте вхождение трека в плейлист и верните честный boolean — на нём держится кнопка «добавить»
2.3
Добавить без дублей
Добавьте трек в плейлист, только если его там нет, — и всегда верните новую копию массива
2.4
Слить два плейлиста
Объедините два плейлиста: first целиком, новинки из second — и ни одного нового дубля
2.5
Сводка плейлиста
Соберите шапку плейлиста из готовых модулей: имя, счётчик треков, общая длительность и самый долгий трек
3.1
Что играет
Мини-плеер спрашивает у очереди id текущего трека — число или null, когда играть нечего
3.2
Кнопки перемотки
«Вперёд» и «назад» в плеере: новая позиция очереди с зажимом в границы — за края не выпадаем
3.3
Играть следующим
Пункт меню «Играть следующим»: вставка id сразу после текущей позиции — дубли в очереди легальны
3.4
Дальше в очереди
Экран очереди берёт копию хвоста: текущий трек и все будущие, прошлое не показываем
3.5
Шаг плеера
Иммутабельный шаг на следующий трек: новая очередь с копией массива — спред { ...queue } здесь тихо ломает всё
4.1
Сколько раз слушали
Сосчитайте запуски трека в журнале прослушиваний — дослушан он или нет, запуск уже состоялся
4.2
Счётчики прослушиваний
Сверните журнал событий в объект-счётчик и узнайте, почему число 102 становится ключом "102"
4.3
Дослушиваемость
Посчитайте целый процент дослушанных треков — и спасите отчёт пустого журнала от «NaN%» ранним return
4.4
Хит слушателя
Найдите по готовым счётчикам самый игранный трек — и верните его id числом, а не строковым ключом
4.5
Экран «Итоги»
Соберите отчёт слушателя из четырёх готовых модулей: запуски, дослушиваемость и хит, переживший чистку каталога
5.1
Свежие треки
Отберите для «Микса дня» треки, которых нет в истории прослушиваний, — порядком каталога и новым массивом
5.2
Тасование разрезом
Перемешайте микс без Math.random: чётные индексы, затем нечётные — порядок воспроизводится при каждом построении
5.3
Лимит микса
Обрежьте перетасованный список до maxCount треков; полная копия — всё равно новый массив, а не сам вход
5.4
Подписи микса
Соедините готовые поиск и подпись: id микса превращаются в строки «Исполнитель — Название», битые id молча выпадают
5.5
Микс дня капстоун
Капстоун «Волны»: соберите конвейер из семи готовых модулей — свежее, тасование разрезом, лимит и подписи в одном объекте микса
Путь входит в Koddo Premium Открой все премиум-пути, AI-ассистента без лимитов и daily challenge. от 490 ₽ / мес
❯ koddo start javascript-music-service
Готов начать этот путь?
Зарегистрируйся — откроем путь прямо на первой задаче. Без установки и настройки, всё в браузере.