From 371b1302c5ab1ed0c461eb389e6b91d270e219bd Mon Sep 17 00:00:00 2001
From: SphinxKnight <SphinxKnight@users.noreply.github.com>
Date: Fri, 18 Mar 2022 07:03:30 +0100
Subject: fixes 4269-introduced breakage (#4697)

---
 .../analysernode/getbytetimedomaindata/index.md    | 82 ++++++++++------------
 1 file changed, 38 insertions(+), 44 deletions(-)

(limited to 'files/fr/web/api/analysernode/getbytetimedomaindata')

diff --git a/files/fr/web/api/analysernode/getbytetimedomaindata/index.md b/files/fr/web/api/analysernode/getbytetimedomaindata/index.md
index 38997fa346..9f3f326739 100644
--- a/files/fr/web/api/analysernode/getbytetimedomaindata/index.md
+++ b/files/fr/web/api/analysernode/getbytetimedomaindata/index.md
@@ -31,54 +31,48 @@ Un tableau {{domxref("Uint8Array")}}.
 L'exemple suivant montre comment créer simplement un  `AnalyserNode` avec {{domxref("AudioContext")}}, puis utiliser  {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](https://mdn.github.io/voice-change-o-matic/)  (et en particulier [app.js lignes 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)).
 
 ```js
-var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
-var analyseur = contexteAudio.createAnalyser();
+const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+const analyser = audioCtx.createAnalyser();
 
   ...
 
-analyseur.fftSize = 2048;
-var tailleMemoireTampon = analyseur.frequencyBinCount;
-var tableauDonnees = new Uint8Array(tailleMemoireTampon);
-analyseur.getByteTimeDomainData(tableauDonnees);
+analyser.fftSize = 2048;
+const bufferLength = analyser.fftSize;
+const dataArray = new Uint8Array(bufferLength);
+analyser.getByteTimeDomainData(dataArray);
+
+// dessine un oscilloscope pour la source audio courante
+function draw() {
+  drawVisual = requestAnimationFrame(draw);
+  analyser.getByteTimeDomainData(dataArray);
+
+  canvasCtx.fillStyle = 'rgb(200, 200, 200)';
+  canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
+
+  canvasCtx.lineWidth = 2;
+  canvasCtx.strokeStyle = 'rgb(0, 0, 0)';
+
+  const sliceWidth = WIDTH * 1.0 / bufferLength;
+  let x = 0;
+
+  canvasCtx.beginPath();
+  for(var i = 0; i < bufferLength; i++) {
+    const v = dataArray[i]/128.0;
+    const y = v * HEIGHT/2;
+
+    if(i === 0)
+      canvasCtx.moveTo(x, y);
+    else
+      canvasCtx.lineTo(x, y);
+
+    x += sliceWidth;
+  }
+
+  canvasCtx.lineTo(WIDTH, HEIGHT/2);
+  canvasCtx.stroke();
+};
 
-// dessine un oscilloscope de la source audio
-
-function dessiner() {
-
-      dessin = requestAnimationFrame(dessiner);
-      
-      analyseur.getBy
-      
-      contexteCanvas.
-      contexte
-      
-      contexteCanvas.
-      cont
-      
-      contexteCanvas.begin
-      
-      var largeurBarr
-      v
-      
-              for(var i = 0; i < tailleMemo
-              
-                var v =
-             
-           
-           
-                              
-                                                                            
-          contexteCanvas.l
-    
-                             
-                                  
-                                                         
-                                   
-                                  c
-      contexteCanvas.stroke();
-    };
-                                                            
-    dessiner();
+draw();
 ```
 
 ## Paramètres
-- 
cgit v1.2.3-54-g00ecf