Чтобы просмотреть приложение, появившееся в результате публикации, нажмите здесь: https://prelude.now.sh
И вот код: https://github.com/dylankershaw/prelude

В декабре прошлого года я получил долгожданную инфографику Spotify Wrapped с обзором за год, в которой подробно описаны мои самые популярные треки, исполнители и жанры за 2019 год. И, к удивлению тех, кто не знает меня лично, британское транс-трио Above & Beyond в верхней части моего списка в течение еще одного года.

Как и все истинные поклонники данного исполнителя, я чувствовал себя обязанным поделиться этим с моим другом Джошем (также большим поклонником Above & Beyond) и рассказать ему, как здорово, что я открыл их для себя так много лет назад. Но его ответ меня удивил. Ему казалось, что он слушал их дольше, чем я. Было ли это правдой? Конечно, нет. Но мне нужны были доказательства. Мне нужны были данные!

К счастью, у Spotify есть одна из самых впечатляющих существующих политик защиты прав на данные, соответствующих GDPR/CCPA. Если у них есть данные о вас, они вам их дадут. У них даже есть руководство о том, как запросить ваши данные, даже не обращаясь в службу поддержки. Итак, я следовал инструкциям, подождал несколько недель и получил это:

SteamingHistory0.json предоставил почти именно то, что я искал, но включил историю прослушивания только за последний год. Да, первый объект в массиве содержал данные о песне, которую я прослушал 4 января 2019 года — ровно за год до того, как мой запрос данных был выполнен.

Но все надежды не были потеряны! Я заполнил их форму поддержки клиентов и попросил прислать мне всю мою историю прослушивания. Через месяц мои молитвы наконец были услышаны. Омар, находка службы поддержки, обратился в начале февраля со ссылкой для загрузки файла JSON размером почти 70 МБ, содержащего всю мою историю прослушивания с 2011 года.

Я открыл его и поискал «Above & Beyond» (ну, технически, «Above & Beyond»…) Итак, я надеялся найти доказательство того, что я слушал эту группу более года или двух назад. 2018 было бы неплохо. 2017 год был бы еще лучше. Ну угадайте, что я нашел…

2016! Да, это всего четыре года назад, что составляет лишь пятую часть времени существования группы, но почти в два раза больше времени, чем я помню, как впервые их услышал.

Итак, у меня была дата моего первого прослушивания, но что еще может быть интересного в этом файле? Для начала есть название трека. В данном случае это было живое исполнение Prelude at Wembley ранее в том же году. Также есть данные о "reason_end” и "ms_played”, которые в данном случае имеют значения "endplay” и "41918” соответственно. "endplay”, кажется, соответствует тому, что пользователь останавливает или пропускает песню, а 41918 мс — это всего лишь 42 секунды. Иными словами, Above & Beyond мне даже не понравились с первого раза, когда я их услышал…

Так что это заставило меня задуматься — когда именно я впервые полностью прослушал песню Above & Beyond? Вместо того, чтобы одержимо прокручивать файл из 132 000 строк, я написал сценарий, который мог мгновенно ответить на этот вопрос.

ПРИМЕЧАНИЕ. Файл JSON, предоставленный Spotify, имеет разделители новой строки и может быть более эффективно проанализирован с помощью такой библиотеки, как ndjson, но для краткости примеров кода я преобразовал данные в массив объектов, разделенных запятыми. .

Ну вот! Спустя почти четыре месяца после первого знакомства с Above & Beyond я полностью прослушал Tri-State, свою первую полноценную песню группы. Это была отличная новость, но она оставила меня еще более любопытным, чем раньше. Был ли это тот момент, когда я действительно стал фанатом, или я просто спал, пока играла эта песня? Сколько времени прошло, прежде чем я стал слушать их регулярно? Переставал ли я когда-нибудь их слушать на какое-то время?

Чем больше времени я тратил на этот проект, тем больше у меня возникало вопросов. Мне нужно было что-то масштабируемое и визуальное, чтобы лучше понимать данные. Поскольку я разработчик React, я подумал, что это хорошая возможность создать свое первое приложение Next.js. И в память о моих первых 42 секундах Above & Beyond мы назовем его Prelude.

У меня есть постоянно растущий список функций, которые мне нужны для этого приложения, но для MVP (минимально жизнеспособного продукта) я сузил его до этих трех:

  1. Пользователи могут загрузить свой собственный файл EndSong.json для анализа.
  2. Пользователи могут выбрать из динамически генерируемого выпадающего списка исполнителя, которого они хотели бы проанализировать.
  3. Затем для этого исполнителя отображается диаграмма с количеством воспроизведений песни по оси Y и датами по оси X.

Начнем с функции №1: компонента FileUploader:

Поскольку Next.js использует React для внешнего интерфейса, я использовал react-dropzone и настроил его для приема одного файла JSON от пользователя. Затем загрузчик преобразует этот JSON с разделителями-новострками в строку с разделителями-запятыми с `[${reader.result.replace(/\n/g, ',')}]` и сохраняет вывод в памяти с помощью хука setSongData родительского компонента.

Затем это вызывает повторный рендеринг index.jsx, который, в свою очередь, выполняет функцию № 2 со строками 12–18 и 32–38 следующего содержания:

Что касается диаграммы, я в конечном итоге хотел бы использовать более полную библиотеку визуализации данных, такую ​​как D3, но для этого MVP достаточно chart.js. Логика диаграммы проста: всякий раз, когда меняются данные песни или выбранный исполнитель, отфильтровывайте все песни с исполнителями, которые не совпадают, преобразуйте эти данные в формат, который может понять chart.js (с общим количеством воспроизведения песен для каждой даты), затем передайте все в диаграмму для визуализации.

Это создает легко читаемый визуальный элемент, например:

А поскольку chart.js по умолчанию предоставляет всплывающие подсказки для каждой точки данных, мы можем точно видеть, сколько песен воспроизводилось каждый день.

Итак, мой ответ! Несмотря на то, что я впервые прослушал A&B в апреле 2016 года, только в марте 2018 года у меня было более 30 прослушиваний за один день, а затем в середине мая я действительно стал фанатом (90 прослушиваний!).

Чем больше времени я трачу на создание этого приложения, тем больше функций, которые, по моему мнению, следует добавить. Я отслеживал их как проблемы GitHub здесь: https://github.com/dylankershaw/prelude/issues

В целом я очень доволен тем, как это получилось. Осталось еще много работы, но этот MVP достиг именно того, на что я надеялся, и превратился в нечто гораздо большее, чем ожидалось. И вернемся к первоначальному вопросу о том, кто первым начал слушать Above & Beyond — Джош или я? Что ж, мы можем никогда не узнать, поскольку он до сих пор не связался со службой поддержки, чтобы запросить свои данные EndSong. Это заставляет меня думать, что должен быть более простой способ сделать это. Spotify: пожалуйста, упростите процесс запроса данных о воспроизведении песни за все время. Либо сделайте эти данные такими же легкодоступными, как данные за прошлый год, которые я получил в своем первом запросе, либо включите данные EndSong за все время в тот же запрос. достиг бы этой цели. Но все равно спасибо, что вообще предоставили эти данные, Spotify 🙏.