Такие читатели, как вы, помогают поддерживать MUO. Когда вы совершаете покупку по ссылкам на нашем сайте, мы можем получать партнерскую комиссию. Читать далее.

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

Используя его веб-API, вы можете сделать свои возможности Spotify еще более увлекательными, создав собственное приложение для поиска музыки React. API предоставляет доступ к целому ряду музыкальных данных, которые можно использовать для создания пользовательского музыкального приложения и персонализации его по своему вкусу.

Spotify для разработчиков

Spotify предлагает широкий спектр функций потоковой передачи музыки, таких как поиск, воспроизведение в автономном режиме и персональные рекомендации. Платформа Spotify для разработчиков предоставляет доступ к API и SDK, поддерживающим эти функции. В этом руководстве вы изучите веб-API и узнаете, как интегрировать его в свое приложение React для поиска песен, которые вам нравятся.

instagram viewer

Зарегистрируйте аккаунт

Для начала вам необходимо иметь учетную запись Spotify. Если у вас его еще нет, посетите страница регистрации Spotify. Однако, если он у вас уже есть, войдите в Spotify для разработчиков консоль.

Зарегистрируйте свое приложение

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

Наконец, нажмите на Изменить настройки кнопку, чтобы перейти к настройкам URL-адреса перенаправления. Поскольку ваше приложение все еще находится в режиме разработки, добавьте http://localhost: 3000 в качестве URL-адреса перенаправления. Это URL-адрес, на который вы хотите перенаправить пользователя после его аутентификации в Spotify.

После регистрации вашего приложения Spotify предоставит ваш уникальный идентификатор клиента и секреты клиента, которые вы можете использовать для:

  • Добавьте поток аутентификации Spotify, чтобы войти в систему с вашими учетными данными Spotify в вашем приложении React.
  • Получите свой уникальный токен доступа, чтобы отправлять запросы к различным конечным точкам веб-API, включая поиск данных, таких как треки или альбомы.

Настройте клиент React

Создать React-приложение и перейдите в корневой каталог и создайте новый файл, .env, чтобы установить некоторые переменные среды. Вы можете получить свой идентификатор клиента на панели разработчика Spotify.

REACT_APP_SPOTIFY_CLIENT_ID = "ваш идентификатор клиента"
REACT_APP_SPOTIFY_REDIRECT_URI = " http://localhost: 3000"
REACT_APP_SPOTIFY_AUTH_ENDPOINT = " https://accounts.spotify.com/authorize"
REACT_APP_SPOTIFY_RESPONSE_TYPE = "жетон"

Вы можете найти код этого приложения в его Репозиторий GitHub.

Установите необходимые пакеты

Установите Аксиос. Вы будете использовать его методы для выполнения HTTP-запросов к веб-API Spotify.

npm установить аксиомы

Добавить рабочий процесс аутентификации Spotify

Spotify указывает, что все запросы к любой конечной точке веб-API имеют действительный токен доступа в заголовке запроса. Чтобы получить токен доступа, ваше приложение должно сначала пройти аутентификацию в Spotify.

Spotify поддерживает несколько аутентификация и авторизациятакие методы, как код авторизации, учетные данные клиента или неявные методы предоставления.

Проще всего реализовать метод неявного предоставления, который требует, чтобы приложение делало запросы к конечной точке аутентификации (вы добавили это в файл ENV), передавая ваш идентификатор клиента. После успешной аутентификации Spotify ответит, предоставив токен доступа, срок действия которого истекает через указанный период.

Откройте файл src/App.js, удалите шаблонный код React и добавьте следующий код:

Импортировать Реагировать, {useState, useEffect} от«реагировать»;
Импортировать Искатель от'./компоненты/Поиск';
функцияПриложение() {
константа CLIENT_ID=process.env. REACT_APP_SPOTIFY_CLIENT_ID
константа REDIRECT_URI =process.env. REACT_APP_SPOTIFY_REDIRECT_URI 
константа AUTH_ENDPOINT =process.env. REACT_APP_SPOTIFY_AUTH_ENDPOINT 
константа RESPONSE_TYPE = процесс.env. REACT_APP_SPOTIFY_RESPONSE_TYPE


константа [токен, setToken] = useState("");


 использоватьЭффект(() => { 
константа хэш = окно.местоположение.хэш;
позволять жетон = окно.localStorage.getItem("жетон");

если (решетка && решетка) {
 токен = хэш.подстрока (1).расколоть("&").находить(элемент => элемент.стартс("access_token")).расколоть("=")[1];
окно.location.хэш = "";
окно.localStorage.setItem("жетон", токен);
 }


 setToken (токен)
 }, [])


константа выход = () => {
 установитьТокен("");
окно.localStorage.removeItem("жетон");
 }


возвращаться (


экспортпо умолчанию Приложение;

Давайте разберем это:

  • Этот компонент условно отображает компонент поиска и кнопку выхода, если токен доступа присутствует в противном случае, он отображает div со ссылкой, которая направляет пользователя к авторизации Spotify страница. Ссылка содержит параметры запроса, которые указывают значения CLIENT_ID, REDIRECT_URI и RESPONSE_TYPE.
  • После аутентификации пользователя вызовите хук useEffect, чтобы запустить блок кода при монтировании компонента. Этот блок кода извлекает токен доступа из хэша URL-адреса и устанавливает его в качестве нового значения переменной состояния токена. Он также сохраняет токен в локальном хранилище для сохранения состояния аутентификации.
  • С токеном доступа, хранящимся в состоянии, он передается в качестве реквизита компоненту Searcher для выполнения запросов к веб-API Spotify.
  • Чтобы выйти из системы, код просто удаляет токен доступа из локального хранилища и устанавливает состояние токена в пустую строку.

Внедрение функции поиска и рендеринга результатов

В каталоге /src создайте новую папку и назовите ее компоненты. Внутри этой папки создайте новый файл: Searcher.js и добавьте приведенный ниже код.

Импортировать Реагировать, {useState, useEffect} от«реагировать»
Импортировать аксиомы отаксиос;
функцияИскатель(реквизит) {
константа [searchKey, setSearchKey] = useState("")
константа [треки, setTracks] = useState([])

константа access_token = реквизит.токен

константа поискИсполнитель = асинхронный () => {
константа {данные} = Ждите аксиос.получить(" https://api.spotify.com/v1/search", {
 заголовки: {
'Тип содержимого': "приложение/json",
«Авторизация»: `Предъявитель ${токен_доступа}`
 },
 параметры: {
 q: поискКлюч,
 тип: "художник"
 }
 })

вар ID художника = data.artists.items[0].идентификатор


вар ArtistTracks = Ждите аксиос.получить(` https://api.spotify.com/v1/artists/${ID исполнителя}/top-tracks`, {
 заголовки: {
 Авторизация: `Предъявитель ${токен_доступа}`
 },
 параметры: {
 лимит: 10,
 рынок: 'НАС'
 }
 })


 setTracks(artistTracks.data.tracks);
 }


возвращаться (
 <>


"Форма поиска">
 имя_класса ="Имя"
 тип="текст"
 заполнитель ="Поиск по имени исполнителя..."
 onChange={(e) => {setSearchKey (e.target.value)}}

 />


экспортпо умолчанию Искатель

Давайте разберем это:

  • Компонент определяет константу access_token, которую он устанавливает для свойства токена, переданного в качестве реквизита. Позже он передает этот токен в заголовке запроса API конечной точке API поиска Spotify.
  • Определите два состояния: searchKey и tracks. Состояние searchKey содержит текущее значение ввода поиска. Состояние треков содержит массив из 10 лучших треков исполнителя, которые будут возвращены при поиске Spotify.
  • Функция searchArtist делает запрос GET к API Spotify для поиска данных исполнителей на основе значения searchKey.
  • Затем он извлекает идентификатор исполнителя из данных ответа и делает еще один запрос GET, чтобы получить лучшие треки для этого исполнителя. Из данных ответа он извлекает 10 лучших треков и устанавливает переменную треков.
  • Компонент возвращает поле ввода и кнопку поиска. Когда пользователь нажимает кнопку поиска, он вызывает функцию searchArtist для получения и отображения лучших треков для определенного исполнителя. Наконец, он использует функцию карты для отображения пяти верхних дорожек в массиве дорожек в виде списка.

Запустите сервер разработки, чтобы обновить изменения, затем перейдите к http://localhost: 3000 в браузере для просмотра результатов.

Настройте свое приложение с помощью функций Spotify

В этом руководстве описаны шаги, необходимые для выполнения запросов к веб-API Spotify для поиска музыкальных данных исполнителей. Однако вы можете сделать больше с функциями Spotify, предоставляемыми его SDK и API, такими как интеграция его веб-плеера воспроизведения с тем же внешним видом, что и в Spotify.

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