julyee / jukebox

Jukebox! by Julyee

Jukebox

by Julyee

Web music player for everyone!
https://jukebox.julyee.com

Play music, control it from your phone, let guests add tracks from their phones, get song suggestions, use other devices as wireless speakers for a multi-room sound system, no downloads, no extra accounts, just a simple website!

Roadmap:

• Connect using Apple Music
• Remotely control music
• Connect devices as speakers
• Use QR codes for easy connection
• Display lyrics for songs
• Recommend related songs
• Display guest names on music queue
• Configurable guest rules
• Save playlists remotely or locally
• Audio visualizations
• Connect using Spotify

---

Running your own server

Clone this repository then run:

yarn install

Create an Apple Music developer token

 node ./keys/music-token-encoder.js [PRIVATE_KEY_FILE] [TEAM_ID] [KEY_ID] [OUTPUT_FILE] [EXPIRES_IN]

where PRIVATE_KEY_FILE is the path to the p8 file you obtained from apple, your TEAM_ID as specified in your Apple developer portal, the KEY_ID provided by Apple (usually part of your key file name), OUTPUT_FILE is the path where the token should be placed (must be ./www/keys/devtoken.jwt for this application) and EXPIRES_IN is the duration of the token (i.e. 31d for a duration of 31 days). For more information check the Apple documentation.

The resulting file must be placed in ./www/keys/ and be named devtoken.jwt

Create a file that holds your last.fm API key

Create a file named last.fm.json in the ./www/keys folder with the following contents:

{
    "service": "Last.fm",
    "endpoint": "https://ws.audioscrobbler.com/2.0",
    "key": "API_KEY"
}

where API_KEY is your last.fm API key.

Create an SSL certificate

I recommend using Let's Encrypt as it's free and easy to use, alternatively, you could follow a guide like this one to create a self signed certificate.

Run the server

node ./server --cert [CERTIFICATE_FILE] --key [KEY_FILE]

where CERTIFICATE_FILE is the path to your SSL certificate and KEY_FILE is the path to your public key file.

---

Contributing

Please log any bugs you encounter and feature requests to our issues section.

If you wish to contribute to the code base, feel free to tackle any logged issue and/or submit pull requests.

---

License

MIT

jukebox's Issues

Integrate Apple Music

• Integrate Apple Music login button
• Create interface to check connection (login) before every API call

[GUI] Implement shortcut to play albums/playlists

[RECOMMENDATIONS] Sometimes the same song is played multiple times.

This happens because the recommendation service (last.fm) is not aware of the users played/queued songs.

Duplicated songs must be removed manually to adhere to the terms of service of the music providers.

[JUKEBOX] Connection screen hangs on connection failed

When WebRTC fails to connect due to unreachability between clients, the connection screen just hangs

[QUEUE] Keeps track of currently playing song

[QR] QR code is not displayed on clients.

Although the host hash code is displayed when a client connects, the QR code is missing.

Integrate search

• Implement search suggestions
• Trigger search when valid string provided
• Display song results
• Display album results
• Display artist results

[GUI] Design album view.

Should feature:

• Large artwork
• Album name
• Artist
• Release date
• Commentary (if available)
• Total duration
• Song list
• More dialog button

No search results text not working.

When there are no search results the UI displays "Search Results for..." when it should display "No search results for..."

Search for: "give me tha power"

[LYRICS] Implement more providers

At the moment only one provider is being used out of about 6 available.

[QUEUE] Keeps history of previously played songs

[SPEAKER] Certain browser combinations do not play audio

Only safari clients can connect (see #26) and even though they connect and the speaker icon is displayed in the client, no audio is played through the speakers.

[QR] QR code is not updated on reconnect

If the server gets disconnected, although it reconnects automatically, the QR code is not updated.
The actual code is displayed properly though.

[GUI] Create playlist view

• Create playlist media item class
• Create playlist route
• Use album view as base.

[QUEUE] Responds to next/previous song events

[JUKEBOX] Up next is always empty in jukebox clients.

Implement a method to get a list of the upcoming songs from jukebox clients. The obvious solution would be polling but it feels like spaghetti code :(

Implement "play song" functionality

• When a song is clicked it should immediately start playing
• The queue should be cleared
• Implement option for "play next"
• Implement option for "plat later" (play last)
• Implement option for "play now and keep queue" (?)

[GUI] Open new screen when album is clicked

• Hook up events for opening the album view
• Open a new page or modal view (TBD)

Content Area

Implement the content area:

• Should display a new component for every navigation event
• Should occupy the largest area of the screen
• Should be "sandwiched" between the tool bar and the player

[QUEUE] Use local storage to save the current queue so it can be restored

TBD

Player Widget

Create a persistent player UI at the bottom of the screen:

• Album art on the left
• Song title + artist in the middle
• Progress bar at the top
• Volume pop-up on the left
• Album information controls + options on the far right

Change `rating` to `isExplicit` in song

The current implementation of rating returns a string that could be "explicit", that is too close to Apples implementation and may not be compatible with other services.

Change to isExplicit which returns a boolean for future compatibility.

Hook up player controls

• Progress bar
• Scrub through progress bar
• Play/pause button
• Next button
• Previous button (needs a custom queue)
• Album art
• Song's name/artist/album name
• Song's length/current time

[GUI] Implement lyrics display in now playing screen

Maybe implement them karaoke style. This library can be used to fetch lyrics with some timestamps:
https://github.com/ddddxxx/LyricsProvider

Navigation Drawer

Implement the navigation drawer:

• Appears from the left
• Triggers a navigation event

Contains:

• Jukebox Id
• Home
• Library
• Search
• Import
• Now Playing

[LYRICS] Server should cache lyrics

Due to the use of single providers, the server should implement some cacheing mechanism for lyrics.

[JUKEBOX] Add ability to read QR code from within the app

Currently, Jukebox QR codes can be read from external apps (i.e. the camera app) but within the app you must type the code manually. Add option to use the camera to read a QR code.

I looked at this:
https://github.com/nimiq/qr-scanner

Top Toolbar

Create a basic UI toolbar:

• Title of section in the middle
• Menu access on the left
• Search bar on the right
• Menu items should navigate to the proper page
• Using the search bar should navigate to the search results

[LYRICS] Some times the lyrics are out of sync

The current provider has a delay field in the result that is not being used, maybe that's the problem

Music Service Interface

• Should be designed to support

• Apple Music

• Jukebox service

• Other music services in the future

• Jukebox will not implement

• Playlist creation

• Playlist import

• Add song to library/playlist

[MUSICKIT] MusicKit.js does not support video playback.

Although the API supports videos as media items, playback is not supported.

• Hide video results from search page
• Report to Apple/make feature request
• Use youtube videos as alternative source

[QUEUE] Can add songs to the queue

[IOS] Home screen WebApp can't access camera

The button and space for the camera appears but it won't ask for permission or display it.

Create Splash Screen

• Apple music login
• Jukebox ID login
• Donate - paypal
• Sponsor - patreon

[JUKEBOX] Implement STUN (??)

Evaluate if implementing STUN would be necessary, although most of the features are meant to be used within the same network, there are cases where expecting all clients to be connected to a "friendly" would be unrealistic.

[JUKEBOX] When safari is the host only safari clients can connect.

When the app is started in a safari browsers, firefox and chrome fail to connect.

• Chrome returns an error
• Firefox hangs trying to connect.