{"id":30893,"date":"2026-07-23T05:54:06","date_gmt":"2026-07-23T09:54:06","guid":{"rendered":"https:\/\/allianceenjesus.com\/?page_id=30893"},"modified":"2026-07-23T18:09:19","modified_gmt":"2026-07-23T22:09:19","slug":"jeu-piano","status":"publish","type":"page","link":"https:\/\/allianceenjesus.com\/?page_id=30893","title":{"rendered":"Jeu piano"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"30893\" class=\"elementor elementor-30893\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-d7523ed elementor-section-full_width ang-section-padding-initial elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no elementor-repeater-item-none elementor-repeater-item-none_hover wpr-column-slider-no wpr-equal-height-no\" data-id=\"d7523ed\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-70c7420 elementor-repeater-item-none elementor-repeater-item-none_hover\" data-id=\"70c7420\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-6200a7f elementor-repeater-item-none elementor-repeater-item-none_hover elementor-widget elementor-widget-spacer\" data-id=\"6200a7f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-j6jr01l elementor-section-content-middle elementor-section-height-full elementor-section-full_width elementor-section-items-stretch ang-section-padding-initial elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no elementor-repeater-item-none elementor-repeater-item-none_hover wpr-column-slider-no wpr-equal-height-no\" data-id=\"j6jr01l\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-b1eae7d elementor-repeater-item-none elementor-repeater-item-none_hover\" data-id=\"b1eae7d\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-e239bc3 elementor-repeater-item-none elementor-repeater-item-none_hover elementor-widget elementor-widget-spacer\" data-id=\"e239bc3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t<div class=\"elementor-element elementor-element-f7a2e52 e-flex e-con-boxed elementor-repeater-item-default_padding sk-none elementor-repeater-item-none elementor-repeater-item-none_hover wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-parent\" data-id=\"f7a2e52\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;ang_container_spacing_size&quot;:&quot;default_padding&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1d0656a elementor-repeater-item-none elementor-repeater-item-none_hover elementor-widget elementor-widget-spacer\" data-id=\"1d0656a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9848b7b e-con-full e-flex elementor-repeater-item-default_padding elementor-repeater-item-none elementor-repeater-item-none_hover wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-parent\" data-id=\"9848b7b\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;ang_container_spacing_size&quot;:&quot;default_padding&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-89ffeb0 elementor-repeater-item-none elementor-repeater-item-none_hover elementor-widget elementor-widget-html\" data-id=\"89ffeb0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\n\n<html lang=\"fr\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Piano Quest \u2014 \u00c9cole de Piano Interactive<\/title>\n\n<style>\n\n:root{\n--bg:#06152e;\n--bg2:#0b2447;\n--card:#103b6d;\n--card2:#15579a;\n--blue:#1976d2;\n--cyan:#67e8f9;\n--gold:#facc15;\n--green:#4ade80;\n--red:#fb7185;\n--white:#ffffff;\n}\n\n*{\nbox-sizing:border-box;\n}\n\nbody{\nmargin:0;\nfont-family:Arial,Helvetica,sans-serif;\nbackground:linear-gradient(135deg,#06152e,#0b2447);\ncolor:white;\n}\n\nbutton,\nselect,\ninput{\nfont:inherit;\n}\n\nbutton{\ncursor:pointer;\nborder:0;\nborder-radius:9px;\npadding:10px 14px;\nfont-weight:bold;\n}\n\nbutton:hover{\nfilter:brightness(1.15);\n}\n\n.action{\nbackground:linear-gradient(135deg,#22d3ee,#3b82f6);\ncolor:#00152c;\n}\n\n.secondary{\nbackground:#14518d;\nborder:1px solid #5ba5e6;\ncolor:white;\n}\n\n.danger{\nbackground:#c62828;\ncolor:white;\n}\n\n.app{\ndisplay:flex;\nmin-height:100vh;\n}\n\n\/* =========================\nMENU\n========================= *\/\n\n.sidebar{\nwidth:240px;\nbackground:#041126;\nborder-right:2px solid #1d4f82;\npadding:18px;\nflex-shrink:0;\n}\n\n.logo{\nfont-size:25px;\nfont-weight:bold;\ncolor:var(--cyan);\nmargin-bottom:25px;\n}\n\n.nav button{\nwidth:100%;\ndisplay:block;\nmargin:5px 0;\ntext-align:left;\nbackground:transparent;\ncolor:white;\n}\n\n.nav button.active,\n.nav button:hover{\nbackground:#1565c0;\n}\n\n.profile{\nmargin-top:25px;\npadding:15px;\nbackground:#103b6d;\nborder-radius:14px;\n}\n\n.xpbar{\nheight:9px;\nbackground:#06152e;\nborder-radius:10px;\noverflow:hidden;\n}\n\n.xpfill{\nheight:100%;\nwidth:0;\nbackground:linear-gradient(90deg,#67e8f9,#a78bfa);\n}\n\n\/* =========================\nCONTENU\n========================= *\/\n\n.main{\nflex:1;\npadding:20px;\nmin-width:0;\n}\n\n.section{\ndisplay:none;\n}\n\n.section.active{\ndisplay:block;\n}\n\n.card{\nbackground:linear-gradient(135deg,#103f73,#0c315c);\nborder:1px solid #3477b8;\nborder-radius:17px;\npadding:20px;\nmargin-bottom:18px;\nbox-shadow:0 7px 20px #0004;\n}\n\n.card h1,\n.card h2,\n.card h3,\n.card p,\n.card li{\ncolor:white;\n}\n\n.grid{\ndisplay:grid;\ngrid-template-columns:repeat(3,1fr);\ngap:15px;\n}\n\n.stat{\nbackground:#15518b;\nborder:1px solid #4388c2;\npadding:18px;\nborder-radius:14px;\n}\n\n.stat strong{\ndisplay:block;\nfont-size:28px;\ncolor:var(--cyan);\n}\n\n.controls{\ndisplay:flex;\nflex-wrap:wrap;\ngap:8px;\nalign-items:center;\n}\n\n.control{\nbackground:#08294d;\nborder:1px solid #2d679b;\nborder-radius:9px;\npadding:9px;\n}\n\nselect{\nbackground:#06152e;\ncolor:white;\nborder:1px solid #60a5fa;\nborder-radius:6px;\npadding:7px;\n}\n\n\/* =========================\nECRAN DE NOTES\n========================= *\/\n\n.noteScreen{\nbackground:\nradial-gradient(circle at center,#164e83,#06152e);\nborder:3px solid #2b78bd;\nborder-radius:18px;\npadding:20px;\ntext-align:center;\nmargin-bottom:18px;\nbox-shadow:\n0 0 25px #0284c755,\ninset 0 0 30px #0008;\n}\n\n.noteLabel{\nfont-size:clamp(34px,6vw,70px);\nfont-weight:bold;\ncolor:#67e8f9;\ntext-shadow:0 0 20px #22d3ee;\n}\n\n.noteInternational{\nfont-size:24px;\ncolor:white;\nmargin-top:5px;\n}\n\n.noteSymbol{\nfont-family:serif;\nfont-size:55px;\ncolor:#facc15;\nline-height:1;\n}\n\n.instrumentDisplay{\nfont-size:16px;\ncolor:#bde7ff;\nmargin-top:10px;\n}\n\n.chordDisplay{\nmargin-top:10px;\nfont-size:22px;\nfont-weight:bold;\ncolor:#facc15;\n}\n\n\/* =========================\nPIANO\n========================= *\/\n\n.pianoContainer{\nwidth:100%;\noverflow:hidden;\nbackground:#020617;\nborder:2px solid #28618f;\nborder-radius:14px;\npadding:20px 8px 15px;\n}\n\n.piano{\nposition:relative;\nwidth:100%;\nheight:260px;\n}\n\n.whiteKey{\nposition:absolute;\ntop:0;\nheight:250px;\nbackground:linear-gradient(#fff,#dbeafe);\nborder:1px solid #64748b;\nborder-radius:0 0 5px 5px;\ncolor:#07152d;\ndisplay:flex;\nalign-items:flex-end;\njustify-content:center;\npadding-bottom:8px;\nuser-select:none;\nz-index:1;\ntransition:.06s;\ntouch-action:none;\n}\n\n.whiteKey.active{\nbackground:linear-gradient(#67e8f9,#0284c7);\nbox-shadow:0 0 22px #22d3ee;\n}\n\n.blackKey{\nposition:absolute;\ntop:0;\nheight:160px;\nbackground:linear-gradient(#334155,#020617);\nborder-radius:0 0 5px 5px;\ncolor:white;\nfont-size:8px;\ndisplay:flex;\nalign-items:flex-end;\njustify-content:center;\npadding-bottom:7px;\nz-index:5;\nuser-select:none;\ntouch-action:none;\n}\n\n.blackKey.active{\nbackground:linear-gradient(#c4b5fd,#6d28d9);\nbox-shadow:0 0 22px #a78bfa;\n}\n\n.keyName{\nfont-size:clamp(5px,0.7vw,11px);\nfont-weight:bold;\n}\n\n.octaveMarkers{\ndisplay:flex;\njustify-content:space-between;\nfont-size:11px;\ncolor:var(--cyan);\nmargin-bottom:5px;\n}\n\n\/* =========================\nCOURS\n========================= *\/\n\n.lesson{\nbackground:linear-gradient(135deg,#15579a,#104276);\nborder:1px solid #4388c2;\npadding:18px;\nborder-radius:14px;\ncursor:pointer;\n}\n\n.lesson:hover{\ntransform:translateY(-2px);\nbackground:#1b66a8;\n}\n\n\/* =========================\nAUDIO\n========================= *\/\n\naudio{\nwidth:100%;\nmargin:15px 0;\n}\n\n\/* =========================\nENREGISTREMENTS\n========================= *\/\n\n.recording{\ndisplay:flex;\ngap:10px;\nalign-items:center;\njustify-content:space-between;\nflex-wrap:wrap;\npadding:12px;\nbackground:#15518b;\nborder-radius:10px;\nmargin:8px 0;\n}\n\n\/* =========================\nMODAL\n========================= *\/\n\n.modal{\nposition:fixed;\ninset:0;\nbackground:#000b;\ndisplay:none;\nalign-items:center;\njustify-content:center;\nz-index:1000;\npadding:20px;\n}\n\n.modal.show{\ndisplay:flex;\n}\n\n.modalBox{\nmax-width:650px;\nwidth:100%;\nmax-height:85vh;\noverflow:auto;\nbackground:#103f73;\nborder:2px solid #4388c2;\nborder-radius:18px;\npadding:25px;\n}\n\n.close{\nfloat:right;\n}\n\n\/* =========================\nRESPONSIVE\n========================= *\/\n\n@media(max-width:850px){\n\n.app{\ndisplay:block;\n}\n\n.sidebar{\nwidth:100%;\nborder-right:0;\nborder-bottom:2px solid #1d4f82;\n}\n\n.nav{\ndisplay:grid;\ngrid-template-columns:repeat(3,1fr);\ngap:4px;\n}\n\n.main{\npadding:10px;\n}\n\n.grid{\ngrid-template-columns:repeat(2,1fr);\n}\n\n}\n\n@media(max-width:600px){\n\n.nav{\ngrid-template-columns:repeat(2,1fr);\n}\n\n.grid{\ngrid-template-columns:1fr;\n}\n\n.pianoContainer{\npadding-left:2px;\npadding-right:2px;\n}\n\n.piano{\nheight:170px;\n}\n\n.whiteKey{\nheight:165px;\n}\n\n.blackKey{\nheight:105px;\n}\n\n.keyName{\nfont-size:4px;\n}\n\n}\n\n<\/style>\n\n<\/head>\n\n<body>\n\n<div class=\"app\">\n\n<aside class=\"sidebar\">\n\n<div class=\"logo\">\n\ud83c\udfb9 Piano Quest\n<\/div>\n\n<nav class=\"nav\">\n\n<button class=\"active\" data-page=\"home\">\ud83c\udfe0 Accueil<\/button> <button data-page=\"piano\">\ud83c\udfb9 Piano<\/button> <button data-page=\"courses\">\ud83d\udcda Cours<\/button> <button data-page=\"exercises\">\ud83c\udfaf Exercices<\/button> <button data-page=\"audio\">\ud83c\udfb5 Audio<\/button> <button data-page=\"recordings\">\ud83c\udf99\ufe0f Enregistrements<\/button> <button data-page=\"progress\">\ud83c\udfc6 Progression<\/button> <button data-page=\"settings\">\u2699\ufe0f Param\u00e8tres<\/button>\n\n<\/nav>\n\n<div class=\"profile\">\n\n<strong>\ud83d\udc64 \u00c9l\u00e8ve<\/strong>\n\n<p id=\"levelText\">\nNiveau 1\n<\/p>\n\n<div class=\"xpbar\">\n<div class=\"xpfill\" id=\"xpFill\"><\/div>\n<\/div>\n\n<p id=\"xpText\">\n0 \/ 100 XP\n<\/p>\n\n<\/div>\n\n<\/aside>\n\n<main class=\"main\">\n\n<header>\n\n<h1 id=\"pageTitle\">\nBienvenue sur Piano Quest\n<\/h1>\n\n<p>\nApprends le piano, joue, exp\u00e9rimente et progresse.\n<\/p>\n\n<\/header>\n\n<!-- =========================\nACCUEIL\n========================= -->\n\n<section class=\"section active\" id=\"home\">\n\n<div class=\"card\">\n\n<h2>\n\ud83c\udfb9 Ton \u00e9cole de piano interactive\n<\/h2>\n\n<p>\nApprends progressivement la th\u00e9orie musicale,\nla lecture des notes, le rythme et la pratique.\n<\/p>\n\n<button class=\"action\" data-go=\"piano\">\n\ud83c\udfb9 Ouvrir le piano\n<\/button>\n\n<button class=\"secondary\" data-go=\"courses\">\n\ud83d\udcda Commencer les cours\n<\/button>\n\n<\/div>\n\n<div class=\"grid\">\n\n<div class=\"stat\">\n<strong id=\"homeNotes\">0<\/strong>\nNotes jou\u00e9es\n<\/div>\n\n<div class=\"stat\">\n<strong id=\"homeLessons\">0<\/strong>\nCours termin\u00e9s\n<\/div>\n\n<div class=\"stat\">\n<strong id=\"homeExercises\">0<\/strong>\nExercices\n<\/div>\n\n<div class=\"stat\">\n<strong id=\"homeXP\">0<\/strong>\nXP\n<\/div>\n\n<\/div>\n\n<\/section>\n\n<!-- =========================\nPIANO\n========================= -->\n\n<section class=\"section\" id=\"piano\">\n\n<!-- ECRAN EN HAUT -->\n\n<div class=\"noteScreen\">\n\n<div class=\"noteLabel\" id=\"noteLabel\">\nPR\u00caT \u00c0 JOUER\n<\/div>\n\n<div class=\"noteInternational\" id=\"noteInternational\">\n\u2014\n<\/div>\n\n<div class=\"noteSymbol\" id=\"noteSymbol\">\n\u266a\n<\/div>\n\n<div class=\"chordDisplay\" id=\"chordDisplay\">\nAucun accord d\u00e9tect\u00e9\n<\/div>\n\n<div class=\"instrumentDisplay\" id=\"instrumentDisplay\">\n\ud83c\udfb9 Concert Grand\n<\/div>\n\n<\/div>\n\n<div class=\"card\">\n\n<h2>\n\ud83c\udfb9 Piano professionnel \u2014 88 touches\n<\/h2>\n\n<div class=\"controls\">\n\n<div class=\"control\">\n\n<label>\n\ud83c\udfb9 Sonorit\u00e9\n<\/label>\n\n<select id=\"instrument\">\n<option value=\"concert\">Concert Grand<\/option>\n<option value=\"studio\">Studio Grand<\/option>\n<option value=\"warm\">Warm Grand<\/option>\n<option value=\"bright\">Bright Grand<\/option>\n<option value=\"classic\">Classic Grand<\/option>\n<option value=\"upright\">Upright Piano<\/option>\n<option value=\"honky\">Honky Tonk<\/option>\n<option value=\"electric\">Electric Piano<\/option>\n<option value=\"rhodes\">Rhodes<\/option>\n<option value=\"wurlitzer\">Wurlitzer<\/option>\n<option value=\"clavinet\">Clavinet<\/option>\n<option value=\"grand_bright\">Bright Concert Grand<\/option>\n<option value=\"grand_dark\">Dark Concert Grand<\/option>\n<option value=\"grand_soft\">Soft Concert Grand<\/option>\n<option value=\"grand_wide\">Wide Stereo Grand<\/option>\n<option value=\"grand_stage\">Stage Grand Piano<\/option>\n<option value=\"grand_vintage\">Vintage Grand Piano<\/option>\n<option value=\"grand_classic\">Classic Concert Piano<\/option>\n<option value=\"grand_modern\">Modern Grand Piano<\/option>\n<option value=\"grand_cinematic\">Cinematic Grand Piano<\/option>\n<option value=\"grand_intimate\">Intimate Grand Piano<\/option>\n<option value=\"grand_hall\">Concert Hall Grand<\/option>\n<option value=\"grand_studio\">Recording Studio Grand<\/option>\n<option value=\"grand_church\">Church Grand Piano<\/option>\n<option value=\"grand_theater\">Theater Grand Piano<\/option>\n<option value=\"grand_felt\">Felt Grand Piano<\/option>\n<option value=\"grand_mellow\">Mellow Grand Piano<\/option>\n<option value=\"grand_hard\">Hard Hammer Grand<\/option>\n<option value=\"grand_bell\">Bell Grand Piano<\/option>\n<option value=\"grand_resonant\">Resonant Grand Piano<\/option>\n<option value=\"grand_bass\">Deep Bass Grand<\/option>\n<option value=\"upright_bright\">Bright Upright Piano<\/option>\n<option value=\"upright_warm\">Warm Upright Piano<\/option>\n<option value=\"upright_dark\">Dark Upright Piano<\/option>\n<option value=\"upright_vintage\">Vintage Upright Piano<\/option>\n<option value=\"upright_felt\">Felt Upright Piano<\/option>\n<option value=\"upright_room\">Room Upright Piano<\/option>\n<option value=\"upright_dry\">Dry Upright Piano<\/option>\n<option value=\"upright_resonant\">Resonant Upright Piano<\/option>\n<option value=\"upright_classic\">Classic Upright Piano<\/option>\n<option value=\"upright_stage\">Stage Upright Piano<\/option>\n<option value=\"epiano_1\">Electric Piano 1<\/option>\n<option value=\"epiano_2\">Electric Piano 2<\/option>\n<option value=\"epiano_3\">Electric Piano 3<\/option>\n<option value=\"epiano_4\">Electric Piano 4<\/option>\n<option value=\"epiano_5\">Electric Piano 5<\/option>\n<option value=\"epiano_6\">Electric Piano 6<\/option>\n<option value=\"epiano_7\">Electric Piano 7<\/option>\n<option value=\"epiano_8\">Electric Piano 8<\/option>\n<option value=\"epiano_9\">Electric Piano 9<\/option>\n<option value=\"epiano_10\">Electric Piano 10<\/option>\n<option value=\"rhodes_bright\">Bright Rhodes<\/option>\n<option value=\"rhodes_dark\">Dark Rhodes<\/option>\n<option value=\"rhodes_soft\">Soft Rhodes<\/option>\n<option value=\"rhodes_clean\">Clean Rhodes<\/option>\n<option value=\"rhodes_drive\">Driven Rhodes<\/option>\n<option value=\"rhodes_chorus\">Chorus Rhodes<\/option>\n<option value=\"rhodes_vintage\">Vintage Rhodes<\/option>\n<option value=\"rhodes_stage\">Stage Rhodes<\/option>\n<option value=\"rhodes_suitcase\">Suitcase Rhodes<\/option>\n<option value=\"rhodes_mark\">Mark I Rhodes<\/option>\n<option value=\"wurlitzer_bright\">Bright Wurlitzer<\/option>\n<option value=\"wurlitzer_dark\">Dark Wurlitzer<\/option>\n<option value=\"wurlitzer_soft\">Soft Wurlitzer<\/option>\n<option value=\"wurlitzer_drive\">Driven Wurlitzer<\/option>\n<option value=\"wurlitzer_vintage\">Vintage Wurlitzer<\/option>\n<option value=\"clav_bright\">Bright Clavinet<\/option>\n<option value=\"clav_dark\">Dark Clavinet<\/option>\n<option value=\"clav_funk\">Funk Clavinet<\/option>\n<option value=\"clav_wah\">Wah Clavinet<\/option>\n<option value=\"clav_vintage\">Vintage Clavinet<\/option>\n<option value=\"organ_pipe\">Pipe Organ<\/option>\n<option value=\"organ_cathedral\">Cathedral Organ<\/option>\n<option value=\"organ_church\">Church Organ<\/option>\n<option value=\"organ_chapel\">Chapel Organ<\/option>\n<option value=\"organ_theater\">Theater Organ<\/option>\n<option value=\"organ_tube\">Tube Organ<\/option>\n<option value=\"organ_barrel\">Barrel Organ<\/option>\n<option value=\"organ_positive\">Positive Organ<\/option>\n<option value=\"organ_choir\">Choir Organ<\/option>\n<option value=\"organ_baroque\">Baroque Organ<\/option>\n<option value=\"organ_hammond\">Hammond Organ<\/option>\n<option value=\"organ_hammond_jazz\">Hammond Jazz<\/option>\n<option value=\"organ_hammond_gospel\">Hammond Gospel<\/option>\n<option value=\"organ_hammond_rock\">Hammond Rock<\/option>\n<option value=\"organ_hammond_funk\">Hammond Funk<\/option>\n<option value=\"organ_hammond_soft\">Soft Hammond<\/option>\n<option value=\"organ_hammond_bright\">Bright Hammond<\/option>\n<option value=\"organ_hammond_vintage\">Vintage Hammond<\/option>\n<option value=\"organ_hammond_rotary\">Rotary Hammond<\/option>\n<option value=\"organ_hammond_clean\">Clean Hammond<\/option>\n<option value=\"organ_electric_1\">Electric Organ 1<\/option>\n<option value=\"organ_electric_2\">Electric Organ 2<\/option>\n<option value=\"organ_electric_3\">Electric Organ 3<\/option>\n<option value=\"organ_electric_4\">Electric Organ 4<\/option>\n<option value=\"organ_electric_5\">Electric Organ 5<\/option>\n<option value=\"organ_jazz\">Jazz Organ<\/option>\n<option value=\"organ_soul\">Soul Organ<\/option>\n<option value=\"organ_funk\">Funk Organ<\/option>\n<option value=\"organ_blues\">Blues Organ<\/option>\n<option value=\"organ_gospel\">Gospel Organ<\/option>\n<option value=\"harpsichord\">Harpsichord<\/option>\n<option value=\"harpsichord_bright\">Bright Harpsichord<\/option>\n<option value=\"harpsichord_dark\">Dark Harpsichord<\/option>\n<option value=\"harpsichord_vintage\">Vintage Harpsichord<\/option>\n<option value=\"harpsichord_italian\">Italian Harpsichord<\/option>\n<option value=\"harp\">Concert Harp<\/option>\n<option value=\"harp_soft\">Soft Harp<\/option>\n<option value=\"harp_bright\">Bright Harp<\/option>\n<option value=\"harp_celtic\">Celtic Harp<\/option>\n<option value=\"harp_angelic\">Angelic Harp<\/option>\n<option value=\"guitar_acoustic\">Acoustic Guitar<\/option>\n<option value=\"guitar_classical\">Classical Guitar<\/option>\n<option value=\"guitar_nylon\">Nylon Guitar<\/option>\n<option value=\"guitar_steel\">Steel Guitar<\/option>\n<option value=\"guitar_folk\">Folk Guitar<\/option>\n<option value=\"guitar_jazz\">Jazz Guitar<\/option>\n<option value=\"guitar_clean\">Clean Electric Guitar<\/option>\n<option value=\"guitar_crunch\">Crunch Electric Guitar<\/option>\n<option value=\"guitar_distortion\">Distortion Guitar<\/option>\n<option value=\"guitar_surf\">Surf Guitar<\/option>\n<option value=\"bass_acoustic\">Acoustic Bass<\/option>\n<option value=\"bass_finger\">Finger Bass<\/option>\n<option value=\"bass_pick\">Pick Bass<\/option>\n<option value=\"bass_fretless\">Fretless Bass<\/option>\n<option value=\"bass_slap\">Slap Bass<\/option>\n<option value=\"bass_synth\">Synth Bass<\/option>\n<option value=\"bass_sub\">Sub Bass<\/option>\n<option value=\"bass_deep\">Deep Bass<\/option>\n<option value=\"bass_funk\">Funk Bass<\/option>\n<option value=\"bass_jazz\">Jazz Bass<\/option>\n<option value=\"violin\">Violin<\/option>\n<option value=\"violin_soft\">Soft Violin<\/option>\n<option value=\"violin_bright\">Bright Violin<\/option>\n<option value=\"violin_legato\">Legato Violin<\/option>\n<option value=\"violin_staccato\">Staccato Violin<\/option>\n<option value=\"violin_vintage\">Vintage Violin<\/option>\n<option value=\"viola\">Viola<\/option>\n<option value=\"viola_soft\">Soft Viola<\/option>\n<option value=\"viola_dark\">Dark Viola<\/option>\n<option value=\"viola_warm\">Warm Viola<\/option>\n<option value=\"cello\">Cello<\/option>\n<option value=\"cello_soft\">Soft Cello<\/option>\n<option value=\"cello_dark\">Dark Cello<\/option>\n<option value=\"cello_warm\">Warm Cello<\/option>\n<option value=\"cello_legato\">Legato Cello<\/option>\n<option value=\"double_bass\">Double Bass<\/option>\n<option value=\"double_bass_bow\">Bowed Double Bass<\/option>\n<option value=\"double_bass_pizz\">Pizzicato Double Bass<\/option>\n<option value=\"double_bass_jazz\">Jazz Double Bass<\/option>\n<option value=\"flute\">Concert Flute<\/option>\n<option value=\"flute_soft\">Soft Flute<\/option>\n<option value=\"flute_bright\">Bright Flute<\/option>\n<option value=\"flute_air\">Airy Flute<\/option>\n<option value=\"flute_low\">Low Flute<\/option>\n<option value=\"piccolo\">Piccolo<\/option>\n<option value=\"alto_flute\">Alto Flute<\/option>\n<option value=\"bass_flute\">Bass Flute<\/option>\n<option value=\"recorder\">Recorder<\/option>\n<option value=\"recorder_soft\">Soft Recorder<\/option>\n<option value=\"recorder_bright\">Bright Recorder<\/option>\n<option value=\"oboe\">Oboe<\/option>\n<option value=\"oboe_soft\">Soft Oboe<\/option>\n<option value=\"oboe_dark\">Dark Oboe<\/option>\n<option value=\"english_horn\">English Horn<\/option>\n<option value=\"bassoon\">Bassoon<\/option>\n<option value=\"bassoon_dark\">Dark Bassoon<\/option>\n<option value=\"contrabassoon\">Contrabassoon<\/option>\n<option value=\"clarinet\">Clarinet<\/option>\n<option value=\"clarinet_soft\">Soft Clarinet<\/option>\n<option value=\"clarinet_bright\">Bright Clarinet<\/option>\n<option value=\"bass_clarinet\">Bass Clarinet<\/option>\n<option value=\"sax_soprano\">Soprano Saxophone<\/option>\n<option value=\"sax_alto\">Alto Saxophone<\/option>\n<option value=\"sax_tenor\">Tenor Saxophone<\/option>\n<option value=\"sax_baritone\">Baritone Saxophone<\/option>\n<option value=\"trumpet\">Trumpet<\/option>\n<option value=\"trumpet_soft\">Soft Trumpet<\/option>\n<option value=\"trumpet_bright\">Bright Trumpet<\/option>\n<option value=\"trumpet_muted\">Muted Trumpet<\/option>\n<option value=\"trumpet_jazz\">Jazz Trumpet<\/option>\n<option value=\"cornet\">Cornet<\/option>\n<option value=\"flugelhorn\">Flugelhorn<\/option>\n<option value=\"trombone\">Trombone<\/option>\n<option value=\"trombone_soft\">Soft Trombone<\/option>\n<option value=\"trombone_bright\">Bright Trombone<\/option>\n<option value=\"french_horn\">French Horn<\/option>\n<option value=\"french_horn_soft\">Soft French Horn<\/option>\n<option value=\"french_horn_dark\">Dark French Horn<\/option>\n<option value=\"tuba\">Tuba<\/option>\n<option value=\"tuba_soft\">Soft Tuba<\/option>\n<option value=\"tuba_bright\">Bright Tuba<\/option>\n<option value=\"marimba\">Marimba<\/option>\n<option value=\"marimba_soft\">Soft Marimba<\/option>\n<option value=\"marimba_bright\">Bright Marimba<\/option>\n<option value=\"marimba_deep\">Deep Marimba<\/option>\n<option value=\"xylophone\">Xylophone<\/option>\n<option value=\"xylophone_bright\">Bright Xylophone<\/option>\n<option value=\"xylophone_soft\">Soft Xylophone<\/option>\n<option value=\"vibraphone\">Vibraphone<\/option>\n<option value=\"vibraphone_soft\">Soft Vibraphone<\/option>\n<option value=\"vibraphone_bright\">Bright Vibraphone<\/option>\n<option value=\"vibraphone_jazz\">Jazz Vibraphone<\/option>\n<option value=\"glockenspiel\">Glockenspiel<\/option>\n<option value=\"glockenspiel_soft\">Soft Glockenspiel<\/option>\n<option value=\"glockenspiel_bright\">Bright Glockenspiel<\/option>\n<option value=\"celesta\">Celesta<\/option>\n<option value=\"celesta_soft\">Soft Celesta<\/option>\n<option value=\"celesta_bright\">Bright Celesta<\/option>\n<option value=\"synth_lead\">Synth Lead<\/option>\n<option value=\"synth_lead_bright\">Bright Synth Lead<\/option>\n\n<\/select>\n\n<\/div>\n\n<div class=\"control\">\n\nVolume\n\n<input\ntype=\"range\"\nid=\"volume\"\nmin=\"0\"\nmax=\"1\"\nstep=\".01\"\nvalue=\".7\">\n\n<span id=\"volumeLabel\">\n70%\n<\/span>\n\n<\/div>\n\n<div class=\"control\">\n\nTranspose\n\n<button class=\"secondary\" id=\"transMinus\">\n\u2212\n<\/button>\n\n<span id=\"transposeLabel\">\n0\n<\/span>\n\n<button class=\"secondary\" id=\"transPlus\">\n+\n<\/button>\n\n<\/div>\n\n<div class=\"control\">\n\nOctave\n\n<button class=\"secondary\" id=\"octMinus\">\n\u2212\n<\/button>\n\n<span id=\"octaveLabel\">\n0\n<\/span>\n\n<button class=\"secondary\" id=\"octPlus\">\n+\n<\/button>\n\n<\/div>\n\n<button class=\"secondary\" id=\"sustainBtn\">\n\ud83e\uddb6 Sustain OFF\n<\/button>\n\n<button class=\"secondary\" id=\"metroBtn\">\n\ud83e\udd41 M\u00e9tronome OFF\n<\/button>\n\n<button class=\"action\" id=\"recordBtn\">\n\ud83d\udd34 Enregistrer\n<\/button>\n\n<\/div>\n\n<\/div>\n\n<div class=\"card\">\n\n<div class=\"octaveMarkers\">\n\n<span>C1<\/span> <span>C2<\/span> <span>C3<\/span> <span>C4<\/span> <span>C5<\/span> <span>C6<\/span> <span>C7<\/span> <span>C8<\/span>\n\n<\/div>\n\n<div class=\"pianoContainer\">\n\n<div class=\"piano\" id=\"piano\"><\/div>\n\n<\/div>\n\n<p style=\"text-align:center\">\n\n\ud83c\udfb9 Les 88 touches sont toujours visibles. <br><br>\n\n\u2328\ufe0f Raccourcis clavier :\n\n<br>\n\nA Z E R T Y U I O P Q S D F G H J K L M\n\n<br><br>\n\nTouches suppl\u00e9mentaires :\n\n<br>\n\nW X C V B N , ; : !\n\n<\/p>\n\n<div class=\"card\" style=\"margin-top:18px;\">\n<h3>\u2328\ufe0f Personnaliser le clavier<\/h3>\n<p id=\"keyConfigStatus\">Mode normal : le clavier AZERTY joue le piano.<\/p>\n<div class=\"controls\">\n<button class=\"secondary\" id=\"configureKeysBtn\">\u2328\ufe0f Modifier les touches<\/button>\n<button class=\"secondary\" id=\"resetKeysBtn\">\u21a9\ufe0f R\u00e9initialiser les touches<\/button>\n<\/div>\n<p><small>Active le mode configuration, clique une touche du piano, puis appuie sur la touche du clavier que tu veux lui attribuer.<\/small><\/p>\n<div id=\"keyMappingList\"><\/div>\n<\/div>\n\n<div class=\"card\" style=\"margin-top:18px;\">\n<h3>\ud83c\udfb9 Brancher un vrai piano MIDI<\/h3>\n<p id=\"midiStatus\">Aucun piano MIDI connect\u00e9.<\/p>\n<div class=\"controls\">\n<button class=\"action\" id=\"midiConnectBtn\">\ud83c\udfb9 D\u00e9tecter mon piano MIDI<\/button>\n<\/div>\n<p><small>Branche ton piano ou clavier USB-MIDI, puis clique sur le bouton. Compatible avec les navigateurs qui prennent en charge Web MIDI.<\/small><\/p>\n<\/div>\n\n<\/div>\n\n<\/section>\n\n<!-- =========================\nCOURS\n========================= -->\n\n<section class=\"section\" id=\"courses\">\n\n<div class=\"card\">\n\n<h2>\n\ud83d\udcda Cours progressifs\n<\/h2>\n\n<div class=\"grid\">\n\n<div class=\"lesson\" data-lesson=\"posture\">\n<h3>1. \ud83e\ude91 Posture<\/h3>\n<p>Position correcte du pianiste.<\/p>\n<\/div>\n\n<div class=\"lesson\" data-lesson=\"keyboard\">\n<h3>2. \ud83c\udfb9 Le clavier<\/h3>\n<p>Comprendre les 88 touches.<\/p>\n<\/div>\n\n<div class=\"lesson\" data-lesson=\"notes\">\n<h3>3. \ud83c\udfb5 Les notes<\/h3>\n<p>DO, R\u00c9, MI, FA, SOL, LA, SI.<\/p>\n<\/div>\n\n<div class=\"lesson\" data-lesson=\"rhythm\">\n<h3>4. \ud83e\udd41 Le rythme<\/h3>\n<p>Pulsation et tempo.<\/p>\n<\/div>\n\n<div class=\"lesson\" data-lesson=\"treble\">\n<h3>5. \ud83c\udfbc Cl\u00e9 de sol<\/h3>\n<p>Lire les notes aigu\u00ebs.<\/p>\n<\/div>\n\n<div class=\"lesson\" data-lesson=\"bass\">\n<h3>6. \ud83c\udfbc Cl\u00e9 de fa<\/h3>\n<p>Lire les notes graves.<\/p>\n<\/div>\n\n<div class=\"lesson\" data-lesson=\"scales\">\n<h3>7. \ud83c\udfb9 Gammes<\/h3>\n<p>Comprendre les gammes.<\/p>\n<\/div>\n\n<div class=\"lesson\" data-lesson=\"chords\">\n<h3>8. \ud83c\udfb9 Accords<\/h3>\n<p>Construire les accords.<\/p>\n<\/div>\n\n<div class=\"lesson\" data-lesson=\"ear\">\n<h3>9. \ud83d\udc42 Oreille<\/h3>\n<p>Reconna\u00eetre les sons.<\/p>\n<\/div>\n\n<div class=\"lesson\" data-lesson=\"coordination\">\n<h3>10. \ud83d\udc50 Coordination<\/h3>\n<p>Utiliser les deux mains.<\/p>\n<\/div>\n\n<div class=\"lesson\" data-lesson=\"dynamics\">\n<h3>11. \ud83c\udfad Expression<\/h3>\n<p>Nuances et interpr\u00e9tation.<\/p>\n<\/div>\n\n<\/div>\n\n<\/div>\n\n<\/section>\n\n<!-- =========================\nEXERCICES\n========================= -->\n\n<section class=\"section\" id=\"exercises\">\n\n<div class=\"card\">\n\n<h2>\n\ud83c\udfaf Exercices\n<\/h2>\n\n<button class=\"action\" id=\"startNoteExercise\">\n\ud83c\udfb5 Reconna\u00eetre une note\n<\/button>\n\n<p id=\"exerciseNote\">\nClique pour commencer.\n<\/p>\n\n<br>\n\n<button class=\"action\" id=\"startScale\">\n\ud83c\udfb9 Exercice gamme de DO\n<\/button>\n\n<p id=\"scaleResult\"><\/p>\n\n<br>\n\n<button class=\"action\" id=\"startChord\">\n\ud83c\udfb9 Exercice accord de DO\n<\/button>\n\n<p id=\"chordResult\"><\/p>\n\n<\/div>\n\n<\/section>\n\n<!-- =========================\nAUDIO\n========================= -->\n\n<section class=\"section\" id=\"audio\">\n\n<div class=\"card\">\n\n<h2>\n\ud83c\udfb5 Importer une chanson\n<\/h2>\n\n<input\ntype=\"file\"\nid=\"audioFile\"\naccept=\"audio\/*\">\n\n<div id=\"audioPlayer\"><\/div>\n\n<\/div>\n\n<div class=\"card\">\n\n<h2>\n\ud83c\udf9a\ufe0f Contr\u00f4le\n<\/h2>\n\n<label>\n\nVitesse\n\n<input\ntype=\"range\"\nid=\"audioSpeed\"\nmin=\".5\"\nmax=\"2\"\nstep=\".05\"\nvalue=\"1\">\n\n<span id=\"speedLabel\">\n1x\n<\/span>\n\n<\/label>\n\n<br><br>\n\n<label>\n\nVolume\n\n<input\ntype=\"range\"\nid=\"audioVolume\"\nmin=\"0\"\nmax=\"1\"\nstep=\".01\"\nvalue=\".7\">\n\n<\/label>\n\n<\/div>\n\n<\/section>\n\n<!-- =========================\nENREGISTREMENTS\n========================= -->\n\n<section class=\"section\" id=\"recordings\">\n\n<div class=\"card\">\n\n<h2>\n\ud83c\udf99\ufe0f Mes performances\n<\/h2>\n\n<div id=\"recordingList\">\nAucun enregistrement.\n<\/div>\n\n<\/div>\n\n<\/section>\n\n<!-- =========================\nPROGRESSION\n========================= -->\n\n<section class=\"section\" id=\"progress\">\n\n<div class=\"card\">\n\n<h2>\n\ud83c\udfc6 Progression\n<\/h2>\n\n<h3 id=\"progressLevel\">\nNiveau 1\n<\/h3>\n\n<div class=\"xpbar\">\n\n<div\nclass=\"xpfill\"\nid=\"progressXP\">\n<\/div>\n\n<\/div>\n\n<p id=\"progressText\">\n0 \/ 100 XP\n<\/p>\n\n<\/div>\n\n<\/section>\n\n<!-- =========================\nPARAMETRES\n========================= -->\n\n<section class=\"section\" id=\"settings\">\n\n<div class=\"card\">\n\n<h2>\n\u2699\ufe0f Param\u00e8tres\n<\/h2>\n\n<button class=\"danger\" id=\"reset\">\n\u267b\ufe0f R\u00e9initialiser\n<\/button>\n\n<\/div>\n\n<\/section>\n\n<\/main>\n\n<\/div>\n\n<!-- MODAL COURS -->\n\n<div class=\"modal\" id=\"modal\">\n\n<div class=\"modalBox\">\n\n<button\nclass=\"secondary close\"\nid=\"closeModal\">\n\u2715 <\/button>\n\n<h2 id=\"modalTitle\"><\/h2>\n\n<div id=\"modalBody\"><\/div>\n\n<button\nclass=\"action\"\nid=\"completeLesson\">\n\u2705 Terminer le cours <\/button>\n\n<\/div>\n\n<\/div>\n\n<script>\n\n\/* =====================================\nETAT\n===================================== *\/\n\nlet state=\nJSON.parse(\nlocalStorage.getItem(\"pianoQuestV6\")\n||\n\"null\"\n)\n||\n{\nxp:0,\nnotes:0,\nlessons:0,\nexercises:0\n};\n\n\nfunction save(){\n\nlocalStorage.setItem(\n\"pianoQuestV6\",\nJSON.stringify(state)\n);\n\nupdateUI();\n\n}\n\n\nfunction updateUI(){\n\nlet level=\nMath.floor(state.xp\/100)+1;\n\nlet xp=\nstate.xp%100;\n\ndocument\n.getElementById(\"xpFill\")\n.style.width=\nxp+\"%\";\n\ndocument\n.getElementById(\"progressXP\")\n.style.width=\nxp+\"%\";\n\ndocument\n.getElementById(\"xpText\")\n.textContent=\nxp+\n\" \/ 100 XP\";\n\ndocument\n.getElementById(\"progressText\")\n.textContent=\nxp+\n\" \/ 100 XP\";\n\ndocument\n.getElementById(\"levelText\")\n.textContent=\n\"Niveau \"+\nlevel;\n\ndocument\n.getElementById(\"progressLevel\")\n.textContent=\n\"Niveau \"+\nlevel;\n\ndocument\n.getElementById(\"homeNotes\")\n.textContent=\nstate.notes;\n\ndocument\n.getElementById(\"homeLessons\")\n.textContent=\nstate.lessons;\n\ndocument\n.getElementById(\"homeExercises\")\n.textContent=\nstate.exercises;\n\ndocument\n.getElementById(\"homeXP\")\n.textContent=\nstate.xp;\n\n}\n\nupdateUI();\n\n\n\/* =====================================\nNAVIGATION\n===================================== *\/\n\nconst titles={\n\nhome:\"Bienvenue sur Piano Quest\",\npiano:\"Piano professionnel \u2014 88 touches\",\ncourses:\"Cours de piano\",\nexercises:\"Exercices\",\naudio:\"Audio\",\nrecordings:\"Mes enregistrements\",\nprogress:\"Ma progression\",\nsettings:\"Param\u00e8tres\"\n\n};\n\n\nfunction go(page){\n\ndocument\n.querySelectorAll(\".section\")\n.forEach(\nx=>\nx.classList.remove(\"active\")\n);\n\ndocument\n.getElementById(page)\n.classList.add(\"active\");\n\ndocument\n.querySelectorAll(\"[data-page]\")\n.forEach(\nx=>\nx.classList.remove(\"active\")\n);\n\ndocument\n.querySelector(\n'[data-page=\"'+page+'\"]'\n)\n.classList.add(\"active\");\n\ndocument\n.getElementById(\"pageTitle\")\n.textContent=\ntitles[page];\n\n}\n\n\ndocument\n.querySelectorAll(\"[data-page]\")\n.forEach(\nbutton=>{\n\nbutton.onclick=\n()=>\ngo(\nbutton.dataset.page\n);\n\n});\n\n\ndocument\n.querySelectorAll(\"[data-go]\")\n.forEach(\nbutton=>{\n\nbutton.onclick=\n()=>\ngo(\nbutton.dataset.go\n);\n\n});\n\n\n\/* =====================================\nAUDIO\n===================================== *\/\n\nlet audioCtx=null;\n\nlet volume=.7;\n\nlet transpose=0;\n\nlet octave=0;\n\nlet sustain=false;\n\n\nfunction getAudioContext(){\n\nif(!audioCtx){\n\naudioCtx=\nnew(\nwindow.AudioContext ||\nwindow.webkitAudioContext\n)();\n\n}\n\nif(\naudioCtx.state===\"suspended\"\n){\n\naudioCtx.resume();\n\n}\n\nreturn audioCtx;\n\n}\n\n\n\/* =====================================\nNOTES\n===================================== *\/\n\nconst names=[\n\"DO\",\n\"DO\u266f\",\n\"R\u00c9\",\n\"R\u00c9\u266f\",\n\"MI\",\n\"FA\",\n\"FA\u266f\",\n\"SOL\",\n\"SOL\u266f\",\n\"LA\",\n\"LA\u266f\",\n\"SI\"\n];\n\nconst international=[\n\"C\",\n\"C#\",\n\"D\",\n\"D#\",\n\"E\",\n\"F\",\n\"F#\",\n\"G\",\n\"G#\",\n\"A\",\n\"A#\",\n\"B\"\n];\n\n\nconst midiMin=21;\n\nconst midiMax=108;\n\nfunction getNoteName(midi){\n\nreturn names[\nmidi%12\n];\n\n}\n\n\nfunction getInternational(midi){\n\nreturn international[\nmidi%12\n]+\n(\nMath.floor(\nmidi\/12\n)-1\n);\n\n}\n\n\n\/* =====================================\nPIANO 88 TOUCHES\n===================================== *\/\n\nconst piano=\ndocument.getElementById(\"piano\");\n\nlet whiteKeys=[];\n\nlet whiteCount=0;\n\n\n\/* TOUCHES BLANCHES *\/\n\nfor(\nlet midi=midiMin;\nmidi<=midiMax;\nmidi++\n){\n\nif(\n!international[\nmidi%12\n].includes(\"#\")\n){\n\nlet key=\ndocument.createElement(\"div\");\n\nkey.className=\n\"whiteKey\";\n\nkey.dataset.midi=\nmidi;\n\nkey.innerHTML=\n`\n<span class=\"keyName\">\n${getNoteName(midi)}\n<\/span>\n`;\n\npiano.appendChild(key);\n\nwhiteKeys.push(\n{\nmidi,\nkey\n}\n);\n\nwhiteCount++;\n\n}\n\n}\n\n\n\/* POSITION BLANCHES *\/\n\nwhiteKeys.forEach(\n(item,index)=>{\n\nitem.key.style.left=\n(\nindex\/\nwhiteCount*\n100\n)+\n\"%\";\n\nitem.key.style.width=\n(\n100\/\nwhiteCount\n)+\n\"%\";\n\nitem.key.onpointerdown=\nfunction(e){\n\ne.preventDefault();\n\nplayKey(\nitem.midi,\nitem.key\n);\n\n};\n\n}\n);\n\n\n\/* TOUCHES NOIRES *\/\n\nlet whiteIndex=0;\n\nfor(\nlet midi=midiMin;\nmidi<=midiMax;\nmidi++\n){\n\nlet note=\ninternational[\nmidi%12\n];\n\nif(\n!note.includes(\"#\")\n){\n\nwhiteIndex++;\n\n}\n\nelse{\n\nlet key=\ndocument.createElement(\"div\");\n\nkey.className=\n\"blackKey\";\n\nkey.dataset.midi=\nmidi;\n\nkey.textContent=\ngetNoteName(midi);\n\nkey.style.left=\n(\nwhiteIndex\/\nwhiteCount*\n100\n-\n100\/\nwhiteCount*\n.32\n)+\n\"%\";\n\nkey.style.width=\n(\n100\/\nwhiteCount*\n.64\n)+\n\"%\";\n\nkey.onpointerdown=\nfunction(e){\n\ne.preventDefault();\n\nplayKey(\nmidi,\nkey\n);\n\n};\n\npiano.appendChild(key);\n\n}\n\n}\n\n\n\/* =====================================\nSONORITES\n===================================== *\/\n\nwindow.instruments={\n\nconcert:{\nname:\"Concert Grand\",\nwave:\"triangle\",\nattack:.02,\nrelease:1.8,\nbrightness:1\n},\n\nstudio:{\nname:\"Studio Grand\",\nwave:\"triangle\",\nattack:.025,\nrelease:1.5,\nbrightness:.9\n},\n\nwarm:{\nname:\"Warm Grand\",\nwave:\"sine\",\nattack:.04,\nrelease:1.8,\nbrightness:.7\n},\n\nbright:{\nname:\"Bright Grand\",\nwave:\"triangle\",\nattack:.01,\nrelease:1.2,\nbrightness:1.3\n},\n\nclassic:{\nname:\"Classic Grand\",\nwave:\"triangle\",\nattack:.03,\nrelease:1.6,\nbrightness:1\n},\n\nupright:{\nname:\"Upright Piano\",\nwave:\"triangle\",\nattack:.04,\nrelease:1,\nbrightness:.8\n},\n\nhonky:{\nname:\"Honky Tonk\",\nwave:\"square\",\nattack:.02,\nrelease:.8,\nbrightness:1.2\n},\n\nelectric:{\nname:\"Electric Piano\",\nwave:\"sine\",\nattack:.02,\nrelease:1.5,\nbrightness:.9\n},\n\nrhodes:{\nname:\"Rhodes\",\nwave:\"sine\",\nattack:.05,\nrelease:2,\nbrightness:.7\n},\n\nwurlitzer:{\nname:\"Wurlitzer\",\nwave:\"square\",\nattack:.03,\nrelease:1,\nbrightness:1\n},\n\nclavinet:{\nname:\"Clavinet\",\nwave:\"sawtooth\",\nattack:0.07,\nrelease:.4,\nbrightness:1.5\n},\n\ngrand_bright: {\n        name: \"Bright Concert Grand\",\n        wave: \"triangle\",\n        attack: 0.01,\n        release: 1.5,\n        brightness: 1.4\n    },\n\ngrand_dark: {\n        name: \"Dark Concert Grand\",\n        wave: \"sine\",\n        attack: 0.05,\n        release: 2.0,\n        brightness: 0.55\n    },\n\ngrand_soft: {\n        name: \"Soft Concert Grand\",\n        wave: \"sine\",\n        attack: 0.08,\n        release: 2.2,\n        brightness: 0.65\n    },\n\ngrand_wide: {\n        name: \"Wide Stereo Grand\",\n        wave: \"triangle\",\n        attack: 0.02,\n        release: 1.8,\n        brightness: 1.2\n    },\n\ngrand_stage: {\n        name: \"Stage Grand Piano\",\n        wave: \"triangle\",\n        attack: 0.025,\n        release: 1.7,\n        brightness: 1.1\n    },\n\ngrand_vintage: {\n        name: \"Vintage Grand Piano\",\n        wave: \"triangle\",\n        attack: 0.04,\n        release: 1.6,\n        brightness: 0.85\n    },\n\ngrand_classic: {\n        name: \"Classic Concert Piano\",\n        wave: \"triangle\",\n        attack: 0.03,\n        release: 1.7,\n        brightness: 1.0\n    },\n\ngrand_modern: {\n        name: \"Modern Grand Piano\",\n        wave: \"triangle\",\n        attack: 0.015,\n        release: 1.5,\n        brightness: 1.3\n    },\n\ngrand_cinematic: {\n        name: \"Cinematic Grand Piano\",\n        wave: \"sine\",\n        attack: 0.06,\n        release: 2.5,\n        brightness: 0.9\n    },\n\ngrand_intimate: {\n        name: \"Intimate Grand Piano\",\n        wave: \"sine\",\n        attack: 0.07,\n        release: 1.8,\n        brightness: 0.7\n    },\n\ngrand_hall: {\n        name: \"Concert Hall Grand\",\n        wave: \"triangle\",\n        attack: 0.03,\n        release: 2.8,\n        brightness: 1.0\n    },\n\ngrand_studio: {\n        name: \"Recording Studio Grand\",\n        wave: \"triangle\",\n        attack: 0.025,\n        release: 1.4,\n        brightness: 1.1\n    },\n\ngrand_church: {\n        name: \"Church Grand Piano\",\n        wave: \"sine\",\n        attack: 0.05,\n        release: 2.5,\n        brightness: 0.8\n    },\n\ngrand_theater: {\n        name: \"Theater Grand Piano\",\n        wave: \"triangle\",\n        attack: 0.02,\n        release: 2.0,\n        brightness: 1.25\n    },\n\ngrand_felt: {\n        name: \"Felt Grand Piano\",\n        wave: \"sine\",\n        attack: 0.1,\n        release: 2.2,\n        brightness: 0.45\n    },\n\ngrand_mellow: {\n        name: \"Mellow Grand Piano\",\n        wave: \"sine\",\n        attack: 0.06,\n        release: 2.0,\n        brightness: 0.6\n    },\n\ngrand_hard: {\n        name: \"Hard Hammer Grand\",\n        wave: \"triangle\",\n        attack: 0.005,\n        release: 1.2,\n        brightness: 1.5\n    },\n\ngrand_bell: {\n        name: \"Bell Grand Piano\",\n        wave: \"triangle\",\n        attack: 0.01,\n        release: 2.0,\n        brightness: 1.6\n    },\n\ngrand_resonant: {\n        name: \"Resonant Grand Piano\",\n        wave: \"sine\",\n        attack: 0.04,\n        release: 2.8,\n        brightness: 0.9\n    },\n\ngrand_bass: {\n        name: \"Deep Bass Grand\",\n        wave: \"sine\",\n        attack: 0.05,\n        release: 2.5,\n        brightness: 0.5\n    },\n\nupright_bright: {\nname:\"Bright Upright Piano\",\nwave:\"triangle\",\nattack:0.01,\nrelease:1.2,\nbrightness:1.35\n},\n\nupright_warm: {\nname:\"Warm Upright Piano\",\nwave:\"triangle\",\nattack:0.06,\nrelease:2.2,\nbrightness:0.65\n},\n\nupright_dark: {\nname:\"Dark Upright Piano\",\nwave:\"triangle\",\nattack:0.06,\nrelease:2.2,\nbrightness:0.65\n},\n\nupright_vintage: {\nname:\"Vintage Upright Piano\",\nwave:\"triangle\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\nupright_felt: {\nname:\"Felt Upright Piano\",\nwave:\"triangle\",\nattack:0.06,\nrelease:2.2,\nbrightness:0.65\n},\n\nupright_room: {\nname:\"Room Upright Piano\",\nwave:\"triangle\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\nupright_dry: {\nname:\"Dry Upright Piano\",\nwave:\"triangle\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\nupright_resonant: {\nname:\"Resonant Upright Piano\",\nwave:\"triangle\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\nupright_classic: {\nname:\"Classic Upright Piano\",\nwave:\"triangle\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\nupright_stage: {\nname:\"Stage Upright Piano\",\nwave:\"triangle\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\nepiano_1: {\nname:\"Electric Piano 1\",\nwave:\"triangle\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\nepiano_2: {\nname:\"Electric Piano 2\",\nwave:\"triangle\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\nepiano_3: {\nname:\"Electric Piano 3\",\nwave:\"triangle\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\nepiano_4: {\nname:\"Electric Piano 4\",\nwave:\"triangle\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\nepiano_5: {\nname:\"Electric Piano 5\",\nwave:\"triangle\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\nepiano_6: {\nname:\"Electric Piano 6\",\nwave:\"triangle\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\nepiano_7: {\nname:\"Electric Piano 7\",\nwave:\"triangle\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\nepiano_8: {\nname:\"Electric Piano 8\",\nwave:\"triangle\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\nepiano_9: {\nname:\"Electric Piano 9\",\nwave:\"triangle\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\nepiano_10: {\nname:\"Electric Piano 10\",\nwave:\"triangle\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\nrhodes_bright: {\nname:\"Bright Rhodes\",\nwave:\"triangle\",\nattack:0.01,\nrelease:1.2,\nbrightness:1.35\n},\n\nrhodes_dark: {\nname:\"Dark Rhodes\",\nwave:\"triangle\",\nattack:0.06,\nrelease:2.2,\nbrightness:0.65\n},\n\nrhodes_soft: {\nname:\"Soft Rhodes\",\nwave:\"triangle\",\nattack:0.06,\nrelease:2.2,\nbrightness:0.65\n},\n\nrhodes_clean: {\nname:\"Clean Rhodes\",\nwave:\"triangle\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\nrhodes_drive: {\nname:\"Driven Rhodes\",\nwave:\"triangle\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\nrhodes_chorus: {\nname:\"Chorus Rhodes\",\nwave:\"triangle\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\nrhodes_vintage: {\nname:\"Vintage Rhodes\",\nwave:\"triangle\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\nrhodes_stage: {\nname:\"Stage Rhodes\",\nwave:\"triangle\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\nrhodes_suitcase: {\nname:\"Suitcase Rhodes\",\nwave:\"triangle\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\nrhodes_mark: {\nname:\"Mark I Rhodes\",\nwave:\"triangle\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\nwurlitzer_bright: {\nname:\"Bright Wurlitzer\",\nwave:\"triangle\",\nattack:0.01,\nrelease:1.2,\nbrightness:1.35\n},\n\nwurlitzer_dark: {\nname:\"Dark Wurlitzer\",\nwave:\"triangle\",\nattack:0.06,\nrelease:2.2,\nbrightness:0.65\n},\n\nwurlitzer_soft: {\nname:\"Soft Wurlitzer\",\nwave:\"triangle\",\nattack:0.06,\nrelease:2.2,\nbrightness:0.65\n},\n\nwurlitzer_drive: {\nname:\"Driven Wurlitzer\",\nwave:\"triangle\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\nwurlitzer_vintage: {\nname:\"Vintage Wurlitzer\",\nwave:\"triangle\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\nclav_bright: {\nname:\"Bright Clavinet\",\nwave:\"square\",\nattack:0.005,\nrelease:0.5,\nbrightness:1.25\n},\n\nclav_dark: {\nname:\"Dark Clavinet\",\nwave:\"square\",\nattack:0.005,\nrelease:0.5,\nbrightness:1.25\n},\n\nclav_funk: {\nname:\"Funk Clavinet\",\nwave:\"square\",\nattack:0.005,\nrelease:0.5,\nbrightness:1.25\n},\n\nclav_wah: {\nname:\"Wah Clavinet\",\nwave:\"square\",\nattack:0.005,\nrelease:0.5,\nbrightness:1.25\n},\n\nclav_vintage: {\nname:\"Vintage Clavinet\",\nwave:\"square\",\nattack:0.005,\nrelease:0.5,\nbrightness:1.25\n},\n\norgan_pipe: {\nname:\"Pipe Organ\",\nwave:\"sine\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\norgan_cathedral: {\nname:\"Cathedral Organ\",\nwave:\"sine\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\norgan_church: {\n        name: \"Church Organ\",\n        wave: \"sine\",\n        attack: 0.2,\n        release: 3.0,\n        brightness: 0.65\n    },\n\norgan_chapel: {\nname:\"Chapel Organ\",\nwave:\"sine\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\norgan_theater: {\n        name: \"Theater Organ\",\n        wave: \"triangle\",\n        attack: 0.1,\n        release: 2.0,\n        brightness: 1.0\n    },\n\norgan_tube: {\nname:\"Tube Organ\",\nwave:\"sine\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\norgan_barrel: {\nname:\"Barrel Organ\",\nwave:\"sine\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\norgan_positive: {\nname:\"Positive Organ\",\nwave:\"sine\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\norgan_choir: {\nname:\"Choir Organ\",\nwave:\"sine\",\nattack:0.06,\nrelease:2.2,\nbrightness:0.65\n},\n\norgan_baroque: {\nname:\"Baroque Organ\",\nwave:\"sine\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\norgan_hammond: {\nname:\"Hammond Organ\",\nwave:\"sine\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\norgan_hammond_jazz: {\nname:\"Hammond Jazz\",\nwave:\"sine\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\norgan_hammond_gospel: {\nname:\"Hammond Gospel\",\nwave:\"sine\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\norgan_hammond_rock: {\nname:\"Hammond Rock\",\nwave:\"sine\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\norgan_hammond_funk: {\nname:\"Hammond Funk\",\nwave:\"sine\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\norgan_hammond_soft: {\nname:\"Soft Hammond\",\nwave:\"sine\",\nattack:0.06,\nrelease:2.2,\nbrightness:0.65\n},\n\norgan_hammond_bright: {\nname:\"Bright Hammond\",\nwave:\"sine\",\nattack:0.01,\nrelease:1.2,\nbrightness:1.35\n},\n\norgan_hammond_vintage: {\nname:\"Vintage Hammond\",\nwave:\"sine\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\norgan_hammond_rotary: {\nname:\"Rotary Hammond\",\nwave:\"sine\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\norgan_hammond_clean: {\nname:\"Clean Hammond\",\nwave:\"sine\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\norgan_electric_1: {\nname:\"Electric Organ 1\",\nwave:\"sine\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\norgan_electric_2: {\nname:\"Electric Organ 2\",\nwave:\"sine\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\norgan_electric_3: {\nname:\"Electric Organ 3\",\nwave:\"sine\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\norgan_electric_4: {\nname:\"Electric Organ 4\",\nwave:\"sine\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\norgan_electric_5: {\nname:\"Electric Organ 5\",\nwave:\"sine\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\norgan_jazz: {\n        name: \"Jazz Organ\",\n        wave: \"sine\",\n        attack: 0.08,\n        release: 1.8,\n        brightness: 1.1\n    },\n\norgan_soul: {\nname:\"Soul Organ\",\nwave:\"sine\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\norgan_funk: {\nname:\"Funk Organ\",\nwave:\"sine\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\norgan_blues: {\nname:\"Blues Organ\",\nwave:\"sine\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\norgan_gospel: {\n        name: \"Gospel Organ\",\n        wave: \"sine\",\n        attack: 0.12,\n        release: 2.2,\n        brightness: 0.9\n    },\n\nharpsichord: {\nname:\"Harpsichord\",\nwave:\"square\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\nharpsichord_bright: {\nname:\"Bright Harpsichord\",\nwave:\"square\",\nattack:0.01,\nrelease:1.2,\nbrightness:1.35\n},\n\nharpsichord_dark: {\nname:\"Dark Harpsichord\",\nwave:\"square\",\nattack:0.06,\nrelease:2.2,\nbrightness:0.65\n},\n\nharpsichord_vintage: {\nname:\"Vintage Harpsichord\",\nwave:\"square\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\nharpsichord_italian: {\nname:\"Italian Harpsichord\",\nwave:\"square\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\nharp: {\nname:\"Concert Harp\",\nwave:\"triangle\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\nharp_soft: {\nname:\"Soft Harp\",\nwave:\"triangle\",\nattack:0.06,\nrelease:2.2,\nbrightness:0.65\n},\n\nharp_bright: {\nname:\"Bright Harp\",\nwave:\"triangle\",\nattack:0.01,\nrelease:1.2,\nbrightness:1.35\n},\n\nharp_celtic: {\nname:\"Celtic Harp\",\nwave:\"triangle\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\nharp_angelic: {\nname:\"Angelic Harp\",\nwave:\"triangle\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\nguitar_acoustic: {\nname:\"Acoustic Guitar\",\nwave:\"square\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\nguitar_classical: {\nname:\"Classical Guitar\",\nwave:\"square\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\nguitar_nylon: {\nname:\"Nylon Guitar\",\nwave:\"square\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\nguitar_steel: {\nname:\"Steel Guitar\",\nwave:\"square\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\nguitar_folk: {\nname:\"Folk Guitar\",\nwave:\"square\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\nguitar_jazz: {\nname:\"Jazz Guitar\",\nwave:\"square\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\nguitar_clean: {\nname:\"Clean Electric Guitar\",\nwave:\"square\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\nguitar_crunch: {\nname:\"Crunch Electric Guitar\",\nwave:\"square\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\nguitar_distortion: {\nname:\"Distortion Guitar\",\nwave:\"square\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\nguitar_surf: {\nname:\"Surf Guitar\",\nwave:\"square\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\nbass_acoustic: {\nname:\"Acoustic Bass\",\nwave:\"triangle\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\nbass_finger: {\nname:\"Finger Bass\",\nwave:\"triangle\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\nbass_pick: {\nname:\"Pick Bass\",\nwave:\"triangle\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\nbass_fretless: {\nname:\"Fretless Bass\",\nwave:\"triangle\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\nbass_slap: {\nname:\"Slap Bass\",\nwave:\"triangle\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\nbass_synth: {\nname:\"Synth Bass\",\nwave:\"sine\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\nbass_sub: {\nname:\"Sub Bass\",\nwave:\"triangle\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\nbass_deep: {\nname:\"Deep Bass\",\nwave:\"triangle\",\nattack:0.06,\nrelease:2.2,\nbrightness:0.65\n},\n\nbass_funk: {\nname:\"Funk Bass\",\nwave:\"triangle\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\nbass_jazz: {\nname:\"Jazz Bass\",\nwave:\"triangle\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\nviolin: {\n        name: \"Violin\",\n        wave: \"sawtooth\",\n        attack: 0.15,\n        release: 1.8,\n        brightness: 1.1\n    },\n\nviolin_soft: {\nname:\"Soft Violin\",\nwave:\"triangle\",\nattack:0.06,\nrelease:2.2,\nbrightness:0.65\n},\n\nviolin_bright: {\nname:\"Bright Violin\",\nwave:\"triangle\",\nattack:0.01,\nrelease:1.2,\nbrightness:1.35\n},\n\nviolin_legato: {\nname:\"Legato Violin\",\nwave:\"triangle\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\nviolin_staccato: {\nname:\"Staccato Violin\",\nwave:\"triangle\",\nattack:0.005,\nrelease:0.5,\nbrightness:1.25\n},\n\nviolin_vintage: {\nname:\"Vintage Violin\",\nwave:\"triangle\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\nviola: {\n        name: \"Viola\",\n        wave: \"sawtooth\",\n        attack: 0.18,\n        release: 2.0,\n        brightness: 0.8\n    },\n\nviola_soft: {\nname:\"Soft Viola\",\nwave:\"triangle\",\nattack:0.06,\nrelease:2.2,\nbrightness:0.65\n},\n\nviola_dark: {\nname:\"Dark Viola\",\nwave:\"triangle\",\nattack:0.06,\nrelease:2.2,\nbrightness:0.65\n},\n\nviola_warm: {\nname:\"Warm Viola\",\nwave:\"triangle\",\nattack:0.06,\nrelease:2.2,\nbrightness:0.65\n},\n\ncello: {\n        name: \"Cello\",\n        wave: \"sawtooth\",\n        attack: 0.2,\n        release: 2.2,\n        brightness: 0.65\n    },\n\ncello_soft: {\nname:\"Soft Cello\",\nwave:\"triangle\",\nattack:0.06,\nrelease:2.2,\nbrightness:0.65\n},\n\ncello_dark: {\nname:\"Dark Cello\",\nwave:\"triangle\",\nattack:0.06,\nrelease:2.2,\nbrightness:0.65\n},\n\ncello_warm: {\nname:\"Warm Cello\",\nwave:\"triangle\",\nattack:0.06,\nrelease:2.2,\nbrightness:0.65\n},\n\ncello_legato: {\nname:\"Legato Cello\",\nwave:\"triangle\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\ndouble_bass: {\nname:\"Double Bass\",\nwave:\"triangle\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\ndouble_bass_bow: {\nname:\"Bowed Double Bass\",\nwave:\"triangle\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\ndouble_bass_pizz: {\nname:\"Pizzicato Double Bass\",\nwave:\"triangle\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\ndouble_bass_jazz: {\nname:\"Jazz Double Bass\",\nwave:\"triangle\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\nflute: {\n        name: \"Flute\",\n        wave: \"sine\",\n        attack: 0.1,\n        release: 1.2,\n        brightness: 1.2\n    },\n\nflute_soft: {\nname:\"Soft Flute\",\nwave:\"triangle\",\nattack:0.06,\nrelease:2.2,\nbrightness:0.65\n},\n\nflute_bright: {\nname:\"Bright Flute\",\nwave:\"triangle\",\nattack:0.01,\nrelease:1.2,\nbrightness:1.35\n},\n\nflute_air: {\nname:\"Airy Flute\",\nwave:\"triangle\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\nflute_low: {\nname:\"Low Flute\",\nwave:\"triangle\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\npiccolo: {\n        name: \"Piccolo\",\n        wave: \"sine\",\n        attack: 0.06,\n        release: 0.8,\n        brightness: 1.6\n    },\n\nalto_flute: {\nname:\"Alto Flute\",\nwave:\"triangle\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\nbass_flute: {\nname:\"Bass Flute\",\nwave:\"triangle\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\nrecorder: {\nname:\"Recorder\",\nwave:\"triangle\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\nrecorder_soft: {\nname:\"Soft Recorder\",\nwave:\"triangle\",\nattack:0.06,\nrelease:2.2,\nbrightness:0.65\n},\n\nrecorder_bright: {\nname:\"Bright Recorder\",\nwave:\"triangle\",\nattack:0.01,\nrelease:1.2,\nbrightness:1.35\n},\n\noboe: {\n        name: \"Oboe\",\n        wave: \"sawtooth\",\n        attack: 0.1,\n        release: 1.0,\n        brightness: 1.0\n    },\n\noboe_soft: {\nname:\"Soft Oboe\",\nwave:\"sawtooth\",\nattack:0.06,\nrelease:2.2,\nbrightness:0.65\n},\n\noboe_dark: {\nname:\"Dark Oboe\",\nwave:\"sawtooth\",\nattack:0.06,\nrelease:2.2,\nbrightness:0.65\n},\n\nenglish_horn: {\nname:\"English Horn\",\nwave:\"sawtooth\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\nbassoon: {\n        name: \"Bassoon\",\n        wave: \"sawtooth\",\n        attack: 0.15,\n        release: 1.4,\n        brightness: 0.5\n    },\n\nbassoon_dark: {\nname:\"Dark Bassoon\",\nwave:\"sawtooth\",\nattack:0.06,\nrelease:2.2,\nbrightness:0.65\n},\n\ncontrabassoon: {\nname:\"Contrabassoon\",\nwave:\"sawtooth\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\nclarinet: {\n        name: \"Clarinet\",\n        wave: \"square\",\n        attack: 0.08,\n        release: 1.0,\n        brightness: 0.7\n    },\n\nclarinet_soft: {\nname:\"Soft Clarinet\",\nwave:\"sawtooth\",\nattack:0.06,\nrelease:2.2,\nbrightness:0.65\n},\n\nclarinet_bright: {\nname:\"Bright Clarinet\",\nwave:\"sawtooth\",\nattack:0.01,\nrelease:1.2,\nbrightness:1.35\n},\n\nbass_clarinet: {\nname:\"Bass Clarinet\",\nwave:\"sawtooth\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\nsax_soprano: {\nname:\"Soprano Saxophone\",\nwave:\"sawtooth\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\nsax_alto: {\nname:\"Alto Saxophone\",\nwave:\"sawtooth\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\nsax_tenor: {\nname:\"Tenor Saxophone\",\nwave:\"sawtooth\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\nsax_baritone: {\nname:\"Baritone Saxophone\",\nwave:\"sawtooth\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\ntrumpet: {\n        name: \"Trumpet\",\n        wave: \"sawtooth\",\n        attack: 0.04,\n        release: 0.8,\n        brightness: 1.5\n    },\n\ntrumpet_soft: {\nname:\"Soft Trumpet\",\nwave:\"sawtooth\",\nattack:0.06,\nrelease:2.2,\nbrightness:0.65\n},\n\ntrumpet_bright: {\nname:\"Bright Trumpet\",\nwave:\"sawtooth\",\nattack:0.01,\nrelease:1.2,\nbrightness:1.35\n},\n\ntrumpet_muted: {\nname:\"Muted Trumpet\",\nwave:\"sawtooth\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\ntrumpet_jazz: {\nname:\"Jazz Trumpet\",\nwave:\"sawtooth\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\ncornet: {\nname:\"Cornet\",\nwave:\"triangle\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\nflugelhorn: {\nname:\"Flugelhorn\",\nwave:\"sawtooth\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\ntrombone: {\n        name: \"Trombone\",\n        wave: \"sawtooth\",\n        attack: 0.06,\n        release: 1.0,\n        brightness: 1.1\n    },\n\ntrombone_soft: {\nname:\"Soft Trombone\",\nwave:\"sawtooth\",\nattack:0.06,\nrelease:2.2,\nbrightness:0.65\n},\n\ntrombone_bright: {\nname:\"Bright Trombone\",\nwave:\"sawtooth\",\nattack:0.01,\nrelease:1.2,\nbrightness:1.35\n},\n\nfrench_horn: {\n        name: \"French Horn\",\n        wave: \"sawtooth\",\n        attack: 0.12,\n        release: 1.5,\n        brightness: 0.7\n    },\n\nfrench_horn_soft: {\nname:\"Soft French Horn\",\nwave:\"sawtooth\",\nattack:0.06,\nrelease:2.2,\nbrightness:0.65\n},\n\nfrench_horn_dark: {\nname:\"Dark French Horn\",\nwave:\"sawtooth\",\nattack:0.06,\nrelease:2.2,\nbrightness:0.65\n},\n\ntuba: {\n        name: \"Tuba\",\n        wave: \"sine\",\n        attack: 0.1,\n        release: 1.5,\n        brightness: 0.4\n    },\n\ntuba_soft: {\nname:\"Soft Tuba\",\nwave:\"triangle\",\nattack:0.06,\nrelease:2.2,\nbrightness:0.65\n},\n\ntuba_bright: {\nname:\"Bright Tuba\",\nwave:\"triangle\",\nattack:0.01,\nrelease:1.2,\nbrightness:1.35\n},\n\nmarimba: {\n        name: \"Marimba\",\n        wave: \"sine\",\n        attack: 0.005,\n        release: 0.8,\n        brightness: 1.2\n    },\n\nmarimba_soft: {\nname:\"Soft Marimba\",\nwave:\"triangle\",\nattack:0.06,\nrelease:2.2,\nbrightness:0.65\n},\n\nmarimba_bright: {\nname:\"Bright Marimba\",\nwave:\"triangle\",\nattack:0.01,\nrelease:1.2,\nbrightness:1.35\n},\n\nmarimba_deep: {\nname:\"Deep Marimba\",\nwave:\"triangle\",\nattack:0.06,\nrelease:2.2,\nbrightness:0.65\n},\n\nxylophone: {\n        name: \"Xylophone\",\n        wave: \"sine\",\n        attack: 0.003,\n        release: 0.5,\n        brightness: 1.5\n    },\n\nxylophone_bright: {\nname:\"Bright Xylophone\",\nwave:\"triangle\",\nattack:0.01,\nrelease:1.2,\nbrightness:1.35\n},\n\nxylophone_soft: {\nname:\"Soft Xylophone\",\nwave:\"triangle\",\nattack:0.06,\nrelease:2.2,\nbrightness:0.65\n},\n\nvibraphone: {\n        name: \"Vibraphone\",\n        wave: \"sine\",\n        attack: 0.02,\n        release: 2.0,\n        brightness: 1.0\n    },\n\nvibraphone_soft: {\nname:\"Soft Vibraphone\",\nwave:\"triangle\",\nattack:0.06,\nrelease:2.2,\nbrightness:0.65\n},\n\nvibraphone_bright: {\nname:\"Bright Vibraphone\",\nwave:\"triangle\",\nattack:0.01,\nrelease:1.2,\nbrightness:1.35\n},\n\nvibraphone_jazz: {\nname:\"Jazz Vibraphone\",\nwave:\"triangle\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\nglockenspiel: {\n        name: \"Glockenspiel\",\n        wave: \"sine\",\n        attack: 0.002,\n        release: 1.0,\n        brightness: 1.8\n    },\n\nglockenspiel_soft: {\nname:\"Soft Glockenspiel\",\nwave:\"triangle\",\nattack:0.06,\nrelease:2.2,\nbrightness:0.65\n},\n\nglockenspiel_bright: {\nname:\"Bright Glockenspiel\",\nwave:\"triangle\",\nattack:0.01,\nrelease:1.2,\nbrightness:1.35\n},\n\ncelesta: {\nname:\"Celesta\",\nwave:\"triangle\",\nattack:0.02,\nrelease:1.5,\nbrightness:1.0\n},\n\ncelesta_soft: {\nname:\"Soft Celesta\",\nwave:\"triangle\",\nattack:0.06,\nrelease:2.2,\nbrightness:0.65\n},\n\ncelesta_bright: {\nname:\"Bright Celesta\",\nwave:\"triangle\",\nattack:0.01,\nrelease:1.2,\nbrightness:1.35\n},\n\nsynth_lead: {\n        name: \"Synth Lead\",\n        wave: \"sawtooth\",\n        attack: 0.01,\n        release: 1.0,\n        brightness: 1.5\n    },\n\nsynth_lead_bright: {\nname:\"Bright Synth Lead\",\nwave:\"sine\",\nattack:0.01,\nrelease:1.2,\nbrightness:1.35\n},\n\n};\n\n\/* =====================================\nPERCUSSIONS ET NOUVEAUX INSTRUMENTS\n===================================== *\/\n\nObject.assign(window.instruments, {\n\nkick:{name:\"Grosse caisse\",family:\"drum\",drumType:\"kick\"},\nsnare:{name:\"Caisse claire\",family:\"drum\",drumType:\"snare\"},\nclosed_hat:{name:\"Charleston ferm\u00e9\",family:\"drum\",drumType:\"hat\"},\nopen_hat:{name:\"Charleston ouvert\",family:\"drum\",drumType:\"openhat\"},\ncrash:{name:\"Cymbale Crash\",family:\"drum\",drumType:\"crash\"},\nride:{name:\"Cymbale Ride\",family:\"drum\",drumType:\"ride\"},\ntom_low:{name:\"Tom grave\",family:\"drum\",drumType:\"tomlow\"},\ntom_mid:{name:\"Tom m\u00e9dium\",family:\"drum\",drumType:\"tommid\"},\ntom_high:{name:\"Tom aigu\",family:\"drum\",drumType:\"tomhigh\"},\nclap:{name:\"Clap \u00e9lectronique\",family:\"drum\",drumType:\"clap\"},\nshaker:{name:\"Shaker\",family:\"drum\",drumType:\"shaker\"},\ntambourine:{name:\"Tambourin\",family:\"drum\",drumType:\"tambourine\"},\nconga:{name:\"Conga\",family:\"drum\",drumType:\"conga\"},\nbongo:{name:\"Bongo\",family:\"drum\",drumType:\"bongo\"},\ndjembe:{name:\"Djemb\u00e9\",family:\"drum\",drumType:\"djembe\"},\ndarbuka:{name:\"Darbuka\",family:\"drum\",drumType:\"darbuka\"},\ntabla:{name:\"Tabla\",family:\"drum\",drumType:\"tabla\"},\ntaiko:{name:\"Taiko\",family:\"drum\",drumType:\"taiko\"},\nwoodblock:{name:\"Wood Block\",family:\"drum\",drumType:\"woodblock\"},\ncowbell:{name:\"Cowbell\",family:\"drum\",drumType:\"cowbell\"},\nclaves:{name:\"Claves\",family:\"drum\",drumType:\"claves\"},\nmaracas:{name:\"Maracas\",family:\"drum\",drumType:\"maracas\"},\ntriangle_perc:{name:\"Triangle\",family:\"drum\",drumType:\"triangle\"},\nflute_pan:{name:\"Fl\u00fbte de Pan\",family:\"flute\",wave:\"sine\",attack:.08,release:1.5,brightness:.9},\nocarina:{name:\"Ocarina\",family:\"flute\",wave:\"sine\",attack:.06,release:1.2,brightness:.8},\nsub_bass:{name:\"Sub Bass\",family:\"bass\",wave:\"sine\",attack:.01,release:1.2,brightness:.35},\nslap_bass:{name:\"Slap Bass\",family:\"bass\",wave:\"sawtooth\",attack:.003,release:.65,brightness:1.4}\n\n});\n\n[\n[\"kick\",\"Grosse caisse\"],[\"snare\",\"Caisse claire\"],[\"closed_hat\",\"Charleston ferm\u00e9\"],\n[\"open_hat\",\"Charleston ouvert\"],[\"crash\",\"Cymbale Crash\"],[\"ride\",\"Cymbale Ride\"],\n[\"tom_low\",\"Tom grave\"],[\"tom_mid\",\"Tom m\u00e9dium\"],[\"tom_high\",\"Tom aigu\"],\n[\"clap\",\"Clap \u00e9lectronique\"],[\"shaker\",\"Shaker\"],[\"tambourine\",\"Tambourin\"],\n[\"conga\",\"Conga\"],[\"bongo\",\"Bongo\"],[\"djembe\",\"Djemb\u00e9\"],[\"darbuka\",\"Darbuka\"],\n[\"tabla\",\"Tabla\"],[\"taiko\",\"Taiko\"],[\"woodblock\",\"Wood Block\"],[\"cowbell\",\"Cowbell\"],\n[\"claves\",\"Claves\"],[\"maracas\",\"Maracas\"],[\"triangle_perc\",\"Triangle\"],\n[\"flute_pan\",\"Fl\u00fbte de Pan\"],[\"ocarina\",\"Ocarina\"],[\"sub_bass\",\"Sub Bass\"],[\"slap_bass\",\"Slap Bass\"]\n].forEach(function(item){\n    if(!document.querySelector('#instrument option[value=\"'+item[0]+'\"]')){\n        const option=document.createElement(\"option\");\n        option.value=item[0];\n        option.textContent=item[1];\n        document.getElementById(\"instrument\").appendChild(option);\n    }\n});\n\nlet currentInstrument=\n\"concert\";\n\n\ndocument\n.getElementById(\"instrument\")\n.onchange=\nfunction(){\n\ncurrentInstrument=\nthis.value;\n\nwindow.currentInstrument=\ncurrentInstrument;\n\ndocument\n.getElementById(\n\"instrumentDisplay\"\n)\n.textContent=\n\"\ud83c\udfb9 \"+\nwindow.instruments[\ncurrentInstrument\n].name;\n\n};\n\n\n\/* =====================================\nJOUER LE SON\n===================================== *\/\n\nfunction instrumentFamily(data){\n\nif(data.family)return data.family;\n\nconst n=String(data.name||\"\").toLowerCase();\n\nif(n.includes(\"bass\"))return \"bass\";\nif(n.includes(\"flute\")||n.includes(\"fl\u00fbte\")||n.includes(\"piccolo\")||n.includes(\"recorder\")||n.includes(\"oboe\")||n.includes(\"clarinet\")||n.includes(\"bassoon\"))return \"flute\";\nif(n.includes(\"violin\")||n.includes(\"viola\")||n.includes(\"cello\")||n.includes(\"double bass\"))return \"strings\";\nif(n.includes(\"guitar\"))return \"guitar\";\nif(n.includes(\"organ\"))return \"organ\";\nif(n.includes(\"trumpet\")||n.includes(\"horn\")||n.includes(\"trombone\")||n.includes(\"tuba\")||n.includes(\"saxophone\")||n.includes(\"cornet\"))return \"brass\";\nif(n.includes(\"harp\"))return \"harp\";\nif(n.includes(\"harpsichord\"))return \"harpsichord\";\n\nreturn \"piano\";\n\n}\n\n\nfunction playDrum(data){\n\nconst c=getAudioContext();\nconst now=c.currentTime;\nconst type=data.drumType||\"snare\";\nconst gain=c.createGain();\n\ngain.gain.setValueAtTime(Math.max(.001,volume),now);\ngain.gain.exponentialRampToValueAtTime(.001,now+(type===\"crash\"||type===\"ride\"?1.2:.45));\ngain.connect(c.destination);\n\nif(\ntype===\"kick\"||\ntype===\"taiko\"||\ntype===\"tomlow\"||\ntype===\"tommid\"||\ntype===\"tomhigh\"||\ntype===\"conga\"||\ntype===\"bongo\"||\ntype===\"djembe\"||\ntype===\"darbuka\"||\ntype===\"tabla\"\n){\n\nconst osc=c.createOscillator();\n\nosc.type=\"triangle\";\n\nlet base=\ntype===\"taiko\"?90:\ntype===\"tomlow\"?120:\ntype===\"tommid\"?180:\ntype===\"tomhigh\"?240:\ntype===\"kick\"?60:160;\n\nosc.frequency.setValueAtTime(base*1.8,now);\nosc.frequency.exponentialRampToValueAtTime(base,now+.12);\n\nosc.connect(gain);\nosc.start(now);\nosc.stop(now+.6);\n\nreturn;\n\n}\n\n\nconst buffer=c.createBuffer(1,c.sampleRate*1.5,c.sampleRate);\nconst channel=buffer.getChannelData(0);\n\nfor(let i=0;i<channel.length;i++){\nchannel[i]=Math.random()*2-1;\n}\n\nconst noise=c.createBufferSource();\nnoise.buffer=buffer;\n\nconst filter=c.createBiquadFilter();\n\nfilter.type=\n(type===\"hat\"||type===\"openhat\"||type===\"shaker\"||type===\"maracas\")\n?\n\"highpass\"\n:\n\"bandpass\";\n\nfilter.frequency.value=\ntype===\"snare\"\n?\n1800\n:\n5000;\n\nnoise.connect(filter);\nfilter.connect(gain);\n\nnoise.start(now);\nnoise.stop(now+(type===\"crash\"||type===\"ride\"?1.2:.35));\n\n}\n\n\nfunction playTone(\nmidi,\nduration\n){\n\nconst c=getAudioContext();\n\nconst data=\nwindow.instruments[\ncurrentInstrument\n];\n\nif(!data)return;\n\nif(\ndata.family===\"drum\"||\ndata.drumType\n){\n\nplayDrum(data);\nreturn;\n\n}\n\nconst family=\ninstrumentFamily(data);\n\nconst now=c.currentTime;\n\nconst osc=c.createOscillator();\nconst osc2=c.createOscillator();\nconst gain=c.createGain();\nconst filter=c.createBiquadFilter();\n\nconst noteFreq=\n440*\nMath.pow(\n2,\n(midi-69)\/12\n);\n\nlet wave=data.wave||\"triangle\";\nlet attack=Number(data.attack)||.02;\nlet release=Number(data.release)||1.2;\nlet brightness=Number(data.brightness)||1;\n\nif(family===\"bass\"){\nwave=\"sawtooth\";\nattack*=.6;\nrelease*=.8;\nbrightness*=.55;\n}\n\nif(family===\"flute\"){\nwave=\"sine\";\nattack=Math.max(.05,attack);\nrelease*=1.2;\nbrightness*=.65;\n}\n\nif(family===\"strings\"){\nwave=\"sawtooth\";\nattack=Math.max(.08,attack);\nrelease*=1.5;\nbrightness*=.55;\n}\n\nif(family===\"guitar\"){\nwave=\"triangle\";\nattack=Math.max(.004,attack);\nrelease*=.65;\nbrightness*=1.15;\n}\n\nif(family===\"organ\"){\nwave=\"sine\";\nattack=.02;\nrelease*=1.8;\nbrightness*=1.1;\n}\n\nif(family===\"brass\"){\nwave=\"sawtooth\";\nattack=Math.max(.04,attack);\nrelease*=.9;\nbrightness*=.75;\n}\n\nif(family===\"harp\"){\nwave=\"triangle\";\nattack=.003;\nrelease*=.7;\nbrightness*=1.2;\n}\n\nif(family===\"harpsichord\"){\nwave=\"square\";\nattack=.002;\nrelease=.55;\nbrightness*=1.4;\n}\n\n\/* R\u00e9glages personnalis\u00e9s *\/\nconst pq=\nwindow.pqAudio||\n{\nbright:1,\nattack:null,\nrelease:null,\nreverb:0,\ndelay:0\n};\n\nif(\nNumber.isFinite(pq.attack)\n){\nattack=pq.attack;\n}\n\nif(\nNumber.isFinite(pq.release)\n){\nrelease=pq.release;\n}\n\nif(\nNumber.isFinite(pq.bright)\n){\nbrightness=\nbrightness*\npq.bright;\n}\n\nosc.type=wave;\nosc2.type=\nfamily===\"flute\"\n?\n\"sine\"\n:\n\"triangle\";\n\nosc.frequency.value=noteFreq;\n\nosc2.frequency.value=\nnoteFreq*2.003;\n\nosc2.detune.value=\nfamily===\"strings\"\n?\n5\n:\nfamily===\"guitar\"\n?\n-2\n:\n0;\n\nfilter.type=\"lowpass\";\n\nfilter.frequency.value=\nMath.max(\n180,\nMath.min(\n18000,\n5000*brightness\n)\n);\n\nfilter.Q.value=\nfamily===\"brass\"\n?\n2\n:\n.5;\n\n\/* ===== CHAINE AUDIO ===== *\/\n\nconst dryGain=\nc.createGain();\n\nconst reverbGain=\nc.createGain();\n\nconst delayGain=\nc.createGain();\n\nconst delay=\nc.createDelay(2);\n\nconst feedback=\nc.createGain();\n\nconst convolver=\nc.createConvolver();\n\n\/* R\u00e9verb\u00e9ration synth\u00e9tique *\/\nconst impulseLength=\nMath.floor(\nc.sampleRate*2\n);\n\nconst impulse=\nc.createBuffer(\n2,\nimpulseLength,\nc.sampleRate\n);\n\nfor(\nlet ch=0;\nch<2;\nch++\n){\n\nconst channel=\nimpulse.getChannelData(ch);\n\nfor(\nlet i=0;\ni<impulseLength;\ni++\n){\n\nchannel[i]=\n(\nMath.random()*2-1\n)*\nMath.pow(\n1-i\/impulseLength,\n2.5\n);\n\n}\n\n}\n\nconvolver.buffer=impulse;\n\n\/* Valeurs des effets *\/\nconst reverbAmount=\nMath.max(\n0,\nMath.min(\n1,\nNumber(pq.reverb)||0\n)\n);\n\nconst delayAmount=\nMath.max(\n0,\nMath.min(\n1,\nNumber(pq.delay)||0\n)\n);\n\ndryGain.gain.value=1;\n\nreverbGain.gain.value=\nreverbAmount*.65;\n\ndelayGain.gain.value=\ndelayAmount*.75;\n\ndelay.delayTime.value=\n.18+\ndelayAmount*.55;\n\nfeedback.gain.value=\ndelayAmount*.35;\n\n\/* Enveloppe *\/\ngain.gain.setValueAtTime(\n.0001,\nnow\n);\n\ngain.gain.exponentialRampToValueAtTime(\nMath.max(\n.0001,\nvolume\n),\nnow+attack\n);\n\ngain.gain.exponentialRampToValueAtTime(\n.0001,\nnow+\nMath.max(\nduration,\nrelease\n)\n);\n\n\/* Connexions *\/\nosc.connect(filter);\nosc2.connect(filter);\n\nfilter.connect(gain);\n\ngain.connect(dryGain);\ngain.connect(convolver);\ngain.connect(delay);\n\nconvolver.connect(reverbGain);\n\ndelay.connect(delayGain);\ndelay.connect(feedback);\nfeedback.connect(delay);\n\ndryGain.connect(c.destination);\nreverbGain.connect(c.destination);\ndelayGain.connect(c.destination);\n\n\/* Lecture *\/\nosc.start(now);\nosc2.start(now);\n\nconst stopTime=\nnow+\nMath.max(\nduration,\nrelease\n)+\n.15;\n\nosc.stop(stopTime);\nosc2.stop(stopTime);\n\n}\n\n\n\/* =====================================\nNOTES ACTUELLES\n===================================== *\/\n\nlet activeNotes=[];\n\n\nfunction updateNoteScreen(midi){\n\nlet french=\ngetNoteName(midi);\n\nlet intl=\ngetInternational(midi);\n\ndocument\n.getElementById(\n\"noteLabel\"\n)\n.textContent=\nfrench;\n\ndocument\n.getElementById(\n\"noteInternational\"\n)\n.textContent=\nintl;\n\n\/* Affichage C1 \u00e0 C8 : met en \u00e9vidence l'octave jou\u00e9e *\/\ndocument\n.querySelectorAll(\n\".octaveMarkers span\"\n)\n.forEach(\n(span,index)=>{\nspan.style.fontWeight=\n(index+1)===\n(Math.floor(midi\/12)-1)\n?\n\"bold\"\n:\n\"normal\";\nspan.style.textShadow=\n(index+1)===\n(Math.floor(midi\/12)-1)\n?\n\"0 0 10px #67e8f9\"\n:\n\"none\";\n}\n);\n\ndocument\n.getElementById(\n\"noteSymbol\"\n)\n.textContent=\n\"\u266a\";\n\nupdateChord(\nmidi\n);\n\n}\n\n\n\/* =====================================\nDETECTION ACCORDS\n===================================== *\/\n\nconst chordNames={\n\n\"0,4,7\":\n\"DO MAJEUR\",\n\n\"2,6,9\":\n\"R\u00c9 MINEUR\",\n\n\"4,7,11\":\n\"MI MINEUR\",\n\n\"5,9,0\":\n\"FA MAJEUR\",\n\n\"7,11,2\":\n\"SOL MAJEUR\",\n\n\"9,0,4\":\n\"LA MINEUR\",\n\n\"11,2,5\":\n\"SI DIMINU\u00c9\"\n\n};\n\n\nfunction updateChord(midi){\n\nactiveNotes.push(\nmidi\n);\n\nactiveNotes=\n[\n...new Set(\nactiveNotes\n)\n];\n\nif(\nactiveNotes.length>=3\n){\n\nlet base=\nMath.min(\n...activeNotes\n);\n\nlet intervals=\nactiveNotes\n.map(\nn=>\n(\nn-base+12\n)%12\n)\n.sort(\n(a,b)=>a-b\n);\n\nlet key=\nintervals.join(\",\");\n\nif(\nchordNames[key]\n){\n\ndocument\n.getElementById(\n\"chordDisplay\"\n)\n.textContent=\n\"\ud83c\udfb9 \"+\nchordNames[key];\n\nreturn;\n\n}\n\n}\n\ndocument\n.getElementById(\n\"chordDisplay\"\n)\n.textContent=\nactiveNotes.length>1\n?\nactiveNotes\n.map(\nn=>\ngetNoteName(n)\n)\n.join(\" + \")\n:\n\"Aucune note multiple\";\n\n}\n\n\n\/* =====================================\nJOUER UNE TOUCHE\n===================================== *\/\n\nfunction playKey(\nbaseMidi,\nelement\n){\n\nif(keyConfigMode){\n\nkeyToAssignMidi=baseMidi;\n\nif(keyConfigStatus){\n\nkeyConfigStatus.textContent=\n\"\ud83c\udfaf Touche \"+\ngetInternational(baseMidi)+\n\" s\u00e9lectionn\u00e9e. Appuie maintenant sur une touche du clavier.\";\n\n}\n\nreturn;\n\n}\n\nlet midi=\nbaseMidi+\ntranspose+\noctave*12;\n\nmidi=\nMath.max(\n21,\nMath.min(\n108,\nmidi\n)\n);\n\nplayTone(\nmidi,\nsustain?\n2:\n1\n);\n\nelement\n.classList\n.add(\"active\");\n\nsetTimeout(\nfunction(){\n\nelement\n.classList\n.remove(\"active\");\n\n},\n180\n);\n\nupdateNoteScreen(\nmidi\n);\n\nstate.notes++;\n\nstate.xp++;\n\nsave();\n\n}\n\n\n\/* =====================================\nCLAVIER PC\n===================================== *\/\n\n\/*\nAZERTY = notes principales\n\nW X C V B N , ; : !\n\n= notes suppl\u00e9mentaires\n*\/\n\nlet keyboardMap=\nJSON.parse(\nlocalStorage.getItem(\"pianoQuestKeyboardMap\")||\"null\"\n)\n||\n{\n\"a\":48,\"z\":50,\"e\":52,\"r\":53,\"t\":55,\"y\":57,\"u\":59,\"i\":60,\"o\":62,\"p\":64,\n\"q\":65,\"s\":67,\"d\":69,\"f\":71,\"g\":72,\"h\":74,\"j\":76,\"k\":77,\"l\":79,\"m\":81,\n\"w\":49,\"x\":51,\"c\":54,\"v\":56,\"b\":58,\"n\":61,\",\":63,\";\":66,\":\":68,\"!\":70\n};\n\n\nlet keyConfigMode=false;\nlet keyToAssignMidi=null;\n\nconst keyConfigStatus=\ndocument.getElementById(\"keyConfigStatus\");\n\nconst keyMappingList=\ndocument.getElementById(\"keyMappingList\");\n\n\nfunction saveKeyboardMap(){\n\nlocalStorage.setItem(\n\"pianoQuestKeyboardMap\",\nJSON.stringify(keyboardMap)\n);\n\nrenderKeyMappingList();\n\n}\n\n\nfunction renderKeyMappingList(){\n\nif(!keyMappingList)return;\n\nconst entries=\nObject.entries(keyboardMap)\n.sort(\n(a,b)=>a[1]-b[1]\n);\n\nkeyMappingList.innerHTML=\n\"<strong>Raccourcis actuels :<\/strong> \"+\nentries\n.map(\n([key,midi])=>\nkey.toUpperCase()+\n\" \u2192 \"+\ngetInternational(midi)\n)\n.join(\" \u00b7 \");\n\n}\n\nrenderKeyMappingList();\n\n\ndocument.getElementById(\n\"configureKeysBtn\"\n).onclick=\nfunction(){\n\nkeyConfigMode=\n!keyConfigMode;\n\nkeyToAssignMidi=null;\n\nkeyConfigStatus.textContent=\nkeyConfigMode\n?\n\"\ud83d\udfe1 Mode configuration : clique une touche du piano, puis appuie sur la touche du clavier \u00e0 lui attribuer.\"\n:\n\"Mode normal : le clavier AZERTY joue le piano.\";\n\n};\n\n\ndocument.getElementById(\n\"resetKeysBtn\"\n).onclick=\nfunction(){\n\nlocalStorage.removeItem(\n\"pianoQuestKeyboardMap\"\n);\n\nkeyboardMap={\n\"a\":48,\"z\":50,\"e\":52,\"r\":53,\"t\":55,\"y\":57,\"u\":59,\"i\":60,\"o\":62,\"p\":64,\n\"q\":65,\"s\":67,\"d\":69,\"f\":71,\"g\":72,\"h\":74,\"j\":76,\"k\":77,\"l\":79,\"m\":81,\n\"w\":49,\"x\":51,\"c\":54,\"v\":56,\"b\":58,\"n\":61,\",\":63,\";\":66,\":\":68,\"!\":70\n};\n\nrenderKeyMappingList();\n\n};\n\n\ndocument.addEventListener(\n\"keydown\",\nfunction(e){\n\nif(\nkeyConfigMode&&\nkeyToAssignMidi!==null\n){\n\ne.preventDefault();\n\nconst key=\ne.key.toLowerCase();\n\nif(key===\"escape\"){\n\nkeyToAssignMidi=null;\n\nkeyConfigStatus.textContent=\n\"S\u00e9lection annul\u00e9e. Clique une touche du piano pour recommencer.\";\n\nreturn;\n\n}\n\n\nObject.keys(\nkeyboardMap\n)\n.forEach(\nk=>{\n\nif(\nkeyboardMap[k]===\nkeyToAssignMidi\n){\n\ndelete keyboardMap[k];\n\n}\n\n}\n);\n\nkeyboardMap[key]=\nkeyToAssignMidi;\n\nsaveKeyboardMap();\n\nkeyConfigStatus.textContent=\n\"\u2705 Touche \"+\nkey.toUpperCase()+\n\" attribu\u00e9e \u00e0 \"+\ngetInternational(keyToAssignMidi)+\n\". Clique une autre touche pour continuer.\";\n\nkeyToAssignMidi=null;\n\nreturn;\n\n}\n\n\nif(e.repeat)return;\n\nconst key=\ne.key.toLowerCase();\n\nconst midi=\nkeyboardMap[key];\n\nif(midi===undefined)return;\n\nconst element=\ndocument.querySelector(\n'[data-midi=\"'+midi+'\"]'\n);\n\nif(element){\n\nplayKey(\nmidi,\nelement\n);\n\n}\n\n}\n);\n\n\n\/* =====================================\nPIANO MIDI \/ WEB MIDI\n===================================== *\/\n\nlet midiAccess=null;\n\n\nfunction handleMidiMessage(event){\n\nconst data=event.data;\n\nif(\n!data||\ndata.length<2\n)return;\n\nconst command=\ndata[0]&0xF0;\n\nconst note=\ndata[1];\n\nconst velocity=\ndata[2]||0;\n\n\nif(\ncommand===0x90&&\nvelocity>0\n){\n\nconst midi=\nMath.max(\n21,\nMath.min(\n108,\nnote+\ntranspose+\noctave*12\n)\n);\n\nconst element=\ndocument.querySelector(\n'[data-midi=\"'+midi+'\"]'\n);\n\nif(element){\n\nplayKey(\nmidi,\nelement\n);\n\n}\n\n}\n\n}\n\n\nfunction connectMidiInputs(){\n\nif(!midiAccess)return;\n\nlet count=0;\n\nmidiAccess.inputs.forEach(\ninput=>{\n\ninput.onmidimessage=\nhandleMidiMessage;\n\ncount++;\n\n}\n);\n\n\nconst status=\ndocument.getElementById(\n\"midiStatus\"\n);\n\nif(status){\n\nstatus.textContent=\ncount\n?\n\"\ud83c\udfb9 \"+\ncount+\n\" p\u00e9riph\u00e9rique(s) MIDI connect\u00e9(s). Joue sur ton vrai piano !\"\n:\n\"Aucun p\u00e9riph\u00e9rique MIDI d\u00e9tect\u00e9. V\u00e9rifie le c\u00e2ble USB-MIDI et recharge la page.\";\n\n}\n\n}\n\n\ndocument.getElementById(\n\"midiConnectBtn\"\n).onclick=\nasync function(){\n\nconst status=\ndocument.getElementById(\n\"midiStatus\"\n);\n\nif(\n!navigator.requestMIDIAccess\n){\n\nstatus.textContent=\n\"\u274c Web MIDI n'est pas disponible dans ce navigateur. Essaie Chrome ou Edge sur ordinateur.\";\n\nreturn;\n\n}\n\n\ntry{\n\nmidiAccess=\nawait navigator.requestMIDIAccess();\n\nconnectMidiInputs();\n\nmidiAccess.onstatechange=\nconnectMidiInputs;\n\n}catch(err){\n\nstatus.textContent=\n\"\u274c Acc\u00e8s MIDI refus\u00e9 ou indisponible : \"+\nerr.message;\n\n}\n\n};\n\n\/* =====================================\nVOLUME\n===================================== *\/\n\ndocument\n.getElementById(\"volume\")\n.oninput=\nfunction(){\n\nvolume=\nNumber(\nthis.value\n);\n\ndocument\n.getElementById(\n\"volumeLabel\"\n)\n.textContent=\nMath.round(\nvolume*100\n)+\n\"%\";\n\n};\n\n\n\/* =====================================\nTRANSPOSE\n===================================== *\/\n\ndocument\n.getElementById(\"transPlus\")\n.onclick=\nfunction(){\n\ntranspose=\nMath.min(\n12,\ntranspose+1\n);\n\ndocument\n.getElementById(\n\"transposeLabel\"\n)\n.textContent=\ntranspose;\n\n};\n\n\ndocument\n.getElementById(\"transMinus\")\n.onclick=\nfunction(){\n\ntranspose=\nMath.max(\n-12,\ntranspose-1\n);\n\ndocument\n.getElementById(\n\"transposeLabel\"\n)\n.textContent=\ntranspose;\n\n};\n\n\n\/* =====================================\nOCTAVE\n===================================== *\/\n\ndocument\n.getElementById(\"octPlus\")\n.onclick=\nfunction(){\n\noctave=\nMath.min(\n3,\noctave+1\n);\n\ndocument\n.getElementById(\n\"octaveLabel\"\n)\n.textContent=\noctave;\n\n};\n\n\ndocument\n.getElementById(\"octMinus\")\n.onclick=\nfunction(){\n\noctave=\nMath.max(\n-3,\noctave-1\n);\n\ndocument\n.getElementById(\n\"octaveLabel\"\n)\n.textContent=\noctave;\n\n};\n\n\n\/* =====================================\nSUSTAIN\n===================================== *\/\n\ndocument\n.getElementById(\"sustainBtn\")\n.onclick=\nfunction(){\n\nsustain=\n!sustain;\n\nthis.textContent=\nsustain?\n\"\ud83e\uddb6 Sustain ON\":\n\"\ud83e\uddb6 Sustain OFF\";\n\n};\n\n\n\/* =====================================\nMETRONOME\n===================================== *\/\n\nlet metroTimer=null;\n\nlet metroOn=false;\n\nfunction metroTick(){\n\nlet c=\ngetAudioContext();\n\nlet osc=\nc.createOscillator();\n\nlet gain=\nc.createGain();\n\nosc.type=\n\"square\";\n\nosc.frequency.value=\n1000;\n\ngain.gain.setValueAtTime(\n.25,\nc.currentTime\n);\n\ngain.gain.exponentialRampToValueAtTime(\n.001,\nc.currentTime+\n.08\n);\n\nosc.connect(gain);\n\ngain.connect(\nc.destination\n);\n\nosc.start();\n\nosc.stop(\nc.currentTime+\n.1\n);\n\n}\n\n\ndocument\n.getElementById(\"metroBtn\")\n.onclick=\nfunction(){\n\nmetroOn=\n!metroOn;\n\nif(\nmetroOn\n){\n\nmetroTick();\n\nmetroTimer=\nsetInterval(\nmetroTick,\n666\n);\n\nthis.textContent=\n\"\ud83e\udd41 M\u00e9tronome ON\";\n\n}else{\n\nclearInterval(\nmetroTimer\n);\n\nthis.textContent=\n\"\ud83e\udd41 M\u00e9tronome OFF\";\n\n}\n\n};\n\n\n\/* =====================================\nCOURS\n===================================== *\/\n\nconst lessons={\n\nposture:[\n\"Assieds-toi au centre du clavier.\",\n\"Garde les \u00e9paules d\u00e9tendues.\",\n\"Maintiens les poignets souples.\"\n],\n\nkeyboard:[\n\"Le piano standard poss\u00e8de 88 touches.\",\n\"Les touches noires forment des groupes de 2 et 3.\",\n\"Le DO se trouve \u00e0 gauche d'un groupe de 2 touches noires.\"\n],\n\nnotes:[\n\"Les notes naturelles sont DO, R\u00c9, MI, FA, SOL, LA et SI.\",\n\"Le cycle recommence \u00e0 chaque octave.\"\n],\n\nrhythm:[\n\"Le rythme organise la dur\u00e9e des sons.\",\n\"Travaille avec une pulsation r\u00e9guli\u00e8re.\",\n\"Le m\u00e9tronome aide \u00e0 garder le tempo.\"\n],\n\ntreble:[\n\"La cl\u00e9 de sol est utilis\u00e9e pour les notes aigu\u00ebs.\",\n\"Elle est souvent jou\u00e9e par la main droite.\"\n],\n\nbass:[\n\"La cl\u00e9 de fa est utilis\u00e9e pour les notes graves.\",\n\"Elle est souvent jou\u00e9e par la main gauche.\"\n],\n\nscales:[\n\"Une gamme est une succession organis\u00e9e de notes.\",\n\"DO majeur utilise uniquement les touches blanches.\"\n],\n\nchords:[\n\"Un accord contient plusieurs notes.\",\n\"DO majeur contient DO, MI et SOL.\"\n],\n\near:[\n\"\u00c9coute la hauteur des sons.\",\n\"Compare les notes.\",\n\"Essaie de reconna\u00eetre les diff\u00e9rences.\"\n],\n\ncoordination:[\n\"Travaille chaque main s\u00e9par\u00e9ment.\",\n\"Commence lentement.\",\n\"Augmente progressivement la vitesse.\"\n],\n\ndynamics:[\n\"p signifie piano, donc doucement.\",\n\"f signifie forte, donc fort.\",\n\"Les nuances rendent la musique expressive.\"\n]\n\n};\n\n\nlet currentLesson=null;\n\n\ndocument\n.querySelectorAll(\n\".lesson[data-lesson]\"\n)\n.forEach(\nlesson=>{\n\nlesson.onclick=\nfunction(){\n\ncurrentLesson=\nlesson.dataset.lesson;\n\ndocument\n.getElementById(\n\"modalTitle\"\n)\n.textContent=\nlesson\n.querySelector(\"h3\")\n.textContent;\n\ndocument\n.getElementById(\n\"modalBody\"\n)\n.innerHTML=\n\"<ul>\"+\nlessons[\ncurrentLesson\n]\n.map(\nx=>\n\"<li>\"+x+\"<\/li>\"\n)\n.join(\"\")+\n\"<\/ul>\";\n\ndocument\n.getElementById(\n\"modal\"\n)\n.classList\n.add(\"show\");\n\n};\n\n});\n\n\ndocument\n.getElementById(\"closeModal\")\n.onclick=\nfunction(){\n\ndocument\n.getElementById(\n\"modal\"\n)\n.classList\n.remove(\"show\");\n\n};\n\n\ndocument\n.getElementById(\n\"completeLesson\"\n)\n.onclick=\nfunction(){\n\nstate.lessons++;\n\nstate.xp+=20;\n\nsave();\n\ndocument\n.getElementById(\n\"modal\"\n)\n.classList\n.remove(\"show\");\n\nalert(\n\"\ud83c\udf89 Cours termin\u00e9 ! +20 XP\"\n);\n\n};\n\n\n\/* =====================================\nEXERCICES\n===================================== *\/\n\nlet exerciseTarget=null;\n\n\ndocument\n.getElementById(\n\"startNoteExercise\"\n)\n.onclick=\nfunction(){\n\nexerciseTarget=\n48+\nMath.floor(\nMath.random()*12\n);\n\ndocument\n.getElementById(\n\"exerciseNote\"\n)\n.textContent=\n\"Joue : \"+\ngetNoteName(\nexerciseTarget\n);\n\n};\n\n\ndocument\n.getElementById(\n\"startScale\"\n)\n.onclick=\nfunction(){\n\ndocument\n.getElementById(\n\"scaleResult\"\n)\n.textContent=\n\"DO \u2192 R\u00c9 \u2192 MI \u2192 FA \u2192 SOL \u2192 LA \u2192 SI \u2192 DO\";\n\n};\n\n\ndocument\n.getElementById(\n\"startChord\"\n)\n.onclick=\nfunction(){\n\ndocument\n.getElementById(\n\"chordResult\"\n)\n.textContent=\n\"DO + MI + SOL = DO MAJEUR\";\n\n};\n\n\n\/* =====================================\nAUDIO IMPORT\n===================================== *\/\n\nlet currentAudio=null;\n\n\ndocument\n.getElementById(\n\"audioFile\"\n)\n.onchange=\nfunction(){\n\nlet file=\nthis.files[0];\n\nif(!file)return;\n\nlet url=\nURL.createObjectURL(\nfile\n);\n\nlet audio=\ndocument\n.createElement(\"audio\");\n\naudio.controls=\ntrue;\n\naudio.src=\nurl;\n\naudio.style.width=\n\"100%\";\n\ndocument\n.getElementById(\n\"audioPlayer\"\n)\n.innerHTML=\"\";\n\ndocument\n.getElementById(\n\"audioPlayer\"\n)\n.appendChild(\naudio\n);\n\ncurrentAudio=\naudio;\n\n};\n\n\ndocument\n.getElementById(\n\"audioSpeed\"\n)\n.oninput=\nfunction(){\n\nif(currentAudio){\n\ncurrentAudio\n.playbackRate=\nNumber(\nthis.value\n);\n\n}\n\ndocument\n.getElementById(\n\"speedLabel\"\n)\n.textContent=\nthis.value+\n\"x\";\n\n};\n\n\ndocument\n.getElementById(\n\"audioVolume\"\n)\n.oninput=\nfunction(){\n\nif(currentAudio){\n\ncurrentAudio\n.volume=\nNumber(\nthis.value\n);\n\n}\n\n};\n\n\n\/* =====================================\nRESET\n===================================== *\/\n\ndocument\n.getElementById(\"reset\")\n.onclick=\nfunction(){\n\nif(\nconfirm(\n\"R\u00e9initialiser la progression ?\"\n)\n){\n\nstate={\nxp:0,\nnotes:0,\nlessons:0,\nexercises:0\n};\n\nsave();\n\n}\n\n};\n\n<\/script>\n\n\n<style id=\"pq-enhanced-style\">\n#pqSoundPanel{margin-top:12px;padding:14px;background:#08294d;border:1px solid #3477b8;border-radius:12px}\n#pqSoundPanel .pq-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0}\n#pqSoundPanel button{background:#14518d;color:#fff;border:1px solid #5ba5e6}\n#pqSoundPanel input[type=range]{width:130px}\n#pqKeyModal{z-index:2000}\n#pqKeyModal .modalBox{max-width:720px}\n#pqKeyList{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px;margin-top:12px}\n.pq-key-item{background:#08294d;border:1px solid #3477b8;padding:9px;border-radius:8px}\n.pq-key-item button{margin-left:6px}\n#pqMidiStatus{font-size:13px;color:#67e8f9}\n<\/style>\n<script>\n(function(){\n\"use strict\";\n\n\/* ===== 40+ PRESETS SUPPLEMENTAIRES ===== *\/\nconst moreSounds={\nacoustic_bass:{name:\"Acoustic Bass\",family:\"bass\",wave:\"triangle\",attack:.015,release:1.1,brightness:.45},\nfinger_bass:{name:\"Finger Bass\",family:\"bass\",wave:\"sawtooth\",attack:.008,release:.8,brightness:.55},\nfretless_bass:{name:\"Fretless Bass\",family:\"bass\",wave:\"sine\",attack:.04,release:1.2,brightness:.5},\nsynth_bass_deep:{name:\"Deep Synth Bass\",family:\"bass\",wave:\"sawtooth\",attack:.005,release:1,brightness:.35},\nnylon_guitar:{name:\"Nylon Guitar\",family:\"guitar\",wave:\"triangle\",attack:.004,release:.9,brightness:1},\nsteel_guitar:{name:\"Steel String Guitar\",family:\"guitar\",wave:\"triangle\",attack:.003,release:.7,brightness:1.3},\nelectric_guitar_clean:{name:\"Electric Guitar Clean\",family:\"guitar\",wave:\"sine\",attack:.005,release:1,brightness:1.1},\nelectric_guitar_drive:{name:\"Electric Guitar Drive\",family:\"guitar\",wave:\"sawtooth\",attack:.003,release:1.4,brightness:1.5},\nharp_bright:{name:\"Bright Harp\",family:\"harp\",wave:\"triangle\",attack:.002,release:2,brightness:1.4},\nharp_soft:{name:\"Soft Harp\",family:\"harp\",wave:\"sine\",attack:.01,release:2.5,brightness:.65},\nviolin_solo:{name:\"Solo Violin\",family:\"strings\",wave:\"sawtooth\",attack:.12,release:2,brightness:.65},\nviola_solo:{name:\"Solo Viola\",family:\"strings\",wave:\"sawtooth\",attack:.13,release:2,brightness:.55},\ncello_solo:{name:\"Solo Cello\",family:\"strings\",wave:\"sawtooth\",attack:.1,release:2.5,brightness:.45},\nstring_section:{name:\"String Section\",family:\"strings\",wave:\"sawtooth\",attack:.15,release:3,brightness:.5},\ntrumpet:{name:\"Trumpet\",family:\"brass\",wave:\"sawtooth\",attack:.04,release:1.1,brightness:1.2},\ntrombone:{name:\"Trombone\",family:\"brass\",wave:\"sawtooth\",attack:.06,release:1.2,brightness:.8},\nfrench_horn:{name:\"French Horn\",family:\"brass\",wave:\"sine\",attack:.1,release:1.8,brightness:.55},\ntuba:{name:\"Tuba\",family:\"brass\",wave:\"sawtooth\",attack:.08,release:1.5,brightness:.4},\nalto_sax:{name:\"Alto Saxophone\",family:\"brass\",wave:\"sawtooth\",attack:.04,release:1,brightness:1.1},\ntenor_sax:{name:\"Tenor Saxophone\",family:\"brass\",wave:\"sawtooth\",attack:.05,release:1.2,brightness:.75},\nbaritone_sax:{name:\"Baritone Saxophone\",family:\"brass\",wave:\"sawtooth\",attack:.06,release:1.4,brightness:.5},\nflute:{name:\"Concert Flute\",family:\"flute\",wave:\"sine\",attack:.08,release:1.8,brightness:.8},\npiccolo:{name:\"Piccolo\",family:\"flute\",wave:\"sine\",attack:.04,release:1,brightness:1.4},\nclarinet:{name:\"Clarinet\",family:\"flute\",wave:\"sine\",attack:.06,release:1.3,brightness:.7},\noboe:{name:\"Oboe\",family:\"flute\",wave:\"sawtooth\",attack:.08,release:1.2,brightness:.8},\nbassoon:{name:\"Bassoon\",family:\"flute\",wave:\"sawtooth\",attack:.1,release:1.5,brightness:.4},\nchurch_organ:{name:\"Church Organ\",family:\"organ\",wave:\"sine\",attack:.08,release:3,brightness:.65},\njazz_organ:{name:\"Jazz Organ\",family:\"organ\",wave:\"square\",attack:.02,release:2,brightness:.7},\nrock_organ:{name:\"Rock Organ\",family:\"organ\",wave:\"sawtooth\",attack:.01,release:1.5,brightness:1.2},\nharpsichord:{name:\"Harpsichord\",family:\"harpsichord\",wave:\"square\",attack:.002,release:.5,brightness:1.5},\nsynth_pad:{name:\"Warm Synth Pad\",family:\"synth\",wave:\"sine\",attack:.4,release:4,brightness:.45},\nsynth_strings:{name:\"Synth Strings\",family:\"synth\",wave:\"sawtooth\",attack:.2,release:3,brightness:.55},\nsynth_lead2:{name:\"Analog Lead\",family:\"synth\",wave:\"sawtooth\",attack:.01,release:1,brightness:1.5},\nsynth_pluck:{name:\"Synth Pluck\",family:\"synth\",wave:\"square\",attack:.002,release:.5,brightness:1.4},\nkalimba:{name:\"Kalimba\",family:\"mallet\",wave:\"triangle\",attack:.002,release:1.2,brightness:1.5},\nmarimba:{name:\"Marimba\",family:\"mallet\",wave:\"triangle\",attack:.002,release:1.1,brightness:1.1},\nxylophone:{name:\"Xylophone\",family:\"mallet\",wave:\"triangle\",attack:.001,release:.7,brightness:1.7},\nsteel_drum:{name:\"Steel Drum\",family:\"mallet\",wave:\"sine\",attack:.002,release:1.5,brightness:1.3},\nmusic_box:{name:\"Music Box\",family:\"mallet\",wave:\"sine\",attack:.001,release:1.8,brightness:1.8},\nsitar:{name:\"Sitar\",family:\"world\",wave:\"sawtooth\",attack:.01,release:1.5,brightness:1.1},\nkoto:{name:\"Koto\",family:\"world\",wave:\"triangle\",attack:.002,release:1,brightness:1.3},\nshamisen:{name:\"Shamisen\",family:\"world\",wave:\"sawtooth\",attack:.003,release:.8,brightness:1.4},\ndidgeridoo:{name:\"Didgeridoo\",family:\"world\",wave:\"sawtooth\",attack:.05,release:2,brightness:.3}\n};\nObject.assign(window.instruments||{},moreSounds);\n\n\/* Ajouter les options manquantes *\/\nconst sel=document.getElementById(\"instrument\");\nif(sel){\n Object.keys(moreSounds).forEach(k=>{\n  if(!sel.querySelector('option[value=\"'+k+'\"]')){\n   const o=document.createElement(\"option\");o.value=k;o.textContent=moreSounds[k].name;sel.appendChild(o);\n  }\n });\n}\n\n\/* ===== PANNEAU SON ===== *\/\nconst host=sel&&sel.closest(\".control\");\nif(host&&!document.getElementById(\"pqSoundPanel\")){\n const panel=document.createElement(\"div\");panel.id=\"pqSoundPanel\";\n panel.innerHTML='<strong>\ud83c\udf9b\ufe0f R\u00e9glages de la sonorit\u00e9<\/strong>'+\n '<div class=\"pq-row\"><button id=\"pqPrev\">\u25c0 Pr\u00e9c\u00e9dent<\/button><button id=\"pqNext\">Suivant \u25b6<\/button><button id=\"pqRandom\">\ud83c\udfb2 Al\u00e9atoire<\/button><button id=\"pqReset\">\ud83d\udd04 Reset audio<\/button><\/div>'+\n '<div class=\"pq-row\"><label>\ud83d\udd06 Brillance <input id=\"pqBright\" type=\"range\" min=\".2\" max=\"2\" step=\".05\" value=\"1\"><\/label>'+\n '<label>\u26a1 Attaque <input id=\"pqAttack\" type=\"range\" min=\".001\" max=\"1\" step=\".001\" value=\".02\"><\/label>'+\n '<label>\ud83c\udf19 Release <input id=\"pqRelease\" type=\"range\" min=\".1\" max=\"5\" step=\".1\" value=\"1.5\"><\/label><\/div>'+\n '<div class=\"pq-row\"><label>\ud83c\udf0a R\u00e9verb\u00e9ration <input id=\"pqReverb\" type=\"range\" min=\"0\" max=\"1\" step=\".01\" value=\"0\"><\/label>'+\n '<label>\ud83d\udd0a Echo <input id=\"pqDelay\" type=\"range\" min=\"0\" max=\"1\" step=\".01\" value=\"0\"><\/label><\/div>'+\n '<div class=\"pq-row\"><button id=\"pqKeys\">\u2328\ufe0f Configurer les touches du clavier<\/button><button id=\"pqMidi\">\ud83c\udfb9 D\u00e9tecter mon piano MIDI<\/button><span id=\"pqMidiStatus\">MIDI non connect\u00e9<\/span><\/div>';\n host.parentElement.appendChild(panel);\n}\n\n\/* ===== PARAMETRES AUDIO ===== *\/\nwindow.pqAudio=window.pqAudio||{bright:1,attack:null,release:null,reverb:0,delay:0};\nfunction currentData(){return window.instruments&&window.instruments[currentInstrument||window.currentInstrument||\"concert\"];}\nfunction syncControls(){\n const d=currentData(); if(!d)return;\n pqBright.value=d.brightness||1;pqAttack.value=d.attack||.02;pqRelease.value=d.release||1.5;\n}\nconst pqBright=document.getElementById(\"pqBright\"),pqAttack=document.getElementById(\"pqAttack\"),pqRelease=document.getElementById(\"pqRelease\"),pqReverb=document.getElementById(\"pqReverb\"),pqDelay=document.getElementById(\"pqDelay\");\nif(pqBright)pqBright.oninput=()=>{let d=currentData();if(d)d.brightness=+pqBright.value};\nif(pqAttack)pqAttack.oninput=()=>{let d=currentData();if(d)d.attack=+pqAttack.value};\nif(pqRelease)pqRelease.oninput=()=>{let d=currentData();if(d)d.release=+pqRelease.value};\nif(pqReverb)pqReverb.oninput=()=>pqAudio.reverb=+pqReverb.value;\nif(pqDelay)pqDelay.oninput=()=>pqAudio.delay=+pqDelay.value;\nif(sel)sel.addEventListener(\"change\",syncControls);\nsyncControls();\n\n\/* ===== NAVIGATION SONORITES ===== *\/\nfunction chooseByIndex(delta){\n const opts=[...sel.options],i=Math.max(0,opts.findIndex(o=>o.value===sel.value));\n sel.selectedIndex=(i+delta+opts.length)%opts.length;sel.dispatchEvent(new Event(\"change\",{bubbles:true}));\n}\ndocument.getElementById(\"pqPrev\")?.addEventListener(\"click\",()=>chooseByIndex(-1));\ndocument.getElementById(\"pqNext\")?.addEventListener(\"click\",()=>chooseByIndex(1));\ndocument.getElementById(\"pqRandom\")?.addEventListener(\"click\",()=>{sel.selectedIndex=Math.floor(Math.random()*sel.options.length);sel.dispatchEvent(new Event(\"change\",{bubbles:true}))});\ndocument.getElementById(\"pqReset\")?.addEventListener(\"click\",()=>{\n window.pqAudio.reverb=0;\n window.pqAudio.delay=0;\n const d=currentData();\n if(d){\n  pqBright.value=d.brightness||1;\n  pqAttack.value=d.attack||.02;\n  pqRelease.value=d.release||1.5;\n }\n pqReverb.value=0;\n pqDelay.value=0;\n});\n\n\/* ===== CONFIGURATION CLAVIER PC ===== *\/\nconst defaultMap=Object.assign({},window.keyboardMap||{a:48,z:50,e:52,r:53,t:55,y:57,u:59,i:60,o:62,p:64,q:65,s:67,d:69,f:71,g:72,h:74,j:76,k:77,l:79,m:81});\nlet pqMap=JSON.parse(localStorage.getItem(\"pianoQuestKeyboardMap\")||\"null\")||defaultMap;\nfunction openKeyEditor(){\n let modal=document.getElementById(\"pqKeyModal\");\n if(!modal){\n  modal=document.createElement(\"div\");modal.className=\"modal show\";modal.id=\"pqKeyModal\";\n  modal.innerHTML='<div class=\"modalBox\"><button class=\"secondary close\" id=\"pqKeyClose\">\u2715<\/button><h2>\u2328\ufe0f Configurer les touches<\/h2><p>Clique sur \u00ab Modifier \u00bb, puis appuie sur la touche du clavier PC \u00e0 associer \u00e0 la note.<\/p><div id=\"pqKeyList\"><\/div><button class=\"danger\" id=\"pqKeyReset\">R\u00e9initialiser les touches<\/button><\/div>';\n  document.body.appendChild(modal);\n  modal.querySelector(\"#pqKeyClose\").onclick=()=>modal.remove();\n  modal.querySelector(\"#pqKeyReset\").onclick=()=>{pqMap=Object.assign({},defaultMap);localStorage.setItem(\"pianoQuestKeyboardMap\",JSON.stringify(pqMap));renderKeys()};\n }\n renderKeys();\n function renderKeys(){\n  const list=modal.querySelector(\"#pqKeyList\");list.innerHTML=\"\";\n  Object.entries(pqMap).sort((a,b)=>a[1]-b[1]).forEach(([key,midi])=>{\n   const d=document.createElement(\"div\");d.className=\"pq-key-item\";\n   d.innerHTML=\"\ud83c\udfb5 \"+(window.getNoteName?getNoteName(midi):midi)+\" \u2014 <b>\"+key+\"<\/b> <button>Modifier<\/button>\";\n   d.querySelector(\"button\").onclick=()=>{\n    d.querySelector(\"button\").textContent=\"Appuie sur une touche\u2026\";\n    const h=e=>{if(e.key.length===1){e.preventDefault();delete pqMap[key];pqMap[e.key.toLowerCase()]=midi;localStorage.setItem(\"pianoQuestKeyboardMap\",JSON.stringify(pqMap));document.removeEventListener(\"keydown\",h);renderKeys()}};\n    document.addEventListener(\"keydown\",h);\n   };list.appendChild(d);\n  });\n }\n}\ndocument.getElementById(\"pqKeys\")?.addEventListener(\"click\",openKeyEditor);\n\n\/* ===== MIDI ===== *\/\nasync function initMidi(){\n const status=document.getElementById(\"pqMidiStatus\");\n if(!navigator.requestMIDIAccess){status.textContent=\"MIDI non support\u00e9 par ce navigateur\";return}\n try{\n  const access=await navigator.requestMIDIAccess();\n  const inputs=[...access.inputs.values()];\n  if(!inputs.length){status.textContent=\"Aucun piano MIDI d\u00e9tect\u00e9\";return}\n  inputs.forEach(input=>input.onmidimessage=e=>{\n   const [type,note,vel]=e.data;\n   if((type&0xf0)===0x90&&vel>0){\n    const el=document.querySelector('[data-midi=\"'+note+'\"]');\n    if(typeof playTone===\"function\")playTone(note,1);\n    if(el){el.classList.add(\"active\");setTimeout(()=>el.classList.remove(\"active\"),180)}\n    if(typeof updateNoteScreen===\"function\")updateNoteScreen(note);\n   }\n  });\n  status.textContent=\"\ud83c\udfb9 Connect\u00e9 : \"+inputs.map(x=>x.name||\"Piano MIDI\").join(\", \");\n }catch(e){status.textContent=\"Connexion MIDI refus\u00e9e\";}\n}\ndocument.getElementById(\"pqMidi\")?.addEventListener(\"click\",initMidi);\n})();\n<\/script>\n\n<\/body>\n<\/html>\n\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-10523be e-flex e-con-boxed elementor-repeater-item-default_padding sk-none elementor-repeater-item-none elementor-repeater-item-none_hover wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-parent\" data-id=\"10523be\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;ang_container_spacing_size&quot;:&quot;default_padding&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f5ae3fa elementor-repeater-item-none elementor-repeater-item-none_hover elementor-widget elementor-widget-spacer\" data-id=\"f5ae3fa\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c97d21e e-flex e-con-boxed elementor-repeater-item-default_padding sk-none elementor-repeater-item-none elementor-repeater-item-none_hover wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-parent\" data-id=\"c97d21e\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;ang_container_spacing_size&quot;:&quot;default_padding&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c0141e5 elementor-repeater-item-none elementor-repeater-item-none_hover elementor-widget elementor-widget-spacer\" data-id=\"c0141e5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-f6717ef animated-slow elementor-section-boxed ang-section-padding-initial elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no elementor-repeater-item-none elementor-repeater-item-none_hover wpr-column-slider-no wpr-equal-height-no elementor-invisible\" data-id=\"f6717ef\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;animation&quot;:&quot;swing&quot;,&quot;animation_delay&quot;:200,&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-727cd58 elementor-repeater-item-none elementor-repeater-item-none_hover\" data-id=\"727cd58\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-43a556e animated-slow external_elementor-repeater-item-none_external elementor-repeater-item-none elementor-repeater-item-none_hover elementor-invisible elementor-widget elementor-widget-image\" data-id=\"43a556e\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeIn&quot;,&quot;_animation_delay&quot;:1500}\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"275\" height=\"183\" src=\"https:\/\/allianceenjesus.com\/wp-content\/uploads\/2022\/03\/alliance-en-jesus-1-1.jpg\" class=\"attachment-large size-large wp-image-3707\" alt=\"\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t<div class=\"elementor-element elementor-element-45190f7 e-flex e-con-boxed elementor-repeater-item-default_padding sk-none elementor-repeater-item-none elementor-repeater-item-none_hover wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-parent\" data-id=\"45190f7\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;ang_container_spacing_size&quot;:&quot;default_padding&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-77ca9a5 elementor-repeater-item-none elementor-repeater-item-none_hover elementor-widget elementor-widget-spacer\" data-id=\"77ca9a5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Piano Quest \u2014 \u00c9cole de Piano Interactive \ud83c\udfb9 Piano Quest \ud83c\udfe0 Accueil \ud83c\udfb9 Piano \ud83d\udcda Cours \ud83c\udfaf Exercices \ud83c\udfb5 Audio \ud83c\udf99\ufe0f Enregistrements \ud83c\udfc6 Progression \u2699\ufe0f Param\u00e8tres \ud83d\udc64 \u00c9l\u00e8ve Niveau 1 0 \/ 100 XP Bienvenue sur Piano Quest Apprends le piano, joue, exp\u00e9rimente et progresse. \ud83c\udfb9 Ton \u00e9cole de piano interactive Apprends progressivement la th\u00e9orie musicale, la lecture des notes, le rythme et la pratique. \ud83c\udfb9 Ouvrir le piano \ud83d\udcda Commencer les cours 0 Notes jou\u00e9es 0 Cours termin\u00e9s 0 Exercices 0 XP PR\u00caT \u00c0 JOUER \u2014 \u266a Aucun accord d\u00e9tect\u00e9 \ud83c\udfb9 Concert Grand \ud83c\udfb9 Piano professionnel \u2014 88 touches \ud83c\udfb9 Sonorit\u00e9 Concert GrandStudio GrandWarm GrandBright GrandClassic GrandUpright PianoHonky TonkElectric PianoRhodesWurlitzerClavinetBright Concert GrandDark Concert GrandSoft Concert GrandWide Stereo GrandStage Grand PianoVintage Grand PianoClassic Concert PianoModern Grand PianoCinematic Grand PianoIntimate Grand PianoConcert Hall GrandRecording Studio GrandChurch Grand PianoTheater Grand PianoFelt Grand PianoMellow Grand PianoHard Hammer GrandBell Grand PianoResonant Grand PianoDeep Bass GrandBright Upright PianoWarm Upright PianoDark Upright PianoVintage Upright PianoFelt Upright PianoRoom Upright PianoDry Upright PianoResonant Upright PianoClassic Upright PianoStage Upright PianoElectric Piano 1Electric Piano 2Electric Piano 3Electric Piano 4Electric Piano 5Electric Piano 6Electric Piano 7Electric Piano 8Electric Piano 9Electric Piano 10Bright RhodesDark RhodesSoft RhodesClean RhodesDriven RhodesChorus RhodesVintage RhodesStage RhodesSuitcase RhodesMark I RhodesBright WurlitzerDark WurlitzerSoft WurlitzerDriven WurlitzerVintage WurlitzerBright ClavinetDark ClavinetFunk ClavinetWah ClavinetVintage ClavinetPipe OrganCathedral OrganChurch OrganChapel OrganTheater OrganTube OrganBarrel OrganPositive OrganChoir OrganBaroque OrganHammond OrganHammond JazzHammond GospelHammond RockHammond FunkSoft HammondBright HammondVintage HammondRotary HammondClean HammondElectric Organ 1Electric Organ 2Electric Organ 3Electric Organ 4Electric Organ 5Jazz OrganSoul OrganFunk OrganBlues OrganGospel OrganHarpsichordBright HarpsichordDark HarpsichordVintage HarpsichordItalian HarpsichordConcert HarpSoft HarpBright HarpCeltic HarpAngelic HarpAcoustic GuitarClassical GuitarNylon GuitarSteel GuitarFolk GuitarJazz GuitarClean Electric GuitarCrunch Electric GuitarDistortion GuitarSurf GuitarAcoustic BassFinger BassPick BassFretless BassSlap BassSynth BassSub BassDeep BassFunk BassJazz BassViolinSoft ViolinBright ViolinLegato ViolinStaccato ViolinVintage ViolinViolaSoft ViolaDark ViolaWarm ViolaCelloSoft CelloDark CelloWarm CelloLegato CelloDouble BassBowed Double BassPizzicato Double BassJazz Double BassConcert FluteSoft FluteBright FluteAiry FluteLow FlutePiccoloAlto FluteBass FluteRecorderSoft RecorderBright RecorderOboeSoft OboeDark OboeEnglish HornBassoonDark BassoonContrabassoonClarinetSoft ClarinetBright ClarinetBass ClarinetSoprano SaxophoneAlto SaxophoneTenor SaxophoneBaritone SaxophoneTrumpetSoft TrumpetBright TrumpetMuted TrumpetJazz TrumpetCornetFlugelhornTromboneSoft TromboneBright TromboneFrench HornSoft French HornDark French HornTubaSoft TubaBright TubaMarimbaSoft MarimbaBright MarimbaDeep MarimbaXylophoneBright XylophoneSoft XylophoneVibraphoneSoft VibraphoneBright VibraphoneJazz VibraphoneGlockenspielSoft GlockenspielBright GlockenspielCelestaSoft CelestaBright CelestaSynth LeadBright Synth Lead Volume 70% Transpose \u2212 0 + Octave \u2212 0 + \ud83e\uddb6 Sustain OFF \ud83e\udd41 M\u00e9tronome OFF \ud83d\udd34 Enregistrer C1 C2 C3 C4 C5 C6 C7 C8 \ud83c\udfb9 Les 88 touches sont toujours visibles. \u2328\ufe0f Raccourcis clavier : A Z E R T Y U I O P Q S D F G H J K L M Touches suppl\u00e9mentaires : W X C V B N , ; : ! \u2328\ufe0f Personnaliser le clavier Mode normal : le clavier AZERTY joue le piano. \u2328\ufe0f Modifier les touches \u21a9\ufe0f R\u00e9initialiser les touches Active le mode configuration, clique une touche du piano, puis appuie sur la touche du clavier que tu veux lui attribuer. \ud83c\udfb9 Brancher un vrai piano MIDI Aucun piano MIDI connect\u00e9. \ud83c\udfb9 D\u00e9tecter mon piano MIDI Branche ton piano ou clavier USB-MIDI, puis clique sur le bouton. Compatible avec les navigateurs qui prennent en charge Web MIDI. \ud83d\udcda Cours progressifs 1. \ud83e\ude91 Posture Position correcte du pianiste. 2. \ud83c\udfb9 Le clavier Comprendre les 88 touches. 3. \ud83c\udfb5 Les notes DO, R\u00c9, MI, FA, SOL, LA, SI. 4. \ud83e\udd41 Le rythme Pulsation et tempo. 5. \ud83c\udfbc Cl\u00e9 de sol Lire les notes aigu\u00ebs. 6. \ud83c\udfbc Cl\u00e9 de fa Lire les notes graves. 7. \ud83c\udfb9 Gammes Comprendre les gammes. 8. \ud83c\udfb9 Accords Construire les accords. 9. \ud83d\udc42 Oreille Reconna\u00eetre les sons. 10. \ud83d\udc50 Coordination Utiliser les deux mains. 11. \ud83c\udfad Expression Nuances et interpr\u00e9tation. \ud83c\udfaf Exercices \ud83c\udfb5 Reconna\u00eetre une note Clique pour commencer. \ud83c\udfb9 Exercice gamme de DO \ud83c\udfb9 Exercice accord de DO \ud83c\udfb5 Importer une chanson \ud83c\udf9a\ufe0f Contr\u00f4le Vitesse 1x Volume \ud83c\udf99\ufe0f Mes performances Aucun enregistrement. \ud83c\udfc6 Progression Niveau 1 0 \/ 100 XP \u2699\ufe0f Param\u00e8tres \u267b\ufe0f R\u00e9initialiser \u2715 \u2705 Terminer le cours<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_eb_attr":"","_uag_custom_page_level_css":"","site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"unboxed","site-sidebar-style":"unboxed","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"enabled","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":"","_members_access_role":[],"_members_access_error":""},"class_list":["post-30893","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"tp-image-grid":false,"ca-people-thumb":false,"ca-address-thumb":false,"ultp_layout_landscape_large":false,"ultp_layout_landscape":false,"ultp_layout_portrait":false,"ultp_layout_square":false,"mailpoet_newsletter_max":false,"masvideos_video_large":false,"masvideos_video_medium":false,"masvideos_video_thumbnail":false,"masvideos_movie_large":false,"masvideos_movie_medium":false,"masvideos_movie_thumbnail":false,"woocommerce_thumbnail":false,"woocommerce_single":false,"woocommerce_gallery_thumbnail":false},"uagb_author_info":{"display_name":"Serviteur","author_link":"https:\/\/allianceenjesus.com\/author\/jaijp3a12g7"},"uagb_comment_info":0,"uagb_excerpt":"Piano Quest \u2014 \u00c9cole de Piano Interactive \ud83c\udfb9 Piano Quest \ud83c\udfe0 Accueil \ud83c\udfb9 Piano \ud83d\udcda Cours \ud83c\udfaf Exercices \ud83c\udfb5 Audio \ud83c\udf99\ufe0f Enregistrements \ud83c\udfc6 Progression \u2699\ufe0f Param\u00e8tres \ud83d\udc64 \u00c9l\u00e8ve Niveau 1 0 \/ 100 XP Bienvenue sur Piano Quest Apprends le piano, joue, exp\u00e9rimente et progresse. \ud83c\udfb9 Ton \u00e9cole de piano interactive Apprends progressivement la th\u00e9orie\u2026","_links":{"self":[{"href":"https:\/\/allianceenjesus.com\/index.php?rest_route=\/wp\/v2\/pages\/30893","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/allianceenjesus.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/allianceenjesus.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/allianceenjesus.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/allianceenjesus.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=30893"}],"version-history":[{"count":277,"href":"https:\/\/allianceenjesus.com\/index.php?rest_route=\/wp\/v2\/pages\/30893\/revisions"}],"predecessor-version":[{"id":31202,"href":"https:\/\/allianceenjesus.com\/index.php?rest_route=\/wp\/v2\/pages\/30893\/revisions\/31202"}],"wp:attachment":[{"href":"https:\/\/allianceenjesus.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=30893"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}