Karaokay ni Ysmael.

Setup

1. Clone this repository.

2. Navigate to the project directory.

3. Open two terminals and run the following commands:

   Terminal 1 — Start the local web server

   Run the following command to serve the application on port 8080:

   npx http-server -p 8080

   Terminal 2 — Create a Cloudflare Tunnel

   Run the following command to expose your local server through a Cloudflare tunnel:

   npx cloudflared tunnel --url http://localhost:8080

   Copy the generated tunnel URL and open it in your browser to access the web version of the application.

4. Configure your YouTube API key.

   Once the application is loaded, open Settings using the ⚙️ gear icon

   

   Enter your YouTube API key.

   You can follow Google's guide to create an API key: YouTube Data API — Getting Started

   You can create and manage your API key through the Google Developers Console.

5. While in the Settings dialog, import the cached search results (see cache.json) to kick start suggestions upon search.

   

6. Connect the mobile remote.

   Open the Mobile Remote setting using the mobile icon.

   

   A QR code will be displayed on the web version.

   

   Scan the QR code using your mobile device to connect it as a remote control.

7. You're all set! 🎤

Searching

You can search for karaoke videos using either:

• The search bar on the web application
• The mobile remote

Search results will display a list of karaoke videos matching your query. Select a video to play it on the web application, then use the mobile remote to control playback.

Search Results

Search results are automatically cached in your browser's local storage (web version only, not in mobile), allowing you to access previously retrieved results so that your Youtube API limit of 10000 units per day will be spared a little.

You can also:

• Copy cached search results to your clipboard.
• Save the copied JSON data to a file for backup or later use.
• Import previously saved search results.

To import cached search results, open the Settings dialog and paste the JSON data into the Import field.

Network

For the remote to work, both the mobile device and the web version should run on the same network.