\/personnalisation\/scripts\/wavesurfer.min.js\n\/personnalisation\/scripts\/plugins\/regions.min.js\n\/personnalisation\/scripts\/plugins\/timeline.min.js\n\/personnalisation\/scripts\/plugins\/spectrogram.min.js<\/code><\/pre>\n\n\n\nPour permettre de r\u00e9actualiser la graphe en fonction du mode de melspectrogramme (mel, linear, logarithmic …) il a fallu passer par l’appel de la fonction zoom de l’objet pour forcer la r\u00e9actulisation car l’objet lui m\u00eame ne dispose pas de m\u00e9thode update. <\/p>\n\n\n\n
Comment s’impl\u00e9mente l’appel \u00e0 ce type de librairie :<\/p>\n\n\n\n
Il faut cr\u00e9er un conteneur html pour accueillir cette repr\u00e9sentation <\/p>\n\n\n\n
Il faut instancier les objets de cette repr\u00e9sentation qui est compos\u00e9e de plusieurs \u00e9l\u00e9ments :
Repr\u00e9sentation Graphique :<\/p>\n\n\n\n
<div style=\"width:550px;border-style:inset;border-width: 3px; background:grey;\">\n <p style=\"text-align:center;color:#5cb85c\">Locuteur : IA-alloy<\/p>\n <div id=\"waveform_ref1\" style=\"width:540px; height:360px;\" ><\/div>\n <p style=\"display:flex;justify-content:space-evenly;\">\n <label><input type=\"radio\" name=\"MOD_ref7\" id=\"mel\" checked \/>mel<\/label>\n <label><input type=\"radio\" name=\"MOD_ref7\" id=\"linear\" \/>linear<\/label>\n <label><input type=\"radio\" name=\"MOD_ref7\" id=\"logarithmic\" \/>logarithmic<\/label>\n <label><input type=\"radio\" name=\"MOD_ref7\" id=\"bark\" \/>bark<\/label>\n <label><input type=\"radio\" name=\"MOD_ref7\" id=\"erb\" \/>erb<\/label>\n <\/p>\n<\/div><\/code><\/pre>\n\n\n\n\/\/ Regions plugin\nconst regions_ref1 = WaveSurfer.Regions<\/strong>.create(); \n\t\nconst bottomTimeline_1 = WaveSurfer.Timeline<\/strong>.create({\n height: 15,\n timeInterval: 0.1,\n primaryLabelInterval: 0.2,\n style: {\n fontSize: '12px',\n color: '#6A3274',\n },\n})<\/code><\/pre>\n\n\n\nCr\u00e9ation de l’objet WaveSurfer et du spectrogramme <\/p>\n\n\n\n
\/\/ Create a WaveSurfer instance\nconst ws_ref1 = WaveSurfer.create({\n height: 80,\n minPxPerSec: 1,\n barWidth: 2,\n barRadius: 2,\n barGap: 1,\n container: '#waveform_ref1',\n waveColor: 'rgb(200, 0, 200)',\n progressColor: 'rgb(100, 0, 100)',\n mediaControls: true,\n interact: false,\n url: '\/personnalisation\/frapeor\/tmpreqv8p6t_alloy_ref1.mp3',\n plugins: [regions_ref1,bottomTimeline_1],\n})\n\n\nconst creation_spectro=function(mode) {\n return WaveSurfer.Spectrogram<\/strong>.create({\n labels: true,\n labelsColor :\"yellow\", \n height: 200,\n splitChannels: false,\n \/\/scale: 'mel', \/\/ or 'linear', 'logarithmic', 'bark', 'erb'\n scale: mode,\n frequencyMax: 8000,\n frequencyMin: 0,\n fftSamples: 512,\n labelsBackground: 'rgba(25, 25, 25, 0.1)',\n\t windowFunc :\"lanczoz\", \n });\n}\n\nvar spectro_ref1=null; \n\/\/ Initialize the Spectrogram plugin\nws_ref1.registerPlugin(\n\tspectro_ref1=creation_spectro(\"mel\")\n)<\/code><\/pre>\n\n\n\nSi on veut modifier en direct le type de spectrogramme (mel, linear ou autre) il faut reconstruire le spectrogramme. Exemple d’utilisation <\/p>\n\n\n\n
\/\/ ----------------------------------------------------------------\n\/\/ Evenementiel pour la changement de type de spectrogramme\n\/\/ ----------------------------------------------------------------\ndocument.querySelectorAll('[name^=\"mode_ref1_app1\"]').forEach(elem=> \n elem.addEventListener(\"click\",function(e) {\n ws_ref1_app1.plugins.splice(1,1);\n spectro_ref1_app1.destroy();\n const mode=e.srcElement.id.split(\"_\")[0];\n ws_ref1_app1.registerPlugin(\n spectro_ref1_app1=creation_spectro(mode)\n )\n \/\/ important ce zoom car il reconstruit et affiche la diagramme \n ws_ref1_app1.zoom(1);\n })\n) <\/code><\/pre>\n\n\n\nCe qui nous donne le r\u00e9sultat suivant :<\/p>\n\n\n
\n
Si on veut ajouter des r\u00e9gions suppl\u00e9mentaires pour les syllabes : <\/p>\n\n\n\n
\/\/ --------------------------------------------------------------\n\/\/ Avec en param\u00e8tres les syllabes a positionner sur le graphe\n\/\/ --------------------------------------------------------------\nconst ajoute_regions=function(WS, Regions, syllabes=null) {\n const duration=WS.getDuration(); \/\/ Duree total du signal\n let debut=0;\n const pas=2.0\/(syllabes.length+2);\n console.log(duration,pas, syllabes);\n let i=1;\n WS.on('decode', ()=> {\n syllabes.forEach(syll => {\n const p=document.createElement(\"span\");\n p.innerHTML=syll;\n p.setAttribute(\"style\",\"font-size:10px;color:lightgreen;margin:5px;\");\n Regions.addRegion({\n start: debut,\n end: debut+pas,\n content: p,\n color: randomColor(),\n drag: true,\n resize: true,\n })\n debut=debut+pas;\n i++; \n })\n })\n}\nconst active_region=function(WS,Regions){\n{\n let activeRegion = null\n Regions.on('region-in', (region) => {\n activeRegion = region\n })\n Regions.on('region-out', (region) => {\n if (activeRegion === region) {\n if (loop) {\n region.play()\n } else {\n activeRegion = null\n }\n }\n })\n Regions.on('region-clicked', (region, e) => {\n e.stopPropagation() \/\/ prevent triggering a click on the waveform\n activeRegion = region\n region.play(true)\n region.setOptions({ color: randomColor() })\n })\n \/\/ Reset the active region when the user clicks anywhere in the waveform\n WS.on('interaction', () => {\n activeRegion = null\n })\n}\n}\n\/\/ a charger quand le doucment est charg\u00e9 \ndocument.addEventListener(\"DOMContentLoaded\",function(event){\n ajoute_regions(ws_ref1, regions_ref1,[\"un\",\"grand\",\"vent\",\"souffle\"]);\n active_region(ws_ref1,regions_ref1);\n});\t<\/code><\/pre>\n\n\n\nAttention une petite pr\u00e9caution \u00e0 prendre lorsqu’on souhaite cr\u00e9er des spectrogrammes de fa\u00e7on dynamique, voir l’exemple https:\/\/spgoo.org\/?page_id=6873<\/a>. Dans cette r\u00e9alisation, nous avons d\u00e9velopp\u00e9 une page qui permet de cr\u00e9er \u00e0 la vol\u00e9e le spectrogramme et l’effacer. Dans ce cas pr\u00e9cis, lors de l’effacement il faut d\u00e9truire l’objet spectrogram avant de l’enlever de la DOM, sinon le navigateur conserve l’objet ce qui lui pose des probl\u00e8mes pour la suite. Pour ce faire on peut proc\u00e9der de la mani\u00e8re suivante :<\/p>\n\n\n\nif (visible) {\n\tconst obj=document.getElementById(\"ZE_\"+ind+\"_spectrogramme\")\n\tconst spectro=obj.spectro;\n\tspectro.destroy();\n\tZanno.remove();\n}<\/code><\/pre>\n\n\n\nClique que annotation pour g\u00e9n\u00e9rer le visuel ou si il existe le supprimer. <\/p>\n\n\n\nMod\u00e8le de classes\/objets <\/p>\n\n\n
\n
Librairie WaveSurfer Dans le cadre du projet PASSY-DPFV et FRAP\u00e9OR nous avons d\u00fb mettre en place et utiliser une librairie pour visualiser les enregistrements sous diff\u00e9rentes formes : Pour ce faire nous avons mis en place la librairie Wavesurfer qui nous permet de r\u00e9pondre \u00e0 ce type de besoin. Illustrations sur SPGoO voir https:\/\/spgoo.org\/?page_id=6630 Mise […]<\/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-11141","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages\/11141","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=11141"}],"version-history":[{"count":31,"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages\/11141\/revisions"}],"predecessor-version":[{"id":11207,"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages\/11141\/revisions\/11207"}],"wp:attachment":[{"href":"https:\/\/spgoo.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=11141"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"\"](\"https:\/\/spgoo.org\/wp-content\/uploads\/2025\/12\/wavesurfer_illus_spgoo-1024x422.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/spgoo.org\/wp-content\/uploads\/2025\/12\/wavesurfer_detail.png\")
<\/figure>\n<\/div>\n\n\n![\"\"](\"https:\/\/spgoo.org\/wp-content\/uploads\/2025\/12\/img2025_1.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/spgoo.org\/wp-content\/uploads\/2025\/12\/img_2025_2-1024x400.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/spgoo.org\/wp-content\/uploads\/2025\/12\/graphe_wavesurfer.drawio-1.png\")
<\/figure>\n<\/div>","protected":false},"excerpt":{"rendered":"