musish/musish

Apple Music...ish

Musish (musi.sh)

The unofficial open source Apple Music webapp.

Built with React and Apple's MusicKit JS while utilising the official Apple Music API. Contains some serverless functions deployed with AWS Lambda to speed up certain functionalities. (Found in backend).

Looks neat, how can I contribute?

The Musish project welcomes contributions of all sorts; PRs, issues, feedback, comments, donations, or even just sharing the project would all be infinitely useful to us!

Please do remember to read our contributing guidelines before making a pull request.

We also welcome financial contributions in full transparency on our open collective, and we are extremely thankful for all those who have contributed already:

A massive thank you also to our code contributors, who you can see here

Self hosting

Building Musi.sh requires node and yarn.

Running the Musish web app:

1. Generating an Apple Developer Token (JWT):

Musish uses the Apple Music API and therefore you'll need a signed developer token from Apple.

Please reference Apple's official guide on generating the keys and an associated token.

2. Environment setup:

Musish requires two environment variables to start. You'll need to enter your Apple Developer token as APPLE_TOKEN, and a link to your hosted Musish backend with BACKEND_URL.

.env.example:

APPLE_TOKEN=your_apple_music_token
BACKEND_URL=https://musish.app

3. Install dependencies:

yarn

4. Launch Musish:

Start webpack dev server on port 8080:

yarn start

Or:

yarn build

This will create a directory called dist in the project root, these files can be served from a web server as static content.

Running the Musish backend:

We use Serverless to run our backend on AWS lambdas, however you can choose differently here.

Generating a Genius Developer Token:

If you wish to work on the Musish project's serverless backend, you will require a Genius Developer token.

Create a client access token via Genius' developer portal.

Is it safe?

Musish uses official Apple public APIs and libraries to handle authentication. The user is prompted to login directly on a new window under the Apple.com domain. Apple.com returns the user a temporary valid token to allow their browser to make requests to Apple Music data only.

At no point do we request, log, or gain access to information from a user of the site. The user's token is never sent to any server other than Apple's own. At no point do we ever intentionally pass any user information to any server which we control.

Our official build (https://musi.sh/) is powered by Github Pages with an AWS lambda providing both lyrics and artist information, we send no cookies or headers related to your Apple account.

---

Credits:

• Musish logo (headphone icon) provided by zidney from the Noun Project.

musish's Issues

Browser excessively re-rendering songs list when contains song which is playing

On initial look, it appears to be the result of considerably high CPU utilisation on some areas of the site.

content loaders

have cute little content loaders for album/playlist/song lists

Add play, shuffle, and 'show in Apple Music' button to albums

Context menu: Create dynamically.

Context menu on the songs list (and other similar components) should be generated and rendered dynamically when required (i.e. on a right click on a song).

Will also allow for simplified 'songBacker' css class (border between songs + background colours).

Drag 'n' drop: Songs, albums, and playlist into playlists.

As it says on the tin.

Virtualized list for Albums

Playlist song lists infinite

Logout

For You page

Double right click needed to trigger context menu

Click on volume should mute/unmute

When clicking on the volume button, it should mute and unmute.

Playlists and album modal: infinite loading

Allow dragging for horizontal scroll components.

Search page

Music player queue

User needs to be able to see and adjust the current queue for the music player.

Show complete album button for library albums

If you are viewing a library album and you have not stored all of the songs in your library, you should be able to see the whole album on Apple Music from a 'show complete album' button.

Serverless functions

Currently identified requirements:

• Artist name -> catalogue id mapping
• Artist name -> catalogue data
• Artist name -> catalogue image

Abstract away player functionality

Need to be able to pass song items, album id, playlist id, to a function which passes them to MK and handles errors.

Shuffle does not unshuffle.

Clicking shuffle shuffles the songs, clicking unshuffle does not unshuffle them.

Shuffle

Add the shuffle button, I miss it

Images placeholder

album modal to be aware of library or apple music

Currently only loads albums from the users library, needs to also allow apple music

Skipping ahead in a song causes slider glitch.

In shuffle mode, clicking a new song to play plays a different song

It seems that whilst in shuffle mode, clicking on a new song to play from the list doesn't play that song. It seems to reshuffle the queue and then just play whatever's next in the queue?

Music player: Allow dragging (seeking) of song progress bar.

Allow user to drag the slider of the song progress bar and seek to specified part of the song.

Infinite scrolling

Player: queue icon to toggle queue state

Also indicate state with style icon.

Catalog artist page

Add to library

If a song is not in the users library, then show a button to add to library. Maybe cool animation for the button as well when the song is added?

Music player volume control

User needs to be able to adjust the volume of the music player via the music player component.

Autoprefixer

https://github.com/postcss/autoprefixer

Album panel component

Browse while not logged in

Not an urgent issue - but would be great for people to be able to check out how our site works, and play the song previews, without actually being signed in.

Artists page

Adding context menus to playlists + albums

Search bar

Make the right click features more obvious

So perhaps on hover, the time for a song should turn into a 3 dots symbol which on left click shows the right click menu.

Base64 encoded url parameters

Albums, songs, artists, and playlists need to have the url parameter for their identifiers base64 encoded as to not upset the router.

Users are not able to play music on the chrome browser.

Works on some chrome browsers, and not others. Running the project on localhost in development causes no issues. When pushed to production under its domain, certain people cannot access it on even the latest versions of chrome.

Currently getting a 403 error on musi.sh

If you've been logged in for too long the bearer token appears to expire.
At the point of getting a 403 we should just return the user to the login screen.

Player: show current and total time

Colors should be in variables

Remove `:global` styles

All components styles should be modules

Songs playing on top of each other.

When playing a song from your playlist, and then searching for a song, and playing it, they will both play at the same time on top of each other.

Sidebar has a horizontal and vertical scrollbar.

Show buffered progress

use ...player.currentBufferedProgress

Song list: non-playable songs

Songs which are not playable should be displayed in the list, but disabled. They should be filtered out of the songs list in the queue (when added).

For You cannot fetch content

Uncaught (in promise) Error: The requested content is not available.

Browse page actually needs data

Need to add data for browse, including heavy rotation, recently played, and recommendations (like chill mix, favourites mix etc)

Virtualized list for Playlists