muc

Muc

Musik -URL -Konverter

Eine einfache Anwendung, um eine URL aus verschiedenen Musik -Streaming -Diensten aufzunehmen und denselben Track (sofern verfügbar) von anderen Streaming -Diensten zu zeigen. Sie können eine Live -Demo @ https://muc.anirbanmu.com/?queries?=spotify:track:2hyr8lzrljKEFMBIGT0365 sehen

Abfrageparameter

• queries[]=spotify:track:2HYr8LZRlJKEfMbIgT0365 - Array -Typ -Abfrageparam (kann mehrere) als anfängliche Abfragen an die App übergeben werden.

Unterstützte Dienste

Derzeit unterstützt es Spotify, YouTube, iTunes/Apple Music & Deezer.

Aufstellen

• Stellen Sie sicher, dass Sie Node & NPM installiert haben
• Klonen Sie das Repo
• cd in Repo -Verzeichnis
• npm install

Frontend

Das vordere Ende muss gebaut und bereit sein, bevor das Backend die App erfolgreich bedienen kann.

Für die Entwicklung (aufbauen, achten Sie auf Änderungen und bauen Sie Vue.js Frontend wieder auf):

 npm run build-watch

Für die Produktion (nur bauen):

 npm run build

Erstellte Dateien werden im Verzeichnis ./dist platziert.

Backend

Das Backend erfordert, dass API -Schlüssel so festgelegt werden, dass die jeweiligen APIs verwendet werden können.

 SPOTIFY_CLIENT_ID=<spotify client ID> [REQUIRED]
SPOTIFY_CLIENT_SECRET=<spotify client secret> [REQUIRED]
YOUTUBE_API_KEY=<youtube API key> [REQUIRED]
GOOGLE_SITE_VERIFICATION_CODE=<google site verification code via meta tag> [OPTIONAL]

Nachdem Sie die Umgebungsvariablen festgelegt haben, können Sie den Backend -Server lokal mit:

 npm run express

Sie sollten jetzt in der Lage sein, auf die Anwendung lokal zugreifen zu können unter http: // localhost: 8081

fly.io

Die Anwendung ist bereit, in Fly.io eingesetzt zu werden. Erstellen Sie einfach eine App mit FlyCtl und ersetzen Sie die <APP-NAME> in fly.toml. Nachdem Sie die App erstellt haben und den Namen in fly.toml ersetzt haben:

• flyctl secrets set SPOTIFY_CLIENT_ID=<spotify client ID> [REQUIRED]
• flyctl secrets set SPOTIFY_CLIENT_SECRET=<spotify client secret> [REQUIRED]
• flyctl secrets set YOUTUBE_API_KEY=<youtube API key> [REQUIRED]
• flyctl deploy --build-secret GOOGLE_SITE_VERIFICATION_CODE=<google site verification code via meta tag> Wenn Sie den Überprüfungscode von Google Site auf der Seite möchten, werden Sie sonst nur flyctl deploy .

Details

Frontend

Der größte Teil des Anwendungscodes ist eine Client -Seite, die eine Vue.js -App ist. Dadurch wird alle Rendering, Parsen von URLs und umwandeln sie in andere Dienste um.

Backend

Das Backend besteht aus einem sehr trivialen Express -Server, der nur einige anfängliche Server -Seitendaten (API -Token) und die Template der einzelnen vue.js -App erhalten, damit sie dann unabhängig vom Backend ausführen kann. Es dient auch einer API, um die API -Token selbst ohne so, dass das Frontend ihre Token regelmäßig auffrischen kann.