Bastien Tresse Draw & Listen - utc.fr · Bastien Tresse Draw & Listen 2 ... Bref description du...
Transcript of Bastien Tresse Draw & Listen - utc.fr · Bastien Tresse Draw & Listen 2 ... Bref description du...
Xavier Garnier Année 2011 - 2012 Bastien Tresse
Draw & Listen
1
Draw & Listen
Introduction
Dans le cadre de l’UV SI28, nous avions pour mission la création d’une application multimédia
interactive. Etant tous deux musiciens, nous avons songé qu’il serait intéressant de proposer une
application de création de partition de musique en ligne, et également d’enseigner les bases de la
composition à ses utilisateurs.
Une des idées principale était de proposer à l’utilisateur un logiciel uniquement basé sur les
technologies récentes du Web, afin d’obtenir une solution durable, mais aussi de ne pas être
dépendant de plugins externes alourdissants tel que flash (qui devient de plus en plus obsolète).
Cette UV était une bonne occasion de se lancer dans un tel projet, que je vous invite à découvrir dans
la suite de ce document.
Sommaire Introduction ............................................................................................................................................. 1
Cahier des charges................................................................................................................................... 2
Concept du projet ................................................................................................................................ 2
Public cible ........................................................................................................................................... 2
Objectif ................................................................................................................................................ 3
Budget ................................................................................................................................................. 3
Navigation et interactivité ................................................................................................................... 3
Choix techniques ................................................................................................................................. 4
Scénario - Story-board ............................................................................................................................. 5
1. Page d’introduction ......................................................................................................................... 5
2. Page d’accueil .................................................................................................................................. 6
3. Galerie ............................................................................................................................................. 8
4. Pupitre ............................................................................................................................................. 9
5. Découverte musicale ..................................................................................................................... 10
6. Composer ...................................................................................................................................... 11
7. About ............................................................................................................................................. 12
Conclusion ............................................................................................................................................. 13
Xavier Garnier Année 2011 - 2012 Bastien Tresse
Draw & Listen
2
Cahier des charges
Concept du projet Proposer à l’utilisateur de créer ses propres musiques en ligne, d’écrire les partitions, de les écouter
au piano, de les sauver et de les reprendre quand il le souhaite.
Une aide personnalisée à l’éveil musical pourra être proposée à ceux qui n’y connaissent rien en
composition et en musique en général.
Général :
Partir de rien si ce n’est qu’une « feuille » blanche qui, au fur et à mesure, se verra
remplie de notes, de dièses et de bémols, de silences,… pour au final obtenir un
morceau de musique que l’on a nous-mêmes composé de A à Z. On pourra bien
entendu écouter directement le rendu auditif de notre morceau.
L’option de sauvegarder notre travail pour pouvoir ensuite le remodifier
ultérieurement ou encore le partager nous intéresse également.
Interface :
Nous envisageons de créer une interface qui permettra dans un premier temps à
l’internaute de choisir une, deux ou plusieurs voies ainsi que la clef désirée. Puis bien
sur un menu pour les détails rythmique et musicaux (comme le dièse). Et surtout le
fait d’ajouter une note simplement là où l’utilisateur a cliqué.
Public cible
Public visé :
On peut distinguer deux types de public :
- Les débutants en musique, qui pourront choisir un parcours interactif, avec des
exercices et jeux (dictée de notes, rythmique, partitions à trous). Ce public s’attend à
pouvoir créer un morceau malgré ses connaissances restreintes en musique. Cela
doit être intuitif et amusant. Il doit être guidé durant son éveil.
- Les musiciens, qui pourront directement composer leurs chefs d’œuvre. Ce public
plus exigeant que le premier s’attend à trouver de nombreux. Ces outils devront être
accessibles et ergonomique afin de faciliter et apporter du confort à la composition.
Xavier Garnier Année 2011 - 2012 Bastien Tresse
Draw & Listen
3
Support :
La solution finale de notre projet sera normalement sous la forme d’un site web.
Objectif
Notre projet a pour but premier de faire découvrir la composition musicale, mais il permettra
également de partager ses créations. Ou simplement retranscrire un morceau d’oreille à
l’aide de l’option permettant d’écouter ce que l’on a créé.
Pour les débutants, l’objectif est un éveil à la création de musique. L’utilisateur doit
comprendre que la composition n’est pas quelque chose de compliquer (que c’est donc
accessible), et que c’est amusant. Il faut qu’après utilisation ils se disent au moins une fois :
« j’aimerai faire (plus) de la musique ».
Pour les musiciens, l’objectif serait une utilisation régulière de l’outil. Ces derniers ayant plus
de niveau que le premier type de public doivent se dire après utilisation que c’est un outil
performant pour la création de partition.
Budget
Nous ne comptons pas mettre d’argent dans ce projet dans la mesure où cela ne semble pas
nécessaire, cependant ce projet nous demandera probablement une très grande quantité de
temps.
Navigation et interactivité
La page principale:
- s’inscrire : en tant que nouvel utilisateur
- se connecter : les utilisateurs inscrits peuvent accéder à leur compte.
- Créer une partition (dédié aux musiciens surtout) : permet d’accèder à la page de création
de partition.
- Faire des jeux (dédié aux débutants) : permet d’accéder à la page des jeux d’apprentissage
de la musique.
Page Création partition :
Les utilisateurs inscrits pourront jouer (c'est-à-dire écouter), sauvegarder, reprendre et
Xavier Garnier Année 2011 - 2012 Bastien Tresse
Draw & Listen
4
modifier une partition qu’ils ont créée. Les visiteurs ne pourront que jouer ce qu’ils ont fait.
Contenu :
Menu principal (accéder à mes partition, nouvelle partition, sauvegarder,…)
Menu musical (Choix des voies, de l’octave,…)
Menu musical plus (ajout dièse, bémol, reprise, effet pédale, piqué,…)
Menu note (noire, croche, silence,…)
Positionner la note à l’aide de la souris et entendre sa sonorité
Menu pour jouer la partition (play, pause, stop,…)
Page de liste de jeux :
Démo pour les personnes non inscrites (accès à 2-3 jeu uniquement). Pour les personnes
inscrites, afin d’avoir un suivit de l’évolution, les jeux présentés en ligne et colonnes qui se
débloquent aux furs et à mesure que l’utilisateur les termine. Chaque clique sur un atelier
ouvre une nouvelle page d’accès au jeu.
Page jeu :
Différents types de jeu seront proposés à l’utilisateur : dictée de note, remplir les trous (par
des notes), début de composition (à creuser)…
Choix techniques HTML5 et plus précisément la balise <canvas> pour tout ce qui est partition.
CSS3 et JQuery pour les menus.
JSON pour sauvegarder les partitions.
JavaScript (bibliothèque « Buzz » tout juste sortie) pour jouer les notes/partitions.
Xavier Garnier Année 2011 - 2012 Bastien Tresse
Draw & Listen
5
Scénario - Story-board
1. Page d’introduction
Notre page d'introduction est une page simple et fixe représentant une page de cahier, avec une
tâche d'encre et un slogan ainsi que le titre de notre site : "Draw and Listen".
L'utilisateur doit alors cliquer n'importe où sur la page pour se diriger vers l'accueil.
Xavier Garnier Année 2011 - 2012 Bastien Tresse
Draw & Listen
6
2. Page d’accueil
L’utilisateur se retrouve donc directement sur la page d'accueil.
Tout en haut, dans l'en-tête, on peut voir une animation d'un morceau infini généré aléatoirement, le
logo de notre site, qui s'il est cliqué renvoie à l'accueil, et collé au côté droit le panneau de
connexion.
Xavier Garnier Année 2011 - 2012 Bastien Tresse
Draw & Listen
7
Ce panneau descend en même temps que l'ascenseur et, lorsqu'il est survolé, fait apparaître les
champs nécessaires pour se connecter. Dès lors que l'on est connecté, celui-ci se transforme en
bouton de déconnexion.
En dessous de l'en-tête on retrouve le menu qui donne un accès direct aux différentes options de
notre site (accueil, galerie, pupitre, jouer, composition et about).
Toujours de haut en bas, nous arrivons alors ensuite au corps de la page avec un carrousel, qui
présente en quelques phrases les options que nous proposons dans le menu, et les actualités liées à
notre site. Sont également visibles un bouton pour tester directement la composition (pour les
musiciens curieux et impatients) et un formulaire d'inscription particulièrement rapide. Bien
entendu, comme tout site moderne, il est possible de suivre notre site sur les réseaux sociaux Twitter
et Facebook.
(Une flèche vers le haut grise apparait lorsque l'utilisateur descend au sein de la page, celle-ci permet
de remonté tout en haut de la page actuelle grâce à un simple clic.)
Enfin, notre pied de page, séparée par une ligne musicale imagée, qui reste simple en ne présentant
que le nom des créateur et un lien caché vers notre page about.
Remarque : Seul le corps change pour chaque page de notre site. L'en-tête, le menu et le pied restent
les mêmes, à la différence que le menu indique la page actuelle.
Xavier Garnier Année 2011 - 2012 Bastien Tresse
Draw & Listen
8
3. Galerie
Cette page permet de voir les compositions des autres, de les "liker", de les commenter, ...
Xavier Garnier Année 2011 - 2012 Bastien Tresse
Draw & Listen
9
4. Pupitre
Cette page n'est accessible qu'aux membres.
Elle permet de personnaliser ses informations, modifier son mot de passe, accéder à ses partions et
voir les données propres à notre profil (nombre de commentaires, de partitions, ...).
Xavier Garnier Année 2011 - 2012 Bastien Tresse
Draw & Listen
10
5. Découverte musicale
Cette interface permet à l'utilisateur de se familiariser avec notre système de composition en
accédant à des mini-jeux réparties en sur 3 thèmes de 10 niveaux chacun.
Ainsi on distingue :
- La dictée de note : Réécrire une portée après l'avoir écoutée en choisissant seulement la
valeur des notes (Do, Do dièse, Ré, ...).
- La dictée rythmique : Réécrire une portée après l'avoir écoutée en choisissant seulement la
durée des notes (Noire, Croche, Croche pointée, ...).
- La dictée rythmique de notes : Réécrire une portée après l'avoir écoutée en choisissant la
valeur et la durée des notes.
Seul le 1er niveau de chaque thème sera accessible aux non-membres ; alors que pour les membres,
les niveaux suivants se déverrouilleront au fur et à mesure.
Xavier Garnier Année 2011 - 2012 Bastien Tresse
Draw & Listen
11
6. Composer
Cette partie est le cœur de notre projet.
Elle permet de créer une partition au départ vide, en y ajoutant exactement tout ce que l'on veut de
la double croche fa dièse à la ronde si bémol.
Au départ, l’utilisateur va pouvoir choisir un titre à sa partition, sa tonalité (que ce soit majeur ou
mineur) et le chiffrage voulu.
Il entrera par la suite en mode composition. Il peut ajouter, supprimer des mesures, ajouter des
notes et des silences, créer des accords, décaler les éléments mal placés, les supprimer. L’utilisateur
a aussi l’occasion de changer la durée des notes (de la double croche à la ronde), leur altération
(dièse, bémol, bécarre).
Cela donne donc à l'utilisateur un moyen simple et facile de créer un morceau à une ou plusieurs
voix.
Il est aussi possible pour l’utilisateur de vérifier que sa partition soit correctement remplie. Lorsque
des mesures n’ont pas l’ensemble des temps complétés (mesure 4/4 = 4 temps), alors une infobulle
avertit l’utilisateur et lui indique combien de temps non complétés il reste.
De plus, lorsque le compositeur qui n'est autre que l'utilisateur pose une note, la note est alors jouée
pour entendre le rendu de celle-ci. Et de la même façon, une fois le morceau terminé ou encore en
cours de création, ce dernier peut être écouté pour se faire une idée de la sonorité de sa composition
et au final entendre note pour note ce qu’il avait en tête.
Xavier Garnier Année 2011 - 2012 Bastien Tresse
Draw & Listen
12
L’utilisateur peut sauvegarder ses différentes partition à partir du moment où il est inscrit sur le site
et les retravailler quand bon lui semblera.
7. About
Bref description du projet ainsi que de ses fondateurs accompagné d'un air de piano.
Xavier Garnier Année 2011 - 2012 Bastien Tresse
Draw & Listen
13
Conclusion
Ce projet fut l’occasion, dans le cadre de l’UV SI28, de travailler sur deux points importants :
l’utilisation des technologies récentes du Web avec HTML5, JavaScript et l’outil Canvas, et se servir
de ces technologies pour créer une partition et ses interactions.
Il y a eu beaucoup de difficultés à surmonter, surtout sur la partie de lecture du son : se trouver une
banque de sons, les librairies qui permettent de les jouer etc. Pour avoir une application
complètement fonctionnelle, compatible sur tous les navigateurs, il aura fallu plus de temps ou une
équipe plus conséquente. Au fur et à mesure du développement, de nombreux petits détails
auxquels nous n’avions pas pensés lors de l’analyse du projet, sont venus se rajouter et compliquer
le développement (positionnement des notes, gros travail sur la gestion des altérations, décalages
lors de la suppression des mesures).
Malgré tout, la gestion de tous ces soucis permet d’offrir à l’utilisateur une expérience plus riche,
plus complète. De plus l’application a été conçue de manière modulaire, telle qu’il serait plutôt aisé
de reprendre et rajouter de nouvelles fonctionnalités. Par exemple, pouvoir lier plus de notes entre
elles (croche pointé double), faire des liaisons entre les mesures etc.
Néanmoins, en dépit des soucis techniques, ce projet fut des plus enrichissants. D’ailleurs, tout ne fut
pas que technique, il y a eu aussi un travail de recherche (banque de son, comment assembler des
fichiers audios, comment les jouer etc.). Tous ces côtés du projet l’ont rendu mémorable.