cljs karaoke client

CLJS-Karaoke-Client

Un joueur de karaoké Web implémenté dans Clojurescript

Démo

Rolling Stones - partout maintenant

Description

Mon essai de faire un joueur de karaoké décent. Pendant des années, j'ai essayé de mettre la main sur une bonne solution de karaoké avec peu de succès, les principales alternatives sont soit des jeux comme Ultrastar, Frets on Fire, etc. ou de mettre en place une playlist de vidéos de karaoké YouTube.

Les deux alternatives offrent un large catalogue de chansons auxquelles vous pouvez accéder librement sur Internet mais avec quelques inconvénients:

• Les chansons disponibles en ligne pour des jeux comme Ultrastar le plus souvent utilisent le morceau de chanson original avec des voix qui, à mon avis, tuent en quelque sorte "l'expérience de karaoké"
• La synchronisation des paroles varie considérablement (certains rendent juste des versets entiers à la fois tandis que d'autres ont les paroles synchronisées au niveau de la syllabe) lors de l'utilisation de vidéos de karaoke YouTube.

La principale difficulté était d'obtenir des paroles avec des informations de synchronisation, j'ai trouvé beaucoup de fichiers MIDI sur le Web, apparemment utilisés pour les machines de karaoké. Ces fichiers contiennent des paroles synchronisées jusqu'au niveau de la syllabe. Puisqu'il n'y a vraiment pas de standard sur la façon de stocker des paroles sur les fichiers MIDI pour les machines de karaoké, beaucoup ont des différences subtiles dans la façon dont elles sont stockées, donc lors de l'analyse de ces fichiers, j'ai fait un tas d'hypothèses brutes et j'ai extrait les paroles pour séparer les fichiers avec les données de synchronisation. La plupart sont OK, mais beaucoup sont un peu décalés par un décalage variable

L'andiciaire MIDI est sur un projet séparé: CLJ-Karaoke.

Une autre difficulté a été d'obtenir la piste audio de la chanson, puisque les paroles sont synchronisées avec la piste audio MIDI, la chose la plus saine à faire était de l'utiliser. Initialement, j'avais l'intention d'utiliser directement les fichiers MIDI pour les pistes audio, mais lors de la lecture de l'audio, la qualité dépend considérablement des polices sonores que vous avez installées et de la configuration d'un bon Env pour des résultats décents n'est pas une tâche triviale. De plus, si je voulais lire ces fichiers sur un client Web, en tenant compte de tout cela, les choses se sont compliquées. Je me suis donc installé avec l'extraction des paroles pour séparer les fichiers et rendre les fichiers Midis à MP3 en utilisant la timidité, ce qui est assez génial et j'ai pu expérimenter différentes collections de polices sonores.

Caractéristiques

• Des tonnes de chansons
• Les images d'arrière-plan pour les chansons sont récupérées dynamiquement sur le Web après une recherche Google pendant la charge de la chanson (si aucune n'est mise en cache)
  • Chaque utilisateur met en cache ses arrière-plans locaux et pousse périodiquement ses URL vers une base de données Mongo, Google Custom Seech a une limite quotidienne, donc j'essaie de minimiser son utilisation.
  • Les données d'initialisation (décalages paroles, images BG) s'améliorent lors des builds en consolidant les données des utilisateurs
• Capacité à synchroniser les paroles par un décalage en Milisecondes (soit à partir du panneau de configuration, soit en ajoutant une chaîne de requête à l'URL)
• Liste de lecture automatique construite à partir de chansons précédemment synchronisées
• Exporter des informations de synchronisation de chansons locales afin qu'elles puissent être fusionnées vers les données de synchronisation côté serveur
• Entrée audio expérimentale pour Desktop Firefox et Chrome avec un son en direct / Sound Reverb FX (utilisez un microphone externe pour de meilleurs résultats)
• Enregistrement de webcam expérimental et exportation vidéo vers le fichier webm. Le canal audio dans la vidéo exportée est le résultat du mélange de l'entrée du microphone avec les effets et la piste de la chanson.
• Télécommande. Exécutez l'application sur un grand écran et contrôlez la lecture à partir d'une autre instance d'application (par exemple, à partir de votre appareil mobile!)
• Créez des pages de chansons de pré-rendements avec des balises de référencement afin que vous puissiez partager des liens dans les réseaux sociaux en tant que cartes jolies avec le nom de la chanson et une image si disponible.
  • 
• Éditeur de paroles de la synchronisation de nouvelles pistes avec des paroles.
  • Sélectionnez un fichier audio
  • Ajouter du texte, le diviser en syllabes (ou simplement des morceaux aléatoires)
  • Lisez votre piste et appuyez sur le bouton "Sync" pour chaque pièce
  • Si vous voulez plus de précision, vous pouvez ralentir la piste en diminuant le taux de lecture

Travailler sur

• Tailles de police dynamiques, tailles de police déjà optimisées pour les titres de chansons, mais je cherche également un moyen d'améliorer l'affichage des paroles.
• Une façon de capturer les compensations de paroles personnalisées de tous les utilisateurs, les intégrant en défaut dans les versions suivantes
• Même chose avec les arrière-plans de la chanson, actuellement Google Custom Seech est utilisé pour trouver des images liées au titre de la chanson, il y a un quota pour ce service et il est assez faible, moins nous devons rechercher mieux.

Courir localement

Prérequis:

• JDK
• ombre-cljs

$ npm i -g shadow-cljs 
$ npm install
$ shadow-cljs watch app

Si vous souhaitez compiler une version de version, vous pouvez exécuter ce qui suit:

$ shadow-cljs release app

La construction sera située dans le répertoire /public .

Liaisons clés

• "ESC": Arrêtez la lecture
• "LR": Charge Song
• "Alt-O": Activer les optons en mode de lecture
• "Alt-H": Activer le mode Panneau de configuration
• "à gauche": l'audio cherche à l'envers
• L'audio "à droite" cherche à avancer
• "Meta-Shift-L": Mode de boucle (maintenant en cours)
• "Alt-Shift-P": jouer
• "Shift-droite": la prochaine chanson sur la playlist
• "TT": Toasty!
• "H": Show Cheatheet

Travail futur

• Image de framboise PI
• Paroles de Sync Editor