fixes 4269-introduced breakage (#4697)

2 files changed, 82 insertions, 88 deletions

diff --git a/files/fr/web/api/analysernode/fftsize/index.md b/files/fr/web/api/analysernode/fftsize/index.md
index 1c06163251..bc7057c049 100644
--- a/files/fr/web/api/analysernode/fftsize/index.md
+++ b/files/fr/web/api/analysernode/fftsize/index.md
@@ -28,54 +28,54 @@ Un nombre entier non signé.
 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](http://mdn.github.io/voice-change-o-matic/)  (et en particulier [app.js lines 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();
+var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+var analyser = audioCtx.createAnalyser();
 
   ...
 
-analyseur.fftSize = 2048;
-var tailleMemoireTampon = analyseur.fftSize;
-var tableauDonnees = new Uint8Array(tailleMemoireTampon);
-analyseur.getByteTimeDomainData(tableauDonnees);
-
-// dessine un oscilloscope de la source audio
-
-function dessiner() {
-
-      dessin = requestAnimationFrame(dessiner);
-      
-      analyseur.getBy
-      
-      contexteCanvas.
-      contexte
-      
-      contexteCanvas.
-      cont
-      
-      contexteCanvas.beginPa
-      
-      var largeurTran
-      v
-      
-              for(var i = 0; i < tailleMemo
-              
-                var v =
-             
-           
-           
-                              
-                                                                              
-          contexteCanvas.lin
-    
-                             
-                                  
-                                                         
-                                   
-                                  c
-      contexteCanvas.stroke();
+analyser.fftSize = 2048;
+var bufferLength = analyser.frequencyBinCount;
+var 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)';
+
+      canvasCtx.beginPath();
+
+      var sliceWidth = WIDTH * 1.0 / bufferLength;
+      var x = 0;
+
+      for(var i = 0; i < bufferLength; i++) {
+
+        var v = dataArray[i] / 128.0;
+        var y = v * HEIGHT/2;
+
+        if(i === 0) {
+          canvasCtx.moveTo(x, y);
+        } else {
+          canvasCtx.lineTo(x, y);
+        }
+
+        x += sliceWidth;
+      }
+
+      canvasCtx.lineTo(canvas.width, canvas.height/2);
+      canvasCtx.stroke();
     };
-                                                            
-    dessiner();
+
+    draw();
 ```
 
 ## Spécifications
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