https://github.com/weareblahs/untitledmusicstreamingthing
React-based online music player that plays through Spotify and your own uploaded music (see weareblahs/UMSTserver)
https://github.com/weareblahs/untitledmusicstreamingthing
music-player spotify-web-player web-player
Last synced: about 1 month ago
JSON representation
React-based online music player that plays through Spotify and your own uploaded music (see weareblahs/UMSTserver)
- Host: GitHub
- URL: https://github.com/weareblahs/untitledmusicstreamingthing
- Owner: weareblahs
- License: mit
- Created: 2024-08-12T08:43:33.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-09-30T11:20:07.000Z (8 months ago)
- Last Synced: 2025-02-10T06:44:20.765Z (3 months ago)
- Topics: music-player, spotify-web-player, web-player
- Language: JavaScript
- Homepage:
- Size: 772 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# About this project
This is a web player that plays from Spotify or your local sources (that can be uploaded to your local server via "Distribution Dashboard").
# How to get started?
## Before you start
You are required to provide your Spotify Client ID and Client Secret for the app. See `src/WebComponents/Backend/SpotifyClientData.jsx.template` for details on how to set it up.
Make sure that you have Node.js installed, as this will be used for the client itself.
## 1. Set up the server.
The server is explicitly required for the usage of Untitled Music Streaming Thing, as it uses the server to log in. Host it locally on port 5000 for your own access. See [here](https://github.com/weareblahs/UMSTServer) for more details about the server.
## 2. Clone this repository.
After you finally get the server up and running, clone this repository.
```bash
git clone https://github.com/weareblahs/UntitledMusicStreamingThing
cd UntitledMusicStreamingThing
```
## 3. Install required modules for the app to run.
This will install all required modules for UMST to run properly.
```bash
npm install
```
## 4. Start UMST and register a local account.
After you added all required modules, start the server.
```bash
npm run dev
```
Then, go to the following address:
```
http://localhost:5173
```
Click on the "Sign up" button and follow the instructions.
## 5. Link to your Spotify account.
After logging in, click on "Link to Spotify" and follow the instructions to link to your Spotify account.
# Known bugs
- Sometimes the Spotify Web Playback SDK won't work. This can be resolved with sereval refreshes.
- This problem only happens when you run the app under local network (example: `localhost` and `127.0.0.1`). If you host this app in an online environment (example Vercel), the Spotify web player won't have any problems.
- Progress bar for Spotify won't update until an action is made (example: pause, next, previous, etc.)
# Credits (otherwise known as "What does this project use?")
| Application / Component name | Usage |
| --------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
| [MongoDB](https://www.mongodb.com/) | Backend database |
| [Express.js](https://expressjs.com/) | Backend API Controls |
| [React](https://react.dev/) | Frontend (app) code |
| [Node.js](https://nodejs.org/en) | Frontend/backend base |
| [NextUI](https://nextui.org/) | User interface framework |
| [Tailwind CSS](https://tailwindcss.com/) | Custom styling |
| [react-spotify-web-playback-sdk](https://github.com/y-hiraoka/react-spotify-web-playback-sdk) | Spotify playback SDK wrapper for React that allows me to integrate efficently |
| [ky](https://github.com/sindresorhus/ky) | Used for all fetch requests on the frontend |
| [tailwind-scrollbar](https://github.com/adoxography/tailwind-scrollbar) | Scrollbar for album search |
| [react-seekbar](https://github.com/kangju2000/react-seekbar) | Seekbar for playback component on frontend |
| [Font Awesome](https://github.com/FortAwesome/Font-Awesome) | Icons. via [react-icons](https://github.com/react-icons/react-icons) |
| [Bootstrap Icons](https://github.com/twbs/icons) | Icons. via [react-icons](https://github.com/react-icons/react-icons) |
| [Radio Canada Big via Google Fonts](https://fonts.google.com/specimen/Radio+Canada+Big) | Main font used for frontend |
| [Inconsolata via Google Fonts](https://fonts.google.com/specimen/Inconsolata) | Font used for track number and length |
| [js-cookie](https://github.com/js-cookie/js-cookie) | Used for getting and setting cookies used in the current session |
| [react-router](https://github.com/remix-run/react-router) - frontend uses react-router-dom | Used for routing to different components and pages |
| [jwt-decode](https://github.com/auth0/jwt-decode) | Used for decoding JWT-encoded tokens at the backend |
| [JSON Web Tokens](https://jwt.io/) | Used for encoding user data into token |
| [debounce](https://github.com/sindresorhus/debounce) | Used for delaying the search bar change state to prevent rate limits |
| [react-use-audio-player](https://github.com/E-Kuerschner/useAudioPlayer) | Local file playback (including playlist). Powered by [howler.js](https://github.com/goldfire/howler.js) |
## Other credits
- Music icon for placeholder image via [Wikimedia Commons](https://commons.wikimedia.org/wiki/File:Simple_Music.svg), uploaded by [Tokyoship](https://commons.wikimedia.org/wiki/User:Tokyoship).
Some credits for code (such as Stack Overflow code) can be found under comments in the code.
## More questions
- How to make a user an administrator so that they can access the Distribution Portal, which is required to upload music to the platform?
1. Encode `e92007c04006d555762093c6efa650fe` into Base64. You can use free tools to encode it, such as `https://base64encode.org`.
2. Go to `http://localhost:5000/users/(BASE64_ENCODED_STRING)` on your browser, where the `BASE64_ENCODED_STRING` is the result from Step 1 (hint: starts with ZTky...)
3. Get current user ID after logging in into Untitled Music Streaming Thing by opening up the console under Developer Tools. This will be used.
4. Follow the instructions from the response given in Step 2.