Рабочий прототип внутри
На прошлой неделе я сделал перерыв в работе с клиентами, чтобы реализовать идею, которая возникла у меня после проекта Future Islands. Эта идея заключалась в создании плеера на базе Spotify, где пользователи могли оставлять синхронизированные комментарии к форме волны. Несомненно, вы видели этот UX в других потоковых сервисах и в другом программном обеспечении для создания музыки. Форма волны генерируется с использованием звука дорожки, и пользователи могут оставлять комментарии на временной шкале, придавая контекст своим сообщениям. Я экспериментировал с синхронизированными комментариями (и другими формами синхронизированного контента), когда был в SoundCloud. Черт возьми, я однажды даже построил видеоигру.
Насколько я понимаю, у Spotify никогда не было комментариев в рамках своего предложения. Хотя это делает их продукты совершенно простыми устройствами для потребления контента, это исключает любую возможность создать сообщество среди их пользователей. Вместо этого пользователям Spotify предлагается делиться музыкой и комментировать ее вне службы. У интеграции комментариев в Spotify есть свои плюсы и минусы, но я думаю, что артисты страдают, когда фанатам не разрешают собираться вместе.
Для этого прототипа я стремился использовать только платформу Spotify для достижения решения. Таким образом, формы волны генерируются данными, которые предоставляет Spotify, и пользователи должны пройти аутентификацию в Spotify для воспроизведения звука и комментариев к дорожке. Вы можете воспользоваться решением, посетив www.timedcomments.com. Кроме того, вы можете вызвать интерфейс синхронизированных комментариев для любой дорожки Spotify, переименовав open.spotify в timedcomments на любом URL-адресе дорожки Spotify.
Например, от open.spotify.com/track/123 до timedcomments.com/track/123.
Я уже написал несколько сообщений о технологии, использованной в этом прототипе, но хотел бы продолжить и обобщить подход в этом блоге. Продолжайте читать, чтобы узнать, как это произошло.
Простой интерфейс
Честно говоря, я был по-настоящему вдохновлен на создание этого прототипа только после вдохновляющего сеанса Figma, в котором этот простой интерфейс собрался вместе. Вдохновленный работой SoundCloud с пользовательским интерфейсом, я объединил некоторые основные дизайнерские подсказки Spotify (а именно, зеленый цвет) в интерфейсе, который, как я знал, я смогу сделать позже адаптивным с помощью Tailwind CSS . Я просто хотел, чтобы это было просто, используя только основные функции. Вы можете разобрать этот CodePen, чтобы узнать, как они запрограммировали дизайн.
Формы сигналов Spotify
Генерация сигналов из треков Spotify - первая проблема, с которой я столкнулся при создании этого прототипа. В итоге я использовал конечную точку анализа звука платформы Spotify, чтобы получить уровни громкости трека, а затем упростить эти данные в массив значений, которые я мог бы использовать для динамической генерации формы волны с помощью холста. Вместо того, чтобы генерировать эти данные каждый раз, когда пользователь посещает приложение, этот прототип кэширует данные формы волны для каждой посещенной дорожки один раз для будущих посещений.
Я также предоставил CodePen о том, как была сгенерирована окончательная форма волны.
Spotify Player
Обычно, когда я создаю пользовательские интерфейсы проигрывателя Spotify, я использую их Web Playback SDK, потому что он позволяет вам просто транслировать полные треки премиум-пользователям Spotify, которые проходят аутентификацию в вашем приложении. Большая проблема с этим SDK заключается в том, что в настоящее время он не работает на мобильных устройствах. В попытке сделать это решение более доступным, я обратился к Spotify Connect Web API. Вместо возможности передавать полные треки через ваше веб-приложение, такое как SDK для веб-воспроизведения, Connect Web API позволяет удаленно управлять открытым фрагментом программного обеспечения Spotify на одном из устройств пользователя. Этот API может быть довольно вспыльчивым, но когда он работает, это достойное решение.
Комментарии Spotify
Решение для комментариев, которое я собрал для этого веб-приложения, основано на решении чата на базе Spotify, которое я разработал для проекта Future Islands. Это приложение также использует Spotify Implicit Grant Flow для аутентификации пользователей через всплывающее окно. Пользователи также должны пройти аутентификацию таким образом, чтобы использовать Connect Web API.
После аутентификации пользователи могут нажать на ввод текста, чтобы начать писать сообщение. Когда ввод сфокусирован, они могут использовать ползунок аватара на форме волны, чтобы разместить свой комментарий на временной шкале. Опубликованные комментарии отправляются на ожидающую конечную точку Serverless и добавляются в DynamoDB. Эти комментарии сохраняются с отметкой времени их положения на временной шкале, поэтому их можно снова визуально разместить на форме волны.
Что дальше?
Для этого конкретного прототипа я подумал о том, чтобы комментарии появлялись в реальном времени, как в чате Future Island, но это, вероятно, то, чем я займусь позже. Целью этого эксперимента было дальнейшее изучение того, как могут выглядеть социальные функции, построенные на платформе Spotify. Я надеюсь продолжить изучение этой темы, проводя подобные эксперименты и работая с моим клиентом. Я надеюсь, что предоставленная информация окажется полезной и для вас, и я хотел бы услышать, что вы думаете и, что более важно, что вы создаете. Удачного взлома.
