{"id":6630,"date":"2025-05-24T18:50:41","date_gmt":"2025-05-24T16:50:41","guid":{"rendered":"https:\/\/spgoo.org\/?page_id=6630"},"modified":"2025-06-03T10:35:22","modified_gmt":"2025-06-03T08:35:22","slug":"frapeor-tools","status":"publish","type":"page","link":"https:\/\/spgoo.org\/?page_id=6630","title":{"rendered":"Frapeor tools"},"content":{"rendered":"\n<h2 class=\"wp-block-heading has-text-align-center\">RePhon-IA &#8212; Tools  \/\/ 2025 <\/h2>\n\n\n\n<link rel='stylesheet' id='4485-css'  href='https:\/\/spgoo.org\/wp-content\/uploads\/winp-css-js\/4485.css?ver=1747039442' type='text\/css' media='all' \/>\n\n\n\n<p>Mise au point des outils de gestion et de comparaison d&#8217;enregistrements.<\/p>\n\n\n<script src=\"\/personnalisation\/frapeor\/wavesurfer.min.js\"><\/script>\r\n<script src=\"\/personnalisation\/frapeor\/plugins\/regions.min.js\"><\/script>\r\n<script src=\"\/personnalisation\/frapeor\/plugins\/timeline.min.js\"><\/script>\r\n<script src=\"\/personnalisation\/frapeor\/plugins\/spectrogram.min.js\"><\/script>\r\n<!--  lien pour les souirces de wavesurfer   https:\/\/app.unpkg.com\/wavesurfer.js@7.9.5 -->\r\n<style>\r\n\tlabel {\r\n\t\tfont-size:12px;\r\n\t}\t\r\n\t\r\n<\/style>\r\n\r\n<p>\r\n\tCette interface vous permet d&#8217;\u00e9couter l&#8217;enregistrement r\u00e9f\u00e9rence et l&#8217;enregistrement de l&#8217;apprenante (\u00e9tudiante Japonaise). L&#8217;objectif est de rep\u00e8rer les \u00e9carts et et les erreurs commises pour les marquer et ensuite proposer une rem\u00e9diation pour corriger ces erreurs . Les expressions ont \u00e9t\u00e9 choisies pour leurs difficult\u00e9s pour des apprenants ayant le japonais en langue maternelle. L&#8217;approche comparative (graphe) a \u00e9t\u00e9 extraite et adapt\u00e9e du site https:\/\/github.com\/QED0711\/audio_analyzer \r\n<\/p>\r\n<h3 style=\"color:#5cb85c;text-align:center;\" >Enonc\u00e9 1 &#8212; Un grand vent souffle<\/h3>\r\n<div style=\"display:flex;margin:-10px; width:1100px;\">\r\n\t<div id=\"un\" style=\"width:550px;border-style:inset;border-width: 3px; background:grey;\">\r\n\t\t<p style=\"text-align:center;color:#5cb85c\">Locuteur : IA-alloy<\/p>\r\n\t\t<div id=\"waveform_ref1\" style=\"width:540px; height:360px;\" ><\/div>\r\n\t\t<p style=\"display:flex;justify-content:space-evenly;\">\r\n\t\t  <label >\r\n\t\t\t<input type=\"radio\" name=\"MOD_ref1\" id=\"mel\" checked \/>\r\n\t\t\tmel\r\n\t\t  <\/label>\r\n\t\t  <label>\r\n\t\t\t<input type=\"radio\" name=\"MOD_ref1\" id=\"linear\"  \/>\r\n\t\t\tlinear\r\n\t\t  <\/label>\r\n\t\t  <label>\r\n\t\t\t<input type=\"radio\" name=\"MOD_ref1\" id=\"logarithmic\" \/>\r\n\t\t\tlogarithmic\r\n\t\t  <\/label>\r\n\t\t  <label>\r\n\t\t\t<input type=\"radio\" name=\"MOD_ref1\" id=\"bark\" \/>\r\n\t\t\tbark\r\n\t\t  <\/label>\r\n\t\t  <label>\r\n\t\t\t<input type=\"radio\" name=\"MOD_ref1\" id=\"erb\" \/>\r\n\t\t\terb\r\n\t\t  <\/label>\r\n\t\t<\/p>\r\n\t<\/div>\r\n\t<div id=\"deux\" style=\"width:550px;border-style:inset;border-width: 3px;background:gray;\">\r\n\t\t<p style=\"text-align:center;color:#5cb85c\">Locutrice : Hanna<\/p>\r\n\t\t<div id=\"waveform_ref1_app1\" style=\"width:540px; height:360px;\" ><\/div>\r\n\t\t<p style=\"display:flex;justify-content:space-evenly;\">\r\n\t\t  <label>\r\n\t\t\t<input type=\"radio\" name=\"mode_ref1_app1\" id=\"mel_2\" checked \/>\r\n\t\t\tmel\r\n\t\t  <\/label>\r\n\t\t  <label>\r\n\t\t\t<input type=\"radio\" name=\"mode_ref1_app1\" id=\"linear_2\"  \/>\r\n\t\t\tlinear\r\n\t\t  <\/label>\r\n\t\t  <label>\r\n\t\t\t<input type=\"radio\" name=\"mode_ref1_app1\" id=\"logarithmic_2\" \/>\r\n\t\t\tlogarithmic\r\n\t\t  <\/label>\r\n\t\t  <label>\r\n\t\t\t<input type=\"radio\" name=\"mode_ref1_app1\" id=\"bark_2\" \/>\r\n\t\t\tbark\r\n\t\t  <\/label>\r\n\t\t  <label>\r\n\t\t\t<input type=\"radio\" name=\"mode_ref1_app1\" id=\"erb_2\" \/>\r\n\t\t\terb\r\n\t\t  <\/label>\r\n\t\t<\/p>\r\n\t<\/div>\r\n<\/div>\r\n<div style=\"margin:-4px;width:1100px;text-align:center;\">\r\n\t<button class=\"btn btn-success\" onclick=\"affiche_graphique_supp(1);\" style=\"margin:10px;\" >Graphiques suppl\u00e9mentaires<\/button>\r\n\t<div id=\"graphique_supp_1\" style=\"display:none;margin:-4px;width:1100px;\">\r\n\t\t<div id=\"freq_un\" style=\"width:550px;border-style:inset;border-width: 3px; background:grey;text-align:center;\">\r\n\t\t\t<img decoding=\"async\" src=\"\/personnalisation\/frapeor\/ref1_alloy.png\" style=\"width:520px;margin:10px;\" \/>\r\n\t\t<\/div>\r\n\t\t<div id=\"freq_deux\" style=\"width:550px;border-style:inset;border-width: 3px; background:grey;text-align:center;\">\r\n\t\t\t<img decoding=\"async\" src=\"\/personnalisation\/frapeor\/hanna_ref1.png\"  style=\"width:520px;margin:10px;\" \/>\r\n\t\t<\/div>\r\n\t<\/div>\r\n<\/div>\r\n\t\r\n<div style=\"margin:-4px;width:1100px;text-align:center;\">\r\n\t<button class=\"btn btn-success\"  onclick=\"affiche_graphique_difference(1);\" style=\"margin:10px;\" >Diff\u00e9rence entre les graphiques<\/button>\r\n\t<div id=\"freq_diff_1\" style=\"width:1100px;border-style:inset;border-width: 3px; background:grey;text-align:center;display:none\">\r\n\t\t<img decoding=\"async\" src=\"\/personnalisation\/frapeor\/diff_ref1.png\"  style=\"width:1050px;margin:10px;\" \/>\r\n\t<\/div>\r\n<\/div>\r\n<hr\/> \r\n\r\n<h3 style=\"color:#5cb85c;text-align:center;\">Enonc\u00e9 7 &#8212; Trois grands arbres tombent<\/h3>\r\n<div style=\"display:flex;margin:-10px;width:1100px;\">\r\n\t<div style=\"width:550px;border-style:inset;border-width: 3px; background:grey;\">\r\n\t\t<p style=\"text-align:center;color:#5cb85c\">Locuteur : IA-alloy<\/p>\r\n\t\t<div id=\"waveform_ref7\" style=\"width:540px; height:360px;\" ><\/div>\r\n\t\t<p style=\"display:flex;justify-content:space-evenly;\">\r\n\t\t  <label>\r\n\t\t\t<input type=\"radio\" name=\"MOD_ref7\" id=\"mel\" checked \/>\r\n\t\t\tmel\r\n\t\t  <\/label>\r\n\t\t  <label>\r\n\t\t\t<input type=\"radio\" name=\"MOD_ref7\" id=\"linear\"  \/>\r\n\t\t\tlinear\r\n\t\t  <\/label>\r\n\t\t  <label>\r\n\t\t\t<input type=\"radio\" name=\"MOD_ref7\" id=\"logarithmic\" \/>\r\n\t\t\tlogarithmic\r\n\t\t  <\/label>\r\n\t\t  <label>\r\n\t\t\t<input type=\"radio\" name=\"MOD_ref7\" id=\"bark\" \/>\r\n\t\t\tbark\r\n\t\t  <\/label>\r\n\t\t  <label>\r\n\t\t\t<input type=\"radio\" name=\"MOD_ref7\" id=\"erb\" \/>\r\n\t\t\terb\r\n\t\t  <\/label>\r\n\t\t<\/p>\r\n\t<\/div>\r\n\t<div style=\"width:550px;border-style:inset;border-width: 3px;background:gray;\">\r\n\t\t<p style=\"text-align:center;color:#5cb85c\">Locutrice : Hanna<\/p>\r\n\t\t<div id=\"waveform_ref7_app1\" style=\"width:540px; height:360px;\" ><\/div>\r\n\t\t<p style=\"display:flex;justify-content:space-evenly;\">\r\n\t\t  <label>\r\n\t\t\t<input type=\"radio\" name=\"mode_ref7_app1\" id=\"mel_2\" checked \/>\r\n\t\t\tmel\r\n\t\t  <\/label>\r\n\t\t  <label>\r\n\t\t\t<input type=\"radio\" name=\"mode_ref7_app1\" id=\"linear_2\"  \/>\r\n\t\t\tlinear\r\n\t\t  <\/label>\r\n\t\t  <label>\r\n\t\t\t<input type=\"radio\" name=\"mode_ref7_app1\" id=\"logarithmic_2\" \/>\r\n\t\t\tlogarithmic\r\n\t\t  <\/label>\r\n\t\t  <label>\r\n\t\t\t<input type=\"radio\" name=\"mode_ref7_app1\" id=\"bark_2\" \/>\r\n\t\t\tbark\r\n\t\t  <\/label>\r\n\t\t  <label>\r\n\t\t\t<input type=\"radio\" name=\"mode_ref7_app1\" id=\"erb_2\" \/>\r\n\t\t\terb\r\n\t\t  <\/label>\r\n\t\t<\/p>\r\n\t<\/div>\r\n<\/div>\r\n<div style=\"margin:-4px;width:1100px;text-align:center;\">\r\n\t<button class=\"btn btn-success\" onclick=\"affiche_graphique_supp(2);\" style=\"margin:10px;\" >Graphiques suppl\u00e9mentaires<\/button>\r\n\t<div id=\"graphique_supp_2\" style=\"display:none;margin:-4px;width:1100px;\">\r\n\t\t<div style=\"width:550px;border-style:inset;border-width: 3px; background:grey;text-align:center;\">\r\n\t\t\t<img decoding=\"async\" src=\"\/personnalisation\/frapeor\/ref7_alloy.png\" style=\"width:520px;margin:10px;\" \/>\r\n\t\t<\/div>\r\n\t\t<div style=\"width:550px;border-style:inset;border-width: 3px; background:grey;text-align:center;\">\r\n\t\t\t<img decoding=\"async\" src=\"\/personnalisation\/frapeor\/hanna_ref7.png\"  style=\"width:520px;margin:10px;\" \/>\r\n\t\t<\/div>\r\n\t<\/div>\r\n<\/div>\r\n\t\r\n<div style=\"margin:-4px;width:1100px;text-align:center;\">\r\n\t<button class=\"btn btn-success\"  onclick=\"affiche_graphique_difference(2);\" style=\"margin:10px;\" >Diff\u00e9rence entre les graphiques<\/button>\r\n\t<div id=\"freq_diff_2\" style=\"width:1100px;border-style:inset;border-width: 3px; background:grey;text-align:center;display:none\">\r\n\t\t<img decoding=\"async\" src=\"\/personnalisation\/frapeor\/diff_ref7.png\"  style=\"width:1050px;margin:10px;\" \/>\r\n\t<\/div>\r\n<\/div>\r\n\r\n<script>\r\n\t\r\nconst affiche_graphique_supp=function(numero) {\r\n\tif (document.getElementById(\"graphique_supp_\"+numero).style.display==\"none\") {\r\n\t\tdocument.getElementById(\"graphique_supp_\"+numero).style.display=\"flex\";\r\n\t} else {\r\n\t\tdocument.getElementById(\"graphique_supp_\"+numero).style.display=\"none\";\r\n\t}\r\n\t\r\n}\r\n\t\r\nconst affiche_graphique_difference=function(numero){\r\n\tif (document.getElementById(\"freq_diff_\"+numero).style.display==\"none\") {\r\n\t\tdocument.getElementById(\"freq_diff_\"+numero).style.display=\"block\";\r\n\t} else {\r\n\t\tdocument.getElementById(\"freq_diff_\"+numero).style.display=\"none\";\r\n\t}\r\n}\t\r\n\t\r\n\t\r\n\/\/ Give regions a random color when they are created\r\nconst random = (min, max) => Math.random() * (max - min) + min\r\nconst randomColor = () => `rgba(${random(0, 255)}, ${random(0, 255)}, ${random(0, 255)}, 0.2)`\r\n\r\n\/\/ Regions plugin\r\n\/\/const regions = RegionsPlugin.create()\r\nconst regions_ref1 = WaveSurfer.Regions.create(); \r\nconst regions_ref1_app1 = WaveSurfer.Regions.create(); \r\nconst regions_ref7 = WaveSurfer.Regions.create(); \r\nconst regions_ref7_app1 = WaveSurfer.Regions.create(); \r\n\r\n\t\r\nconst bottomTimeline_1 = WaveSurfer.Timeline.create({\r\n  height: 15,\r\n  timeInterval: 0.1,\r\n  primaryLabelInterval: 0.2,\r\n  style: {\r\n    fontSize: '12px',\r\n    color: '#6A3274',\r\n  },\r\n})\r\nconst bottomTimeline_2 = WaveSurfer.Timeline.create({\r\n  height: 15,\r\n  timeInterval: 0.1,\r\n  primaryLabelInterval: 0.2,\r\n  style: {\r\n    fontSize: '12px',\r\n    color: '#6A3274',\r\n  },\r\n})\t\r\nconst bottomTimeline_3 = WaveSurfer.Timeline.create({\r\n  height: 15,\r\n  timeInterval: 0.2,\r\n  primaryLabelInterval: 1,\r\n  style: {\r\n    fontSize: '12px',\r\n    color: '#6A3274',\r\n  },\r\n})\r\nconst bottomTimeline_4 = WaveSurfer.Timeline.create({\r\n  height: 15,\r\n  timeInterval: 0.2,\r\n  primaryLabelInterval: 1,\r\n  style: {\r\n    fontSize: '12px',\r\n    color: '#6A3274',\r\n  },\r\n})\t\r\n\t\r\n\r\n\/\/ Create a WaveSurfer instance\r\nconst ws_ref1 = WaveSurfer.create({\r\n  height: 80,\r\n  minPxPerSec: 1,\r\n  barWidth: 2,\r\n  barRadius: 2,\r\n  barGap: 1,\r\n  container: '#waveform_ref1',\r\n  waveColor: 'rgb(200, 0, 200)',\r\n  progressColor: 'rgb(100, 0, 100)',\r\n  mediaControls: true,\r\n  interact: false,\r\n  url: '\/personnalisation\/frapeor\/tmpreqv8p6t_alloy_ref1.mp3', \/\/ tmph3pi8bq9_alloy_ref1.mp3',\r\n  plugins: [regions_ref1,bottomTimeline_1],\r\n})\r\n\r\nconst ws_ref1_app1 = WaveSurfer.create({\r\n  height: 80,\r\n\t  barWidth: 2,\r\n  barRadius: 2,\r\n  barGap: 1,\r\n  container: '#waveform_ref1_app1',\r\n  waveColor: 'yellow', \/\/''rgb(100, 150, 200)',\r\n  mediaControls: true,\r\n  interact: false,\t\r\n  progressColor: 'rgb(100, 0, 100)',\r\n  url: '\/personnalisation\/frapeor\/b0d9119ae143f_1.mp3',\r\n  plugins: [regions_ref1_app1,bottomTimeline_2],\r\n})\r\n\r\nconst ws_ref7 = WaveSurfer.create({\r\nheight: 80,\t\r\n  container: '#waveform_ref7',\r\n  waveColor: 'rgb(200, 0, 200)',\r\n  mediaControls: true,\r\n  interact: false,\r\n\t\r\n  progressColor: 'rgb(100, 0, 100)',\r\n  url: '\/personnalisation\/frapeor\/tmpx49nlkh9_alloy_ref7.mp3',\r\n  plugins: [regions_ref7,bottomTimeline_3],\r\n})\r\n\r\nconst ws_ref7_app1 = WaveSurfer.create({\r\n\theight: 80,\r\n  container: '#waveform_ref7_app1',\r\n  waveColor: 'yellow', \/\/ 'rgb(100, 150, 200)',\r\n  mediaControls: true,\r\n  interact: false,\r\n\t\r\n  progressColor: 'rgb(100, 0, 100)',\r\n  url: '\/personnalisation\/frapeor\/b0d9119ae143f_7.mp3',\r\n  plugins: [regions_ref7_app1,bottomTimeline_4],\r\n})\r\n\r\n\r\n\r\nconst creation_spectro=function(mode) {\r\n  console.log(\"retrace spectro\",mode);\r\n  return WaveSurfer.Spectrogram.create({\r\n    labels: true,\r\n\tlabelsColor :\"yellow\",  \r\n    height: 200,\r\n    splitChannels: false,\r\n    \/\/scale: 'mel', \/\/ or 'linear', 'logarithmic', 'bark', 'erb'\r\n    scale: mode,\/\/ 'logarithmic', 'bark', 'erb'\r\n    frequencyMax: 8000,\r\n    frequencyMin: 0,\r\n    fftSamples: 512,\r\n    labelsBackground: 'rgba(25, 25, 25, 0.1)',\r\n\t windowFunc :\"lanczoz\", \/\/\"bartlett\", bartletHann, cosine, blackman, gauss, hamming, hann, lanczoz, rectangular triangular\r\n  });\r\n}\r\n\r\nvar spectro_ref1=null; \r\nvar spectro_ref1_app1=null; \r\nvar spectro_ref7=null; \r\nvar spectro_ref7_app1=null; \r\n\t\r\n\/\/ Initialize the Spectrogram plugin\r\n\r\nws_ref1.registerPlugin(\r\n\tspectro_ref1=creation_spectro(\"mel\")\r\n)\r\nws_ref1_app1.registerPlugin(\r\n\tspectro_ref1_app1=creation_spectro(\"mel\")\r\n)\r\nws_ref7.registerPlugin(\r\n\tspectro_ref7=creation_spectro(\"mel\")\r\n)\r\nws_ref7_app1.registerPlugin(\r\n\tspectro_ref7_app1=creation_spectro(\"mel\")\r\n)\r\n\r\n\r\n\/\/ --------------------------------------------------------------\r\n\/\/ Create some regions at specific time ranges\r\n\/\/ avec en param\u00e8tres les syllabes a positionner sur le graphe\r\n\/\/ --------------------------------------------------------------\r\nconst ajoute_regions=function(WS, Regions, syllabes=null) {\r\n  const duration=WS.getDuration(); \/\/ Duree total du signal\r\n  let debut=0;\r\n  const pas=2.0\/(syllabes.length+2);\r\n  console.log(duration,pas, syllabes);\r\n  let i=1;\r\n  WS.on('decode', ()=> {\r\n    syllabes.forEach(syll => {\r\n\t\tconst p=document.createElement(\"span\");\r\n        p.innerHTML=syll;\r\n        p.setAttribute(\"style\",\"font-size:10px;color:lightgreen;margin:5px;\");\r\n        Regions.addRegion({\r\n          start: debut,\r\n          end: debut+pas,\r\n          content: p,\r\n          color: randomColor(),\r\n          drag: true,\r\n          resize: true,\r\n        })\r\n        debut=debut+pas;\r\n        i++;\r\n        \r\n    })\r\n  })\r\n}\r\n\r\n\t\r\n\/*regions.enableDragSelection({\r\n  color: 'rgba(255, 0, 0, 0.1)',\r\n})\r\nregions.on('region-updated', (region) => {\r\n  console.log('Updated region', region)\r\n})*\/\r\n\r\n\/*regions2.enableDragSelection({\r\n  color: 'rgba(255, 0, 0, 0.1)',\r\n})\r\nregions2.on('region-updated', (region) => {\r\n  console.log('Updated region', region)\r\n})*\/\r\n\r\n\/\/ Loop a region on click\r\nlet loop = false\r\n\r\n\/\/ ----------------------------------------------------------------\r\n\/\/ Evenementiel pour la changement de type de spectrogramme\r\n\/\/ ----------------------------------------------------------------\r\ndocument.querySelectorAll('[name^=\"mode_ref1_app1\"]').forEach(elem=> \r\n  elem.addEventListener(\"click\",function(e) {\r\n      ws_ref1_app1.plugins.splice(1,1);\r\n      spectro_ref1_app1.destroy();\r\n      const mode=e.srcElement.id.split(\"_\")[0];\r\n      ws_ref1_app1.registerPlugin(\r\n          spectro_ref1_app1=creation_spectro(mode)\r\n      )\r\n      \/\/ important se zoom car il reconstruit et affiche la diagramme \r\n      ws_ref1_app1.zoom(1);\r\n  })\r\n) \r\n\r\ndocument.querySelectorAll('[name^=\"MOD_ref1\"]').forEach(elem2=>\r\nelem2.addEventListener(\"click\",function(e) {\r\n\t  ws_ref1.plugins.splice(1,1);\r\n\t  spectro_ref1.destroy();\r\n\t  const mode=e.srcElement.id;\r\n\t  ws_ref1.registerPlugin(\r\n        \tspectro_ref1=creation_spectro(mode)\r\n\t  )\r\n\t  \/\/ important se zoom car il reconstruit et affiche la diagramme \r\n    ws_ref1.zoom(1);\r\n  })\r\n)\r\ndocument.querySelectorAll('[name^=\"mode_ref7_app1\"]').forEach(elem=> \r\n  elem.addEventListener(\"click\",function(e) {\r\n      ws_ref7_app1.plugins.splice(1,1);\r\n      spectro_ref7_app1.destroy();\r\n      const mode=e.srcElement.id.split(\"_\")[0];\r\n      ws_ref7_app1.registerPlugin(\r\n          spectro_ref7_app1=creation_spectro(mode)\r\n      )\r\n      \/\/ important se zoom car il reconstruit et affiche la diagramme \r\n      ws_ref7_app1.zoom(1);\r\n  })\r\n) \r\n\r\ndocument.querySelectorAll('[name^=\"MOD_ref7\"]').forEach(elem2=>\r\nelem2.addEventListener(\"click\",function(e) {\r\n\t  ws_ref7.plugins.splice(1,1);\r\n\t  spectro_ref7.destroy();\r\n\t  const mode=e.srcElement.id;\r\n\t  ws_ref7.registerPlugin(\r\n        \tspectro_ref7=creation_spectro(mode)\r\n\t  )\r\n\t  \/\/ important se zoom car il reconstruit et affiche la diagramme \r\n      ws_ref7.zoom(1);\r\n  })\r\n)\r\n\r\nconst active_region=function(WS,Regions){\r\n{\r\n  let activeRegion = null\r\n  Regions.on('region-in', (region) => {\r\n    console.log('region-in', region)\r\n    activeRegion = region\r\n  })\r\n  Regions.on('region-out', (region) => {\r\n    console.log('region-out', region)\r\n    if (activeRegion === region) {\r\n      if (loop) {\r\n        region.play()\r\n      } else {\r\n        activeRegion = null\r\n      }\r\n    }\r\n  })\r\n  Regions.on('region-clicked', (region, e) => {\r\n    e.stopPropagation() \/\/ prevent triggering a click on the waveform\r\n    activeRegion = region\r\n    region.play(true)\r\n    region.setOptions({ color: randomColor() })\r\n  })\r\n  \/\/ Reset the active region when the user clicks anywhere in the waveform\r\n  WS.on('interaction', () => {\r\n    activeRegion = null\r\n  })\r\n}\r\n}\r\n\r\n\/\/ a charger quand le doucment est ready \r\ndocument.addEventListener(\"DOMContentLoaded\",function(event){\r\n\tajoute_regions(ws_ref1, regions_ref1,[\"un\",\"grand\",\"vent\",\"souffle\"]);\r\n\tajoute_regions(ws_ref1_app1, regions_ref1_app1,[\"un\",\"grand\",\"vent\",\"souffle\"]);\r\n\tajoute_regions(ws_ref7, regions_ref7,[\"trois\",\"grands\",\"arbres\",\"tombent\"]);\r\n\tajoute_regions(ws_ref7_app1, regions_ref7_app1,[\"trois\",\"grands\",\"arbres\",\"tombent\"]);\r\n\t\r\n\tactive_region(ws_ref1,regions_ref1);\r\n\tactive_region(ws_ref1_app1,regions_ref1_app1);\r\n\tactive_region(ws_ref7,regions_ref7);\r\n\tactive_region(ws_ref7_app1,regions_ref7_app1);\r\n\tconsole.log(ws_ref1.getDuration());\r\n});\t\r\n\r\n<\/script>\r\n\r\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>En savoir plus sur la mise en oeuvre<\/summary>\n<p>Utilisation de la biblioth\u00e8que <a href=\"https:\/\/wavesurfer.xyz\/\">Wavesufer<\/a> et des enregistrements produits par Jean Romo et  l&#8217;IA sur Hugging Face.<\/p>\n\n\n\n<p>Adaptation de l&#8217;appel aux diff\u00e9rents constructeurs dans un contexte Javascript \u00e0 partir de WaveSurfer : utilisation des plugins Spectrogramm, Timeline, Regions pour effectuer les diff\u00e9rents affichages.  Modification des codes exemples pour un affichage multiple. <\/p>\n\n\n\n<p>Analyse et comparaison de fichiers sonores : sites utilis\u00e9s <\/p>\n\n\n\n<p><a href=\"https:\/\/topcoder.com\/thrive\/articles\/audio-data-analysis-using-python\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/topcoder.com\/thrive\/articles\/audio-data-analysis-using-python<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/geeksforgeeks.org\/plotting-various-sounds-on-graphs-using-python-and-matplotlib\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/geeksforgeeks.org\/plotting-various-sounds-on-graphs-using-python-and-matplotlib<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/pysdr.org\/content\/frequency_domain.html\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/pysdr.org\/content\/frequency_domain.html<\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/github.com\/andrejanesic\/Python-Sound-Wave-Analysis\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/github.com\/andrejanesic\/Python-Sound-Wave-Analysis<\/a><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n<\/details>\n","protected":false},"excerpt":{"rendered":"<p>RePhon-IA &#8212; Tools \/\/ 2025 Mise au point des outils de gestion et de comparaison d&#8217;enregistrements.<\/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-6630","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages\/6630","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=6630"}],"version-history":[{"count":15,"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages\/6630\/revisions"}],"predecessor-version":[{"id":6925,"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages\/6630\/revisions\/6925"}],"wp:attachment":[{"href":"https:\/\/spgoo.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6630"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}