{"id":41,"date":"2011-01-05T22:13:59","date_gmt":"2011-01-05T22:13:59","guid":{"rendered":"http:\/\/akaiken.kelio.org\/sphinx\/?p=41"},"modified":"2018-09-30T18:00:14","modified_gmt":"2018-09-30T17:00:14","slug":"piano-virtuel-en-html5-et-javascript","status":"publish","type":"post","link":"https:\/\/informatique.lamecarlate.net\/experiences\/piano-virtuel-en-html5-et-javascript","title":{"rendered":"Piano virtuel en HTML5 et javascript"},"content":{"rendered":"

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

Du c\u00f4t\u00e9 utilisateur c’est tout simple, on clique, et la note est jou\u00e9e (avec affichage du nom de la note, \u00e7a peut servir !). Pour l’instant, pas de gestion du multitouch (j’ai essay\u00e9 rapidement sur une tablette tactile, j’ai eu une r\u00e9action pour dix essais – \u00e0 revoir, donc), et le son s’interrompt quelque peu brutalement.<\/p>\n

Du c\u00f4t\u00e9 d\u00e9veloppeur : il y a 36 sons au total, je l’ai jou\u00e9 quelque peu bourrin mais j’avais besoin que les notes soient charg\u00e9es avant leur appel, histoire de r\u00e9pondre rapidement, il y a donc… 36 balises audio sur la page. Elles sont de cette forme :<\/p>\n

[prism key=\u00a0\u00bbpiano-1″ language=\u00a0\u00bbmarkup\u00a0\u00bb]<\/p>\n

La balise audio peut comprendre plusieurs attributs : autoplay (lecture d\u00e8s le chargement), loop (boucle, non compris par Firefox) et controls (pr\u00e9sence des boutons de contr\u00f4le et de la barre de d\u00e9filement), dont la simple pr\u00e9sence sans valeur les d\u00e9finit \u00e0 *true, *preload (valeurs : auto, metadata, none, si non pr\u00e9cis\u00e9 ce sera metadata), src (dont la valeur est, \u00e9videmment l’url du fichier son). On peut remarquer que src peut \u00eatre un attribut de la balise ‘interne’, qui permet notamment de d\u00e9finir plusieurs sources pour le son, dans l’ordre de pr\u00e9f\u00e9rence, dans le cas o\u00f9 certains types de fichiers son ne serait pas compris par le navigateur.<\/p>\n

Pour ma part, je ne voulais ni autoplay, puisque le son serait d\u00e9clench\u00e9 par l’appui sur une touche du piano, ni loop, car une note jou\u00e9e sur un vrai piano ne r\u00e9sonne pas ind\u00e9finiment, ni controls – on ne verrait pas les balises, de toutes fa\u00e7ons.<\/p>\n

Mais comment les d\u00e9clencher, alors ? Eh bien via les contr\u00f4les javascript natifs ! De simples m\u00e9thodes play, pause, currentTime, etc. On regrette l’absence de stop, mais qui peut \u00eatre palli\u00e9e par un pause suivi d’un retour \u00e0 0 du temps de lecture.<\/p>\n

Une fois que l’on sait comment faire (j’ai pas mal perdu de temps \u00e0 tester du .mp3 sur Firefox par exemple, lui qui ne g\u00e8re actuellement que le .wav et le .ogg, puis \u00e0 chercher des sons de notes toutes simples, etc), cela va tr\u00e8s vite.<\/p>\n

Une fonction start :<\/p>\n

function start(id) {\n    document.getElementById(id).play();\n}<\/pre>\n
Une fonction stop :<\/p>\n
function stop(id) {\n    document.getElementById(id).pause();\n    document.getElementById(id).currentTime = 0;\n}<\/pre>\n
(note \u00e0 moi-m\u00eame : trouver un autre plugin de coloration syntaxique)<\/em><\/p>\n
Et la d\u00e9tection du clic, via jQuery :<\/p>\n
jQuery('.note').bind('mousedown touchstart', function(){\n    var note = jQuery(this).attr('id').substr(2); \/\/ici c'est parce que\n\/\/ mes balises audio ont pour id le nom de la note dans le syst\u00e8me\n\/\/ anglosaxon (C3, D4), et il me fallait donc trouver un autre id pour\n\/\/ les touches, mais affili\u00e9 : ici n-C3, ou n-D4, d'o\u00f9 le substr(2)\n    start(note);\n    jQuery(this).bind('mousemove touchmove mouseup touchstop', function(){\n        stop(note);\n    });\n});<\/pre>\n
Ensuite, tout autour, pas mal de fioritures :<\/p>\n