{"id":13709607,"url":"https://github.com/tthn0/Spotify-Readme","last_synced_at":"2025-05-06T16:32:05.582Z","repository":{"id":38244437,"uuid":"378571819","full_name":"tthn0/Spotify-Readme","owner":"tthn0","description":"A dynamic, customizable, and real-time Spotify now-playing widget that seamlessly integrates with your website or GitHub markdown files!","archived":false,"fork":false,"pushed_at":"2024-07-27T18:18:03.000Z","size":49,"stargazers_count":231,"open_issues_count":9,"forks_count":189,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-08-03T23:16:11.130Z","etag":null,"topics":["api","css","flask","html","python","spotify","spotify-api"],"latest_commit_sha":null,"homepage":"https://tthn.pythonanywhere.com/?scan=true\u0026theme=dark\u0026eq_color=rainbow","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tthn0.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-06-20T06:07:44.000Z","updated_at":"2024-08-01T06:20:28.000Z","dependencies_parsed_at":"2024-07-27T19:27:22.681Z","dependency_job_id":"d8274843-2c01-418c-91de-8547e0984e7f","html_url":"https://github.com/tthn0/Spotify-Readme","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tthn0%2FSpotify-Readme","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tthn0%2FSpotify-Readme/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tthn0%2FSpotify-Readme/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tthn0%2FSpotify-Readme/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tthn0","download_url":"https://codeload.github.com/tthn0/Spotify-Readme/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224513446,"owners_count":17323809,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["api","css","flask","html","python","spotify","spotify-api"],"created_at":"2024-08-02T23:00:42.396Z","updated_at":"2024-11-13T19:31:55.747Z","avatar_url":"https://github.com/tthn0.png","language":"Python","funding_links":[],"categories":["Miscellaneous","Python"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"Images/Spotify.svg\" width=\"100\" align=\"center\"\u003e\n  \u003ch1\u003eSpotify Readme\u003c/h1\u003e\n\n[![Badge](https://img.shields.io/github/issues/tthn0/Spotify-Readme?style=for-the-badge)](https://github.com/tthn0/Spotify-Readme/issues)\n[![Badge](https://img.shields.io/github/forks/tthn0/Spotify-Readme?style=for-the-badge)](https://github.com/tthn0/Spotify-Readme/network)\n[![Badge](https://img.shields.io/github/stars/tthn0/Spotify-Readme?style=for-the-badge)](https://github.com/tthn0/Spotify-Readme/stargazers)\n\n\u003c/div\u003e\n\n\u003cp align=\"center\"\u003e\n  A dynamic, customizable, and real-time Spotify now-playing widget for your markdown files that syncs with the song you’re currently playing. If you're not currently playing a song, it'll display one of your recent songs! Feel free to ask for help or make any pull requests, issues, or suggestions 😄\n\u003c/p\u003e\n\n## Previews\n\n#### Default\n\n```\n/\n```\n\n![Preview](https://tthn.pythonanywhere.com)\n\n#### Spinning CD Effect\n\n```\n?spin=true\n```\n\n![Preview](https://tthn.pythonanywhere.com?spin=true)\n\n#### Include Scan Code\n\n```\n?scan=true\n```\n\n![Preview](https://tthn.pythonanywhere.com?scan=true)\n\n#### Dark Theme\n\n```\n?theme=dark\n```\n\n![Preview](https://tthn.pythonanywhere.com?theme=dark)\n\n#### Custom Equalizer\n\n```\n?eq_color=0995e0\n```\n\n![Preview](https://tthn.pythonanywhere.com?eq_color=0995e0)\n\n#### Rainbow Equalizer\n\n```\n?eq_color=rainbow\n```\n\n![Preview](https://tthn.pythonanywhere.com?eq_color=rainbow)\n\n#### Combination\n\n```\n?spin=true\u0026scan=true\u0026eq_color=rainbow\u0026theme=dark\n```\n\n![Preview](https://tthn.pythonanywhere.com?spin=true\u0026scan=true\u0026eq_color=rainbow\u0026theme=dark)\n\n## Setup/Deployment\n\n\u003e [!WARNING]  \n\u003e This guide was last updated on Jul 27, 2024. The steps might differ slightly in the future if Spotify or PythonAnywhere update their website interfaces.\n\n\u003e [!NOTE]  \n\u003e This will take approximately 5 minutes to set up.\n\n#### 0. Star This Repo (Mandatory) 🌟\n\n- Yes, this step is required.\n\n#### 1. Spotify's API 🎶\n\n- Head over to \u003ca href=\"https://developer.spotify.com/dashboard/\"\u003eSpotify for Developers\u003c/a\u003e.\n  - Accept the Terms of Service if necessary.\n  - Verify your email address if you haven't done so already.\n  - Click on the **Create app** button.\n    - In the **App name** \u0026 **App description** fields, you may put whatever you want.\n    - In the **Redirect URI** field, add `http://localhost/callback/`.\n    - Agree with Spotify's TOS and click **Save**.\n  - Click on the **Settings** button.\n  - Take note of the **Client ID** \u0026 **Client Secret**.\n\n#### 2. Intermediary Steps 🛠️\n\n```\nhttps://accounts.spotify.com/authorize?client_id={CLIENT_ID}\u0026response_type=code\u0026scope=user-read-currently-playing,user-read-recently-played\u0026redirect_uri=http://localhost/callback/\n```\n\n- Copy and paste the above link into your browser.\n  - Replace `{CLIENT_ID}` with the **Client ID** you got from your Spotify application.\n  - Vist the URL.\n    - Log in if you're not already signed in.\n    - Click **Agree**.\n- After you get redirected to a blank page, retrieve the URL from your browser's URL bar. It should be in the following format: `http://localhost/callback/?code={CODE}`.\n  - Take note of the `{CODE}` portion of the URL.\n- Head over to \u003ca href=\"https://base64.io\"\u003ebase64.io\u003c/a\u003e.\n  - Create a string in the form of `{CLIENT_ID}:{CLIENT_SECRET}` and encode it to base 64.\n  - Take note of the encoded Base64 string. We'll call this `{BASE_64}`.\n- If you're on Windows or don't have the `curl` command, head over to \u003ca href=\"https://httpie.io/cli/run\"\u003ehttpie.io/cli/run\u003c/a\u003e.\n  - Press enter.\n  - Clear the pre-filled command.\n- If you're on Linux or Mac with the `curl` command, open up your preferred terminal.\n- Run the following command (replace `{BASE_64}` and `{CODE}` with their respective values):\n\n  ```bash\n  curl \\\n    -X POST \\\n    -H \"Content-Type: application/x-www-form-urlencoded\" \\\n    -H \"Authorization: Basic {BASE_64}\" \\\n    -d \"grant_type=authorization_code\u0026redirect_uri=http://localhost/callback/\u0026code={CODE}\" \\\n    https://accounts.spotify.com/api/token\n  ```\n\n- If you did everything correctly, you should get a response in the form of a JSON object.\n  - Take note of the `refresh_token`'s value. We'll call this `{REFRESH_TOKEN}`.\n\n#### 3. Host on PythonAnywhere 🐍\n\n- \u003ca href=\"https://github.com/tthn0/Spotify-Readme/fork\"\u003eFork\u003c/a\u003e this repository. The new forked repository will be at `https://github.com/{GITHUB_USERNAME}/Spotify-Readme`, where `{GITHUB_USERNAME}` is your GitHub username.\n- Head over to \u003ca href=\"https://www.pythonanywhere.com/pricing/\"\u003ePythonAnywhere\u003c/a\u003e, and `Create a Beginner Account` if you don't already have one. Take note of your username. We'll call this `{PA_USERNAME}`.\n\n  - Complete the PythonAnywhere tour if you'd like to (or skip it).\n  - Under `New console:`, click on the `Bash` option.\n  - Run the following commands:\n\n    ```bash\n    git clone https://github.com/{GITHUB_USERNAME}/Spotify-Readme\n    mkvirtualenv --python=/usr/bin/python3.10 venv\n    pip install -r Spotify-Readme/Source/requirements.txt\n    nano Spotify-Readme/Source/.env\n    ```\n\n  - Paste in the following environment variables along with their appropriate values:\n\n    ```bash\n    CLIENT_ID=\"{CLIENT_ID}\"\n    CLIENT_SECRET=\"{CLIENT_SECRET}\"\n    REFRESH_TOKEN=\"{REFRESH_TOKEN}\"\n    ```\n\n  - It should look something like this:\n\n    ```bash\n    CLIENT_ID=\"XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX\"\n    CLIENT_SECRET=\"XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX\"\n    REFRESH_TOKEN=\"XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX\"\n    ```\n\n  - Press `Ctrl + X`, then `Y`, then `Enter` to save the file.\n  - Click on the PythonAnywhere logo on the upper left corner to go back to the main dashboard.\n  - Click on `Web` in the navigation bar.\n  - Click `Add a new web app`.\n\n    - Take note of your web app's domain name.\n    - Click `Next »`.\n    - Select `Manual configuration`.\n    - Select `Python 3.10`.\n    - Click `Next »`.\n\n  - Scroll down to the `Code` section.\n\n    - Change the `Source code` field to `/home/{PA_USERNAME}/Spotify-Readme/Source`.\n    - Open the `WSGI configuration file` in a new tab and add the following to the bottom of the file:\n\n      ```python\n      import sys\n\n      path = '/home/{PA_USERNAME}/Spotify-Readme/Source'\n      if path not in sys.path:\n          sys.path.append(path)\n\n      from main import app as application\n      ```\n\n    - Click `Save` and close out the tab.\n\n  - Back on the `Web` tab, click `Enter path to a virtualenv, if desired`.\n    - Type `venv` and click the check mark.\n    - This should automatically fill in the field with the correct path to the virtual environment we created earlier.\n  - Enable `Force HTTPS`.\n  - Scroll back up to the top of the page.\n  - Click `Run until 3 months from today`.\n  - Click `Reload {PA_USERNAME}.pythonanywhere.com`.\n  - Now it's deployed and ready to be used!\n\n\u003c!--\n\n\u003cdetails\u003e\n  \u003csummary\u003e\n    \u003ch4\u003e3. (Old) Host on Vercel 🌀\u003c/h4\u003e\n    \u003cp\u003e\n      This project was formerly hosted on Vercel but has since been migrated to PythonAnywhere because there have been issues with deployment.\n    \u003c/p\u003e\n  \u003c/summary\u003e\n\n- \u003ca href=\"https://github.com/tthn0/Spotify-Readme/fork\"\u003eFork\u003c/a\u003e this repository.\n- Head over to \u003ca href=\"https://vercel.com\"\u003eVercel\u003c/a\u003e and create an account if you don't already have one.\n  - Add a new project.\n    - Link your GitHub account if you haven't done so already.\n    - Make sure Vercel has access to the forked respository.\n    - Import the forked respository into your project.\n      - Give it a meaningful project name.\n      - Change the Root Directory to `Source`.\n      - Keep the default options for the other settings.\n      - Add the following environment variables along with their appropriate values:\n        - `CLIENT_ID` ⇒ `{CLIENT_ID}`.\n        - `CLIENT_SECRET` ⇒ `{CLIENT_SECRET}`.\n        - `REFRESH_TOKEN` ⇒ `{REFRESH_TOKEN}`.\n      - Click **Deploy**.\n      - Click **Continue to Dashboard**.\n        - Find the **Domains** field and take note of the URL.\n          - Example: `{PROJECT_NAME}.vercel.app`.\n- In the next step, reaplce `{USERNAME}.pythonanywhere.com` with `{PROJECT_NAME}.vercel.app` in the markdown code provided.\n\n\u003c/details\u003e\n\n--\u003e\n\n#### 4. Add to your GitHub 🚀\n\n- In any markdown file, add the following code:\n\n  ```html\n  \u003ca href=\"https://{PA_USERNAME}.pythonanywhere.com/link\"\u003e\n    \u003cimg\n      src=\"https://{PA_USERNAME}.pythonanywhere.com\"\n      alt=\"Current Spotify Song\"\n    /\u003e\n  \u003c/a\u003e\n  ```\n\n- Of course, you can append query parameters to the URL to customize the widget!\n- Please leave the anchor tag hyperlink reference if you'd to be able to dynamically link your current song, so people listen to the preview. Also, the link helps to retain creator credit and helps others find this project!\n\n## Customization\n\n\u003cp\u003e\n  To customize the widget, add query parameters to the endpoint. There are many possible combinations! See how it pairs with other widgets on \u003ca href=\"https://github.com/tthn0/tthn0\"\u003emy own README\u003c/a\u003e!\n\u003c/p\u003e\n\n| Parameter  | Default  | Values                                 |\n| :--------- | :------- | :------------------------------------- |\n| `spin`     | `false`  | `false`, `true`                        |\n| `scan`     | `false`  | `false`, `true`                        |\n| `theme`    | `light`  | `light`, `dark`                        |\n| `eq_color` | `1ED760` | `rainbow`, Any Hex Color w/o Hash Sign |\n\n\u003c!-- | `width` | `N/A` | Coming Soon! | --\u003e\n\n## Keep Your Fork Up To Date\n\nYou can keep your fork, and thus your private PythonAnywhere instance up to date, with the upstream using GitHub's \u003ca href=\"https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/syncing-a-fork\"\u003eSync Fork button\u003c/a\u003e! After doing so, log back into your PythonAnywhere account and open a new console to pull in the changes.\n\n## Note\n\nThis wasn't a completely original idea. This was inspired by \u003ca href=\"https://github.com/novatorem/novatorem\"\u003enovatorem's project\u003c/a\u003e that was supposed to be for me only. Since others have asked for the source code, I decided to make this a public repo. I also incorporated the latest two PR's from the orignal project into this one and made it easy to customize!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftthn0%2FSpotify-Readme","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftthn0%2FSpotify-Readme","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftthn0%2FSpotify-Readme/lists"}