Piano virtuel en HTML5 et javascript

Ce n’est pas encore complètement opérationnel, on va dire que c’est en beta, mais ce week-end j’ai fait un petit piano exploitant la balise

Du côté utilisateur c’est tout simple, on clique, et la note est jouée (avec affichage du nom de la note, ça peut servir !). Pour l’instant, pas de gestion du multitouch (j’ai essayé rapidement sur une tablette tactile, j’ai eu une réaction pour dix essais – à revoir, donc), et le son s’interrompt quelque peu brutalement.

Du côté développeur : il y a 36 sons au total, je l’ai joué quelque peu bourrin mais j’avais besoin que les notes soient chargées avant leur appel, histoire de répondre rapidement, il y a donc… 36 balises audio sur la page. Elles sont de cette forme :

[prism key= »piano-1″ language= »markup »]

La balise audio peut comprendre plusieurs attributs : autoplay (lecture dès le chargement), loop (boucle, non compris par Firefox) et controls (présence des boutons de contrôle et de la barre de défilement), dont la simple présence sans valeur les définit à *true, *preload (valeurs : auto, metadata, none, si non précisé ce sera metadata), src (dont la valeur est, évidemment l’url du fichier son). On peut remarquer que src peut être un attribut de la balise ‘interne’, qui permet notamment de définir plusieurs sources pour le son, dans l’ordre de préférence, dans le cas où certains types de fichiers son ne serait pas compris par le navigateur.

Pour ma part, je ne voulais ni autoplay, puisque le son serait déclenché par l’appui sur une touche du piano, ni loop, car une note jouée sur un vrai piano ne résonne pas indéfiniment, ni controls – on ne verrait pas les balises, de toutes façons.

Mais comment les déclencher, alors ? Eh bien via les contrôles javascript natifs ! De simples méthodes play, pause, currentTime, etc. On regrette l’absence de stop, mais qui peut être palliée par un pause suivi d’un retour à 0 du temps de lecture.

Une fois que l’on sait comment faire (j’ai pas mal perdu de temps à tester du .mp3 sur Firefox par exemple, lui qui ne gère actuellement que le .wav et le .ogg, puis à chercher des sons de notes toutes simples, etc), cela va très vite.

Une fonction start :

function start(id) {
    document.getElementById(id).play();
}

Une fonction stop :

function stop(id) {
    document.getElementById(id).pause();
    document.getElementById(id).currentTime = 0;
}

(note à moi-même : trouver un autre plugin de coloration syntaxique)

Et la détection du clic, via jQuery :

jQuery('.note').bind('mousedown touchstart', function(){
    var note = jQuery(this).attr('id').substr(2); //ici c'est parce que
// mes balises audio ont pour id le nom de la note dans le système
// anglosaxon (C3, D4), et il me fallait donc trouver un autre id pour
// les touches, mais affilié : ici n-C3, ou n-D4, d'où le substr(2)
    start(note);
    jQuery(this).bind('mousemove touchmove mouseup touchstop', function(){
        stop(note);
    });
});

Ensuite, tout autour, pas mal de fioritures :

  • utilisation de Modernizr, une bibliothèque javascript permettant une détection ultrapratique des fonctionnalités CSS3 et HTML5 gérés par votre navigateur, ici l’audio, et plus précisément le format .ogg.
  • au chargement de la page, affichage des touches du piano uniquement lorsque le son associé est chargé, afin d’éviter l’effet « cliqueur fou »
  • plein de petits trucs pour cacher les ronds de couleur dans lesquels s’affichent les noms des touches, et les afficher, message noscript, message pour les malheureux qui ne pourraient pas lire les

Si vous voulez tester, c’est ici : http://lamecarlate.net/informatique/web/experiences/piano/

Je serais heureuse d’avoir des retours, qu’ils soient positifs ou non 😉

Sources :

 

  1. Merci à vous !
    Je suis désolée, votre commentaire était passé dans les spams, et je ne m’en suis aperçue qu’aujourd’hui.

  2. Bonjour,

    J’essaie de faire un tableau de notes, genre xcel où lorsqu’on passe la sourit sur les notes celles-ci résonnent.
    J’imagine que c’est facile mais je ne suis pas du tout dans la programmation. Pourriez vous m’expliquer comment faire?
    Merci!

    • Bonjour,

      je fais du web, je ne connais rien du tout à la programmation dans Excel…

      J’ai profité de votre message pour remettre le piano de l’article d’aplomb, c’était cassé :/ Vous pourriez vous inspirer de ce code, mais je n’en suis plus très fière, il est bourré de trous et d’erreurs de débutant⋅e.