Быстрые ссылки
Осваивать новые технологии проще всего на практике. Именно поэтому Spotify API — отличный старт для знакомства с веб-API: можно быстро создавать свои мини-приложения для музыки и сразу видеть результат.
Что такое Spotify API
API — это набор возможностей, который компания разрешает использовать через свои функции. И вот хорошая новость: у Spotify этих возможностей полно, а работа с их API куда проще, чем кажется на первый взгляд.
Spotify API делится на две основные части:
Без минусов, конечно, не обошлось — например, Playback SDK нельзя применять в коммерческих стриминговых сервисах. Но для учебных проектов и экспериментов возможностей тут хватает — идеальный способ понять, как вообще устроены веб-API.
Погружаемся в настройку
В репозитории на GitHub я выложил два простых рабочих примера.
Для тестов нужен аккаунт Spotify. С ним заходи в панель разработчика и создавай своё приложение.
Также понадобится локальный веб-сервер — возможно, он у тебя уже есть, если нет — поставить несложно. Обычно я работаю в папке localhost/spotify или по адресу localhost:8080.
На сайте Spotify просто заполни форму "Создать приложение". Выбери опции “Web API” и “Web Playback SDK”, и укажи Redirect URI (например, если у тебя демо лежит в top.html на http://localhost:8080/top.html, это и будет Redirect URI). Добавляешь новые страницы — не забудь и их добавить в список Redirect URI.
После этого ты получишь Client ID и Client secret — эти данные понадобятся позже, обязательно сохрани их.
В реальных проектах Client secret хранят в секрете, чтобы никто посторонний его не увидел. В учебном примере я пишу его прямо в JS-файле, но помни: Client secret нельзя светить в интернете.
На этом этапе можно скачать примеры файлов, положить их в папку сервера и попробовать всё запустить — так проще разобраться, что к чему.
Авторизация через API
На первом этапе нужно пройти авторизацию по стандарту OAuth. Это классика для современных приложений, освоить её очень полезно.
Суть проста: через HTTP твое приложение получает access token — для этого есть готовые библиотеки, но для примера мне хватит простого самописного кода.
Весь код для этого вынесен в access.js. Сначала ты перенаправляешь пользователя на https://accounts.spotify.com/authorize с нужными параметрами — чтобы он дал разрешение работать с аккаунтом:
Для большей безопасности стоит добавить параметр state, но ради простоты пока обойдёмся без него.
В функции authorize в access.js реализовано само перенаправление:
Откроется страница, где пользователь даст необходимые разрешения:
Подтверждать нужно всего один раз (если не меняешь scope). После этого тебя автоматически перебросит на твой redirect_uri с параметром code — типа http://localhost:8080/top.html?code=... Скрипт проверяет, что код есть, и двигается дальше:
Второй шаг — отправить этот код обратно в Spotify и получить access token. С ним уже можно обращаться к API — просто передавай его в каждом запросе.
В этой статье я специально упрощаю код, чтобы не уходить в детали. Все нюансы — в полном коде на GitHub. Не забывай: доступ имеет ограниченное время жизни, access token нужно обновлять.
Удобно сохранять access token с помощью localStorage — тогда не придется запрашивать его каждый раз с нуля:
Теперь при каждом обращении к API Spotify добавляй в заголовок Authorization свой токен:
Вся логика для GET-запросов вынесена в spotify.js. Хочешь добавить что-то сложнее — подключай PUT, POST и другие методы.
OAuth обширная тема. Для экспериментов базового варианта хватит, но если токен устареет, его придется сбросить вручную (localStorage.removeItem).
Вытаскиваем музыкальную информацию
Когда настройка и авторизация готовы — пора получать музыку! Для начала использую пример в top.html: здесь покажу список твоих любимых исполнителей и основную инфу о каждом.
Посмотри в документацию Spotify — нужен раздел /me/top/artists. Для простого вывода запрашивай данные без лишних параметров: в свойстве items приходит список твоих топ-артистов.
В файле top.js функция run() делает запрос и получает нужный объект данных:
Дальше перебираем items в цикле:
И для каждого артиста добавляем отдельную строку в таблицу:
В итоге — у тебя прямо на странице простая таблица с топ-исполнителями и их жанрами. У меня, например, вот так выглядит:
Создаём свой музыкальный плеер
Информация об исполнителях — это здорово, но намного интереснее самому управлять воспроизведением! Spotify API даёт почти полный контроль над треками прямо из браузера.
Есть только один нюанс — необходимо, чтобы официальное приложение Spotify работало параллельно с твоим клиентом. Для тестов это не мешает, глобальные приложения так, конечно, не построишь. К плееру нужно будет подключать сам Spotify как устройство:
Да, подключение придётся делать каждый раз после обновления страницы веб-приложения. Я предусмотрел отдельное сообщение об ошибке, чтобы ты точно не забыл этот шаг — мелочь, а полезно!
В player.html собрал простой плеер с обложкой альбома, кнопками управления и полосой прогресса — всем управляет player.js.
Первым делом подключаю скрипт SDK Spotify прямо с официального сайта:
В демо-режиме скрипт подгружается динамически — чтобы access token успел обновиться. Без токена SDK работать не будет и выдаст ошибку.
Дальше — создаю объект Player и пробую к нему подключиться:
Важный момент: для работы плеера нужен access token и “device name” — то, как твое устройство будет видно в Spotify. Методы check_device_connected и check_player_state следят за подключением — если что-то не так, появляется красная плашка с ошибкой.
Когда плеер подключился, можно запускать треки и управлять ими. SDK отлично документирован (см. Web Playback SDK Reference). В моём плеере используются методы: pause, seek, resume, togglePlay и getCurrentState.
Для многих фич достаточно связать кнопку в интерфейсе с нужным методом SDK. К примеру, кнопка Play:
При нажатии она вызывает Player.resume, потом временно блокируется и включает кнопку Pause.
Часть логики чуть сложнее: при смене трека событие player_state_changed запускает функцию, которая, например, обновляет обложку альбома.
Для отображения прогресса по таймеру запрашиваю состояние через Player.getCurrentState — получаю инфу о текущем треке и позиции:
Прокручивать трек можно, двигая бегунок прогресса:
Тут есть лайфхак: чтобы не засыпать API сотнями запросов при перемотке, делаю небольшую задержку до вызова Player.seek.
Spotify, как и многие сервисы, ограничивает частоту запросов (rate limit), чтобы к нему не ломились тысячи раз в секунду. В моих примерах ограничения очень мягкие — если появится ошибка 429, просто проверь консоль.
В результате получаем минималистичный, но полностью рабочий плеер, который синхронизируется с основным приложением Spotify:
Эти простые примеры не только помогут разобраться в Spotify API, но и дадут старт для собственных улучшений и фишек. Всё ограничивается только твоей фантазией!
Меня самого всегда раздражало, что в плейлист нельзя вот так взять и добавить целый альбом — обязательно найду способ это сделать. Можно ещё соединить данные с других сервисов, например, с YouTube, чтобы создать настоящий универсальный музыкальный комбайн!
Если вам понравилась эта статья, подпишитесь, чтобы не пропустить еще много полезных статей!
Премиум подписка - это доступ к эксклюзивным материалам, чтение канала без рекламы, возможность предлагать темы для статей и даже заказывать индивидуальные обзоры/исследования по своим запросам!Подробнее о том, какие преимущества вы получите с премиум подпиской, можно узнать здесь
Также подписывайтесь на нас в:
- Telegram: https://t.me/gergenshin
- Youtube: https://www.youtube.com/@gergenshin
- Яндекс Дзен: https://dzen.ru/gergen
- Официальный сайт: https://www-genshin.ru