Insertion de cette librairie dans nos contextes WordPress par l’import de module. Page de d\u00e9monstration qui illustre l’int\u00e9gration de ce module dans nos d\u00e9veloppements.<\/p>\n\n\n\n
<script>\n \/\/ d\u00e9finition de l'espace de nom par defaut attache au module \n const soundYS={};\n <\/script>\n <script type=\"module\">\n \/\/ on accroche \u00e0 cet espace de nom les traitements de sonores definis dans le module\n import { AudioMotionAnalyzer } from \".\/personnalisation\/audioMotion-analyzer-4.5.2\/src\/audioMotion-analyzer.js\";\n soundYS.AudioMotionAnalyzer = AudioMotionAnalyzer;\n <\/script> <\/code><\/pre>\n\n\n\nInstanciation de l’objet <\/p>\n\n\n\n
document.addEventListener(\"DOMContentLoaded\", function(event) {\n \n \/\/ Initialisation de l'analyseur une fois la librairie et le module charg\u00e9s \n audioMotion = new soundYS.AudioMotionAnalyzer(\n document.getElementById('containerYS'),\n {\n mode: 10,\n gradient: 'prism',\n showScaleX: true,\n showScaleY: true,\n showPeaks: true,\n smoothing: 0.5,\n height: 300,\n fftSize: 8192,\n minDecibels: -85,\n maxDecibels: -25,\n showBgColor: true,\n bgAlpha: 0.7,\n overlay: true,\n lineWidth: 2,\n fillAlpha: 0.6,\n barSpace: 0.1,\n reflexRatio: 0,\n reflexAlpha: 0.15,\n reflexBright: 1,\n reflexFit: true,\n minFreq: 20,\n maxFreq: 22000,\n radius: 0.3,\n spinSpeed: 0,\n alphaBars: false,\n lumiBars: false,\n trueLeds: false,\n mirror: 0,\n splitGradient: false,\n roundBars: false,\n channelLayout: 'single',\n frequencyScale: 'log',\n noteLabels: false,\n ansiBands: false,\n weightingFilter: '',\n }\n );\n });<\/code><\/pre>\n\n\n\nChargement du fichier audio et association avec l’objet <\/p>\n\n\n\n
\/\/ Gestion du fichier audio\n document.getElementById('fileInput').addEventListener('change', function(e) {\n const file = e.target.files[0];\n if (file) {\n if (audioElement) {\n audioElement.pause();\n audioElement = null;\n } \n audioElement = new Audio();\n audioElement.src = URL.createObjectURL(file); \n if (!sourceNode) {\n sourceNode = audioMotion.audioCtx.createMediaElementSource(audioElement);\n sourceNode.connect(audioMotion._analyzer[0]<\/strong>);\n audioMotion._analyzer[0]<\/strong>.connect(audioMotion.audioCtx.destination);\n }\n \/\/ on active les boutons de controle de l'interface\n document.getElementById('fileName').textContent = `Fichier: ${file.name}`;\n document.getElementById('playBtn').disabled = false;\n document.getElementById('pauseBtn').disabled = false;\n document.getElementById('stopBtn').disabled = false;\n }\n });<\/code><\/pre>\n\n\n\nPour \u00e9couter l’enregistrement, il faut s’appuyer sur la variable audioElement de la fa\u00e7on suivante : <\/p>\n\n\n\n
document.getElementById('playBtn').addEventListener('click', () => audioElement && audioElement.play());<\/code><\/pre>\n\n\n\nAutre exemple : examinons l’exemple de d\u00e9monstration qui lui a plusieurs zones graphiques dans lesquelles des repr\u00e9sentations compl\u00e9mentaires s’affichent : container1, container2 et container3<\/p>\n\n\n\nComment se fait le lien entre le fichier sonore que l’on charge et les trois graphiques \u00e0 afficher ? <\/p>\n\n\n\n
try {\n for ( let i = 0; i < 3; i++ ) {\n\tconst isFirst = ( i == 0 );\n\taudioMotion[ i ] = new AudioMotionAnalyzer(document.getElementById( `container${i}` ), {\n\t source: isFirst ? document.getElementById('audio') : audioMotion[0].connectedSources[0],\n \t connectSpeakers: isFirst,height: isFirst ? 340 : 160,\n\t onCanvasResize: ( reason, instance ) => {\n \t const instNo = instance.canvas.parentElement.id.slice(-1);\n if ( reason != 'create' )updateUI();\n\t }\n\t});\n }\n}\ncatch( err ) {\n document.getElementById('container0').innerHTML = `<p>audioMotion-analyzer failed with error: ${ err.code ? '<strong>' + err.code + '<\/strong>' : '' } <em>${ err.code ? err.message : err }<\/em><\/p>`;\n}<\/code><\/pre>\n\n\n\nCette partie peut s’interpr\u00e9ter de la mani\u00e8re suivante c’est le premier objet AudioMotionAnalyzer qui est attach\u00e9 \u00e0 la source audio, les autres se rattachent au premier via la propri\u00e9t\u00e9 connectedSource[0]<\/p>\n\n\n\n
R\u00e9f sur les API audio : https:\/\/webaudio.github.io\/web-audio-api\/<\/a> <\/p>\n\n\n\n<\/p>\n","protected":false},"excerpt":{"rendered":"
Dans le cadre des projets PASSY-DPFV et FRAP\u00e9OR nous avons d\u00fb trouver une solution pour afficher de fa\u00e7on dynamique les enregistrements sonores. Pour ce faire, apr\u00e8s exploration de l’existant en passant par p5.js, nous nous sommes arr\u00eat\u00e9s sur cette librairie qui a priori correspond \u00e0 nos besoins. Sources : https:\/\/github.com\/hvianna\/audioMotion-analyzer\/releases Fen\u00eatre de d\u00e9monstration de cette […]<\/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-11143","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages\/11143","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=11143"}],"version-history":[{"count":29,"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages\/11143\/revisions"}],"predecessor-version":[{"id":11260,"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages\/11143\/revisions\/11260"}],"wp:attachment":[{"href":"https:\/\/spgoo.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=11143"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"\"](\"https:\/\/spgoo.org\/wp-content\/uploads\/2025\/12\/Capture-du-2025-12-11-09-19-49.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/spgoo.org\/wp-content\/uploads\/2025\/12\/Capture-du-2025-12-12-11-44-27-1024x971.png\")
<\/figure>\n<\/div>\n\n\n![\"\"](\"https:\/\/spgoo.org\/wp-content\/uploads\/2025\/12\/Capture-du-2025-12-12-11-54-01-1024x303.png\")
<\/figure>\n\n\n\n