React mp3 downloader for Plexamp

Overview

Click here to try the live demo.

mp3-react-app is a simple React application that allows users to download MP3 files from YouTube links. The application also supports tagging the downloaded MP3 files with metadata (artist, album, track name) and organizing the files into a Plex-friendly structure. Additionally, it can acquire and download lyrics from a provided Genius URL.

Features

• Download MP3 files from YouTube links.
• Tag MP3 files with metadata: artist name, album name, track name.
• Organize downloaded files in a Plex-friendly structure.
• Optional lyrics acquisition and downloading from Genius.

Usage

Enter the YouTube link: Paste the URL of the YouTube video you want to download.

1. Artist Name

2. Album Name

3. Track Name

4. Optional Lyrics: Enter the Genius URL for the lyrics if available.

Download: Click the “Download” button to start the process.

Output Structure: The downloaded MP3 files will be organized in the following Plex-friendly structure:

Artist Name
└── Album Name
    ├── Track Name.mp3
    ├── Track Name.txt (optional)
    └── Track Name.webp (YouTube thumbnail for album cover)

Development

Installation

Prerequisites

• Node.js
• npm or yarn
• Python (for the backend)
• Flask (for the backend)
• ffmpeg (for YouTube to MP3 conversion)
• Docker (Optional but recommended for gunicorn deployment)

Steps

Testing

1. Clone the Repository

   git clone https://github.com/JakeTurner616/mp3-react-app
   cd mp3-react-app
   

2. Install Frontend Dependencies

   npm install
   # or
   yarn install
   

3. Build and deploy for testing

   npm run start
   # start the dev server
   

4. Install Backend for testing

    # Create a virtual environment
    python -m venv venv
       
    # Activate the virtual environment
      
      # On Windows:
      venv\Scripts\activate
      # On macOS/Linux:
      source venv/bin/activate
       
    # Install dependencies from requirements.txt
    pip install -r requirements.txt
   

5. Run the Backend dev server for testing (don’t forward or proxy this!)

   python backend.py (requires ffmpeg)
   # start the flask dev server manually
   

Deployment

1. Build and deploy static site with backend domain set in .env

   npm run build
   # build the production assets
   

2. Install Backend for deployment

   docker build -t mp3-react-app .
   docker run -p 50616:50616 mp3-react-app
   # now we can forward and/or proxy the API backend
   

License

This project is licensed under the GNU GPL 3.0 License. See the LICENSE file for details.

---

Edit this page’s markdown on github.

---