zachomedia/apple-music-webplayer

Web player for Apple Music (using MusicKit JS)

Apple Music Web Player

music.zacharyseguin.ca

This is a web player for Apple Music using MusicKit JS.

Apple and Apple Music are trademarks of Apple Inc., registered in the U.S. and other countries.

Features

* denotes features only available when signed into Apple Music.

• Access to the entire Apple Music library
• Access to your personal Music Library*

Playback

• Full track playback*
  • Control volume, shuffle and repeat modes
• Add songs to the playback queue
• Full screen player
• Use keyboard media controls to play/pause, skip track and return to previous track (browser must support Media Session)
• Notifications when the track changes (can be disabled if not desired)

Discovery

• Top charts
• For you*
• Recent*
• Search both Apple Music and your Library*

Library management

• Add playlists, albums and songs to your library*
• Add songs to playlists (new or existing)*
• Love and dislike songs*

Screenshots

---

Development

This web player is written using Vue.js.

Getting started

git clone https://github.com/zachomedia/apple-music-webplayer.git
cd apple-music-webplayer

# Install dependencies
npm install

# Add the private settings
cp src/private.js.sample src/private.js

# Add your Developer Token to src/private.js
#  To generate one, see below.

# To run a local development instance
npm run serve

# To build the app (to dist folder)
npm run build

Generating an Apple Music Developer token

Apple's official documentation provides a base, and then you can visit Creating an Apple Music API Token for a great guide on how to generate the token.

apple-music-webplayer's Issues

Playlists with more than 100 songs only show 100 songs

Add a "Recently Added" or "Library" page

On iOS and iTunes, the library page shows the most recently added songs/albums to the library for quick access. It'd a good addition to the web app if this is possible.

Same artwork (with matching sha1) is downloaded multiple times, from different locations, for the same album

As documented in other bug reports, MusicKit.js has problems loading artwork timely.

One thing I noticed is that often, for the same album, it will re-download the same artwork multiple times, from different locations (the URL of each asset is different) when displaying the songs list.

But when I checked the SHA1 of the file, they match, which means that the same file is being downloaded twice and therefore it is a waste of data.
It also severely slows down the application.

This happens with an incredibly annoying frequency in files in my Library, both matched and uploaded.
It also does not happen with some albums, both matched and uploaded.

Sometimes player forgets settings (ex. dark mode)

Songs don't change immediately after manually changing

The same song keeps playing, even though the thumbnail and the title being changed.
It takes time to change, and suddenly all the previous clicks are recorded and songs go way ahead than the very next one.

Hide "Add to playlist" when a playlist is already in your library

Add playlist to library button stays enabled even after the playlist is added to library. That button should be removed after the playlist is added to library.

Select Bitrate

Great tool you are creating, congratulations!

One thing I noticed though is that the songs are only streamed at a low bitrate (64kbps). The Music Kit JS API allows you to select between 64kbps (normal quality) and 256kbps (high quality) (https://developer.apple.com/documentation/musickitjs/musickit/playbackbitrate)

Is it possible to switch to better quality?

Thanks and keep up the good work!! :)

library playlist view does not refresh after adding a playlist to library

A newly added playlist does not show up in library playlist view until user hit refresh. Expect to refresh the library playlist section immediately after adding any container to library.

On Queue popup, history tab should be reverse sorted

Add "Go to album" for the current playing song

For the current song, add a "Go to album" link.

Tab crashes when viewing Library songs list

About 1.29GB of unique album art data (assuming duplicate data is not served by the MusicKit.js API) is associated for the around 10.000 songs in my Music Library.

The tab crashes on Chrome when about a third if data is loaded, when viewing the list of songs. The app may be hitting memory limits (it crashes at around 4GB) as this is reproduced in a computer with 8GB of RAM.

Design mockups?

As the app is currently slightly messy, it might be useful to start accepting simple design mockups. If you do, I can try to contribute myself.

Can't play music that has been bought by the user

Music that has been purchased by the user will show up in the library listing, but uppon clicking on any song, the following errors are logged in the console:

I'm specifically talking about music that has been purchased, and is not available otherwise. For instance, I'm trying to listen to King Crimson's In the Court of the Crimson King, which is only available throught purchase.

Links target blank

All links in the footer must have target blank to keep music playing
(allways keep user on the app 😉)

[Feature Request] Loop and Shuffle over listed tracks

A key feature that seems to be missing (or at least very hard to discover) is loop and shuffle.

The "PLAY ALL" button can clearly keep track of all the tracks listed when displaying a playlist, album or an artist's discography, so I imagine it can't be too hard to get it to loop and shuffle manually if Apple's API doesn't already provide that option.

Unable to Build

After running npm install on windows I get teh following warnings

npm install
npm WARN [email protected] requires a peer of [email protected] - 3 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

audited 11834 packages in 8.416s
found 0 vulnerabilities

Then when running

npm run build

ERROR  Failed to compile with 1 errors                                                                               17:48:53

This relative module was not found:

* ./private in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js
ERROR  Build failed with errors.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `vue-cli-service build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Adam\AppData\Roaming\npm-cache\_logs\2018-06-17T16_48_53_700Z-debug.log
PS E:\Users\Adam\Documents\GitHub\apple-music-webplayer2>

I'm not that familiar with node & npm but I'm pretty sure something here isn't quite right .

I completely love it in the browser though!

2018-06-17T16_48_53_700Z-debug.log

Migrating to Typescript

As this is a project that likely has a lot of public appeal, it would be nice if the codebase was as accessible as possible for modification. Typescript helps fill that role, making it much simpler to debug and develop Javascript applications by forcing types.

Would a PR converting the system to Typescript be acceptable?

Random error on playlist play

Sometime playlist stop playing on next song and log this errors:

Uncaught (in promise) DOMException: Failed to read the 'buffered' property from 'SourceBuffer': This SourceBuffer has been removed from the parent media source.
    at Buffer.get [as endBufferedTime] (https://js-cdn.music.apple.com/musickit/v1/musickit.js:13:124407)
    at https://js-cdn.music.apple.com/musickit/v1/musickit.js:13:126279
    at new Promise (<anonymous>)
    at https://js-cdn.music.apple.com/musickit/v1/musickit.js:13:126215
    at Buffer.<anonymous> (https://js-cdn.music.apple.com/musickit/v1/musickit.js:13:125856)
    at https://js-cdn.music.apple.com/musickit/v1/musickit.js:13:14390
    at Object.next (https://js-cdn.music.apple.com/musickit/v1/musickit.js:13:14495)
    at https://js-cdn.music.apple.com/musickit/v1/musickit.js:13:13411
    at new Promise (<anonymous>)
    at __awaiter (https://js-cdn.music.apple.com/musickit/v1/musickit.js:13:13146)
    at Buffer.dequeueBufferAction (https://js-cdn.music.apple.com/musickit/v1/musickit.js:13:125622)
    at SourceBuffer.i (https://music.zacharyseguin.ca/static/js/vendor.e775b0f607ff1d577284.js:12:31208)

musickit.js:13 Uncaught (in promise) DOMException: The play() request was interrupted by a new load request. https://goo.gl/LdLk22

Navigator: Chrome Version 67.0.3396.99 (Build officiel) (32 bits) / Windows
Not tested on my mac

Albums from previously deleted songs show on the 'Albums' section.

I have songs that are no longer on my Apple Music, who's album title, with a blank cover show on the albums section. Furthermore, when I click on them, there are no tracks.

Wrong (and location restriced) version of song is added to Library

I tried adding this song to Library https://itunes.apple.com/br/album/they-long-to-be-close-to-you/14172524?i=14172565&l=en.
Instead of adding that song, it added another version from a generic compilation album that is not available in my location. So while streaming is fine and works, the version that was added is wrong and does not play.
When I try to play the song added it gives "unexpected error" message.

Add Top Charts

Only 98 songs out of my over 340 songs show up in my library with the 'Songs' layout.

As the title says.

Songs Not Playing

Not sure what I am doing wrong here, but when I select a song, it appears at the top of the screen but does not begin playing. Previews of songs would play fine before I logged in (the 30 second clips), but after logging in, no songs play. My playlists and library do show up fine.

Smart playlists do not appear.

I have 2 "smart" playlists and they do not show up on your web player.

Not Playable Error

Every time I try to play a song which has been added from Apple Music, I get a "Not Playable" error at the bottom of the page.

Homepage is mostly useless

It would be better for the homepage to show something more than the current welcome message, as having to go to Recommendations for example each time is slightly counterintuitive. I'd suggest to show recently listened songs on the homepage, and keep the welcome message below.

Create playlists + add songs to existing playlists

https://www.reddit.com/r/apple/comments/8rls4r/i_started_building_an_apple_music_web_player_with/e3mz7lj

Add ability to love/dislike song

First: thanks for building this, it's awesome! I'm using it on Linux, and it's super slick.

I tend to love/dislike songs to affect Apple's recommendations, but don't see a way to do that in the webplayer yet. I'm not familiar with Apple's APIs for this, but it looks like it's possible to do this via the API? https://developer.apple.com/documentation/applemusicapi/add_a_personal_song_rating

When clicking next or previous, and that song is not available, it always stays on the same song

When clicking next or previous, and that song is not available, it always stays on the same song.

The previous and next buttons should go forward and backwards until a playable song is found.

No songs play, COR issue

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://play.itunes.apple.com/WebObjects/MZPlay.woa/wa/widevineCert. (Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘https://embed.music.apple.com’).
Firefox, problem occurs without any add-ons enabled. Apple Music toolbox works fine.

Content Security Policy

On attempting to play anything in Safari 11.1.2 for Mac, it just sits there spinning and logs:
Refused to load *url* because it does not appear in the media-src directive of the Content Security Policy.

I believe this is trivially solved by adding a <meta http-equiv="Content-Security-Policy"> to the header of each page, allowing access to Apple's AWS.

Instructions for deploying a custom AMW

I am working on converting this into a native electron app (see this release) but I'm running into some bugs for which I'll have to run my own instance first, so how shall I do this?

Ability to Add to playlist

Cannot login with Google Chrome

Google Chrome v67.0.3396.99 (Official Build) (64-bit)
Manjaro Linux KDE

After signing into the auth window that pops up, the pop up window shows a blank white page. Closing that window does not do anything either. Neither does refreshing the page.

https://imgur.com/a/fvTZXEc

If an account doesn't have Apple Music, show the error message to the user

Artwork takes too long to load

All the artwork from matched or uploaded songs in my library take too long to load.
I've noticed that all artworks that are not from the store are loaded in the .png format.
However, none of the songs in my library (matched or uploaded) have .png artwork.
This seems incredibly wasteful, slow and unnecessary.

music not load

just login as usual music library not loaded

https://screenshotscdn.firefoxusercontent.com/images/2c250f32-84fa-4824-94b5-8e8310265428.png

Apple Music APIs randomly starts returning 403

This results in you having to logout / log back in.

Two issues:

1. The application should handle this better
2. MusicKit JS should change the user to logged out when this happens

Enhancement request: Electron app?

It would be awesome if we could get an Electron version or something with Photon.css or an Apple-like CSS system for native integration.

I might do one myself based off of this, but I'd at least like to throw in a suggestion.

Beats one and radio support

It would be awesome to have access to beats one and other radio stations through the web player, I'd really love to be able to use this as a complete replacement of itunes. Is radio support part of the API currently or is this not possible?

[Feature] Library sorted by genre.

I use the genre sorting to listen to my music and it would be great to see it on this web player.

Add last.fm integration

A really great feature would be to add last.fm integration to the player.

Enhancement request: i18n

No way to delete/clear your queue/up next and track selection

I can see my up next but there is no way to clear the queue or manipulate it (move songs around in the queue).

This is needed for Apples bad habit of adding all tracks in a playlist/album if its played via double-click vs. using specifically "play next" "play after" that does build a queue one track at a time. Maybe also add an option to defeat that functionality so double click plays just the selected track only.

Empty query results in unexpected error

URL for Library: https://music.zacharyseguin.ca/library/search?q=
URL for Apple Music: https://music.zacharyseguin.ca/search?q=

The included url results in an "Unexpected error" in the UI, for both for Apple Music, and Library queries.

The first error is with Apple Music and the second with the library.

Not including a developer token makes it hard for people to contribute

Right now if someone wants to run this project locally, they need to either have their own Apple developer account and generate their own token, or pull up the compiled source from the production build on music.zacharyseguin.ca and find your token there.

The token was designed to be shipped in client-side code, so I don't see any huge concerns with publishing it in the repository. If someone wants to abuse the API with your token they can scrape the token from the built code anyway, so not publishing it here doesn't really give you much additional protection.

(Similarly with the Sentry plugin - right now you have to either delete the privateConfig import or create a new file before it will build)

Keep playlist / song when i change settings

When i change my settings, player reset current playing song.
I'll be cool if current song whould be keeping 😊

PS: thx for your work. Just a awesome idea 👍 ! I'll make PR soon for features and bugs fixed !

Long tracks stop playing at 9:59

Tracks longer than 10 minutes stop playing at 9:59 minutes. Nothing gets logged to the console.

I keep getting "An unexpected error occurred" every time I load any page.

Adding a volume slider...