Toutes les études de cas

Étude de cas, application

Pianola

Un piano dans le navigateur pour apprendre des morceaux par cœur, phrase par phrase, avec un mode défi où les notes tombent en rythme. Tout le son est synthétisé, sans aucun fichier audio.

Cadre
Expérience, application fictive
Mon rôle
Design et développement
Format
Application web
Année
2026
Ouvrir le projet

Le contexte

Pianola est une application imaginaire pour apprendre le piano sans partition. Je voulais voir jusqu'où un seul fichier HTML pouvait aller : un vrai instrument, jouable au clavier de l'ordinateur ou à la souris, avec des morceaux à apprendre.

Le problème

Apprendre un morceau par cœur demande de la répétition, et la plupart des applications se contentent de montrer les notes. Il fallait retirer l'aide petit à petit, et rendre l'entraînement assez ludique pour qu'on ait envie d'y revenir.

Ce que j'ai fait

  1. Quatre modes. Jouer librement (avec enregistrement et pédale), apprendre, écouter un morceau en entier, et un défi où les lettres tombent et se tapent en rythme, avec score, combos et records. Le clavier s'adapte à la disposition de l'ordinateur, AZERTY ou QWERTY.

  2. Apprendre par cœur. Chaque morceau est découpé en phrases, apprises en quatre étapes : écouter, guidé, avec des trous, puis de mémoire. La progression est sauvegardée dans le navigateur, et une phrase maîtrisée revient à réviser le lendemain.

  3. Un son entièrement synthétisé. Aucun fichier audio : chaque note est construite avec la Web Audio API (harmoniques, attaque, résonance et réverbération), et le rouleau de notes est dessiné en canvas.

HTMLCSSJavaScriptWeb Audio APICanvas

Le résultat

8Morceaux, de Bach à Satie, dont une rêverie improvisée à chaque écoute
0Fichier audio : chaque note est synthétisée
65 KoPoids de la page, sans les polices

Un projet similaire ?
Parlons-en.

Vous aimeriez un projet dans cet esprit ? Décrivez-le-moi en quelques lignes : je réponds sous 24 heures avec mes questions et une première estimation.