{"id":11219,"date":"2025-12-12T11:13:21","date_gmt":"2025-12-12T10:13:21","guid":{"rendered":"https:\/\/spgoo.org\/?page_id=11219"},"modified":"2025-12-12T11:13:22","modified_gmt":"2025-12-12T10:13:22","slug":"demo-motionanalyzer","status":"publish","type":"page","link":"https:\/\/spgoo.org\/?page_id=11219","title":{"rendered":"Demo MotionAnalyzer"},"content":{"rendered":"\n<p>Demo MotionAnalyzer<\/p>\n\n\n    <script>\r\n        \/\/ d\u00e9finition de l'espace de nom par defaut attache au module \r\n        const soundYS={};\r\n    <\/script>\r\n    <script type=\"module\">\r\n      \/\/ on accroche \u00e0 cet espace de nom les traitements de sonores definis dans le module\r\n      import { AudioMotionAnalyzer } from \".\/personnalisation\/audioMotion-analyzer-4.5.2\/src\/audioMotion-analyzer.js\";\r\n      soundYS.AudioMotionAnalyzer = AudioMotionAnalyzer;\r\n    <\/script> \r\n    <style>\r\n        * {\r\n            margin: 0;\r\n            padding: 0;\r\n            box-sizing: border-box;\r\n        }\r\n               \r\n        .containerYS {\r\n            max-width: 1400px;\r\n            margin: 0 auto;\r\n            background: rgba(255, 255, 255, 0.95);\r\n            border-radius: 20px;\r\n            padding: 30px;\r\n            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);\r\n        }\r\n        \r\n        h1 {\r\n            text-align: center;\r\n            color: #333;\r\n            margin-bottom: 20px;\r\n            font-size: 2.5em;\r\n        }\r\n        \r\n        .tabs {\r\n            display: flex;\r\n            gap: 10px;\r\n            margin-bottom: 20px;\r\n            border-bottom: 2px solid #ddd;\r\n        }\r\n        \r\n        .tab {\r\n            padding: 12px 24px;\r\n            background: transparent;\r\n            border: none;\r\n            border-bottom: 3px solid transparent;\r\n            cursor: pointer;\r\n            font-weight: 600;\r\n            font-size: 16px;\r\n            color: #666;\r\n            transition: all 0.3s;\r\n        }\r\n        \r\n        .tab:hover {\r\n            color: #667eea;\r\n        }\r\n        \r\n        .tab.active {\r\n            color: #667eea;\r\n            border-bottom-color: #667eea;\r\n        }\r\n        \r\n        .tab-content {\r\n            display: none;\r\n        }\r\n        \r\n        .tab-content.active {\r\n            display: block;\r\n        }\r\n        \r\n        .controls {\r\n            display: flex;\r\n            flex-wrap: wrap;\r\n            gap: 15px;\r\n            margin-bottom: 30px;\r\n            padding: 20px;\r\n            background: #f8f9fa;\r\n            border-radius: 10px;\r\n        }\r\n        \r\n        .file-input-wrapper {\r\n            position: relative;\r\n            overflow: hidden;\r\n            display: inline-block;\r\n        }\r\n        \r\n        .file-input-wrapper input[type=file] {\r\n            position: absolute;\r\n            left: -9999px;\r\n        }\r\n        \r\n        .file-input-wrapper label {\r\n            display: inline-block;\r\n            padding: 12px 25px;\r\n            background: #667eea;\r\n            color: white;\r\n            border-radius: 8px;\r\n            cursor: pointer;\r\n            font-weight: 600;\r\n            transition: all 0.3s;\r\n        }\r\n        \r\n        .file-input-wrapper label:hover {\r\n            background: #5568d3;\r\n            transform: translateY(-2px);\r\n        }\r\n        \r\n        button {\r\n            padding: 12px 25px;\r\n            border: none;\r\n            border-radius: 8px;\r\n            font-weight: 600;\r\n            cursor: pointer;\r\n            transition: all 0.3s;\r\n            font-size: 16px;\r\n        }\r\n        \r\n        .play-btn {\r\n            background: #28a745;\r\n            color: white;\r\n        }\r\n        \r\n        .play-btn:hover:not(:disabled) {\r\n            background: #218838;\r\n            transform: translateY(-2px);\r\n        }\r\n        \r\n        .pause-btn {\r\n            background: #ffc107;\r\n            color: #333;\r\n        }\r\n        \r\n        .pause-btn:hover:not(:disabled) {\r\n            background: #e0a800;\r\n            transform: translateY(-2px);\r\n        }\r\n        \r\n        .stop-btn {\r\n            background: #dc3545;\r\n            color: white;\r\n        }\r\n        \r\n        .stop-btn:hover:not(:disabled) {\r\n            background: #c82333;\r\n            transform: translateY(-2px);\r\n        }\r\n        \r\n        button:disabled {\r\n            opacity: 0.5;\r\n            cursor: not-allowed;\r\n        }\r\n        \r\n        .settings {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\r\n            gap: 20px;\r\n            margin-bottom: 20px;\r\n        }\r\n        \r\n        .setting-group {\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 8px;\r\n            padding: 15px;\r\n            background: #f8f9fa;\r\n            border-radius: 8px;\r\n        }\r\n        \r\n        .setting-group label {\r\n            font-weight: 600;\r\n            color: #555;\r\n            font-size: 14px;\r\n        }\r\n        \r\n        select, input[type=\"range\"], input[type=\"number\"] {\r\n            padding: 8px;\r\n            border: 2px solid #ddd;\r\n            border-radius: 6px;\r\n            font-size: 14px;\r\n        }\r\n        \r\n        input[type=\"range\"] {\r\n            cursor: pointer;\r\n        }\r\n        \r\n        input[type=\"checkbox\"] {\r\n            width: 18px;\r\n            height: 18px;\r\n            cursor: pointer;\r\n        }\r\n        \r\n        .checkbox-label {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 8px;\r\n            cursor: pointer;\r\n            padding: 8px;\r\n            border-radius: 6px;\r\n            transition: background 0.2s;\r\n        }\r\n        \r\n        .checkbox-label:hover {\r\n            background: rgba(102, 126, 234, 0.1);\r\n        }\r\n        \r\n        #containerYS {\r\n            border-radius: 15px;\r\n            overflow: hidden;\r\n            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);\r\n            margin-bottom: 20px;\r\n        }\r\n        \r\n        .info {\r\n            padding: 15px;\r\n            background: #e9ecef;\r\n            border-radius: 10px;\r\n            text-align: center;\r\n            font-size: 14px;\r\n            color: #555;\r\n        }\r\n        \r\n        .file-name {\r\n            font-weight: 600;\r\n            color: #667eea;\r\n            margin-top: 10px;\r\n        }\r\n        \r\n        .presets {\r\n            display: flex;\r\n            gap: 10px;\r\n            flex-wrap: wrap;\r\n            margin-bottom: 20px;\r\n        }\r\n        \r\n        .preset-btn {\r\n            padding: 10px 20px;\r\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n            color: white;\r\n            border: none;\r\n            border-radius: 8px;\r\n            cursor: pointer;\r\n            font-weight: 600;\r\n            transition: all 0.3s;\r\n        }\r\n        \r\n        .preset-btn:hover {\r\n            transform: translateY(-2px);\r\n            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);\r\n        }\r\n        \r\n        .section-title {\r\n            font-size: 18px;\r\n            font-weight: 700;\r\n            color: #333;\r\n            margin: 20px 0 10px 0;\r\n            padding-bottom: 8px;\r\n            border-bottom: 2px solid #667eea;\r\n        }\r\n        \r\n        .two-columns {\r\n            display: grid;\r\n            grid-template-columns: 1fr 1fr;\r\n            gap: 15px;\r\n        }\r\n    <\/style>\r\n    <div class=\"containerYS\">\r\n        <h1>\ud83c\udfb5 Analyseur Audio Avanc\u00e9<\/h1>\r\n        \r\n        <div class=\"controls\">\r\n            <div class=\"file-input-wrapper\">\r\n                <input type=\"file\" id=\"fileInput\" accept=\"audio\/*\">\r\n                <label for=\"fileInput\">\ud83d\udcc1 Choisir un fichier audio<\/label>\r\n            <\/div>\r\n            <button class=\"play-btn\" id=\"playBtn\" disabled>\u25b6 Lecture<\/button>\r\n            <button class=\"pause-btn\" id=\"pauseBtn\" disabled>\u23f8 Pause<\/button>\r\n            <button class=\"stop-btn\" id=\"stopBtn\" disabled>\u23f9 Stop<\/button>\r\n        <\/div>\r\n        \r\n        <div class=\"presets\">\r\n            <button class=\"preset-btn\" onclick=\"applyPreset('spectrum')\">\ud83c\udf08 Spectre<\/button>\r\n            <button class=\"preset-btn\" onclick=\"applyPreset('wave')\">\ud83c\udf0a Vagues<\/button>\r\n            <button class=\"preset-btn\" onclick=\"applyPreset('circular')\">\u2b55 Circulaire<\/button>\r\n            <button class=\"preset-btn\" onclick=\"applyPreset('retro')\">\ud83d\udc7e R\u00e9tro<\/button>\r\n            <button class=\"preset-btn\" onclick=\"applyPreset('minimal')\">\u2728 Minimal<\/button>\r\n        <\/div>\r\n        \r\n        <div class=\"tabs\">\r\n            <button class=\"tab active\" onclick=\"switchTab('basic')\">\ud83c\udfa8 Basique<\/button>\r\n            <button class=\"tab\" onclick=\"switchTab('advanced')\">\u2699\ufe0f Avanc\u00e9<\/button>\r\n            <button class=\"tab\" onclick=\"switchTab('effects')\">\u2728 Effets<\/button>\r\n            <button class=\"tab\" onclick=\"switchTab('frequency')\">\ud83d\udcca Fr\u00e9quences<\/button>\r\n        <\/div>\r\n        \r\n        <div id=\"basic\" class=\"tab-content active\">\r\n            <div class=\"settings\">\r\n                <div class=\"setting-group\">\r\n                    <label for=\"modeSelect\">Mode de visualisation<\/label>\r\n                    <select id=\"modeSelect\">\r\n                        <option value=\"0\">Graphique discret<\/option>\r\n                        <option value=\"1\">Graphique plein<\/option>\r\n                        <option value=\"2\">Ligne<\/option>\r\n                        <option value=\"3\">Ligne pleine<\/option>\r\n                        <option value=\"4\">Blocs<\/option>\r\n                        <option value=\"5\">Graphique rond<\/option>\r\n                        <option value=\"6\">Ligne ronde<\/option>\r\n                        <option value=\"10\" selected>Octave<\/option>\r\n                        <option value=\"11\">Octave plein<\/option>\r\n                        <option value=\"12\">Octave ligne<\/option>\r\n                    <\/select>\r\n                <\/div>\r\n                \r\n                <div class=\"setting-group\">\r\n                    <label for=\"gradientSelect\">D\u00e9grad\u00e9<\/label>\r\n                    <select id=\"gradientSelect\">\r\n                        <option value=\"classic\">Classique<\/option>\r\n                        <option value=\"prism\" selected>Prisme<\/option>\r\n                        <option value=\"rainbow\">Arc-en-ciel<\/option>\r\n                        <option value=\"orangered\">Orange-Rouge<\/option>\r\n                        <option value=\"steelblue\">Bleu acier<\/option>\r\n                        <option value=\"apple\">Apple<\/option>\r\n                        <option value=\"aurora\">Aurora<\/option>\r\n                        <option value=\"borealis\">Borealis<\/option>\r\n                        <option value=\"candy\">Candy<\/option>\r\n                        <option value=\"cool\">Cool<\/option>\r\n                        <option value=\"dusk\">Cr\u00e9puscule<\/option>\r\n                        <option value=\"miami\">Miami<\/option>\r\n                        <option value=\"outrun\">Outrun<\/option>\r\n                        <option value=\"pacific\">Pacific<\/option>\r\n                        <option value=\"shahabi\">Shahabi<\/option>\r\n                        <option value=\"summer\">Summer<\/option>\r\n                        <option value=\"sunset\">Sunset<\/option>\r\n                        <option value=\"tiedye\">Tie-Dye<\/option>\r\n                    <\/select>\r\n                <\/div>\r\n                \r\n                <div class=\"setting-group\">\r\n                    <label for=\"volumeSlider\">Volume: <span id=\"volumeValue\">100<\/span>%<\/label>\r\n                    <input type=\"range\" id=\"volumeSlider\" min=\"0\" max=\"100\" value=\"100\">\r\n                <\/div>\r\n                \r\n                <div class=\"setting-group\">\r\n                    <label for=\"sensitivitySlider\">Sensibilit\u00e9: <span id=\"sensitivityValue\">1.0<\/span><\/label>\r\n                    <input type=\"range\" id=\"sensitivitySlider\" min=\"0\" max=\"3\" step=\"0.1\" value=\"1\">\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n        \r\n        <div id=\"advanced\" class=\"tab-content\">\r\n            <div class=\"section-title\">Analyse FFT<\/div>\r\n            <div class=\"settings\">\r\n                <div class=\"setting-group\">\r\n                    <label for=\"fftSizeSelect\">Taille FFT<\/label>\r\n                    <select id=\"fftSizeSelect\">\r\n                        <option value=\"512\">512<\/option>\r\n                        <option value=\"1024\">1024<\/option>\r\n                        <option value=\"2048\">2048<\/option>\r\n                        <option value=\"4096\">4096<\/option>\r\n                        <option value=\"8192\" selected>8192<\/option>\r\n                        <option value=\"16384\">16384<\/option>\r\n                        <option value=\"32768\">32768<\/option>\r\n                    <\/select>\r\n                <\/div>\r\n                \r\n                <div class=\"setting-group\">\r\n                    <label for=\"smoothingSlider\">Lissage temporel: <span id=\"smoothingValue\">0.5<\/span><\/label>\r\n                    <input type=\"range\" id=\"smoothingSlider\" min=\"0\" max=\"0.9\" step=\"0.05\" value=\"0.5\">\r\n                <\/div>\r\n                \r\n                <div class=\"setting-group\">\r\n                    <label for=\"minDbSlider\">dB Minimum: <span id=\"minDbValue\">-85<\/span><\/label>\r\n                    <input type=\"range\" id=\"minDbSlider\" min=\"-100\" max=\"-50\" step=\"5\" value=\"-85\">\r\n                <\/div>\r\n                \r\n                <div class=\"setting-group\">\r\n                    <label for=\"maxDbSlider\">dB Maximum: <span id=\"maxDbValue\">-25<\/span><\/label>\r\n                    <input type=\"range\" id=\"maxDbSlider\" min=\"-50\" max=\"0\" step=\"5\" value=\"-25\">\r\n                <\/div>\r\n            <\/div>\r\n            \r\n            <div class=\"section-title\">Barres et Espacement<\/div>\r\n            <div class=\"settings\">\r\n                <div class=\"setting-group\">\r\n                    <label for=\"barSpaceSlider\">Espacement: <span id=\"barSpaceValue\">0.1<\/span><\/label>\r\n                    <input type=\"range\" id=\"barSpaceSlider\" min=\"0\" max=\"1\" step=\"0.1\" value=\"0.1\">\r\n                <\/div>\r\n                \r\n                <div class=\"setting-group\">\r\n                    <label for=\"lineWidthSlider\">Largeur ligne: <span id=\"lineWidthValue\">2<\/span><\/label>\r\n                    <input type=\"range\" id=\"lineWidthSlider\" min=\"0\" max=\"10\" step=\"0.5\" value=\"2\">\r\n                <\/div>\r\n                \r\n                <div class=\"setting-group\">\r\n                    <label for=\"fillAlphaSlider\">Opacit\u00e9 remplissage: <span id=\"fillAlphaValue\">0.6<\/span><\/label>\r\n                    <input type=\"range\" id=\"fillAlphaSlider\" min=\"0\" max=\"1\" step=\"0.1\" value=\"0.6\">\r\n                <\/div>\r\n                \r\n                <div class=\"setting-group\">\r\n                    <label for=\"alphaSlider\">Opacit\u00e9 barres: <span id=\"alphaValue\">1.0<\/span><\/label>\r\n                    <input type=\"range\" id=\"alphaSlider\" min=\"0\" max=\"1\" step=\"0.1\" value=\"1\">\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n        \r\n        <div id=\"effects\" class=\"tab-content\">\r\n            <div class=\"section-title\">Effets Visuels<\/div>\r\n            <div class=\"two-columns\">\r\n                <div class=\"setting-group\">\r\n                    <label class=\"checkbox-label\">\r\n                        <input type=\"checkbox\" id=\"showPeaksCheck\" checked> Afficher les pics\r\n                    <\/label>\r\n                    <label class=\"checkbox-label\">\r\n                        <input type=\"checkbox\" id=\"showScaleCheck\" checked> Afficher l&#8217;\u00e9chelle\r\n                    <\/label>\r\n                    <label class=\"checkbox-label\">\r\n                        <input type=\"checkbox\" id=\"lumiBarsCheck\"> Barres lumineuses\r\n                    <\/label>\r\n                    <label class=\"checkbox-label\">\r\n                        <input type=\"checkbox\" id=\"trueLeds\"> LEDs r\u00e9alistes\r\n                    <\/label>\r\n                <\/div>\r\n                \r\n                <div class=\"setting-group\">\r\n                    <label class=\"checkbox-label\">\r\n                        <input type=\"checkbox\" id=\"mirrorCheck\"> Effet miroir\r\n                    <\/label>\r\n                    <label class=\"checkbox-label\">\r\n                        <input type=\"checkbox\" id=\"splitGradientCheck\"> D\u00e9grad\u00e9 divis\u00e9\r\n                    <\/label>\r\n                    <label class=\"checkbox-label\">\r\n                        <input type=\"checkbox\" id=\"roundBarsCheck\"> Barres arrondies\r\n                    <\/label>\r\n                    <label class=\"checkbox-label\">\r\n                        <input type=\"checkbox\" id=\"weightingCheck\"> Pond\u00e9ration fr\u00e9quence\r\n                    <\/label>\r\n                <\/div>\r\n            <\/div>\r\n            \r\n            <div class=\"section-title\">R\u00e9flexion<\/div>\r\n            <div class=\"settings\">\r\n                <div class=\"setting-group\">\r\n                    <label for=\"reflexRatioSlider\">Intensit\u00e9: <span id=\"reflexRatioValue\">0.0<\/span><\/label>\r\n                    <input type=\"range\" id=\"reflexRatioSlider\" min=\"0\" max=\"1\" step=\"0.05\" value=\"0\">\r\n                <\/div>\r\n                \r\n                <div class=\"setting-group\">\r\n                    <label for=\"reflexAlphaSlider\">Opacit\u00e9: <span id=\"reflexAlphaValue\">0.15<\/span><\/label>\r\n                    <input type=\"range\" id=\"reflexAlphaSlider\" min=\"0\" max=\"1\" step=\"0.05\" value=\"0.15\">\r\n                <\/div>\r\n                \r\n                <div class=\"setting-group\">\r\n                    <label for=\"reflexBrightSlider\">Luminosit\u00e9: <span id=\"reflexBrightValue\">1.0<\/span><\/label>\r\n                    <input type=\"range\" id=\"reflexBrightSlider\" min=\"0\" max=\"2\" step=\"0.1\" value=\"1\">\r\n                <\/div>\r\n                \r\n                <div class=\"setting-group\">\r\n                    <label class=\"checkbox-label\">\r\n                        <input type=\"checkbox\" id=\"reflexFitCheck\"> Ajustement automatique\r\n                    <\/label>\r\n                <\/div>\r\n            <\/div>\r\n            \r\n            <div class=\"section-title\">Modes Circulaires<\/div>\r\n            <div class=\"settings\">\r\n                <div class=\"setting-group\">\r\n                    <label for=\"radiusSlider\">Rayon: <span id=\"radiusValue\">0.3<\/span><\/label>\r\n                    <input type=\"range\" id=\"radiusSlider\" min=\"0\" max=\"1\" step=\"0.05\" value=\"0.3\">\r\n                <\/div>\r\n                \r\n                <div class=\"setting-group\">\r\n                    <label for=\"spinSpeedSlider\">Vitesse rotation: <span id=\"spinSpeedValue\">0<\/span><\/label>\r\n                    <input type=\"range\" id=\"spinSpeedSlider\" min=\"-5\" max=\"5\" step=\"0.5\" value=\"0\">\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n        \r\n        <div id=\"frequency\" class=\"tab-content\">\r\n            <div class=\"section-title\">Plage de fr\u00e9quences<\/div>\r\n            <div class=\"settings\">\r\n                <div class=\"setting-group\">\r\n                    <label for=\"minFreqInput\">Fr\u00e9quence min (Hz): <span id=\"minFreqValue\">20<\/span><\/label>\r\n                    <input type=\"number\" id=\"minFreqInput\" min=\"20\" max=\"22000\" value=\"20\">\r\n                <\/div>\r\n                \r\n                <div class=\"setting-group\">\r\n                    <label for=\"maxFreqInput\">Fr\u00e9quence max (Hz): <span id=\"maxFreqValue\">22000<\/span><\/label>\r\n                    <input type=\"number\" id=\"maxFreqInput\" min=\"20\" max=\"22000\" value=\"22000\">\r\n                <\/div>\r\n            <\/div>\r\n            \r\n            <div class=\"section-title\">Options d&#8217;analyse<\/div>\r\n            <div class=\"two-columns\">\r\n                <div class=\"setting-group\">\r\n                    <label class=\"checkbox-label\">\r\n                        <input type=\"checkbox\" id=\"channelLayoutCheck\"> S\u00e9paration canaux\r\n                    <\/label>\r\n                    <label class=\"checkbox-label\">\r\n                        <input type=\"checkbox\" id=\"frequencyScaleCheck\"> \u00c9chelle logarithmique\r\n                    <\/label>\r\n                <\/div>\r\n                \r\n                <div class=\"setting-group\">\r\n                    <label class=\"checkbox-label\">\r\n                        <input type=\"checkbox\" id=\"noteLabelsCheck\"> Afficher les notes\r\n                    <\/label>\r\n                    <label class=\"checkbox-label\">\r\n                        <input type=\"checkbox\" id=\"ansiBandsCheck\"> Bandes ANSI\r\n                    <\/label>\r\n                <\/div>\r\n            <\/div>\r\n            \r\n            <div class=\"section-title\">Couleurs de fond<\/div>\r\n            <div class=\"settings\">\r\n                <div class=\"setting-group\">\r\n                    <label class=\"checkbox-label\">\r\n                        <input type=\"checkbox\" id=\"showBgColorCheck\" checked> Couleur de fond\r\n                    <\/label>\r\n                <\/div>\r\n                \r\n                <div class=\"setting-group\">\r\n                    <label for=\"bgAlphaSlider\">Opacit\u00e9 fond: <span id=\"bgAlphaValue\">0.7<\/span><\/label>\r\n                    <input type=\"range\" id=\"bgAlphaSlider\" min=\"0\" max=\"1\" step=\"0.1\" value=\"0.7\">\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n        \r\n        <div id=\"containerYS\"><\/div>\r\n        <!-- <div>\r\n            <audio id=\"audio\" controls src=\"\" style=\"width: 720px;\"><\/audio>\r\n        <\/div>         -->\r\n        <div class=\"info\">\r\n            <div>Chargez un fichier audio pour commencer l&#8217;analyse spectrale avanc\u00e9e<\/div>\r\n            <div class=\"file-name\" id=\"fileName\"><\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n        let audioMotion;\r\n        let audioElement;\r\n        let sourceNode;\r\n\r\n        document.addEventListener(\"DOMContentLoaded\", function(event) {\r\n        \r\n        \/\/ Initialisation de l'analyseur une fois la librairie et le module charg\u00e9s \r\n        audioMotion = new soundYS.AudioMotionAnalyzer(\r\n            document.getElementById('containerYS'),\r\n            {\r\n                mode: 5,\r\n                gradient: 'prism',\r\n                showScaleX: true,\r\n                showScaleY: true,\r\n                showPeaks: true,\r\n                smoothing: 0.5,\r\n                height: 300,\r\n                fftSize: 8192,\r\n                minDecibels: -85,\r\n                maxDecibels: -25,\r\n                showBgColor: true,\r\n                bgAlpha: 0.7,\r\n                overlay: true,\r\n                lineWidth: 2,\r\n                fillAlpha: 0.6,\r\n                barSpace: 0.1,\r\n                reflexRatio: 0,\r\n                reflexAlpha: 0.15,\r\n                reflexBright: 1,\r\n                reflexFit: true,\r\n                minFreq: 20,\r\n                maxFreq: 22000,\r\n                radius: 0.3,\r\n                spinSpeed: 0,\r\n                alphaBars: false,\r\n                lumiBars: false,\r\n                trueLeds: false,\r\n                mirror: 0,\r\n                splitGradient: false,\r\n                roundBars: false,\r\n                channelLayout: 'single',\r\n                frequencyScale: 'log',\r\n                noteLabels: false,\r\n                ansiBands: false,\r\n                weightingFilter: '',\r\n                \/\/source: document.getElementById('audio'),\r\n                \/\/connectSpeakers: true,\r\n\t\t\t    \/\/height: 340,                \r\n            }\r\n        );\r\n        });\r\n        \r\n        \/\/ Fonction de changement d'onglet\r\n        function switchTab(tabName) {\r\n            document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));\r\n            document.querySelectorAll('.tab-content').forEach(tc => tc.classList.remove('active'));\r\n            event.target.classList.add('active');\r\n            document.getElementById(tabName).classList.add('active');\r\n        }\r\n        \r\n        \/\/ Presets\r\n        function applyPreset(preset) {\r\n            switch(preset) {\r\n                case 'spectrum':\r\n                    audioMotion.mode = 10;\r\n                    audioMotion.gradient = 'rainbow';\r\n                    audioMotion.showPeaks = true;\r\n                    audioMotion.lineWidth = 2;\r\n                    audioMotion.fillAlpha = 0.7;\r\n                    audioMotion.reflexRatio = 0;\r\n                    break;\r\n                case 'wave':\r\n                    audioMotion.mode = 2;\r\n                    audioMotion.gradient = 'pacific';\r\n                    audioMotion.lineWidth = 3;\r\n                    audioMotion.fillAlpha = 0.3;\r\n                    audioMotion.reflexRatio = 0.4;\r\n                    audioMotion.reflexFit = true;\r\n                    break;\r\n                case 'circular':\r\n                    audioMotion.mode = 5;\r\n                    audioMotion.gradient = 'outrun';\r\n                    audioMotion.radius = 0.3;\r\n                    audioMotion.spinSpeed = 2;\r\n                    audioMotion.reflexRatio = 0;\r\n                    break;\r\n                case 'retro':\r\n                    audioMotion.mode = 4;\r\n                    audioMotion.gradient = 'miami';\r\n                    audioMotion.lumiBars = true;\r\n                    audioMotion.trueLeds = true;\r\n                    audioMotion.showPeaks = true;\r\n                    break;\r\n                case 'minimal':\r\n                    audioMotion.mode = 2;\r\n                    audioMotion.gradient = 'cool';\r\n                    audioMotion.lineWidth = 1;\r\n                    audioMotion.showPeaks = false;\r\n                    audioMotion.showScaleX = false;\r\n                    audioMotion.showScaleY = false;\r\n                    break;\r\n            }\r\n            updateAllControls();\r\n        }\r\n        \r\n        function updateAllControls() {\r\n            document.getElementById('modeSelect').value = audioMotion.mode;\r\n            document.getElementById('gradientSelect').value = audioMotion.gradient;\r\n            document.getElementById('showPeaksCheck').checked = audioMotion.showPeaks;\r\n            document.getElementById('lineWidthSlider').value = audioMotion.lineWidth;\r\n            document.getElementById('lineWidthValue').textContent = audioMotion.lineWidth;\r\n            document.getElementById('fillAlphaSlider').value = audioMotion.fillAlpha;\r\n            document.getElementById('fillAlphaValue').textContent = audioMotion.fillAlpha;\r\n            document.getElementById('reflexRatioSlider').value = audioMotion.reflexRatio;\r\n            document.getElementById('reflexRatioValue').textContent = audioMotion.reflexRatio.toFixed(2);\r\n            document.getElementById('radiusSlider').value = audioMotion.radius;\r\n            document.getElementById('radiusValue').textContent = audioMotion.radius;\r\n            document.getElementById('spinSpeedSlider').value = audioMotion.spinSpeed;\r\n            document.getElementById('spinSpeedValue').textContent = audioMotion.spinSpeed;\r\n        }\r\n        \r\n        \/\/ Gestion du fichier audio\r\n        document.getElementById('fileInput').addEventListener('change', function(e) {\r\n            const file = e.target.files[0];\r\n            if (file) {\r\n                if (audioElement) {\r\n                    audioElement.pause();\r\n                    audioElement = null;\r\n                }\r\n                \r\n                audioElement = new Audio();\r\n                audioElement.src = URL.createObjectURL(file);\r\n                \r\n                if (!sourceNode) {\r\n                    sourceNode = audioMotion.audioCtx.createMediaElementSource(audioElement);\r\n                    sourceNode.connect(audioMotion._analyzer[0]);\r\n                    audioMotion._analyzer[0].connect(audioMotion.audioCtx.destination);\r\n                }\r\n                \r\n                document.getElementById('fileName').textContent = `Fichier: ${file.name}`;\r\n                document.getElementById('playBtn').disabled = false;\r\n                document.getElementById('pauseBtn').disabled = false;\r\n                document.getElementById('stopBtn').disabled = false;\r\n            }\r\n        });\r\n        \r\n        \/\/ Contr\u00f4les de lecture\r\n        document.getElementById('playBtn').addEventListener('click', () => audioElement && audioElement.play());\r\n        document.getElementById('pauseBtn').addEventListener('click', () => audioElement && audioElement.pause());\r\n        document.getElementById('stopBtn').addEventListener('click', () => {\r\n            if (audioElement) {\r\n                audioElement.pause();\r\n                audioElement.currentTime = 0;\r\n            }\r\n        });\r\n        \r\n        \/\/ Onglet Basique\r\n        document.getElementById('modeSelect').addEventListener('change', e => audioMotion.mode = parseInt(e.target.value));\r\n        document.getElementById('gradientSelect').addEventListener('change', e => audioMotion.gradient = e.target.value);\r\n        document.getElementById('volumeSlider').addEventListener('input', function(e) {\r\n            if (audioElement) audioElement.volume = e.target.value \/ 100;\r\n            document.getElementById('volumeValue').textContent = e.target.value;\r\n        });\r\n        document.getElementById('sensitivitySlider').addEventListener('input', function(e) {\r\n            audioMotion.sensitivity = parseFloat(e.target.value);\r\n            document.getElementById('sensitivityValue').textContent = e.target.value;\r\n        });\r\n        \r\n        \/\/ Onglet Avanc\u00e9\r\n        document.getElementById('fftSizeSelect').addEventListener('change', e => audioMotion.fftSize = parseInt(e.target.value));\r\n        document.getElementById('smoothingSlider').addEventListener('input', function(e) {\r\n            audioMotion.smoothing = parseFloat(e.target.value);\r\n            document.getElementById('smoothingValue').textContent = e.target.value;\r\n        });\r\n        document.getElementById('minDbSlider').addEventListener('input', function(e) {\r\n            audioMotion.minDecibels = parseInt(e.target.value);\r\n            document.getElementById('minDbValue').textContent = e.target.value;\r\n        });\r\n        document.getElementById('maxDbSlider').addEventListener('input', function(e) {\r\n            audioMotion.maxDecibels = parseInt(e.target.value);\r\n            document.getElementById('maxDbValue').textContent = e.target.value;\r\n        });\r\n        document.getElementById('barSpaceSlider').addEventListener('input', function(e) {\r\n            audioMotion.barSpace = parseFloat(e.target.value);\r\n            document.getElementById('barSpaceValue').textContent = e.target.value;\r\n        });\r\n        document.getElementById('lineWidthSlider').addEventListener('input', function(e) {\r\n            audioMotion.lineWidth = parseFloat(e.target.value);\r\n            document.getElementById('lineWidthValue').textContent = e.target.value;\r\n        });\r\n        document.getElementById('fillAlphaSlider').addEventListener('input', function(e) {\r\n            audioMotion.fillAlpha = parseFloat(e.target.value);\r\n            document.getElementById('fillAlphaValue').textContent = e.target.value;\r\n        });\r\n        document.getElementById('alphaSlider').addEventListener('input', function(e) {\r\n            audioMotion.alphaBars = e.target.value < 1;\r\n            document.getElementById('alphaValue').textContent = e.target.value;\r\n        });\r\n        \r\n        \/\/ Onglet Effets\r\n        document.getElementById('showPeaksCheck').addEventListener('change', e => audioMotion.showPeaks = e.target.checked);\r\n        document.getElementById('showScaleCheck').addEventListener('change', function(e) {\r\n            audioMotion.showScaleX = e.target.checked;\r\n            audioMotion.showScaleY = e.target.checked;\r\n        });\r\n        document.getElementById('lumiBarsCheck').addEventListener('change', e => audioMotion.lumiBars = e.target.checked);\r\n        document.getElementById('trueLeds').addEventListener('change', e => audioMotion.trueLeds = e.target.checked);\r\n        document.getElementById('mirrorCheck').addEventListener('change', e => audioMotion.mirror = e.target.checked ? 1 : 0);\r\n        document.getElementById('splitGradientCheck').addEventListener('change', e => audioMotion.splitGradient = e.target.checked);\r\n        document.getElementById('roundBarsCheck').addEventListener('change', e => audioMotion.roundBars = e.target.checked);\r\n        document.getElementById('weightingCheck').addEventListener('change', e => audioMotion.weightingFilter = e.target.checked ? 'A' : '');\r\n        \r\n        document.getElementById('reflexRatioSlider').addEventListener('input', function(e) {\r\n            audioMotion.reflexRatio = parseFloat(e.target.value);\r\n            document.getElementById('reflexRatioValue').textContent = e.target.value;\r\n        });\r\n        document.getElementById('reflexAlphaSlider').addEventListener('input', function(e) {\r\n            audioMotion.reflexAlpha = parseFloat(e.target.value);\r\n            document.getElementById('reflexAlphaValue').textContent = e.target.value;\r\n        });\r\n        document.getElementById('reflexBrightSlider').addEventListener('input', function(e) {\r\n            audioMotion.reflexBright = parseFloat(e.target.value);\r\n            document.getElementById('reflexBrightValue').textContent = e.target.value;\r\n        });\r\n        document.getElementById('reflexFitCheck').addEventListener('change', e => audioMotion.reflexFit = e.target.checked);\r\n        \r\n        document.getElementById('radiusSlider').addEventListener('input', function(e) {\r\n            audioMotion.radius = parseFloat(e.target.value);\r\n            document.getElementById('radiusValue').textContent = e.target.value;\r\n        });\r\n        document.getElementById('spinSpeedSlider').addEventListener('input', function(e) {\r\n            audioMotion.spinSpeed = parseFloat(e.target.value);\r\n            document.getElementById('spinSpeedValue').textContent = e.target.value;\r\n        });\r\n        \r\n        \/\/ Onglet Fr\u00e9quences\r\n        document.getElementById('minFreqInput').addEventListener('change', function(e) {\r\n            audioMotion.minFreq = parseInt(e.target.value);\r\n            document.getElementById('minFreqValue').textContent = e.target.value;\r\n        });\r\n        document.getElementById('maxFreqInput').addEventListener('change', function(e) {\r\n            audioMotion.maxFreq = parseInt(e.target.value);\r\n            document.getElementById('maxFreqValue').textContent = e.target.value;\r\n        });\r\n        document.getElementById('channelLayoutCheck').addEventListener('change', e => {\r\n            audioMotion.channelLayout = e.target.checked ? 'dual-combined' : 'single';\r\n        });\r\n        document.getElementById('frequencyScaleCheck').addEventListener('change', e => {\r\n            audioMotion.frequencyScale = e.target.checked ? 'log' : 'linear';\r\n        });\r\n        document.getElementById('noteLabelsCheck').addEventListener('change', e => audioMotion.noteLabels = e.target.checked);\r\n        document.getElementById('ansiBandsCheck').addEventListener('change', e => audioMotion.ansiBands = e.target.checked);\r\n        document.getElementById('showBgColorCheck').addEventListener('change', e => audioMotion.showBgColor = e.target.checked);\r\n        document.getElementById('bgAlphaSlider').addEventListener('input', function(e) {\r\n            audioMotion.bgAlpha = parseFloat(e.target.value);\r\n            document.getElementById('bgAlphaValue').textContent = e.target.value;\r\n        });\r\n    <\/script>\r\n","protected":false},"excerpt":{"rendered":"<p>Demo MotionAnalyzer<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-11219","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages\/11219","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/spgoo.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=11219"}],"version-history":[{"count":1,"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages\/11219\/revisions"}],"predecessor-version":[{"id":11220,"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages\/11219\/revisions\/11220"}],"wp:attachment":[{"href":"https:\/\/spgoo.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=11219"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}