Integrate Apple Music playback into ListenBrainz

[vardansaini]

Problem

ListenBrainz currently supports integration with Spotify, but there is a growing demand for integration with other music services. Apple Music is a popular music streaming service, and integrating it into ListenBrainz will provide more options for users to access personalized recommendations.

Solution

Integrating Apple Music into ListenBrainz involves several steps, starting with OAuth configuration on the frontend. The OAuth process facilitates user authentication and access to their Apple Music account. This integration aims to enhance the ListenBrainz experience by allowing users to play music seamlessly from Apple Music through the BrainzPlayer.

1. OAuth Integration Frontend: To initiate the integration of Apple Music into ListenBrainz, the first step is configuring OAuth on the frontend. This is accomplished using the MusicKit JavaScript library, which offers authentication through the OAuth protocol. To begin, include the MusicKit library in the webpage with the following script:
   htmlCopy code

<script src="https://js-cdn.music.apple.com/musickit/v3/musickit.js" data-web-components async></script>

2. Developer Token and MusicKit Configuration: To configure MusicKit on the frontend, a developer token needs to be generated on the backend and sent to the frontend. After including the MusicKit library, you can configure the MusicKit instance using the generated developer token:
   javascriptCopy code
   document.addEventListener('musickitloaded', async function () { try { await MusicKit.configure({ developerToken: 'DEVELOPER-TOKEN', app: { name: 'ListenBrainz', build: 'GIT-COMMIT-SHA', } }); const music = MusicKit.getInstance(); } catch (err) { // Handle configuration error } });

3. User Authentication and Token Submission: The authorize method provided by MusicKit can be utilized to authenticate the user and gain access to their Apple Music account. Upon successful authorization, the obtained Music-User-Token is sent to the server's callback URL. However, it's important to note that Apple Music does not require a client secret for OAuth; instead, the process is carried out client-side using MusicKit.

4. Backend Processing: The callback URL endpoint for music services receives the authorization code for other services. In the case of Apple Music, the OAuth process is slightly different due to the absence of a client secret. MusicKit is used to handle authorization client-side, and once the user grants access, the music.authorize().then(musicUserToken => {...}) block is executed. The retrieved Music-User-Token is then submitted to the server at the callback URL.

5. Storing Token and Storefront: To ensure a seamless experience, the obtained token and the user's storefront (region) should be stored in the database for future use. This data will be crucial for accessing and customizing the user's Apple Music content.

6. Integrate Apple Music in BrainzPlayer: The BrainzPlayer, which is a web-based music player used in ListenBrainz, can be extended to support Apple Music playback. MusicKit is integrated into the player in a manner similar to its inclusion in the OAuth frontend setup.

7. Player Controls and Event Handling: Once the BrainzPlayer is loaded with MusicKit, various playback controls like play, pause, etc., can be accessed using the MusicKitInstance. Event callbacks can also be added to respond to changes in playback state through the playbackStateWillChange and playbackStateDidChange events.

8. User Authorization Check: Before implementing event callbacks, it's essential to verify whether the user has authorized Apple Music. This step ensures that only authorized users can interact with the Apple Music integration in the player.

9. Track Enqueue and Playback: To play tracks from Apple Music, the MusicKit player allows tracks to be enqueued using the setQueue or playNext method. The Apple Music Identifier of the desired track is used to facilitate playback.

10. Search and Playback: In cases where a specific track lacks an Apple Music Identifier in the ListenBrainz database, the search API can be employed to retrieve relevant tracks. Subsequently, tracks can be enqueued from the search results into the player for seamless playback within the BrainzPlayer interface.

Action

BEFORE MIDTEM EVAL

Video of integration so far :-
https://github.com/metabrainz/listenbrainz-server/assets/61253200/0851bc57-b9f3-4fda-84e2-7a496376fa9d

[amCap1712]

While testing on test.lb I found a couple of issues:

1. Apple Music Player asks for authorization as soon as the page loads, this seems rather annoying. We should not try to authenticate until the user is actually trying to play with apple music's player.
2. The buttons in the screenshot work correctly but the current selection is not highlighted. This is confusing for the user and needs to be fixed.
   

[amCap1712]

Hi! Please update the PR description with the workflow describing how this works, what are the blockers and what parts are pending. @MonkeyDo is reworking the test suite of frontend tests so it might be fine to merge this as is and then the tests could come in a separate PR.

[MonkeyDo]

I can't test the music playing because I'm not a premium user, but I have some findings as a non-premium user :p

[MonkeyDo]

Hello @vardansaini , what is the status on this PR?

[vardansaini]

Hello @vardansaini , what is the status on this PR?

Hi @MonkeyDo I got super busy with University and some family stuff, I will be back on it as soon as possible. My apologies for the delay!

[pep8speaks]

Hello @vardansaini! Thanks for updating this PR. We checked the lines you've touched for PEP 8 issues, and found:

There are currently no PEP 8 issues detected in this Pull Request. Cheers! 🍻

Comment last updated at 2024-04-18 12:12:28 UTC

My own review from previous code, now outdated. I adressed all issues from my review

[MonkeyDo]

Resolved merge conflicts, deploying to test.LB to ensure I didn't break anything

[anshg1214]

I have tested this PR on test.lb, and have found a couple of issues as discussed on chat. LMK if I can help with anything.

[anshg1214]

LGTM 🚀