Создание полноценного генератора плейлистов Spotify за один уикенд

Недавно мне захотелось лучше понять, как работают API. Я использовал несколько простых API, которые генерируют для вас случайные цвета или сообщают вам случайные факты о собаках (знаете ли вы, что ушастые собаки слышат звуки лучше, чем вислоухие?). API могут быть прекрасным инструментом для получения данных для вашего веб-приложения, но почти все более сложные API требуют аутентификации и авторизации.

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

Приложение, которое я создал, называется Vibesition, и оно позволяет пользователю составить плейлист, плавно переходящий от одной песни к другой. Это легко можно назвать моим любимым проектом в области веб-разработок, который я когда-либо делал.

Попробуйте его сами на сайте vibesition.jordantwells.com! Весь исходный код проекта можно найти на моем GitHub.

Аутентификация с помощью NextAuth.js

NextAuth — это инструмент для Next.js, который максимально упрощает интеграцию с популярными сервисами авторизации, такими как GitHub, Facebook, Discord и многими другими. Я бы настоятельно рекомендовал использовать create-t3-app для инициализации вашего проекта, так как он может настроить большую часть шаблонов NextAuth за вас.

Единственные изменения, которые вам нужно сделать, это внести в […nextauth].ts
чтобы использовать SpotifyProvider и задать вашему приложению надлежащий диапазон авторизации. Client ID и Client Secret берутся из регистрации приложения в Spotify Developer Dashboard. Пока вы здесь, не забудьте добавить что-то вроде «http://localhost:3000/api/auth/callback/spotify» в URI перенаправления, чтобы убедиться, что вы можете правильно войти в систему.

import NextAuth, { User, type NextAuthOptions } from "next-auth";
import SpotifyProvider, { SpotifyProfile } from "next-auth/providers/spotify";
import CredentialsProvider from "next-auth/providers/credentials";

export const authOptions: NextAuthOptions = {
  // Configure one or more authentication providers
  providers: [
    SpotifyProvider({
      authorization:
      'https://accounts.spotify.com/authorize?scope=user-read-email,playlist-modify-public',
      clientId: process.env.SPOTIFY_CLIENT_ID as string,
      clientSecret: process.env.SPOTIFY_CLIENT_SECRET as string,
    })
  ],
  callbacks: {
    async jwt({token, account}) {
      if (account) {
        token.accessToken = account.refresh_token;
      }
      return token;
    },
  },
  secret: process.env.NEXT_AUTH_SECRET as string,
};

export default NextAuth(authOptions);

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

const client_id = process.env.SPOTIFY_CLIENT_ID
const client_secret = process.env.SPOTIFY_CLIENT_SECRET
const authorization_code = Buffer.from(`${client_id}:${client_secret}`).toString('base64')

const getAccessToken = async (refresh_token: string) => {
  const response = await fetch(`https://accounts.spotify.com/api/token`, {
    method: 'POST',
    headers: {
      Authorization: authorization_code,
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: new URLSearchParams({
      grant_type: 'refresh_token',
      refresh_token
    })
  })

  return response.json()
}

export const getUsersPlaylists = async (refresh_token: string) => {
  const { access_token } = await getAccessToken(refresh_token)
  return fetch('https://api.spotify.com/v1/me/playlists', {
    headers: {
      Authorization: `Bearer ${access_token}`
    }
  })
}
export const getSearch = async (refresh_token: string, query: string) => {
  const { access_token } = await getAccessToken(refresh_token)
  const querystring = new URLSearchParams({
    q: query,
    type: 'track',
    limit: '5',
    market: 'US'
  }).toString()
  return fetch(SEARCH_ENDPOINT + '?' + querystring, {
    headers: {
      Authorization: `Bearer ${access_token}`
    }
  })
}

Обратите внимание, что параметр «refreshToken» берется из NextAuth, и с моей настройкой его можно получить.

const token = await getToken({req});
const accessToken = token.accessToken as string;

Создание приложения

Теперь, когда у меня за спиной была мощь API Spotify (в пределах моей небольшой области, которую я определил), я мог, наконец, приступить к созданию своего веб-приложения.

Я хотел, чтобы пользователи могли искать песни в качестве начальной и конечной точек для своего плейлиста. Для этого я использовал конечную точку поиска, чтобы получить 5 лучших ответов из поиска Spotify. Как только пользователь выбирает песню, как показано выше, он сохраняет идентификатор Spotify в состоянии React. Этот идентификатор используется в качестве запроса для многих других конечных точек, поэтому его полезно сохранить.

Как только пользователь выбирает песню, он автоматически генерирует цвет, основанный на ~vibe~ песни, используя конечную точку Spotify Audio Features. В частности, я использую комбинацию танцевальности, энергии и валентности песни (я не знаю, что это значит) для определения значений RGB.

Чтобы определить, какие песни будут в списке воспроизведения, я использую конечную точку Get Recommendations. Это позволяет находить песни на основе целевых характеристик, таких как танцевальность, темп, ключ, продолжительность и многие другие. В данном случае я использую сигмоидоподобную интерполяцию для интерполяции между значениями аудиохарактеристик двух песен и получаю 10 песен с целевыми значениями на этой кривой.

Наконец, для создания списка воспроизведения я использую конечные точки «Создать список воспроизведения» и «Добавить элементы в список воспроизведения».

В этот проект также была добавлена целая куча других интересных вещей. Я использовал Framer Motion, чтобы придать всему проекту столь необходимую жизнь. Я использовал HTML-аудиотеги, чтобы позволить пользователям воспроизводить песни, если у них есть URL-адрес предварительного просмотра от Spotify. И, конечно же, я использовал Tailwind CSS, чтобы сделать пользовательский интерфейс самой простой частью процесса.

Заключение

В целом, это был невероятно полезный проект для изучения использования высокоэффективных API. Я надеюсь, что в будущем буду использовать еще много других API и внедрять их в свои проекты, чтобы упростить получение интересных данных. Если вам интересны другие мои проекты или я сам, загляните на мой личный сайт jordantwells.com.

Спасибо за чтение!