bastien tresse draw & listen - utc.fr · bastien tresse draw & listen 2 ... bref...

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


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.


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


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.


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.


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.


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.


Draw & Listen

8

3. Galerie

Cette page permet de voir les compositions des autres, de les "liker", de les commenter, ...


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, ...).


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.


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.


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.


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.

bastien tresse draw & listen - utc.fr · bastien tresse draw & listen 2 ... bref...

Documents