Scenario : Music Puzzle

Présentation générale

Music Puzzle est un jeu musical permettant de faire des blind tests entre amis. Une chanson (aléatoire ou choisie par le maître du jeu) démarre. Les joueurs doivent reconnaître la chanson et le premier joueur qui trouve la réponse gagne la manche. Le maître du jeu se charge de déterminer le gagnant de chaque manche et affiche les informations de la chanson sur le vidéo projecteur.

Nous avons implémenté une application web, développée en JavaScript, échangeant avec un point de contrôle, réalisé en Java, par des requêtes HTTP. Le point de contrôle est lié à plusieurs dispositifs connectés :

  • Audio player pour le son
  • Vidéo projecteur pour l’affichage des informations
  • Dispositif pour la synthèse vocale

Nous avons également un serveur jena-fuseki qui va effectuer des requêtes SPARQL vers Dbpedia pour récupérer les informations des chansons et vers notre ontologie stockée, créée pour ce projet, qui contient les uri des images et des fichiers mp3 des musiques. L’application web interagit avec ce serveur en utilisant aussi des requêtes HTTP.

Le code de ce projet est disponible sur Github à l’adresse suivante : https://github.com/Chloebrz/music-game/.

Il contient l’application web, le point de contrôle, ainsi que le fichier data.rdf qui est utilisé dans le serveur jena-fuseki (contient les données de notre ontologie).

Description fonctionnelle

Interface du maître du jeu

Au démarrage, le maître du jeu peut lire les règles du jeu et la liste des joueurs qui se sont inscrits. Un bouton “Commencer le jeu” permet de lancer la partie.
Au clic sur ce bouton, une nouvelle page apparaît avec :

  • le titre de la chanson en cours de lecture
  • un panneau de contrôle : play / pause / next / volume
  • une liste de toutes les musiques disponibles
  • une liste de musiques qui correspondent aux goûts des joueurs
  • et la liste des joueurs avec leurs scores.

Capture du 2016-03-03 11:16:31

Figure 1 : Interface du maître du jeu

Interface joueur

Au démarrage, les joueurs doivent s’inscrire en précisant leur nom et le genre de musique qu’ils aimeraient écouter. Leur téléphone (ou ordinateur) se transforme ensuite en buzzer, qu’ils pourront utiliser s’ils reconnaissent une chanson.

joueur

Figure 2 : Interface joueur pour rejoindre le jeu

buzz

Figure 3 : Interface joueur pour buzzer

Synthèse vocale

Lorsqu’un joueur buzz, le dispositif de synthèse vocale annonce qu’un joueur a buzzé, et donne le nom du joueur. “Cédric a buzzé. Quelle est ta réponse Cédric ?” Le joueur donne alors sa réponse, et le maître du jeu valide ou non. la synthèse vocale annonce alors “Félicitations Cédric ! C’est la bonne réponse !” ou “Ce n’est pas la bonne réponse Cédric !”.

Vidéo projecteur

Le vidéo projecteur permet de projeter les informations sur la chanson, récupérées dans Dbpedia. Quand les joueurs n’ont pas encore trouvé la chanson, il affiche le score des joueurs.

Audio player

Le lecteur de musique permet de lire les musiques sélectionnées par le maître du jeu. Cette fonctionnalité permet d’utiliser un appareil de meilleure qualité pour diffuser le son (comme une chaîne Hi-Fi connectée par exemple).

Organisation

Pour réaliser ce projet, nous avons réparti le travail en trois groupes de trois étudiants.

Groupe Ontology, requêtes SPARQL

Le premier groupe s’est occupé de la partie web sémantique avec le serveur Fuseki, les requêtes SPARQL ainsi que la vérification des données sur DBpédia.

Groupe application web

Ce deuxième groupe s’est chargé du développement du serveur web, de l’interface du maître du jeu et de l’interface du joueur.

Groupe point de contrôle et dispositifs

Le troisième groupe a développé le point de contrôle permettant de contrôler les différents dispositifs connectés.

Implémentation

image00

Figure 4 : Schéma de l’architecture de notre outil

Contraintes sur les bases de connaissances

Afin de sélectionner des musiques à ajouter à notre jeu, nous avons du identifier sur Dbpedia des musiques respectant les critères suivants­­ ​​​​​⁠⁠​​​​­:

  • posséder une propriété dbp:title
  • posséder une propriété dbp:artist
  • avoir des descriptions en anglais ou en français
  • l’objet dbp:artist possède une propriété rdfs:label
  • et les musiques peuvent être rangées dans une catégorie de notre base de connaissance.

Pour chaque titre sélectionné, nous avons alors téléchargé une image et un fichier audio et nous les avons ajoutés sur un serveur.

Puis nous avons créer le schéma de notre base de connaissance ainsi que le fichier contenant les données.

Communication application / serveur Fuseki

L’application web communique avec les deux ontologies utilisées : notre ontologie et Dbpedia. Cette communication s’effectue par requêtes HTTP sur notre serveur jena-fuseki, et l’URL utilisée est :

  • POST /blindtest/query, {query : “la requete SPARQL”} : permet de récupérer les résultats de la requête SPARQL en question (au format JSON).

Application web

L’application web a été développée grâce à Node.js. Pour cela, nous avons utilisé le framework Express.js, facilitant la création d’applications Node.js, et la bibliothèque Socket.io, permettant de faire de la communication synchrone dans l’application.

Cette application web contient :

  • un serveur
  • 4 pages web : l’accueil, la page de jeu, l’interface des joueurs et la page à afficher sur le vidéo projecteur.

Sur la page principale, la playlist est une liste interactive des musiques disponibles. Le maître du jeu peut changer l’ordre des musiques en glissant / déposant les éléments de la liste ou en cliquant sur un titre pour l’ajouter en deuxième position.

Les recommandations contiennent la liste des chansons correspondant aux styles préférés des joueurs. Un clic sur un titre l’ajoute en deuxième position de la playlist.

Lorsqu’un joueur buzz, une fenêtre de dialogue apparaît sur l’interface du maître du jeu. Un clic sur le bouton “Oui” ajoute un point au joueur qui a buzzé et affiche les informations de la chanson sur le vidéo projecteur. Un clic sur le bouton “Non” ferme la fenêtre en attendant qu’un autre joueur buzz. Notons que tant que le dialogue est ouvert, les autres joueurs ne peuvent pas buzzer.

Communication application / point de contrôle

La communication entre l’application web et le point de contrôle se fait par des requêtes HTTP. Les différents endpoints utilisés sont les suivant :

  • GET /audio/playMusic?musicurl=urldutitre : permet de lancer une musique sur l’audio player. Utilisé lors d’un clic sur le bouton “play”.
  • GET /audio/pauseMusic : permet de mettre une musique en pause. Utilisé lors d’un clic sur le bouton “pause”.
  • GET /audio/setVolume?value=volume : permet de modifier le volume du dispositif audio. Utilisé lors d’un changement sur le slider.
  • POST /video, “url de la page à afficher” : permet d’afficher une page web sur le vidéo projecteur. Utilisé lorsqu’un joueur répond correctement.
  • GET /vocal/anouncePlayer?playerName=nomdujou         eur : active la synthèse vocale. Utilisé lorsqu’un joueur a buzzé.
  • GET /vocal/congrats?playerName=nomdujoueur : active la synthèse vocale. Utilisé lorsqu’un joueur a répondu correctement.
  • GET /vocal/wrongAnswer?playerName=nomdujoueur : active la synthèse vocale. Utilisé lorsqu’un joueur a mal répondu.

Point de contrôle

Le point de contrôle est développé en Java et utilise le protocole UPnP. Il contient des fonctions permettant de contrôler les différents dispositifs connectés utilisés pendant le jeu, comme par exemple afficher une page web sur le vidéo projecteur ou ajuster le volume de  l’audio player.

La communication entre l’application web et le point de contrôle s’effectuant en HTTP, nous avons implémenté un handler par dispositif : audio, vidéo et vocal. Les handlers sont appelés en fonction de l’URL de la requête. Ils analysent l’URL complète affin de connaître l’action à effectuer puis appellent la méthode du point de contrôle correspondante.

 

Chloé BROUZES
Anne-Gabrielle CAROFF
Wenwu MAO
Jianfei PAN
Cédric PATCHANE LACANE
Marie-Cécile TREGOUET
Jue WANG
Quancheng ZHAO
Zhongxian YUAN

 

Ce contenu a été publié dans L'Internet des Objets, Web Sémantique, Web Social, avec comme mot(s)-clé(s) , , , . Vous pouvez le mettre en favoris avec ce permalien.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *