Мы все знаем, что стриминг музыки сейчас на подъеме. Из-за абсолютного удобства и простоты использования пользователи влюбились в этот современный способ прослушивания музыки.
Но что это значит для веб-разработчиков? Что ж, если вы не Spotify, Apple, Amazon и т. п., ваши шансы участвовать в «потоковых войнах» относительно невелики. Но что, если ваша цель другая? Что, если вместо самой потоковой платформы вы хотите создать музыкальный проигрыватель, дополнительный сервис или что-то в этом роде? В таком случае, почему бы не позволить «крупным игрокам» помочь вам?
В сегодняшней статье я хочу рассказать вам о процессе интеграции Apple Music прямо в ваше веб-приложение с помощью Apple MusicKit JS. Звучит интересно?
Почему Apple Music?
Прежде чем мы углубимся, я хотел бы ответить на возможный вопрос:
Почему я выбрал Apple Music?
Возможно, вы уже знаете, что Spotify является лидером рынка. У него самая большая пользовательская база, а также самое большое количество платных подписчиков (хотя последнее намного меньше). Apple Music отстает от Spotify в обеих категориях, заняв 2-е место.
Итак, если бы мы выбирали на основе пользовательской базы, мы должны были бы выбрать Spotify. Однако есть еще кое-что, о чем вы должны помнить. Это общедоступный API службы.
В этом аспекте Apple со своим MusicKit определенно лидирует. Он позволяет интегрироваться с Apple Music прямо из iOS, Android или веб-приложения с помощью простых в использовании библиотек.
Если вам интересно, Spotify предоставляет аналогичную функциональность через свой SDK веб-воспроизведения. Тем не менее, в настоящее время он находится в бета-версии с ограниченной поддержкой, работает только для платных подписчиков и требует письменного одобрения Spotify перед использованием в коммерческих продуктах. Это далеко от предложения Apple, но все же неплохо, учитывая, что большинство (если не все) других потоковых сервисов вообще не предоставляют такой возможности.
Подготовка
Прежде чем приступить к работе с MusicKit JS, нам нужно сделать некоторые приготовления. То есть получить себе токен Apple Music API.
Удивительно, но это может быть немного сложной задачей, особенно с довольно запутанной документацией Apple.
Прежде всего, вам нужно быть участником Программы разработчиков Apple. Для этого потребуется сложная регистрация и оплата в размере 100 долларов США в год. платеж.
После этого нам нужно перейти на панель инструментов Apple Developer и собрать несколько деталей:
- На вкладке Членство получите свой идентификатор команды.
- Далее нам понадобится идентификатор MusicKit (по одному на приложение):
- Перейдите на вкладку Сертификаты, идентификаторы и профили.
- Там перейдите на вкладку Идентификаторы.
- Нажмите кнопку "+" рядом с заголовком (если вы работаете в команде, для ее отображения требуются права Администратора или Владельца учетной записи. ).
- Введите имя своего приложения и имя «обратного домена» в качестве идентификатора и нажмите «Продолжить», а затем «Зарегистрироваться».
3. Теперь, когда правильный идентификатор уже настроен, мы можем создать закрытый ключ для доступа к службе MusicKit:
- В разделе Сертификаты, идентификаторы и профили перейдите на вкладку Ключи (видна только для администратора или владельца учетной записи).
- Нажмите кнопку "+", введите необходимые данные и установите флажок MusicKit (если у вас несколько идентификаторов MusicKit, вам нужно будет выбрать один из них).
- Нажмите Подтвердить и загрузите файл ключа .p8 (его можно загрузить только один раз, так что берегите его!)
4. Содержимое файла — это ваш закрытый ключ, а имя файла должно содержать идентификатор ключа в качестве последних десяти символов в имени файла (сразу после подчеркивания). Если вы изменили имя файла, идентификатор ключа также должен быть доступен на панели инструментов разработчика.
Здесь много всего, но мы еще не закончили.
Только теперь, со всеми подробностями, мы наконец можем сгенерировать веб-токен JSON (JWT), необходимый для доступа к сервису.
Для этого мы будем использовать JS. NodeJS для конкретного модуля jsonwebtoken и следующего кода:
С помощью приведенного выше кода мы генерируем и выводим в консоль требуемый токен JWT.
Кстати, то, как вы будете управлять своими токенами JWT, зависит только от вас. В нашем случае для демонстрационных целей нам понадобится только один токен, поэтому он установлен на срок действия 180 дней (максимальное значение).
Интеграция
Итак, получить жетон было довольно сложно, но дальше будет только легче. Давайте, наконец, займемся кодированием!
Установка
Во-первых, нам нужно установить JS-библиотеку MusicKit. Единственный официальный способ сделать это — использовать тег <script>, указывающий на CDN Apple:
Некоторым веб-разработчикам (включая меня) это может показаться немного устаревшим. Чтобы упростить процесс разработки, вы можете поискать интеграцию сторонних модулей NPM, но я предпочел оставить все как есть, с некоторыми типами TypeScript сверху.
Если вы являетесь пользователем TypeScript, наборы текста могут значительно облегчить вам навигацию по любой библиотеке. Иногда лучше официальной документации!
Что касается MusicKit JS, то в нем есть несколько типов в открытом доступе. Они не идеальны и немного устарели, но, тем не менее, могут быть полезны.
Инициализация
Теперь, когда библиотека установлена, мы должны ее инициализировать. Есть два способа сделать это — назовем их «способ HTML» и «способ JS».
способ HTML
В первом вы даете больше контроля библиотеке, просто сообщая ей, что делать с помощью пары HTML-тегов. Для настройки просто добавьте несколько тегов <meta> к <head>:
После этого пользователю нужно будет авторизоваться в Apple Music, что библиотека также может сделать за вас, если вы просто покажете ей, к каким элементам она должна подключаться через разные id:
Способ JS
Хотя настройка HTML может быть удобной, я предпочитаю немного более подробный способ, при котором я лучше контролирую происходящее. Вот почему с этого момента я буду рассматривать исключительно JS, но вы можете узнать больше о способе HTML в официальной документации.
Во-первых, вам нужно прослушать musickitloaded элемента document, чтобы узнать, когда библиотека будет готова к использованию. Лично я предпочитаю заключать его в Promise, чтобы ограничить потенциал 'ада обратных вызовов' и получить более чистый код:
Когда мы знаем, что библиотека загружена, мы используем метод configure() глобального объекта MusicKit для создания и настройки фактического экземпляра MusicKit, который мы будем использовать позже (аналогично тегам <meta> в настройке HTML).
В приведенном выше коде именно этот экземпляр я разрешаю из промиса. Я также очищаю глобальную область видимости от объекта MusicKit, так как в ней больше нет необходимости.
Чтобы авторизовать пользователя, мы можем использовать метод authorize(), который возвращает обещание, когда процесс завершится.
использование
На этом этапе документация и необязательные типы должны быть вашим руководством. MusicKit JS предоставляет вам доступ почти ко всем функциям, которые вы получаете из самого приложения Apple Music — управление воспроизведением музыки, поиск в каталоге Apple Music, управление личной библиотекой пользователя и многое другое. !
С учетом сказанного давайте рассмотрим несколько примеров использования возможностей MusicKit JS.
Воспроизведение одного из плейлистов пользователя
Управление воспроизведением музыки
Важно отметить, что при переходе к предыдущей песне (skipToPreviousItem()) в библиотеке MusicKit возникла ошибка. В результате возникает ошибка, а также диалоговое окно ошибки с сообщением вроде:
Метод play stop() был вызван без предыдущего дескриптора play()
Кроме ложных предупреждений, все должно работать нормально. Итак, поскольку это ошибка библиотеки, лучшим выбором будет скрыть диалоговое окно с помощью CSS:
Поиск в каталоге Apple Music
При использовании search(), а также других методов запроса стоит знать, что они принимают параметр с именем queryParameters. Это объект параметров, которые передаются нижеприведенному вызову API в соответствии с документами Apple Music API (которые отделены от документов MusicKit JS). Опять же, документы Apple довольно запутаны, поэтому вам нужно будет разобраться.
Вывод
Итак, это лишь несколько распространенных примеров того, что вы можете делать с MusicKit JS. Это дает вам широкий доступ к потенциалу Apple Music, и мы лишь поверхностно коснулись его. Теперь вы можете узнать больше и создать собственную интеграцию с Apple Music!
Если у вас есть какие-либо вопросы или вы застряли в документах — не стесняйтесь оставить комментарий внизу, и я постараюсь помочь.
Чтобы узнать больше о веб-разработке, подпишитесь на Twitter, Facebook или через мою рассылку. Кроме того, если у вас также есть блог по кодированию, рассмотрите возможность проверить CodeWrite — специальный инструмент для ведения блога для разработчиков, с большим опытом редактирования и публикацией в один клик. в Dev.to, Hashnode и Medium (обработка блоков кода — также преобразование GitHub Gists)!
