muc

Muc

Convertisseur URL musical

Une application simple à adopter une URL à partir de divers services de streaming de musique et afficher la même piste (lorsqu'elle est disponible) à partir d'autres services de streaming. Vous pouvez voir une démo en direct @ https://muc.anirbanmu.com/?queries °.

Paramètres de requête

• queries[]=spotify:track:2HYr8LZRlJKEfMbIgT0365 - Param de requête de type de tableau (peut avoir plusieurs) qui peut être transmis comme les requêtes initiales à l'application.

Services soutenus

Il prend actuellement en charge Spotify, YouTube, iTunes / Apple Music & Deezer.

Installation

• Assurez-vous que le nœud et le NPM sont installés
• Cloner le repo
• cd dans Repo Directory
• npm install

L'extrémité avant

L'avant doit être construit et prêt à partir avant que le backend ne puisse servir avec succès l'application.

Pour le développement (construire, surveiller les modifications et reconstruire Vue.js Frontend):

 npm run build-watch

Pour la production (se construire uniquement):

 npm run build

Les fichiers construits sont placés dans le répertoire ./dist .

Backend

Le backend exige que les clés d'API soient définies afin que les API respectives puissent être utilisées.

 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]

Après avoir défini les variables d'environnement, vous pouvez démarrer le serveur backend localement avec:

 npm run express

Vous devriez maintenant pouvoir accéder à l'application localement @ http: // localhost: 8081

fly.io

La demande est prête à être déployée sur fly.io. Créez simplement une application avec FlyCTL et remplacez le <APP-NAME> dans fly.toml. Après avoir créé l'application et remplacé le nom dans fly.toml:

• 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> Si vous souhaitez le code de vérification du site Google dans la page, sinon flyctl deploy .

Détails

L'extrémité avant

La majeure partie du code d'application est le côté client qui est une application Vue.js. Cela gère tous les rendements, l'analyse des URL et les convertir en autres services.

Backend

Le backend se compose d'un serveur express très trivial qui est le seul objectif est d'obtenir des données secondaires initiales (jetons API) et de modèle l'application Vue.js à page unique afin qu'elle puisse ensuite s'exécuter indépendamment à partir du backend. Il sert également une API pour obtenir les jetons API sans eux-mêmes afin que le frontend puisse actualiser ses jetons périodiquement.