Плавные переходы от одной песни к другой

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

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

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

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

Аутентификация с использованием NextAuth.js

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

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

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

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

Подробнее об этом процессе можно узнать в Документации Spotify. Обратите внимание, что этот токен обновления исходит из токена, сгенерированного NextAuth:

Обратите внимание, что параметр refreshToken исходит от NextAuth, и с моей настройкой его можно получить, выполнив действие.

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

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

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

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

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

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

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

Заключение

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

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

If you’re interested in more of my projects or me, check out my personal website, jordantwells.com.