{"id":2264,"date":"2024-10-02T08:51:30","date_gmt":"2024-10-02T06:51:30","guid":{"rendered":"https:\/\/frapeor.org\/?page_id=2264"},"modified":"2024-10-02T08:56:33","modified_gmt":"2024-10-02T06:56:33","slug":"scenarios-possibles","status":"publish","type":"page","link":"https:\/\/frapeor.org\/?page_id=2264","title":{"rendered":"Sc\u00e9narios possibles"},"content":{"rendered":"\n<link rel='stylesheet' id='64-css'  href='https:\/\/frapeor.org\/wp-content\/uploads\/winp-css-js\/64.css?ver=1728035676' type='text\/css' media='all' \/>\n\n\n <script type=\"text\/javascript\" src=\"https:\/\/rawgit.com\/kimmobrunfeldt\/progressbar.js\/1.0.0\/dist\/progressbar.js\"><\/script>\r\n<style>\r\nlabel {font-size:14px;}\r\n#progress2 {\r\n    width: 200px;\r\n    height: 50px;  \/* 200px;*\/\r\n\tposition:absolute;\r\n\tleft:65%;\r\n\ttop:30%;\r\n}\r\n\r\n#progress2 > svg {\r\n    width: 100%;\r\n    display: block;\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n<h1> D\u00e9roulement de la partie<\/h1>\r\n<div id=\"zone_globale\">\r\n\t<div class=\"row\">\r\n\t\t<div class=\"col-sm-3\" style=\"text-align:center;\" >\r\n\t\t\t<div class=\"fen_arrondie\" style=\"background-color:lightgrey;border:1px solid black\">\r\n\t\t\t\t<div class=\"row\">\r\n\t\t\t\t\t<div class=\"col-sm-12\">\r\n\t\t\t\t\t\t<label style=\"color:blue;text-align:center\">Recherche sc\u00e9nario <\/label>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\t\t\t\r\n\t\t\t\t<div class=\"row\">\r\n\t\t\t\t\t<div class=\"col-sm-12\">\r\n\t\t\t\t\t\t<label>Filtre : <\/label>\r\n\t\t\t\t\t\t<input type=\"text\" id=\"input_filtre_scenarios\" style=\"width:130px\" value=\"\" >\r\n\t\t\t\t\t\t<button style=\"background-color:lightblue;\">\r\n\t\t\t\t\t\t\t<i class=\"fa-solid fa-magnifying-glass\"><\/i>\r\n\t\t\t\t\t\t<\/button>\r\n\t\t\t\t\t<\/div>\t\t\t\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"row\">\r\n\t\t\t\t\t<div class=\"col-sm-12\">\r\n\t\t\t\t\t\t<label style=\"color:blue;text-align:center\">Sc\u00e9narios disponibles<\/label>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\t\t\t\r\n\t\t\t\t<div class=\"row\">\r\n\t\t\t\t\t<div class=\"col-sm-12\">\r\n\t\t\t\t\t\t<div class=\"fen_arrondie\" id=\"liste_scenarios\" \r\n\t\t\t\t\t\t\t style=\"height:500px;background-color:lightblue;overflow: auto;\"> \r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t<\/div>\r\n\t\t<\/div>  <!-- en row principale -->\r\n\t\t<div class=\"col-sm-9 fen_arrondie\" style=\"text-align:center;border: 1px solid black;color:black\">\r\n\t\t\t<h1>Bienvenue dans ce test et merci pour votre participation<\/h1>\r\n\t\t\t<div id=\"zone_info\" class=\"row\" style=\"display:block;\">\t\r\n\t\t\t\t<h2>D\u00e9roulement de la partie<\/h2>\r\n\t\t\t\t<h3>Les \u00e9tapes<\/h3>\r\n\t\t\t\t<div style=\"text-align:left;\">\r\n\t\t\t\t<p> 1\/ S\u00e9lection du sc\u00e9nario \u00e0 votre gauche de l&#8217;\u00e9cran<\/p>\r\n\t\t\t\t<p> 2\/ Saisie de vos informations (pr\u00e9nom, sexe, age, pays d&#8217;origine)<\/p>\r\n\t\t\t\t<p> 3\/ D\u00e9marrage du jeu<\/p>\r\n\t\t\t\t<p style=\"margin:20px;\" >Plusieurs sollicitations vont vous \u00eatre propos\u00e9es\r\n\t\t\t\t<p style=\"margin:20px;\" >en alternant une p\u00e9riode d&#8217;\u00e9coute d&#8217;un \u00e9nonc\u00e9 et en vous proposant de le r\u00e9p\u00e9ter.<\/p>\r\n\t\t\t\t<p> 4\/ Fin de la partie  <\/p>\r\n\t\t\t\t<\/div>\r\n\t\t\t<\/div>\r\n\t\t\t<div id=\"zone_saisie\" class=\"row\" style=\"display:none;\">\r\n\t\t\t\t<h2>Etape 2<\/h2>\r\n\t\t\t\t<div class=\"row\">\r\n\t\t\t\t\t<h3 style=\"margin:20px;\">Saisie de vos informations (pr\u00e9nom, sexe, age, pays d&#8217;origine)<\/h3>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"row\">\r\n\t\t\t\t\t<label>Identifiant :<\/label>\r\n\t\t\t\t\t<label id=\"lbl_id\"><\/label>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"row\">\r\n\t\t\t\t\t<label>Pr\u00e9nom<\/label>\r\n\t\t\t\t\t<input type=\"text\" value=\"\" id=\"user_surname\" style=\"width:100px\" required\/>\r\n\t\t\t\t\t<label>Sexe<\/label>\r\n\t\t\t\t\t<input type=\"radio\" name=\"user_sexe\" value=\"f\" checked>M\r\n\t\t\t\t\t<input type=\"radio\" name=\"user_sexe\" value=\"m\">F\r\n\t\t\t\t\t<label>Pays d&#8217;origine<\/label>\r\n\t\t\t\t\t<input type=\"text\" value=\"\" id=\"user_paysorigine\" style=\"width:150px\" required\/>\r\n\t\t\t\t\t<label>Age<\/label>\t\t\t\t \r\n\t\t\t\t\t<input type=\"number\" value=\"\" min=\"7\" max=\"80\" id=\"user_age\" style=\"width:80px\" required \/> \r\n\t\t\t\t\t<button class=\"btn btn-submit\" onclick=\"verif_saisie()\">Poursuivre<\/button>\r\n\t\t\t\t\t<hr\/>\r\n\t\t\t\t\t<label style=\"color:green;\" id=\"lbl_scenario\"><\/label>\r\n\t\t\t\t\t<hr\/>\r\n\t\t\t\t\t<label style=\"color:green;\" id=\"lbl_commentaires\"><\/label>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<br\/><br\/><br\/>\r\n\t\t\t<\/div>\r\n\t\t\t<div id=\"scenario_intro\" class=\"row\" style=\"display:none;\">\t\r\n\t\t\t\t<h2> Un nombre de 10 \u00e9nonc\u00e9s vont vous \u00eatre propos\u00e9s.<\/h2>\r\n\t\t\t\t<h3> Chaque \u00e9nonc\u00e9 sera constitu\u00e9 d&#8217;une phase d&#8217;\u00e9coute et d&#8217;un temps pour vous permettre de r\u00e9p\u00e9ter. <\/h3>\r\n\t\t\t\t<h3> Apr\u00e9s chaque \u00e9coute, un signal vous indiquera votre tour pour vous enregistrer.<\/h3>\r\n\t\t\t\t<h3> Une fois le temps \u00e9coul\u00e9, le syst\u00e8me passera \u00e0 l&#8217;\u00e9nonc\u00e9 suivant<\/h3>\r\n\t\t\t\t<button class=\"btn btn-success\" onclick=\"avance('scenario_intro','zone_scenario');\">Poursuivre<\/button>\r\n\t\t\t\t<br\/><br\/><br\/>\r\n\t\t\t<\/div>\r\n\t\t\t<div id=\"zone_scenario\"  class=\"row\"  style=\"display:none;\">\t\r\n\t\t\t\t<div class=\"col-sm-12\">\r\n\t\t\t\t\t<div class=\"row\">\t\r\n\t\t\t\t\t\t<img decoding=\"async\"  id=\"img_ecoute\" src=\"\/wp-content\/uploads\/2024\/10\/ecoute.jpg\" \r\n\t\t\t\t\t \tstyle=\"cursor:pointer;margin:50px;width:300px;height:200px;\" onclick=\"charge_ecoute();\"\/>\r\n\t\t\t\t\t\t<img decoding=\"async\" id=\"img_a_vous\" src=\"\/wp-content\/uploads\/2024\/10\/title-1441704366.jpg\" \r\n\t\t\t\t\t\t style=\"margin:50px;width:300px;height:200px;display:none;\"  \/>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<br\/>\r\n\t\t\t\t\t<div class=\"row\" id=\"zone_boutons\">\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<div id=\"progress2\" ><\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t<\/div>\r\n\t\t\t<div id=\"zone_fin\" class=\"row\" style=\"display:none;\">\r\n\t\t\t\t<h2>Etape 4<\/h2>\r\n\t\t\t\t<h4>Fin de la partie: un grand merci encore pour votre contribution. <\/h4>\r\n\t\t\t\t<button id=\"btn_enregistrer\" onclick=\"sauvegarde_audio();\">Enregistrer<\/button>\r\n\t\t\t<\/div>\r\n\t\r\n\t\t<\/div>\r\n\t<\/div>\r\n<\/div>\r\n\r\n\r\n<script>\r\nnavigator.getUserMedia = navigator.getUserMedia||navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;    \r\n\tnavigator.getUserMedia(     \r\n\t{     \r\n   \t\taudio: true     \r\n\t},     \r\n\tfunction (e) {     \r\n   \t\/\/ success     \r\n\t},     \r\n\tfunction (e) {     \r\n   \t\/\/ error     \r\n   \tconsole.error(e);     \r\n\t});\t\r\n\t\r\n\t\r\nconst callback=function() {\r\n    \/\/alert(\"c'est fini\");\r\n\tconsole.log(index_image);\r\n\tenreg_stop_event(user_courant[\"identifiant_\"]+\"_\"+index_image);\r\n}\r\n\r\n\r\nconst verif_saisie=function() {\r\n\t\/\/ v\u00e9rification des champs saisie \r\n\tlet conti=true;\r\n\tif (document.getElementById(\"user_surname\").value.trim()==\"\") {\r\n\t\tdocument.getElementById(\"user_surname\").style.backgroundColor=\"red\";\r\n\t\tconti=false;\r\n\t}\r\n\tif (document.getElementById(\"user_paysorigine\").value.trim()==\"\") {\r\n\t\tdocument.getElementById(\"user_paysorigine\").style.backgroundColor=\"red\";\r\n\t\tconti=false;\r\n\t}\r\n\tif (document.getElementById(\"user_age\").value.trim()==\"\" ) {\r\n\t\tdocument.getElementById(\"user_age\").style.background=\"red\";\r\n\t\tconti=false;\r\n\t}\r\n\t\r\n\tif (conti) {\r\n\t\tuser_courant[\"user_\"]=document.getElementById(\"user_surname\").value.trim();\r\n\t\tlet tab_sexe=[\"M\",\"F\"];\r\n\t\tlet ind_sexe=Object.values(document.getElementsByName(\"user_sexe\")).findIndex((e)=>e.checked);\r\n\t\tuser_courant[\"sexe_\"]=tab_sexe[ind_sexe];\r\n\t\tuser_courant[\"age_\"]=document.getElementById(\"user_age\").value.trim();\r\n\t\tuser_courant[\"paysorgine_\"]=document.getElementById(\"user_paysorigine\").value.trim();\r\n\t\tuser_courant[\"identifiant_\"]=document.getElementById(\"lbl_id\").innerHTML;\r\n\t\tvar todayDate = new Date().toISOString().slice(0, 10);\r\n\t\tuser_courant[\"date_\"]=todayDate;\r\n\t\tavance('zone_saisie','scenario_intro');\t\r\n\t\treturn true;\r\n\t}\r\n\treturn false;\r\n}\r\nconst tab_zones=[\"zone_info\",\"zone_saisie\",\"scenario_intro\",\"zone_scenario\",\"zone_fin\"];\r\n\t\r\nconst avance=function(source,destination) {\r\n\ttab_zones.forEach((e)=>document.getElementById(e).style.display=\"none\");\r\n\tif (destination==\"zone_saisie\") {\r\n\t\tdocument.getElementById(\"lbl_id\").innerHTML=Math.random().toString(16).slice(2);\r\n\t}\r\n\t\r\n\tdocument.getElementById(source).style.display=\"none\";\r\n\tdocument.getElementById(destination).style.display=\"block\";\r\n}\r\n\t\r\n\t\r\n\t\t\/\/ interaction avec le frontal \r\nconst find_scenarios=function() {\r\n\tconst formattedFormData = {\tfiltre: \"\",user_courant:\"all\"};\r\n\tfetch(\"\/personnalisation\/_get_scenarios.php\", {\r\n\t\tmethod: \"POST\",\r\n\t\tmode: \"same-origin\",\r\n\t\tcredentials: \"same-origin\",\r\n\t\theaders: {\r\n\t\t\t\"Content-Type\": \"application\/json\",\r\n\t\t\t\"charset\":\"utf-8\"\r\n\t\t},\r\n\t\tbody: JSON.stringify(formattedFormData)\r\n\t})\r\n\t.then((res) => res.json())\r\n\t.then((data) => {\r\n\t\tvar liste=JSON.parse(data.detail);\r\n\t\tconsole.log(liste);\r\n\t\treactualisation_liste_scenarios(liste[\"frapeor\"],\"liste_scenarios\",\"liste mots\");\r\n\t})\r\n\t.catch((error) => console.log(error))\r\n}\r\n\r\nconst sauvegarde_enregistrement=function() {\r\n\t\/\/ appel fetch pour sauvegarde la source dans la base de donn\u00e9es \r\n\tlet message={\"Proposition\":user_courant};\r\n\tfetch(\"\/personnalisation\/save_enregistrement.php\", {\r\n\t\tmethod: \"POST\",\t\r\n\t\tmode: \"same-origin\",\r\n\t\tcredentials: \"same-origin\",\r\n\t\theaders: {\r\n\t\t  \"Content-Type\": \"application\/json\"\r\n\t\t},\r\n\t\tbody: JSON.stringify(message)\r\n\t  })\r\n\t  .then((res) => res.json())\r\n\t  .then((data) => {\r\n\t\t\t\/\/ verifier si retour est OK et recharger les propositions\r\n\t\t\traz_form();\r\n\t\t\traz_variation();\r\n\t\t})\r\n\t  .catch((error) => console.log(error))\t\r\n\t\r\n}\r\n\r\n\r\nconst reactualisation_liste_scenarios=function(liste, id_liste, libelle) {\r\n\t\/\/ raz_variation();\r\n\tvar Mots=document.getElementById(id_liste);\r\n\tMots.innerHTML = \"\";\r\n\tvar num=0;\r\n\tfor (elem_ of liste) {\r\n\t\tvar li = document.createElement(\"a\");\t\r\n\t\tli.scenario=elem_;\r\n\t\tli.setAttribute(\"class\", \"list-group list-group-item\");\r\n\t\tli.setAttribute(\"style\",\"text-decoration:none;font-size:12px;background-color:lightblue;color:blue\");\r\n\t\tli.setAttribute(\"title\",elem_.commentaires);\r\n\t\tli.appendChild(document.createTextNode(elem_.nom));\r\n\t\t\r\n\t\tli.addEventListener(\"click\", function(event) { \r\n\t\t\tlet _elem=this.scenario;\r\n\t\t\tcharge_scenarios(_elem);\r\n\t\t});\r\n\t\tli.addEventListener(\"mouseover\", function(event) { \r\n\t\t\tif (this.style.backgroundColor==\"lightblue\") {\r\n\t\t\t\tthis.style.backgroundColor=\"blue\";\r\n\t\t\t\tthis.style.color=\"white\";\r\n\t\t\t}\r\n\t\t});\r\n\t\tli.addEventListener(\"mouseleave\", function(event) {\r\n\t\t\tif (this.style.backgroundColor==\"blue\") {\r\n\t\t\t\tthis.style.color=\"blue\";\r\n\t\t\t\tthis.style.backgroundColor=\"lightblue\";\r\n\t\t\t}\r\n\t\t});\r\n\t\tMots.appendChild(li);\r\n\t\tnum+=1;\r\n\t}\r\n\t\r\n}\t\r\nlet user_courant={};\r\n\r\nconst template_boutons='<div id=\"enreg_XX\"> <button  id=\"startRecordingButton_XX\" attrib=\"XX\" style=\"height:60px;\"'+ \r\n\t\t\t\t\t'\t\tclass=\"btn deb_enreg\"><i class=\"fa-solid fa-microphone\"><\/i>'+\r\n\t\t\t\t\t'\t<\/button>'+\r\n\t  \t\t\t    '<\/div>' ;\r\n\t\t\t\t\t\/*'\t<button  id=\"stopRecordingButton_XX\" attrib=\"XX\" style=\"height:30px;\" '+\r\n\t\t\t\t\t'\t\t\tclass=\"btn stop_eng\"><i class=\"fa-solid fa-microphone-slash\"><\/i>'+\r\n\t\t\t\t\t'\t<\/button><\/div>';*\/\r\nlet sequences=[];\r\nlet index_image = 0;\r\n\/\/ -----------------------------------------\r\n\/\/ chargement du scenario dans le formulaire\r\n\/\/ -----------------------------------------\r\nconst charge_scenarios=function(scenar) {\r\n\tscenario_courant=scenar;\r\n\tuser_courant={};\r\n\tindex=0;\r\n\tsequences=[];\r\n\t\/\/document.getElementById(\"scenario_ide\").value=scenar[\"ide\"];\r\n\t\/\/document.getElementById(\"scenario_proprietaire\").value=scenar[\"proprietaire\"];\r\n\t\/\/document.getElementById(\"scenario_nom\").value=scenar[\"nom\"];\r\n\t\/\/document.getElementById(\"scenario_commentaires\").value=scenar[\"commentaires\"];\r\n\tavance(\"zone_info\",\"zone_saisie\");\r\n\tdocument.getElementById(\"lbl_commentaires\").innerHTML=scenar.commentaires;\r\n\tdocument.getElementById(\"lbl_scenario\").innerHTML=scenar.nom+ \" de \" + scenar.proprietaire;  \r\n\tuser_courant[\"scenario\"]=scenar.nom;\r\n\t\r\n\tif (scenario_courant[\"sequences\"]!=null) {\r\n\t\tscenario_courant[\"sequences\"].forEach((e)=> { \r\n\t\t\tlet url=\".\/personnalisation\/upload\/audio\/\"+ e.enonce_fichier;\r\n\t\t\tsequences.push(url)\t\t\t\r\n\t\t})\r\n\t}\r\n\t\r\n}\r\n\t\r\nconst z_btns=document.getElementById(\"zone_boutons\");\r\n\r\nconst charge_ecoute=function() {\r\n\tvar audioElement = new Audio(sequences[index_image]);\r\n\taudioElement.addEventListener('ended', (e) => {\r\n\t\tindex_image++;\r\n\t\tlet nom_file=user_courant[\"identifiant_\"]+\"_\"+ index_image;\r\n\t\t\/\/ on prepare la suite et on active l'enregistrement \r\n\t\tlet btns=template_boutons.replace(\/XX\/g,nom_file);\r\n\t\tz_btns.innerHTML= btns;\r\n\t\tdocument.getElementById(\"img_a_vous\").style.display=\"block\";\r\n\t\tdocument.getElementById(\"img_ecoute\").style.display=\"none\";\r\n\t\taffect_enreg(nom_file);\r\n\t\t\/\/ c'est l'appui sur le bouton qui met fin \u00e0 l'enrgistrement  et \u00e0 la suite\r\n\t})\r\n\taudioElement.play();\r\n\t\r\n}\r\n\r\nconst genere_image_avous=function() {\r\n\tlet img=document.createElement(\"img\");\r\n\timg.setAttribute(\"style\",\"width:400px;\");\r\n\timg.setAttribute(\"src\",\"\/wp-content\/uploads\/2024\/10\/title-1441704366.jpg\");\r\n\treturn img;\r\n}\r\nconst genere_image_listen=function() {\r\n\tlet img=document.createElement(\"img\");\r\n\timg.setAttribute(\"style\",\"width:400px;\");\r\n\timg.setAttribute(\"src\",\"\/wp-content\/uploads\/2024\/10\/ecoute.jpg\");\r\n\treturn img;\r\n}\r\n\r\n\/\/ -----------------------------------------------------------------------------------------\r\n\/\/ Gestion des enregistrements sonores \r\n\/\/ exemple adapt\u00e9 du site ci-dessous\r\n\/\/ https:\/\/www.softfluent.fr\/blog\/enregistrer-du-son-via-le-microphone-en-javascript\/\t\r\n\/\/ -----------------------------------------------------------------------------------------\r\n\r\nvar leftchannel = [];\r\nvar rightchannel = [];\r\n\r\nvar recordingLength = 0;\r\nvar volume = null;\r\nvar sampleRate = 44100;\r\n\r\nvar recorder = {};\r\nvar context = {};\r\nvar blob = {};\r\nvar mediaStream = {};\r\n\r\n\t\r\nconst affect_enreg=function(fileID) {\r\n\tlet startRecordingButton = document.getElementById(\"startRecordingButton_\"+fileID);\r\n\tstartRecordingButton.addEventListener(\"click\", function() {\r\n\t\tlet id=this.getAttribute(\"attrib\");\r\n\t\tenreg_start_event(id);\r\n\t});\r\n\t\/*let stopRecordingButton = document.getElementById(\"stopRecordingButton_\"+fileID);\r\n\tstopRecordingButton.addEventListener(\"click\", function() {\r\n\t\tlet id=this.getAttribute(\"attrib\");\r\n\t\tenreg_stop_event(id);\r\n\t}); *\/\t\r\n}\t\r\nconst enreg_stop_event=function(id) {\r\n   \/\/ stop recording\r\n\trecorder[id].disconnect(context[id].destination);\r\n\tmediaStream[id].disconnect(recorder[id]);\r\n\r\n\t\/\/ we flat the left and right channels down\r\n\t\/\/ Float32Array[] => Float32Array\r\n\tvar leftBuffer = flattenArray(leftchannel, recordingLength);\r\n\tvar rightBuffer = flattenArray(rightchannel, recordingLength);\r\n\t\/\/ we interleave both channels together\r\n\t\/\/ [left[0],right[0],left[1],right[1],...]\r\n\tvar interleaved = interleave(leftBuffer, rightBuffer);\r\n\r\n\t\/\/ we create our wav file\r\n\tvar buffer = new ArrayBuffer(44 + interleaved.length * 2);\r\n\tvar view = new DataView(buffer);\r\n\r\n\t\/\/ RIFF chunk descriptor\r\n\twriteUTFBytes(view, 0, 'RIFF');\r\n\tview.setUint32(4, 44 + interleaved.length * 2, true);\r\n\twriteUTFBytes(view, 8, 'WAVE');\r\n\t\/\/ FMT sub-chunk\r\n\twriteUTFBytes(view, 12, 'fmt ');\r\n\tview.setUint32(16, 16, true); \/\/ chunkSize\r\n\tview.setUint16(20, 1, true); \/\/ wFormatTag\r\n\tview.setUint16(22, 2, true); \/\/ wChannels: stereo (2 channels)\r\n\tview.setUint32(24, sampleRate, true); \/\/ dwSamplesPerSec\r\n\tview.setUint32(28, sampleRate * 4, true); \/\/ dwAvgBytesPerSec\r\n\tview.setUint16(32, 4, true); \/\/ wBlockAlign\r\n\tview.setUint16(34, 16, true); \/\/ wBitsPerSample\r\n\t\/\/ data sub-chunk\r\n\twriteUTFBytes(view, 36, 'data');\r\n\tview.setUint32(40, interleaved.length * 2, true);\r\n\r\n\t\/\/ write the PCM samples\r\n\tvar index = 44;\r\n\tvar volume = 1;\r\n\tfor (var i = 0; i < interleaved.length; i++) {\r\n\t\tview.setInt16(index, interleaved[i] * (0x7FFF * volume), true);\r\n\t\tindex += 2;\r\n\t}\r\n\r\n\t\/\/ our final blob\r\n\tblob[id] = new Blob([view], { type: 'audio\/wav' });\r\n\t\/\/ ------------------------------------\r\n\t\/\/ fin d'enregistrement \r\n\t\/\/ ------------------------------------\r\n\t\/\/ on supprime les boutons d'enregistrement \r\n\tdocument.getElementById(\"enreg_\"+id).remove();\r\n\tconsole.log(\"enreg_stop_event=>\", index_image);\r\n\t\r\n\tdocument.getElementById(\"img_a_vous\").style.display=\"none\";\r\n\tdocument.getElementById(\"img_ecoute\").style.display=\"block\";\r\n\tdocument.getElementById(\"progress2\").innerHTML=\"\";\r\n\tif (index_image==sequences.length) {\r\n\t\tavance('zone_scenario','zone_fin');\r\n\t\treturn; \r\n\t}\r\n\t\r\n}\r\n\r\nconst enreg_start_event=function(id) {\t\r\n   \/\/ Initialize recorder\r\n\/*   var bar = new ProgressBar.SemiCircle(\"#progress2\", {\r\n    strokeWidth: 6,\r\n    easing: 'easeInOut',\r\n    duration: 3400,\r\n    color: 'blue',\r\n    trailColor: '#eee',\r\n    trailWidth: 1,\r\n    svgStyle: null\r\n  });*\/\r\n\t\r\n\tvar bar = new ProgressBar.Line(\"#progress2\", {\r\n  strokeWidth: 4,\r\n  easing: 'easeInOut',\r\n  duration: 2400,\r\n  color: 'blue',\r\n  trailColor: '#eee',\r\n  trailWidth: 1,\r\n  svgStyle: {width: '100%', height: '100%'}\r\n});\r\n\r\n\t\r\n\t\r\n\tbar.animate(1,'',callback);\t\r\n   navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;\r\n\tleftchannel = [];\r\n\trightchannel = [];\r\n   navigator.getUserMedia(\r\n   {\r\n     audio: true\r\n   },\r\n   function (e) {\r\n\t  console.log(e);\r\n      console.log(\"user consent\");\r\n      \/\/ creates the audio context\r\n      window.AudioContext = window.AudioContext || window.webkitAudioContext;\r\n      context[id] = new AudioContext();\r\n      \/\/ creates an audio node from the microphone incoming stream\r\n      mediaStream[id] = context[id].createMediaStreamSource(e);\r\n      \/\/ https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/AudioContext\/createScriptProcessor\r\n      \/\/ bufferSize: the onaudioprocess event is called when the buffer is full\r\n      var bufferSize = 2048;\r\n      var numberOfInputChannels = 2;\r\n      var numberOfOutputChannels = 2;\r\n      if (context[id].createScriptProcessor) {\r\n          recorder[id] = context[id].createScriptProcessor(bufferSize, numberOfInputChannels, numberOfOutputChannels);\r\n      } else {\r\n          recorder[id] = context[id].createJavaScriptNode(bufferSize, numberOfInputChannels, numberOfOutputChannels);\r\n      }\r\n      recorder[id].onaudioprocess = function (e) {\r\n      \tleftchannel.push(new Float32Array(e.inputBuffer.getChannelData(0)));\r\n      \trightchannel.push(new Float32Array(e.inputBuffer.getChannelData(1)));\r\n      \trecordingLength += bufferSize;\r\n      }\r\n      \/\/ we connect the recorder\r\n      mediaStream[id].connect(recorder[id]);\r\n      recorder[id].connect(context[id].destination);\r\n    },\r\n    function (e) {\r\n      console.error(e);\r\n    });\r\n}\r\n\r\n\r\n\/\/ balayer l'ensemble des fichiers audio avec leur chaine de caract\u00e8res \r\nconst sauvegarde_audio=function() {\r\n\tsauvegarde_enregistrement();\r\n\tObject.keys(blob).forEach((e)=> {\r\n\t\tuploadAudio( blob[e], e );\r\n\t});\r\n\tavance('zone_fin','zone_info');\r\n}\r\n\r\n\/\/ ------------------------------------------------------------------------------\r\n\/\/ r\u00e9f\u00e9rence et adaptation \t\r\n\/\/ https:\/\/stackoverflow.com\/questions\/13333378\/how-can-javascript-upload-a-blob\r\n\/\/ ------------------------------------------------------------------------------\r\nfunction uploadAudio( blob, filename ) {\r\n  var reader = new FileReader();\r\n  reader.onload = function(event){\r\n\tvar fd = {};\r\n    fd[\"fname\"] = filename;\r\n    fd[\"data\"] = event.target.result;\r\n    jQuery.ajax({\r\n      type: 'POST',\r\n      url: '\/personnalisation\/upload_enregistrement_scenario.php',\r\n      data: fd,\r\n      dataType: 'text'\r\n    }).done(function(data) {\r\n        console.log(data);\r\n    });\r\n  };\r\n  reader.readAsDataURL(blob, filename);\r\n}\r\n\t\r\nfunction flattenArray(channelBuffer, recordingLength) {\r\n\t\tvar result = new Float32Array(recordingLength);\r\n\t\tvar offset = 0;\r\n\t\tfor (var i = 0; i < channelBuffer.length; i++) {\r\n\t\t\tvar buffer = channelBuffer[i];\r\n\t\t\tresult.set(buffer, offset);\r\n\t\t\toffset += buffer.length;\r\n\t\t}\r\n\t\treturn result;\r\n}\r\n\r\n\tfunction interleave(leftChannel, rightChannel) {\r\n\t\tvar length = leftChannel.length + rightChannel.length;\r\n\t\tvar result = new Float32Array(length);\r\n\r\n\t\tvar inputIndex = 0;\r\n\r\n\t\tfor (var index = 0; index < length;) {\r\n\t\t\tresult[index++] = leftChannel[inputIndex];\r\n\t\t\tresult[index++] = rightChannel[inputIndex];\r\n\t\t\tinputIndex++;\r\n\t\t}\r\n\t\treturn result;\r\n\t}\r\n\r\n\tfunction writeUTFBytes(view, offset, string) {\r\n\t\tfor (var i = 0; i < string.length; i++) {\r\n\t\t\tview.setUint8(offset + i, string.charCodeAt(i));\r\n\t\t}\r\n\t}\t\r\n\r\n\r\n\r\n\r\n\r\ndocument.addEventListener(\"DOMContentLoaded\", function(event) {\r\n\tfind_scenarios();\r\n});\r\n\t\r\n\t\r\n<\/script>\r\n\r\n\r\n\r\n\r\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"_links":{"self":[{"href":"https:\/\/frapeor.org\/index.php?rest_route=\/wp\/v2\/pages\/2264"}],"collection":[{"href":"https:\/\/frapeor.org\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/frapeor.org\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/frapeor.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frapeor.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2264"}],"version-history":[{"count":3,"href":"https:\/\/frapeor.org\/index.php?rest_route=\/wp\/v2\/pages\/2264\/revisions"}],"predecessor-version":[{"id":2271,"href":"https:\/\/frapeor.org\/index.php?rest_route=\/wp\/v2\/pages\/2264\/revisions\/2271"}],"wp:attachment":[{"href":"https:\/\/frapeor.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2264"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}