Grâce à Karaoke Mugen, vous aussi vous pouvez atteindre ça !

(Ce dessin a été fait par Sedeto sur un coup de tête à l’époque où on était colocs et où on faisait des soirées kara chez moi très souvent.)

Toutes les images de ce billet sont des Work in Progress et ne reflètent pas la réalité du terrain.

J’en avais déjà parlé sur ce blog et sur Twitter, mais je développe avec quelques gens depuis maintenant 3 mois un système de gestion de soirées Karaoke qui s’appelle Karaoke Mugen, anciennement Toyunda Mugen.

Du karaoké ? C’est quoi ?

Non, je ne vous ferai pas l’affront de vous décrire ce qu’est un karaoké.

Enfin, pas trop.

C’est pour parler de la genèse du projet plutôt. Sur le Discord de l’Eden de la Nanami, on adore le karaoké. On a par exemple Rinchama de Karaokes.moe, que je vous conseille de lancer dans une autre fenêtre en lisant cet article. Mais on a aussi d’autres personnes, qui font du développement de logiciels, ou qui adorent tout simplement écouter, chanter, ou créer des karaokés de leurs anisongs favoris.

Au début on a crée un canal d’entraide, #karaoke, pour apprendre à des gens comment faire des karaokés. J’avais depuis 2010 environ une base de karaokés et surtout j’avais développé une interface rudimentaire pour faire des soirées kara à la maison avec les amis : un petit logiciel tournait sur la télé et depuis une tablette ou un téléphone, on pouvait ajouter des chansons à la playlist en cours depuis la base. C’était très rudimentaire, des fois ça bugguait, mais c’était cool, les gens se passaient la tablette pour ajouter des chansons.

Après, c’était crade niveau code, mais hé, ça marchait. L’idée de base c’était que le karaoké à la Japonaise c’est typiquement comme ça : les gens se passent une tablette, ajoutent des chansons, et s’amusent à chanter dessus tandis que les autres ajoutent encore des chansons.

Puis est arrivé le dernier repas de la Brigade SOS Francophone, association que j’ai fait naître avec d’autres, et que j’ai enterrée de mes mains. Pour ce dernier repas nous avions décidé de finir sur un karaoké, c’est ainsi que nous avons recruté deux-trois personnes pour aider un peu au projet. Le projet de rendre le karaoké meilleur.

On a commencé à se rassembler et améliorer l’interface existante que j’avais faite avec Keul, mais c’était tellement mal branlé qu’on était sur de mauvaises bases quoi qu’il arrive, et qu’il faudrait, un jour, qu’on refasse tout depuis zéro, au propre. Qu’on passe à la modernité.

Et ce jour est arrivé un beau matin de juin.

Un ami m’a montré un lanceur qu’il avait crée pour Toyunda Mugen v1, et ça m’a tellement plu que je lui ai dit « Ecoute, il faut qu’on commence à bosser sur la version 2. Un truc sur lequel on pourra bâtir des fonctionnalités innovantes pour faire du karaoké. » Et c’est ce qu’on a fait.

Armés de la PASSION, nous avons fait des petites réunions pour discuter des fonctionnalités de la nouvelle version. Il était clair qu’il y avait des lacunes dans la v1, et que cette v2 devait tout corriger, et tout améliorer. De la recherche au tri, d’une gestion de liste noire/blanche pour exclure/inclure des karas à sa base, plusieurs listes de lecture, un mode public et privé… Les idées ne manquaient pas. Surtout quand on a soumis l’idée aux autres locataires de #karaoke, on a alors eu une avalanche de bonnes idées plus ou moins réalisables (certaines ne le sont toujours pas d’ailleurs, mais ça va venir.)

Le développement a alors commencé d’arrache-pied. Petite parenthèse développeurs que vous pouvez zapper si vous n’êtes pas du tout versé dans l’art de la programmation. Après, si vous êtes curieux, hein… Je vais pas être très technique.

MAIS POURQUOI NODE !?

Karaoke Mugen v1 (Toyunda Mugen, vous suivez?) était en PHP. C’était donc crade par essence, mais voilà, on m’a montré ce que pouvait faire NodeJS, qu’en une soirée j’ai réussi à faire une petite appli web, et ça m’a pas mal sidéré. Comme Karaoke Mugen était avant tout une appli web, ça paraissait couler de source d’utiliser Node, surtout grâce à deux gros avantages :

• Node a un écosystème particulièrement riche, si bien qu’on a immédiatement trouvé des modules nous permettant d’arriver à nos fins, notamment un module pour piloter mpv, le lecteur qui va lire vos vidéos et les karaokés par dessus. Comme mpv est multi-plateformes et que Node aussi, ça nous a pas mal fait gagner du temps, mais il n’y a pas que ça qui nous a fait gagner un temps fou.
• Il y a également via Node, un moyen de « packager » son appli dans un seul .exe. Un truc que j’ai toujours cherché à faire en refilant Karaoke Mugen v1 aux amis c’est de faire une appli ne nécessitant pas d’installation : tu la mets sur un disque dur externe, tu emmène ce disque dur externe chez un copain et paf ça fait des chocapics. Node permet en effet de s’inclure lui-même dans un executable Windows, Mac ou Linux avec le projet et toutes ses librairies. Alors oui ça fait un GROS fichier executable mais au moins on peut le distribuer très facilement à notre entourage.

Node est pas mal décrié car c’est, in finé, du javascript, et le javascript, c’est pas très très strict et ça donne pas de super habitudes, sans compter toutes ces incohérences dans le langage lui-même (mais ça va, PHP a encore plusieurs trains d’avance à ce sujet.)

Cependant, pour ce qu’on voulait en faire, c’était le meilleur pour le job. 

Je ne connaissais pas vraiment javascript avant Juin. Depuis 3 mois, je code d’arrache-pied pour Karaoke Mugen, et figurez-vous qu’avoir un projet perso comme ça, ça motive à fond d’apprendre de nouveaux langages, de tester de nouvelles méthodes. C’est un problème récurrent quand on veut s emettre à un nouveau langage, on se dit « Mais pour faire quoi au fait ? »

OK donc concrètement ça donne quoi, ça marche comment ?

En soi, c’est assez simple : vous lancez Karaoke Mugen, vous mettez une base de karaokés dans le dossier où il les attend, vous « générez » votre base de données Karaoke Mugen via l’application, et ensuite, vous n’avez plus qu’à vous connecter via tablette ou votre PC à l’adresse indiquée à l’écran, et paf, c’est parti!

Un exemple de background généré par l’application qui est ensuite affiché sur votre écran en attendant que de la musique soit jouée.

Voici quelques screens d’interface commentés. Comme je vous l’ai dit plus haut, ils représentent différentes étapes du développement de Karaoke Mugen, et donc ne sont ni finaux, ni représentatifs de ce que vous aurez en téléchargeant la dernière version.

Sur ce screen qui date déjà (une semaine c’est très vieux à l’échelle de Karaoke Mugen), vous pouvez voir l’interface publique : c’est celle que vous et vos invités verront au moment de se connecter à l’interface web indiquée sur le fond d’écran qui s’affiche quand on lance Karaoke Mugen v2.

On peut donc faire des recherches, afficher des informations sur un karaoké mais également afficher les paroles avant de le selectionner pour l’ajouter à la liste de lecture (à droite). On a également notre pseudo qui s’affiche afin que les gens sachent qui a osé foutre cet opening de Boku no Pico.

Sur mobile ça s’affiche pas trop mal. D’ailleurs vous aurez peut-être remarqué le « En attente » du screen précédent qui affiche le karaoké actuellement en cours ici. Et, cerise sur le gâteau…

Une barre se remplit même là où est affiché le titre du karaoké pour montrer où on en est dans la chanson !

Comme vous pouvez le voir aussi ici, on a rencontré quelques bugs graphiques parfois, qu’on a vite corrigés. En haut à droite on peut désactiver l’affichage de la playlist pour n’avoir que la base d’affichée et la recherche.

Je hype un peu. Et pour gérer tout ça ?

On a fait ce qu’il fallait :

Voici l’interface réservée à l’administrateur de la soirée karaoké : comme vous le voyez, il peut à loisir envoyer des karaokés d’une liste à un eautre, faire des recherches, mais aussi gérer une blacklist via des critères (par exemple si on veut empêcher les gens de voir tous les karaokés chantés par Nana Mizuki… Qui voudrait faire ça en fait ? Oh non, je sais : vous voulez exclure tous les Monogatari de la liste parce que vous SAVEZ qu’un mec va tous les ajouter. Heureusement, même blacklistés, si vous ajoutez un kara spécifique dans la whitelist, il apparaîtra quand même !)

Ils ne sont pas tous présents sur ce screen mais vous verrez sur le précédent qu’il y a pas mal de boutons en haut de l’écran ! C’est normal, un bon admin doit pouvoir gérer son karaoké comme il l’entend :

• Il peut sauter à tout moment dans la chanson en cours en cliquant n’importe où dans al barre, comme quand on se déplace dans un lecteur audio.
• Il peut switcher entre l’affichage des playlists et les paramètres de l’application.
• Il peut passer d’un karaoké privé (par défaut) où toutes les chansons ajoutées par les utilisateurs arrivent direct dans la liste courante que le lecteur lit. C’est le moyen le plus simple et le plus direct d’apprécier le karaoké. Mais on a pensé aux gens qui voudraient faire un karaoké avec beaucoup de monde et des invités qu’ils ne connaissent pas forcément. Par exemple en convention : si vous passez l’application en mode « public », alors les chansons ajoutées par vos utilisateurs iront plutôt dans une playliste « publique » de suggestions. C’est à vos, admin tout puissant qui devra selectionner parmi leurs demandes quelles chansons vous voulez passer!
• De gauche à droite sur le screen précédent :
  • Arrêt du karaoké après la chanson en cours : ça permet d’être sûr que ça ne passera pas à la chanson suivante
  • Arrêt du karaoké immédiatement, pour les urgences.
  • Retour au début de la vidéo 
  • Chanson précédente
  • Pause/Play
  • Chanson suivante
  • Désactivation/activation des paroles, pour ces cas un peu extrèmes où vous voudriez tester votre public. l’équipe de Karaoke Mugen se désengage complètement de ce qui pourrait vous arriver si vous coupez sous-dainement les paroles de la chanson PENDANT celle-ci.
  • Vous pouvez faire pareil avec le son, ou changer le volume. Notez que comme la vie est bien faite, Karaoke Mugen stocke les informations de gain audio des vidéos qu’il diffuse. Du coup normalement, tous les karaokés de Karaoke Mugen sont tous au même niveau sonore.
  • Enfin, le bouton « fin du monde. » ou « 4ème impact » pour mettre fin au karaoké.

On a même fait différents essais de transparence pour la mascotte de Karaoke Mugen, Nanami ! (dessinée par Sedeto bien sûr, c’est l’héroïne de mon roman, Eternity !)

Comment je récupère ça ?

Présentement, l’application n’a pas encore de version « packagée » où on peut l’utiliser comme ça sans l’installer.

Par contre, comme le développement est open source, vous pouvez récupérer le code et l’executer vous-même. Vous aurez besoin d’installer NodeJS, puis de récupérer l’appli sur son dépôt git. Une fois ceci fait, la commande « npm install » dans le dossier de l’application va installer toutes ses dépendances. Pour plus d’infos, vous pouvez consulter la page du dépôt qui contient la procédure sommaire d’installation. Comme je l’avais expliqué, le but de Karaoke Mugen est de le rendre facile d’utilisation. Actuellement ce n’est pas le cas, mais ça fait partie des priorités.

Et si vous êtes motivés, venez sur Discord dans le canal #karaoke, on vous filera un coup de main !

Créer un logiciel de A à Z facile pour des non-développeurs, ce n’est pas facile !

Les projets annexes

Si vous jetez un oeil au « groupe » Karaoke Mugen sur le Lab de Shelter, vous verrez qu’il y a quelques projets en plus de l’application, qu’en est-il ?

Le client

Lorsqu’on a commencé à developper une API, c’est à dire un moyen pour des applications externes de donner des ordres à Karaoke Mugen et de récupérer des informations, j’ai codé un client très rapidement pour dire « Hé ça marche. » en vérité ce client en mode texte ne fait pas grand chose et est juste un PoC, un Proof of Concept, et n’est pas vraiment utilisable en l’état. Et si vous l’amélioreriez ? 

La base

Que serait un karaoké sans base de chansons ? C’est un sujet épineux car rares sont ceux souhaitant partager leurs karaokés. En ce qui nous concerne, on s’est dit qu’une base libre à laquelle quiconque pourrait participer serait bien plus productive et éviterait que deux personnes fassent deux fois le même travail, par exemple timer l’opening de Tsuki ga Kirei. On a donc mis en commun nos karaokés. N’importe qui peut participer, proposer ses karaokés, et bien sûr consulter la liste des « issues », c’est « problèmes » dans la base, comme des karaokés mal timés, mal nommés, où dont les vidéos sont de mauvaise qualité.

Ils sont faits pour être utilisés avec Karaoke Mugen (l’application) mais en vrai, n’importe qui avec un peu du jugeotte saura comment les utiliser de son côté sans le logiciel.

On a même écrit un tutorial SANS VIDEO sur comment timer et envoyer son premier karaoké. Oui messieurs dames, vous avez bien lu : un tutorial TEXTE. Pas de VIDEO chiante à suivre. En 2017. On est comme ça nous.

Chaque karaoke est en fait la somme de 3 éléments :

• Un .kara qui décrit le karaoké et donne les infos qui vont bien à Karaoke Mugen
• Un .ass qui est le fichier de sous-titrage contenant le karaoké, il est lu en même temps que la vidéo par le lecteur.
• Une vidéo qui contient la chanson.

Un exemple de .kara : 

videofile=ANG – Shelter – MV – Shelter.webm
subfile=ANG – Shelter – MV – Shelter.ass
year=2016
singer=Amy Millan
tags=
songwriter=Porter Robinson,Madeon
creator=A-1 Pictures
author=karaokes.moe
series=Shelter
lang=eng
KID=48d98d72-fe99-4eca-84be-bae0d598e169
videosize=109238678
videoduration=367
videogain=-5.49

Comme vous pouvez le voir on stocke de nombreuses informations : outre le nom du fichier de sous-titres et du fichier vidéo, on permet des recherches via l’année, le chanteur/euse, par série, par auteur de kara (ici ce karaokeé vient du site karaokes.moe) la langue au format ISO639-2B, et enfin des infos plus internes comme un identifiant unique (le KaraokeID), la talile de la vidéo, la durée de celle-ci en secondes et le gain audio de la vidéo, qui permet comme je l’expliquais plus tôt que toutes les vidéos de votre karaoké soient au même volume. Pas de mauvaises surprises avec un kara bien plus fort que le précédent qui pête les oreilles de tout le monde, ici le lecteur appliquera une modification de -5,49 décibels à la vidéo.

La base contient près de 4800 karaokés pour le moment, et elle grandit tous les mois.

Le site web

Ah ben oui, que serait un logiciel sans son site web ? 

Il est encore expérimental, mais vous pouvez le visiter par ici. On fera une annonce propre quand on sentira que ça sera bien prêt, mais comme vous avez lu jusqu’ici, vous méritez bien un petit avant-goût en récompense, non ? 

Le site est généré via Jekyll et stocké sur ce dépôt git. Du coup, n’importe qui peut venir proposer des modifications pour le site, si vous pensez qu’un truc est mal foutu !

Quand on s’estimera prêts, on révélera ce site au monde entier pour lancer notre plan de domination mondiale par le karaoké (c’est pour contrecarrer le plan de domination mondiale des chats)

Ça m’intéresse beaucoup, je peux participer comment ?

Selon ce que vous savez faire, il y a toujours pas mal de choses dont on a besoin aujourd’hui.

• Si vous êtes plutôt développeur dans l’âme, on a pas mal d’issues à régler sur l’application Karaoke Mugen mais aussi beaucoup d’idées un peu fofolles :
  • pouvoir enregistrer le karaoké en cours et faire un montage audio/vidéo comme dans Singstar
  • Faire en sorte que les utilisateurs puissent prévisualiser les vidéos du karaoké avant de le selectionner
  • Instaurer des limites d’ajout de chanson lors des karas publics. Il y a de bonnes idées comme celle d’un crédit-temps pour chaque utilisateur. On cherche d’ailleurs aussi un bon moyen d’authentifier les utilisateurs pour les karas publics.
  • Un mode vote du public. Le public envoie des suggestions, et le kara permet de voter en permanence pour la prochaine chanson
  • Utilier videojs en plus de mpv pour proposer un karaoke 100% web.
  • et plein d’autres encore…
• Si vous êtes pas vraiment développeur mais que votre dada à vous c’est le karaoké, la gestion de vidéos et autres, on a pleiiiiin de choses à régler dans la base :
  • On a quelques karaokés en hardsub, c’est àdire où les paroles sont directement incrustées dans la vidéo. On essaye de s’en débarasser, du coup si vous avez ces différentes vidéos sans sous-titres, ça serait un bon début pour nous aider ! 
  • Il y a quelques karas notoirement mal timés. C’est à dire que les paroles n’apparaissent pas forcément au bon moment pour chanter, ou il en manque, etc. Si vous utilisez Karaoke Mugen et remarquez un karaoké mal foutu, il faut nous le signaler !
  • On a aussi des vidéos de très mauvaise qualité, en petite réoslution ou autre. Pour ça, il faut parfois chercher loin pour en trouver de meilleures.
  • Enfin on a aussi une liste de suggestions ! Une chanson vous plaît, pas de problème, faites une suggestion en créant une nouvelle issue et priez pour que quelqu’un s’en occupe. Notez qu’on est jamais aussi bien servi que par soi-même, c’est pour ça qu’on a fait un tutorial !
• Votre truc c’est plutôt le web : ça tombe bien vu qu’on est toujours intéressés par de bonnes idées pour le site web !

Comme il s’agit d’un projet open source, tout le monde peut participer pour améliorer les choses, donc si ça vous botte, n’hésitez pas à contribuer, même une petite rectification et toujours la bienvenue, ce n’est pas une obligation de continuer à participer toute votre vie (encore heureux !)

Conclusion

Voilà pour un petit tour de présentation de Karaoke Mugen. On est une petite équipe et on adore le kara. L’application a encore besoin de fignolage et n’est pas tout à fait prête, mais ce n’est qu’une question de semaines avant que la version 2.0 « Finé Fantastique » de Karaoke Mugen ne sorte. Après on ira direct bosser sur la version 2.1 « Gabriel Glamoureuse ». Oui, les versions de Karaoke Mugen portent des noms comme ça, si vous voulez voir l’issue des propositions de noms et participer au brainstorming, c’est par là.

Encore un peu de patience pour cette version 2, elle arrive bientôt. En attendant, si vous êtes vraiment très intéressez, on est disponibles sur Discord pour vous aider à l’installer ! Qui sait, peut-être découvrirez-vous un bug ou aurez une idée géniale à nous proposer.