Prepare Web API section for Markdown conversion (#2464)

* Remove summary classes and ids * Remove unecessary hidden * Remove useless span filled with useless attributes / ids * Remove useless font * Remove notranslate * Remove id in other elements than headings * Remove name attributes * Remove <pre><code> for JS w/ language-js class * Remove <pre><code> for HTML w/ language-html class * Remove <pre><code> for other lang w/ language-* class * Rm highlighted line in code samples * fix links, internal, external, absolute URLs * missing file from last commit * Fix styles errors apart from table + some classes * Fix notes and warnings (+ some other :x) * fix typo during merge which broke a doc * aand forgot a conflict * fix remaining classes of errors except dls and images * Fix dls * Fix images (deki/mozillademos) and remaining style issues * Remove script tag from svg file * Remove script tag from svg fileS * Compress SVG files for CI
author: SphinxKnight <SphinxKnight@users.noreply.github.com> 2021-09-26 13:11:47 +0200
committer: GitHub <noreply@github.com> 2021-09-26 13:11:47 +0200
commit: 6772831200d14c2436aea2d0c837f40dbf12156f (patch)
tree: e41b587ce1834baf8c737454c0ae110ebc8208ca /files/fr/web/api/web_audio_api
parent: 707941dbecfb0cc1e75dd32d2dacac4d1845bf2c (diff)
download: translated-content-6772831200d14c2436aea2d0c837f40dbf12156f.tar.gz
translated-content-6772831200d14c2436aea2d0c837f40dbf12156f.tar.bz2
translated-content-6772831200d14c2436aea2d0c837f40dbf12156f.zip
10 files changed, 255 insertions, 102 deletions
diff --git a/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/audionodes.svg b/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/audionodes.svg
new file mode 100644
index 0000000000..088bb1442c
--- /dev/null
+++ b/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/audionodes.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" style="background-color:#fff" width="630" height="360"><g transform="translate(.5 .5)"><circle cx="294" cy="248" fill="#fff" stroke="#000" stroke-dasharray="3 3" pointer-events="none" r="110"/><path d="M199 248h190" fill="none" stroke="#000" stroke-width="5" stroke-miterlimit="10" pointer-events="none"/><path fill="#fff" stroke="#000" pointer-events="none" d="M247 188h94v24h-94zm0 24h94v24h-94zm0 24h94v24h-94z"/><path fill="#fff" stroke="#000" pointer-events="none" d="M247 258h94v24h-94zm0 24h94v24h-94z"/><path d="M249 188v120m94-120v120" fill="none" stroke="#000" stroke-width="2" stroke-miterlimit="10" pointer-events="none"/><path fill="#fff" stroke="#000" pointer-events="none" d="M284 180h24v16h-24z"/><text x="3" y="9" text-anchor="middle" font-size="8" font-family="Helvetica" transform="translate(293 183)">L</text><path fill="#fff" stroke="#000" pointer-events="none" d="M284 203h24v16h-24z"/><text x="4" y="9" text-anchor="middle" font-size="8" font-family="Helvetica" transform="translate(293 206)">R</text><path fill="#fff" stroke="#000" pointer-events="none" d="M284 227h24v16h-24z"/><text x="7" y="9" text-anchor="middle" font-size="8" font-family="Helvetica" transform="translate(290 230)">SL</text><path fill="#fff" stroke="#000" pointer-events="none" d="M284 250h24v16h-24z"/><text x="7" y="9" text-anchor="middle" font-size="8" font-family="Helvetica" transform="translate(289 253)">SR</text><path fill="#fff" stroke="#000" pointer-events="none" d="M284 274h24v16h-24z"/><text x="4" y="9" text-anchor="middle" font-size="8" font-family="Helvetica" transform="translate(293 277)">C</text><path fill="#fff" stroke="#000" pointer-events="none" d="M284 298h24v16h-24z"/><text x="10" y="9" text-anchor="middle" font-size="8" font-family="Helvetica" transform="translate(287 301)">LFE</text><path d="M9 27h119.9" fill="none" stroke="#000" stroke-width="3" stroke-miterlimit="10" pointer-events="none"/><path d="m135.65 27-9 4.5 2.25-4.5-2.25-4.5z" stroke="#000" stroke-width="3" stroke-miterlimit="10" pointer-events="none"/><path d="m74 47 129 135" fill="none" stroke="#000" stroke-miterlimit="10" stroke-dasharray="3 3" pointer-events="none"/><path d="M278 26h119.9" fill="none" stroke="#000" stroke-width="3" stroke-miterlimit="10" pointer-events="none"/><path d="m404.65 26-9 4.5 2.25-4.5-2.25-4.5z" stroke="#000" stroke-width="3" stroke-miterlimit="10" pointer-events="none"/><path d="M278 49h55.5q10 0 10 10v47q0 10 10 10h45.4" fill="none" stroke="#000" stroke-width="3" stroke-miterlimit="10" pointer-events="none"/><path d="m405.65 116-9 4.5 2.25-4.5-2.25-4.5z" stroke="#000" stroke-width="3" stroke-miterlimit="10" pointer-events="none"/><path d="M549 25h59.9" fill="none" stroke="#000" stroke-width="3" stroke-miterlimit="10" pointer-events="none"/><path d="m615.65 25-9 4.5 2.25-4.5-2.25-4.5z" stroke="#000" stroke-width="3" stroke-miterlimit="10" pointer-events="none"/><text y="22" text-anchor="left" font-size="10" font-family="Helvetica" transform="translate(421 216)">
+			Chaque entrée / sortie est
+			<tspan x="0" dy="1.5em">composée de plusieurs canaux.</tspan>
+			<tspan x="0" dy="1.5em">Ici on voit une configuration  5.1</tspan>
+		</text><path fill="#719fd0" stroke="#000" pointer-events="none" d="M151 13h118v50H151z"/><text x="34" y="12" text-anchor="middle" font-size="12" font-family="Helvetica" transform="translate(176 32)">Noeud audio</text><path d="M9 47h119.9" fill="none" stroke="#000" stroke-width="3" stroke-miterlimit="10" pointer-events="none"/><path d="m135.65 47-9 4.5 2.25-4.5-2.25-4.5z" stroke="#000" stroke-width="3" stroke-miterlimit="10" pointer-events="none"/><path fill="#719fd0" stroke="#000" pointer-events="none" d="M419 1h118v50H419z"/><text x="34" y="12" text-anchor="middle" font-size="12" font-family="Helvetica" transform="translate(444 20)">Noeud audio</text><path fill="#719fd0" stroke="#000" pointer-events="none" d="M419 91h118v50H419z"/><text x="34" y="12" text-anchor="middle" font-size="12" font-family="Helvetica" transform="translate(444 110)">Noeud audio</text><text x="19" y="10" text-anchor="middle" font-size="10" font-family="Helvetica" transform="translate(41 12)">Sources</text><text x="24" y="10" text-anchor="middle" font-size="10" font-family="Helvetica" transform="translate(308 11)">Destination</text></g></svg>
+\ No newline at end of file
diff --git a/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/fttaudiodata.svg b/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/fttaudiodata.svg
new file mode 100644
index 0000000000..6f020d5b37
--- /dev/null
+++ b/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/fttaudiodata.svg
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="692.929px" height="206.323px" viewBox="0 0 692.929 206.323" enable-background="new 0 0 692.929 206.323" xml:space="preserve">
+<g id="Calque_2">
+	<g>
+		<line fill="none" stroke="#010101" x1="25.556" y1="31.667" x2="25.556" y2="91.125"/>
+		<polygon fill="#010101" points="19.722,32.667 25.556,15.828 31.056,32.667   "/>
+		<polygon fill="#010101" points="230.637,84.581 247.476,90.415 230.637,95.915   "/>
+		<path fill="none" stroke="#010101" stroke-miterlimit="10" d="M25.722,53.167h36.667c0,0,4.167-14.333,9-11    c0,0,2.333,0.417,7.333,14c0,0,2.917,10.583,8,8.167c0,0,3.333-0.417,6.667-14.167c0,0,3.333-11.917,8.5-7.333    c0,0,2.667,1.833,6.5,13.333c0,0,4,12,8.5,7.5c0,0,3.333-2.666,6.167-13.5c0,0,3.167-12.667,9-7.667c0,0,2.292,0.562,5.667,13.5    c0,0,4.167,13.083,9.5,7.667c0,0,2.188-1.729,5-13.5c0,0,3.25-12.667,8.5-7.667c0,0,2.938,3.25,6.667,13.667    c0,0,5.021,12.333,8.833,7.667c0,0,3.812-4.646,4.667-10.561h30"/>
+		<text transform="matrix(1 0 0 1 252.0552 94.8335)" font-family="'ArialMT'" font-size="14">t</text>
+		<text transform="matrix(1 0 0 1 23.2222 106.333)"><tspan x="0" y="0" font-family="'ArialMT'" font-size="14">0</tspan><tspan x="7.786" y="0" font-family="'ArialMT'" font-size="14" letter-spacing="24">	</tspan><tspan x="36" y="0" font-family="'ArialMT'" font-size="14">1</tspan><tspan x="43.786" y="0" font-family="'ArialMT'" font-size="14" letter-spacing="24">	</tspan><tspan x="72" y="0" font-family="'ArialMT'" font-size="14">2</tspan><tspan x="79.786" y="0" font-family="'ArialMT'" font-size="14" letter-spacing="24">	</tspan><tspan x="108" y="0" font-family="'ArialMT'" font-size="14">3</tspan><tspan x="115.787" y="0" font-family="'ArialMT'" font-size="14" letter-spacing="24">	</tspan><tspan x="144" y="0" font-family="'ArialMT'" font-size="14">4</tspan><tspan x="151.787" y="0" font-family="'ArialMT'" font-size="14" letter-spacing="24">	</tspan></text>
+		<line fill="none" stroke="#010101" stroke-miterlimit="10" x1="25.556" y1="90.667" x2="230.637" y2="90.667"/>
+	</g>
+	<g>
+		<line fill="none" stroke="#010101" x1="431.556" y1="31.667" x2="431.556" y2="91.125"/>
+		<polygon fill="#010101" points="425.722,32.667 431.556,15.828 437.056,32.667   "/>
+		<polygon fill="#010101" points="636.636,84.581 653.476,90.415 636.636,95.915   "/>
+		<path fill="none" stroke="#010101" stroke-miterlimit="10" d="M431.722,53.167h36.666c0,0,4.167-14.333,9-11    c0,0,2.334,0.417,7.334,14c0,0,2.916,10.583,8,8.167c0,0,3.334-0.417,6.666-14.167c0,0,3.334-11.917,8.5-7.333    c0,0,2.667,1.833,6.5,13.333c0,0,4,12,8.5,7.5c0,0,3.334-2.666,6.168-13.5c0,0,3.166-12.667,9-7.667c0,0,2.291,0.562,5.666,13.5    c0,0,4.167,13.083,9.5,7.667c0,0,2.188-1.729,5-13.5c0,0,3.25-12.667,8.5-7.667c0,0,2.938,3.25,6.667,13.667    c0,0,5.021,12.333,8.833,7.667c0,0,3.812-4.646,4.667-10.561h30"/>
+		<text transform="matrix(1 0 0 1 658.0552 94.8335)" font-family="'ArialMT'" font-size="14">t</text>
+		<text transform="matrix(1 0 0 1 429.2222 106.333)"><tspan x="0" y="0" font-family="'ArialMT'" font-size="14">0</tspan><tspan x="7.786" y="0" font-family="'ArialMT'" font-size="14" letter-spacing="24">	</tspan><tspan x="36" y="0" font-family="'ArialMT'" font-size="14">1</tspan><tspan x="43.786" y="0" font-family="'ArialMT'" font-size="14" letter-spacing="24">	</tspan><tspan x="72" y="0" font-family="'ArialMT'" font-size="14">2</tspan><tspan x="79.786" y="0" font-family="'ArialMT'" font-size="14" letter-spacing="24">	</tspan><tspan x="108" y="0" font-family="'ArialMT'" font-size="14">3</tspan><tspan x="115.787" y="0" font-family="'ArialMT'" font-size="14" letter-spacing="24">	</tspan><tspan x="144" y="0" font-family="'ArialMT'" font-size="14">4</tspan><tspan x="151.787" y="0" font-family="'ArialMT'" font-size="14" letter-spacing="24">	</tspan></text>
+		<line fill="none" stroke="#010101" stroke-miterlimit="10" x1="431.556" y1="90.667" x2="636.636" y2="90.667"/>
+	</g>
+	<polygon fill="#010101" points="401.636,47.489 418.476,53.323 401.636,58.823  "/>
+	<line fill="none" stroke="#010101" stroke-miterlimit="10" x1="273.555" y1="53.576" x2="401.636" y2="53.576"/>
+	<polygon fill="#010101" points="347.889,148.454 342.055,165.294 336.555,148.454  "/>
+	<rect x="299.222" y="35" fill="#719FD0" stroke="#010101" width="86" height="96.5"/>
+	<text transform="matrix(1 0 0 1 304.2227 56.8232)" font-family="'ArialMT'" font-size="11">AnalyserNode</text>
+	<line fill="none" stroke="#010101" stroke-miterlimit="10" x1="341.803" y1="118" x2="341.803" y2="148.454"/>
+	<text transform="matrix(1 0 0 1 331.8887 106.333)" font-family="'Arial-BoldMT'" font-size="11">FFT</text>
+	<polygon fill="none" stroke="#2C2C76" stroke-miterlimit="10" points="321.889,86.667 362.889,86.667 354.889,116 329.556,116  "/>
+</g>
+<g id="Calque_4">
+	<g>
+		<text transform="matrix(1 0 0 1 478.2222 131.5)" font-family="'ArialMT'" font-size="11">sortie inchangée</text>
+	</g>
+	<text transform="matrix(1 0 0 1 287.2227 176.167)" font-family="'ArialMT'" font-size="11">données de fréquence</text>
+</g>
+</svg>
+\ No newline at end of file
diff --git a/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.html b/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.html
index bf0a5112b8..6e5c9cae01 100644
--- a/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.html
+++ b/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.html
@@ -3,9 +3,8 @@ title: Les concepts de base de la Web Audio API
 slug: Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API
 translation_of: Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API
 ---
-<div class="summary">
-<p><span class="seoSummary">Cet article explique une partie de la théorie sur laquelle s'appuient les fonctionnalités de la Web Audio API. Il ne fera pas de vous un ingénieur du son, mais vous donnera les bases nécessaires pour comprendre pourquoi la Web Audio API fonctionne de cette manière, et vous permettre de mieux l'utiliser.</span></p>
-</div>
+
+<p>Cet article explique une partie de la théorie sur laquelle s'appuient les fonctionnalités de la Web Audio API. Il ne fera pas de vous un ingénieur du son, mais vous donnera les bases nécessaires pour comprendre pourquoi la Web Audio API fonctionne de cette manière, et vous permettre de mieux l'utiliser.</p>
 
 <h2 id="Graphes_audio">Graphes audio</h2>
 
@@ -21,11 +20,11 @@ translation_of: Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API
  <li>Connection des sources aux effets, et des effets à la sortie.</li>
 </ol>
 
-<p><img alt="Diagramme simple composé de trois rectangles intitulés Sources, Effets et Sortie, reliés par des flèches, de gauche à droite, qui indiquent le sens du flux d'informations audio." src="https://mdn.mozillademos.org/files/12525/webaudioAPI.svg" style="display: block; height: 143px; margin: 0px auto; width: 643px;"></p>
+<p><img alt="Diagramme simple composé de trois rectangles intitulés Sources, Effets et Sortie, reliés par des flèches, de gauche à droite, qui indiquent le sens du flux d'informations audio." src="webaudioapi_en.svg"></p>
 
 <p>Chaque entrée ou sortie est composée de plusieurs <strong>canaux, </strong>chacun correspondant à une configuration audio spécifique. Tout type de canal discret est supporté, y compris <em>mono</em>, <em>stereo</em>, <em>quad</em>, <em>5.1</em>, etc.</p>
 
-<p><img alt="Diagramme qui montre comment les AudioNodes sont reliés par leurs entrées et sorties, et la configuration des canaux à l'intérieur de ces entrées/sorties." src="https://mdn.mozillademos.org/files/12235/audionodes.svg" style="display: block; height: 360px; margin: 0px auto; width: 630px;"></p>
+<p><img alt="Diagramme qui montre comment les AudioNodes sont reliés par leurs entrées et sorties, et la configuration des canaux à l'intérieur de ces entrées/sorties." src="audionodes.svg"></p>
 
 <p>Les sources audio peuvent être de provenance variée :</p>
 
@@ -33,12 +32,12 @@ translation_of: Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API
  <li>générées directement en JavaScript avec un noeud audio (tel qu'un oscillateur)</li>
  <li>créées à partir de données PCM brutes (le contexte audio a des méthodes pour décoder les formats audio supportés)</li>
  <li>fournies par une balise HTML media (telle que {{HTMLElement("video")}} ou {{HTMLElement("audio")}})</li>
- <li>récupérées directement avec <a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> {{domxref("MediaStream")}} (une webcam ou un microphone)</li>
+ <li>récupérées directement avec <a href="/en-US/docs/WebRTC">WebRTC</a> {{domxref("MediaStream")}} (une webcam ou un microphone)</li>
 </ul>
 
 <h2 id="Données_audio_ce_qu'on_trouve_dans_un_échantillon">Données audio: ce qu'on trouve dans un échantillon</h2>
 
-<p>Lors du traitement d'un signal audio, <strong>l'échantillonage</strong> désigne la conversion d'un <a href="http://en.wikipedia.org/wiki/Continuous_signal" title="Continuous signal">signal continu</a> en <a class="mw-redirect" href="http://en.wikipedia.org/wiki/Discrete_signal" title="Discrete signal">signal discret</a>; formulé autrement, une onde de son continue, comme un groupe qui joue en live, est convertie en une séquence d'échantillons (un signal temporel discret) qui permet à l'ordinateur de traiter le son en blocs distincts.</p>
+<p>Lors du traitement d'un signal audio, <strong>l'échantillonage</strong> désigne la conversion d'un <a href="http://en.wikipedia.org/wiki/Continuous_signal">signal continu</a> en <a class="mw-redirect" href="http://en.wikipedia.org/wiki/Discrete_signal">signal discret</a>; formulé autrement, une onde de son continue, comme un groupe qui joue en live, est convertie en une séquence d'échantillons (un signal temporel discret) qui permet à l'ordinateur de traiter le son en blocs distincts.</p>
 
 <p>On peut trouver davantage de détails sur la page Wikipedia <a href="https://fr.wikipedia.org/wiki/%C3%89chantillonnage_(signal)">Echantillonage (signal)</a>.</p>
 
@@ -57,12 +56,12 @@ translation_of: Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API
  <li>le stéréo aura 88200 échantillons, et 44100 trames. Sa propriété <code>length</code> vaudra aussi 44100, puisqu'elle correspond au nombre de trames.</li>
 </ul>
 
-<p><img alt="Le diagramme montre une succession de tames dans un buffer audio. Comme le buffer est composé de deux canaux (stéréo), chaque trame contient deux échantillons." src="https://mdn.mozillademos.org/files/12489/sampleframe.svg" style="height: 110px; width: 622px;"></p>
+<p><img alt="Le diagramme montre une succession de tames dans un buffer audio. Comme le buffer est composé de deux canaux (stéréo), chaque trame contient deux échantillons." src="sampleframe.svg"></p>
 
 <p>Lorsqu'un noeud de mémoire tampon est lu, on entend d'abord la trame la trame la plus à gauche, puis celle qui la suit à droite, etc. Dans le cas de la stéréo, on entend les deux canaux en même temps. Les trames d'échantillon sont très utiles, car elles représentent le temps indépendamment du nombre de canaux.</p>
 
 <div class="note">
-<p><strong>Note</strong>: Pour obtenir le temps en secondes à partir du nombre de trames, diviser le nombre de trames par le taux d'échantillonage. Pour obtenir le nombre de trames à partir du nombre d'échantillons, diviser le nombre d'échantillons par le nombre de canaux.</p>
+<p><strong>Note :</strong> Pour obtenir le temps en secondes à partir du nombre de trames, diviser le nombre de trames par le taux d'échantillonage. Pour obtenir le nombre de trames à partir du nombre d'échantillons, diviser le nombre d'échantillons par le nombre de canaux.</p>
 </div>
 
 <p>Voici quelques exemples simples:</p>
@@ -71,11 +70,11 @@ translation_of: Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API
 var memoireTampon = contexte.createBuffer(2, 22050, 44100);</pre>
 
 <div class="note">
-<p><strong>Note</strong>: <strong>44,100 <a href="https://en.wikipedia.org/wiki/Hertz" title="Hertz">Hz</a></strong> (que l'on peut aussi écrire <strong>44.1 kHz</strong>) est un <a href="https://en.wikipedia.org/wiki/Sampling_frequency" title="Sampling frequency">taux d'échantillonage</a> couramment utilisé. Pourquoi 44.1kHz ?<br>
+<p><strong>Note :</strong> <strong>44,100 <a href="https://en.wikipedia.org/wiki/Hertz">Hz</a></strong> (que l'on peut aussi écrire <strong>44.1 kHz</strong>) est un <a href="https://en.wikipedia.org/wiki/Sampling_frequency">taux d'échantillonage</a> couramment utilisé. Pourquoi 44.1kHz ?<br>
  <br>
- D'abord, parce ce que le <a href="https://en.wikipedia.org/wiki/Hearing_range" title="Hearing range">champ auditif</a> qui peut être perçu par des oreilles humaines se situe à peu près entre 20 Hz et 20,000 Hz, et que selon le <a href="https://en.wikipedia.org/wiki/Nyquist%E2%80%93Shannon_sampling_theorem" title="Nyquist–Shannon sampling theorem">théorème d'échantillonage de Nyquist–Shannon</a> la fréquence d'échantillonage doit être supérieure à deux fois la fréquence maximum que l'on souhaite reproduire; le taux d'échantillonage doit donc être supérieur à 40 kHz.<br>
+ D'abord, parce ce que le <a href="https://en.wikipedia.org/wiki/Hearing_range">champ auditif</a> qui peut être perçu par des oreilles humaines se situe à peu près entre 20 Hz et 20,000 Hz, et que selon le <a href="https://en.wikipedia.org/wiki/Nyquist%E2%80%93Shannon_sampling_theorem">théorème d'échantillonage de Nyquist–Shannon</a> la fréquence d'échantillonage doit être supérieure à deux fois la fréquence maximum que l'on souhaite reproduire; le taux d'échantillonage doit donc être supérieur à 40 kHz.<br>
  <br>
- De plus, le signal doit être traité par un <a href="https://en.wikipedia.org/wiki/Low-pass_filter" title="Low-pass filter">filtre passe-bas</a> avant d'être échantilloné, afin d'éviter le phénomène d'<a href="https://en.wikipedia.org/wiki/Aliasing" title="Aliasing">aliasing</a>, et, si en théorie un  filtre passe-bas idéal devrait être capable de laisser passer les fréquences inférieures à 20 kHz (sans les atténuer) et de couper parfaitement les fréquences supérieures à 20 kHz, en pratique une <a href="https://en.wikipedia.org/wiki/Transition_band" title="Transition band">bande de transition</a> dans laquelle les fréquences sont partiellement atténuées est nécessaire. Plus la bande de transition est large, plus il est facile et économique de faire un <a href="https://en.wikipedia.org/wiki/Anti-aliasing_filter" title="Anti-aliasing filter">filtre anti-aliasing</a>. Le taux d'échantillonage 44.1 kHz laisse une bande de transition de 2.05 kHz.</p>
+ De plus, le signal doit être traité par un <a href="https://en.wikipedia.org/wiki/Low-pass_filter">filtre passe-bas</a> avant d'être échantilloné, afin d'éviter le phénomène d'<a href="https://en.wikipedia.org/wiki/Aliasing">aliasing</a>, et, si en théorie un  filtre passe-bas idéal devrait être capable de laisser passer les fréquences inférieures à 20 kHz (sans les atténuer) et de couper parfaitement les fréquences supérieures à 20 kHz, en pratique une <a href="https://en.wikipedia.org/wiki/Transition_band">bande de transition</a> dans laquelle les fréquences sont partiellement atténuées est nécessaire. Plus la bande de transition est large, plus il est facile et économique de faire un <a href="https://en.wikipedia.org/wiki/Anti-aliasing_filter">filtre anti-aliasing</a>. Le taux d'échantillonage 44.1 kHz laisse une bande de transition de 2.05 kHz.</p>
 </div>
 
 <p>Ce code génère une mémoire tampon stéréo (deux canaux) qui, lorsqu'elle est lue dans un AudioContext à 44100Hz (configuration répandue, la plupart des cartes sons tournant à cette fréquence), dure 0.5 secondes: 22050 trames / 44100Hz = 0.5 secondes.</p>
@@ -86,7 +85,7 @@ var memoireTampon = context.createBuffer(1, 22050, 22050);</pre>
 <p>Ce code génère une mémoire tampon mono (un seul canal) qui, lorsqu'elle est lue dans un AudioContext à 44100Hzz, est automatiquement *rééchantillonnée* à 44100Hz (et par conséquent produit 44100 trames), et dure 1.0 seconde: 44100 frames / 44100Hz = 1 seconde.</p>
 
 <div class="note">
-<p><strong>Note</strong>: le rééchantillonnage audio est très similaire à la redimension d'une image : imaginons que vous ayiez une image de 16 x 16, mais que vous vouliez remplir une surface de 32x32: vous la redimensionnez (rééchantillonnez). Le résultat est de qualité inférieure (il peut être flou ou crénelé, en fonction de l'algorithme de redimensionnement), mais cela fonctionne, et l'image redimensionnée prend moins de place que l'originale. C'est la même chose pour le rééchantillonnage audio — vous gagnez de la place, mais en pratique il sera difficle de reproduire correctement des contenus de haute fréquence (c'est-à-dire des sons aigus).</p>
+<p><strong>Note :</strong> le rééchantillonnage audio est très similaire à la redimension d'une image : imaginons que vous ayiez une image de 16 x 16, mais que vous vouliez remplir une surface de 32x32: vous la redimensionnez (rééchantillonnez). Le résultat est de qualité inférieure (il peut être flou ou crénelé, en fonction de l'algorithme de redimensionnement), mais cela fonctionne, et l'image redimensionnée prend moins de place que l'originale. C'est la même chose pour le rééchantillonnage audio — vous gagnez de la place, mais en pratique il sera difficle de reproduire correctement des contenus de haute fréquence (c'est-à-dire des sons aigus).</p>
 </div>
 
 <h3 id="Mémoire_tampon_linéaire_ou_entrelacée">Mémoire tampon linéaire ou entrelacée</h3>
@@ -290,7 +289,7 @@ var memoireTampon = context.createBuffer(1, 22050, 22050);</pre>
 
 <p>Une visualisation audio consiste en général à utiliser un flux de données audio dans le temps (souvent des informations de gain ou de fréquence) pour générer un affichage graphique (comme un graphe). La Web Audio API possède un {{domxref("AnalyserNode")}} qui n'altère pas le signal audio qui le traverse, permettant de générer des données qui peuvent être utilisées par une technologie de visualisation telle que {{htmlelement("canvas")}}.</p>
 
-<p><img alt="Le noeud permet de récupérer la fréquence et le domaine temporel en utilisant FFT, et ce sans modifier le flux audio" src="https://mdn.mozillademos.org/files/12493/fttaudiodata.svg" style="height: 206px; width: 693px;"></p>
+<p><img alt="Le noeud permet de récupérer la fréquence et le domaine temporel en utilisant FFT, et ce sans modifier le flux audio" src="fttaudiodata.svg"></p>
 
 <p>On peut accéder aux données en utilisant les méthodes suivantes:</p>
 
@@ -312,7 +311,7 @@ var memoireTampon = context.createBuffer(1, 22050, 22050);</pre>
 </dl>
 
 <div class="note">
-<p><strong>Note</strong>: Pour plus d'informations, voir notre article <a href="/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Visualizations with Web Audio API</a>.</p>
+<p><strong>Note :</strong> Pour plus d'informations, voir notre article <a href="/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Visualizations with Web Audio API</a>.</p>
 </div>
 
 <h2 id="Spatialisations">Spatialisations</h2>
@@ -323,24 +322,24 @@ var memoireTampon = context.createBuffer(1, 22050, 22050);</pre>
 <p>La position du panoramique est décrite avec des coodonnées cartésiennes selon la règle de la main droite, son mouvement à l'aide d'un vecteur de vélocité (nécessaire pour la création d'effets Doppler) et sa direction avec un cone de direction. Le cone peut être très large, par exemple dans le cas de sources omnidirectionnelles.</p>
 </div>
 
-<p><img alt="Le PannerNode donne la position dans l'espace, la vélocité et la direction d'un signal donné" src="https://mdn.mozillademos.org/files/12495/pannernode.svg" style="height: 340px; width: 799px;"></p>
+<p><img alt="Le PannerNode donne la position dans l'espace, la vélocité et la direction d'un signal donné" src="pannernode.svg"></p>
 
 <div>
 <p>La position de l'auditeur est décrite avec des coodonnées cartésiennes selon la règle de la main droite,  son mouvement à l'aide d'un vecteur de vélocité et la direction vers laquelle elle pointe en utilisant deux vecteurs de direction : haut et face. Ceux-ci définissent respectivement la direction vers laquelle pointent le haut de la tête et le bout du nez de l'auditeur, et forment un angle droit entre eux.</p>
 </div>
 
-<p><img alt="On voit la position d'un auditeur, ainsi que les vecteurs de direction haut et de face qui forment un angle de 90°" src="https://mdn.mozillademos.org/files/12497/listener.svg" style="height: 249px; width: 720px;"></p>
+<p><img alt="On voit la position d'un auditeur, ainsi que les vecteurs de direction haut et de face qui forment un angle de 90°" src="listener.svg"></p>
 
 <div class="note">
-<p><strong>Note</strong>: For more information, see our <a href="/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics">Web audio spatialization basics</a> article.</p>
+<p><strong>Note :</strong> For more information, see our <a href="/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics">Web audio spatialization basics</a> article.</p>
 </div>
 
 <h2 id="Fan-in_et_Fan-out">Fan-in et Fan-out</h2>
 
 <p>En audio, <strong>fan-in</strong> désigne le processus par lequel un {{domxref("ChannelMergerNode")}} prend une série d'entrées mono entrée et restitue un seul signal multi-canaux :</p>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/12505/fanin.svg" style="height: 258px; width: 325px;"></p>
+<p><img alt="" src="fanin.svg"></p>
 
 <p><strong>Fan-out</strong> désigne le processus opposé, par lequel un {{domxref("ChannelSplitterNode")}} prend une source multi-canaux en entrée et restitue plusieurs signaux mono en sortie:</p>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/12507/fanout.svg" style="height: 258px; width: 325px;"></p>
+<p><img alt="" src="fanout.svg"></p>
diff --git a/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/listener.svg b/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/listener.svg
new file mode 100644
index 0000000000..a223c765e0
--- /dev/null
+++ b/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/listener.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="719.5" height="248.722" xml:space="preserve"><path fill="none" stroke="#000" stroke-miterlimit="10" d="m191.75 122.152 311.964 33.235M51.833 183.75l118.844-54.493"/><path fill="none" stroke="#797A7D" stroke-miterlimit="10" d="M51.542 156.042v28m-.542 0h32.667m-32.125 0 19.666-19.959"/><path fill="#010101" d="m167.161 124.414 17.678-2.262-12.638 12.413z"/><path fill="none" stroke="#000" stroke-miterlimit="10" d="m192.78 118.25 116.136-60.047"/><path fill="#010101" d="m305.175 53.531 17.551-3.095-12.037 12.997z"/><path fill="#797A7D" d="m48.238 156.042 3.364-9.833 3.245 9.807zm34.916 24.696 9.833 3.364-9.807 3.245zm-14.807-18.467 9.066-5.081-4.126 9.472z"/><path fill="#010101" d="m499.591 149.274 16.157 7.522-17.312 3.753z"/><text transform="translate(45.5 197.25)" fill="#797A7D" font-family="'ArialMT'" font-size="12">0</text><path fill="none" stroke="#719FD0" d="m102.5 42 33.5 95.75M365.597 99l-148.421 20.2m105.55-60.997 85.774-8.157m-109 91.762L259 184.042"/><circle fill="#010101" stroke="#719FD0" cx="188.583" cy="120.917" r="4.667"/><path fill="none" stroke="#000" stroke-miterlimit="10" d="m198.616 115.232 11.946 2.08-9.979 5.856"/><g font-family="'ArialMT'" font-size="12"><text transform="translate(413.597 54.124)">Vecteur de direction haut</text><text transform="translate(373 101)">Les deux vecteurs forment un angle droit (90°)</text><text transform="translate(202.563 199.615)">Vecteur de direction face</text><text transform="translate(16.738 34.75)">Vecteur de positionnement plaçant la source dans l’espace</text></g></svg>
+\ No newline at end of file
diff --git a/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/pannernode.svg b/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/pannernode.svg
new file mode 100644
index 0000000000..1c2da226ff
--- /dev/null
+++ b/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/pannernode.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="798.989" height="339.657" xml:space="preserve"><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="350.572" y1="166.922" x2="364.528" y2="101.264"><stop offset="0" style="stop-color:#000"/><stop offset=".047" style="stop-color:#4c4c4e;stop-opacity:.9676"/><stop offset=".119" style="stop-color:#76777a;stop-opacity:.9175"/><stop offset=".195" style="stop-color:#97999c;stop-opacity:.8649"/><stop offset=".272" style="stop-color:#b5b7b9;stop-opacity:.811"/><stop offset=".353" style="stop-color:#cfd0d2;stop-opacity:.7552"/><stop offset=".436" style="stop-color:#e2e3e4;stop-opacity:.6971"/><stop offset=".525" style="stop-color:#f1f1f2;stop-opacity:.6356"/><stop offset=".622" style="stop-color:#fafafa;stop-opacity:.5683"/><stop offset=".742" style="stop-color:#fff;stop-opacity:.4847"/><stop offset="1" style="stop-color:#828486;stop-opacity:0"/></linearGradient><path fill="url(#a)" stroke="#000" stroke-miterlimit="10" d="M191.465 132h317.667s18.667 4 9 26.333c0 0-15 28-42.667 34 0 0-8-.333-24-4 0 0-249.667-53.666-260-56.333z"/><path fill="none" stroke="#000" stroke-miterlimit="10" d="m191.465 132 363.333 37.828M32.131 206l144.667-66.333M131.131 231l60.334-97.667"/><circle fill="#010101" stroke="#719FD0" cx="192.465" cy="132" r="4.667"/><path fill="none" stroke="#797A7D" stroke-miterlimit="10" d="M31.84 178.292v28m-.542 0h32.666m-32.124 0 19.666-19.959"/><path fill="#010101" d="m136.265 233.093-13.96 11.078 4.397-17.16zm32.069-96.371 17.678-2.262-12.638 12.414z"/><path fill="#797A7D" d="m28.536 178.292 3.363-9.833 3.246 9.807zm34.916 24.696 9.833 3.364-9.807 3.245zm-14.807-18.467 9.065-5.081-4.126 9.472z"/><path fill="#010101" d="m556.342 163.985 16.157 7.522-17.312 3.753z"/><text transform="translate(25.798 219.5)" fill="#797A7D" font-family="'ArialMT'" font-size="12">0</text><path fill="none" stroke="#719FD0" d="m97.798 88.5 18.5 71.5m365-101-32.906 82.5m-280.469 42.25L211.298 271m319.183-96.246 14.611 56.468"/><g font-family="'ArialMT'" font-size="12"><text transform="translate(125.512 292.167)">Vecteur de velocité indique comment la source se déplace</text><text transform="translate(420.894 45.667)">Cone dans lequel on peut écouter le son</text><text transform="translate(413.394 251.167)">Vecteur indiquant la direction vers laquelle pointe le PannerNode</text><text transform="translate(31.298 73.417)">Vecteur de positionnement plaçant la source dans l’espace </text></g></svg>
+\ No newline at end of file
diff --git a/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/sampleframe.svg b/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/sampleframe.svg
new file mode 100644
index 0000000000..72f6671a53
--- /dev/null
+++ b/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/sampleframe.svg
@@ -0,0 +1,133 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="622.281px" height="109.5px" viewBox="0 0 622.281 109.5" enable-background="new 0 0 622.281 109.5" xml:space="preserve">
+<g id="Calque_4">
+	<g>
+		<path fill="none" stroke="#9D9D9D" stroke-width="3" stroke-miterlimit="10" d="M162.011,86.586    c0,8.577-7.695,15.529-17.187,15.529h-21.961c-9.491,0-17.187-6.953-17.187-15.529V29.645c0-8.577,7.695-15.529,17.187-15.529    h21.961c9.491,0,17.187,6.953,17.187,15.529V86.586z"/>
+		<text transform="matrix(1 0 0 1 122.6196 26.1665)" font-family="'ArialMT'" font-size="8">trame</text>
+		<text transform="matrix(1 0 0 1 112.519 46.1665)" font-family="'ArialMT'" font-size="8">échantillon</text>
+		<text transform="matrix(1 0 0 1 112.519 75.4995)" font-family="'ArialMT'" font-size="8">échantillon</text>
+	</g>
+	<g>
+		<path fill="none" stroke="#9D9D9D" stroke-width="3" stroke-miterlimit="10" d="M218.345,86.586    c0,8.577-7.695,15.529-17.187,15.529h-21.961c-9.491,0-17.187-6.953-17.187-15.529V29.645c0-8.577,7.695-15.529,17.187-15.529    h21.961c9.491,0,17.187,6.953,17.187,15.529V86.586z"/>
+		<text transform="matrix(1 0 0 1 178.9536 26.1665)" font-family="'ArialMT'" font-size="8">trame</text>
+		<text transform="matrix(1 0 0 1 168.853 46.1665)" font-family="'ArialMT'" font-size="8">échantillon</text>
+		<text transform="matrix(1 0 0 1 168.853 75.4995)" font-family="'ArialMT'" font-size="8">échantillon</text>
+	</g>
+	<g>
+		<path fill="none" stroke="#9D9D9D" stroke-width="3" stroke-miterlimit="10" d="M274.679,86.586    c0,8.577-7.695,15.529-17.187,15.529h-21.961c-9.491,0-17.187-6.953-17.187-15.529V29.645c0-8.577,7.695-15.529,17.187-15.529    h21.961c9.491,0,17.187,6.953,17.187,15.529V86.586z"/>
+		<text transform="matrix(1 0 0 1 235.2876 26.1665)" font-family="'ArialMT'" font-size="8">trame</text>
+		<text transform="matrix(1 0 0 1 225.187 46.1665)" font-family="'ArialMT'" font-size="8">échantillon</text>
+		<text transform="matrix(1 0 0 1 225.187 75.4995)" font-family="'ArialMT'" font-size="8">échantillon</text>
+	</g>
+	<g>
+		<path fill="none" stroke="#9D9D9D" stroke-width="3" stroke-miterlimit="10" d="M331.013,86.586    c0,8.577-7.695,15.529-17.187,15.529h-21.961c-9.491,0-17.187-6.953-17.187-15.529V29.645c0-8.577,7.695-15.529,17.187-15.529    h21.961c9.491,0,17.187,6.953,17.187,15.529V86.586z"/>
+		<text transform="matrix(1 0 0 1 291.6216 26.1665)" font-family="'ArialMT'" font-size="8">trame</text>
+		<text transform="matrix(1 0 0 1 281.521 46.1665)" font-family="'ArialMT'" font-size="8">échantillon</text>
+		<text transform="matrix(1 0 0 1 281.521 75.4995)" font-family="'ArialMT'" font-size="8">échantillon</text>
+	</g>
+	<g>
+		<path fill="none" stroke="#9D9D9D" stroke-width="3" stroke-miterlimit="10" d="M218.345,86.586    c0,8.577-7.695,15.529-17.187,15.529h-21.961c-9.491,0-17.187-6.953-17.187-15.529V29.645c0-8.577,7.695-15.529,17.187-15.529    h21.961c9.491,0,17.187,6.953,17.187,15.529V86.586z"/>
+		<text transform="matrix(1 0 0 1 178.9536 26.1665)" font-family="'ArialMT'" font-size="8">trame</text>
+		<text transform="matrix(1 0 0 1 168.853 46.1665)" font-family="'ArialMT'" font-size="8">échantillon</text>
+		<text transform="matrix(1 0 0 1 168.853 75.4995)" font-family="'ArialMT'" font-size="8">échantillon</text>
+	</g>
+	<g>
+		<path fill="none" stroke="#9D9D9D" stroke-width="3" stroke-miterlimit="10" d="M274.679,86.586    c0,8.577-7.695,15.529-17.187,15.529h-21.961c-9.491,0-17.187-6.953-17.187-15.529V29.645c0-8.577,7.695-15.529,17.187-15.529    h21.961c9.491,0,17.187,6.953,17.187,15.529V86.586z"/>
+		<text transform="matrix(1 0 0 1 235.2876 26.1665)" font-family="'ArialMT'" font-size="8">trame</text>
+		<text transform="matrix(1 0 0 1 225.187 46.1665)" font-family="'ArialMT'" font-size="8">échantillon</text>
+		<text transform="matrix(1 0 0 1 225.187 75.4995)" font-family="'ArialMT'" font-size="8">échantillon</text>
+	</g>
+	<g>
+		<path fill="none" stroke="#9D9D9D" stroke-width="3" stroke-miterlimit="10" d="M331.013,86.586    c0,8.577-7.695,15.529-17.187,15.529h-21.961c-9.491,0-17.187-6.953-17.187-15.529V29.645c0-8.577,7.695-15.529,17.187-15.529    h21.961c9.491,0,17.187,6.953,17.187,15.529V86.586z"/>
+		<text transform="matrix(1 0 0 1 291.6216 26.1665)" font-family="'ArialMT'" font-size="8">trame</text>
+		<text transform="matrix(1 0 0 1 281.521 46.1665)" font-family="'ArialMT'" font-size="8">échantillon</text>
+		<text transform="matrix(1 0 0 1 281.521 75.4995)" font-family="'ArialMT'" font-size="8">échantillon</text>
+	</g>
+	<g>
+		<path fill="none" stroke="#9D9D9D" stroke-width="3" stroke-miterlimit="10" d="M387.347,86.586    c0,8.577-7.695,15.529-17.187,15.529h-21.961c-9.491,0-17.187-6.953-17.187-15.529V29.645c0-8.577,7.695-15.529,17.187-15.529    h21.961c9.491,0,17.187,6.953,17.187,15.529V86.586z"/>
+		<text transform="matrix(1 0 0 1 347.9551 26.1665)" font-family="'ArialMT'" font-size="8">trame</text>
+		<text transform="matrix(1 0 0 1 337.855 46.1665)" font-family="'ArialMT'" font-size="8">échantillon</text>
+		<text transform="matrix(1 0 0 1 337.855 75.4995)" font-family="'ArialMT'" font-size="8">échantillon</text>
+	</g>
+	<g>
+		<path fill="none" stroke="#9D9D9D" stroke-width="3" stroke-miterlimit="10" d="M443.681,86.586    c0,8.577-7.695,15.529-17.187,15.529h-21.961c-9.491,0-17.187-6.953-17.187-15.529V29.645c0-8.577,7.695-15.529,17.187-15.529    h21.961c9.491,0,17.187,6.953,17.187,15.529V86.586z"/>
+		<text transform="matrix(1 0 0 1 404.2891 26.1665)" font-family="'ArialMT'" font-size="8">trame</text>
+		<text transform="matrix(1 0 0 1 394.1895 46.1665)" font-family="'ArialMT'" font-size="8">échantillon</text>
+		<text transform="matrix(1 0 0 1 394.1895 75.4995)" font-family="'ArialMT'" font-size="8">échantillon</text>
+	</g>
+	<g>
+		<path fill="none" stroke="#9D9D9D" stroke-width="3" stroke-miterlimit="10" d="M500.015,86.586    c0,8.577-7.695,15.529-17.187,15.529h-21.961c-9.491,0-17.187-6.953-17.187-15.529V29.645c0-8.577,7.695-15.529,17.187-15.529    h21.961c9.491,0,17.187,6.953,17.187,15.529V86.586z"/>
+		<text transform="matrix(1 0 0 1 460.623 26.1665)" font-family="'ArialMT'" font-size="8">trame</text>
+		<text transform="matrix(1 0 0 1 450.5234 46.1665)" font-family="'ArialMT'" font-size="8">échantillon</text>
+		<text transform="matrix(1 0 0 1 450.5234 75.4995)" font-family="'ArialMT'" font-size="8">échantillon</text>
+	</g>
+	<g>
+		<path fill="none" stroke="#9D9D9D" stroke-width="3" stroke-miterlimit="10" d="M556.349,86.586    c0,8.577-7.695,15.529-17.187,15.529h-21.961c-9.491,0-17.187-6.953-17.187-15.529V29.645c0-8.577,7.695-15.529,17.187-15.529    h21.961c9.491,0,17.187,6.953,17.187,15.529V86.586z"/>
+		<text transform="matrix(1 0 0 1 516.957 26.1665)" font-family="'ArialMT'" font-size="8">trame</text>
+		<text transform="matrix(1 0 0 1 506.8574 46.1665)" font-family="'ArialMT'" font-size="8">échantillon</text>
+		<text transform="matrix(1 0 0 1 506.8574 75.4995)" font-family="'ArialMT'" font-size="8">échantillon</text>
+	</g>
+	<g>
+		<path fill="none" stroke="#9D9D9D" stroke-width="3" stroke-miterlimit="10" d="M443.681,86.586    c0,8.577-7.695,15.529-17.187,15.529h-21.961c-9.491,0-17.187-6.953-17.187-15.529V29.645c0-8.577,7.695-15.529,17.187-15.529    h21.961c9.491,0,17.187,6.953,17.187,15.529V86.586z"/>
+		<text transform="matrix(1 0 0 1 404.2891 26.1665)" font-family="'ArialMT'" font-size="8">trame</text>
+		<text transform="matrix(1 0 0 1 394.1895 46.1665)" font-family="'ArialMT'" font-size="8">échantillon</text>
+		<text transform="matrix(1 0 0 1 394.1895 75.4995)" font-family="'ArialMT'" font-size="8">échantillon</text>
+	</g>
+	<g>
+		<path fill="none" stroke="#9D9D9D" stroke-width="3" stroke-miterlimit="10" d="M500.015,86.586    c0,8.577-7.695,15.529-17.187,15.529h-21.961c-9.491,0-17.187-6.953-17.187-15.529V29.645c0-8.577,7.695-15.529,17.187-15.529    h21.961c9.491,0,17.187,6.953,17.187,15.529V86.586z"/>
+		<text transform="matrix(1 0 0 1 460.623 26.1665)" font-family="'ArialMT'" font-size="8">trame</text>
+		<text transform="matrix(1 0 0 1 450.5234 46.1665)" font-family="'ArialMT'" font-size="8">échantillon</text>
+		<text transform="matrix(1 0 0 1 450.5234 75.4995)" font-family="'ArialMT'" font-size="8">échantillon</text>
+	</g>
+	<g>
+		<path fill="none" stroke="#9D9D9D" stroke-width="3" stroke-miterlimit="10" d="M556.349,86.586    c0,8.577-7.695,15.529-17.187,15.529h-21.961c-9.491,0-17.187-6.953-17.187-15.529V29.645c0-8.577,7.695-15.529,17.187-15.529    h21.961c9.491,0,17.187,6.953,17.187,15.529V86.586z"/>
+		<text transform="matrix(1 0 0 1 516.957 26.1665)" font-family="'ArialMT'" font-size="8">trame</text>
+		<text transform="matrix(1 0 0 1 506.8574 46.1665)" font-family="'ArialMT'" font-size="8">échantillon</text>
+		<text transform="matrix(1 0 0 1 506.8574 75.4995)" font-family="'ArialMT'" font-size="8">échantillon</text>
+	</g>
+	<g>
+		<path fill="none" stroke="#9D9D9D" stroke-width="3" stroke-miterlimit="10" d="M387.347,86.586    c0,8.577-7.695,15.529-17.187,15.529h-21.961c-9.491,0-17.187-6.953-17.187-15.529V29.645c0-8.577,7.695-15.529,17.187-15.529    h21.961c9.491,0,17.187,6.953,17.187,15.529V86.586z"/>
+		<text transform="matrix(1 0 0 1 347.9551 26.1665)" font-family="'ArialMT'" font-size="8">trame</text>
+		<text transform="matrix(1 0 0 1 337.855 46.1665)" font-family="'ArialMT'" font-size="8">échantillon</text>
+		<text transform="matrix(1 0 0 1 337.855 75.4995)" font-family="'ArialMT'" font-size="8">échantillon</text>
+	</g>
+	<g>
+		<path fill="none" stroke="#9D9D9D" stroke-width="3" stroke-miterlimit="10" d="M443.681,86.586    c0,8.577-7.695,15.529-17.187,15.529h-21.961c-9.491,0-17.187-6.953-17.187-15.529V29.645c0-8.577,7.695-15.529,17.187-15.529    h21.961c9.491,0,17.187,6.953,17.187,15.529V86.586z"/>
+		<text transform="matrix(1 0 0 1 404.2891 26.1665)" font-family="'ArialMT'" font-size="8">trame</text>
+		<text transform="matrix(1 0 0 1 394.1895 46.1665)" font-family="'ArialMT'" font-size="8">échantillon</text>
+		<text transform="matrix(1 0 0 1 394.1895 75.4995)" font-family="'ArialMT'" font-size="8">échantillon</text>
+	</g>
+	<g>
+		<path fill="none" stroke="#9D9D9D" stroke-width="3" stroke-miterlimit="10" d="M500.015,86.586    c0,8.577-7.695,15.529-17.187,15.529h-21.961c-9.491,0-17.187-6.953-17.187-15.529V29.645c0-8.577,7.695-15.529,17.187-15.529    h21.961c9.491,0,17.187,6.953,17.187,15.529V86.586z"/>
+		<text transform="matrix(1 0 0 1 460.623 26.1665)" font-family="'ArialMT'" font-size="8">trame</text>
+		<text transform="matrix(1 0 0 1 450.5234 46.1665)" font-family="'ArialMT'" font-size="8">échantillon</text>
+		<text transform="matrix(1 0 0 1 450.5234 75.4995)" font-family="'ArialMT'" font-size="8">échantillon</text>
+	</g>
+	<g>
+		<path fill="none" stroke="#9D9D9D" stroke-width="3" stroke-miterlimit="10" d="M556.349,86.586    c0,8.577-7.695,15.529-17.187,15.529h-21.961c-9.491,0-17.187-6.953-17.187-15.529V29.645c0-8.577,7.695-15.529,17.187-15.529    h21.961c9.491,0,17.187,6.953,17.187,15.529V86.586z"/>
+		<text transform="matrix(1 0 0 1 516.957 26.1665)" font-family="'ArialMT'" font-size="8">trame</text>
+		<text transform="matrix(1 0 0 1 506.8574 46.1665)" font-family="'ArialMT'" font-size="8">échantillon</text>
+		<text transform="matrix(1 0 0 1 506.8574 75.4995)" font-family="'ArialMT'" font-size="8">échantillon</text>
+	</g>
+	<g>
+		<path fill="none" stroke="#9D9D9D" stroke-width="3" stroke-miterlimit="10" d="M612.683,86.586    c0,8.577-7.695,15.529-17.187,15.529h-21.961c-9.491,0-17.187-6.953-17.187-15.529V29.645c0-8.577,7.695-15.529,17.187-15.529    h21.961c9.491,0,17.187,6.953,17.187,15.529V86.586z"/>
+		<text transform="matrix(1 0 0 1 573.291 26.1665)" font-family="'ArialMT'" font-size="8">trame</text>
+		<text transform="matrix(1 0 0 1 563.1914 46.1665)" font-family="'ArialMT'" font-size="8">échantillon</text>
+		<text transform="matrix(1 0 0 1 563.1914 75.4995)" font-family="'ArialMT'" font-size="8">échantillon</text>
+	</g>
+	<g>
+		<path fill="none" stroke="#9D9D9D" stroke-width="3" stroke-miterlimit="10" d="M612.683,86.586    c0,8.577-7.695,15.529-17.187,15.529h-21.961c-9.491,0-17.187-6.953-17.187-15.529V29.645c0-8.577,7.695-15.529,17.187-15.529    h21.961c9.491,0,17.187,6.953,17.187,15.529V86.586z"/>
+		<text transform="matrix(1 0 0 1 573.291 26.1665)" font-family="'ArialMT'" font-size="8">trame</text>
+		<text transform="matrix(1 0 0 1 563.1914 46.1665)" font-family="'ArialMT'" font-size="8">échantillon</text>
+		<text transform="matrix(1 0 0 1 563.1914 75.4995)" font-family="'ArialMT'" font-size="8">échantillon</text>
+	</g>
+	<text transform="matrix(1 0 0 1 19.2275 48.833)" font-family="'ArialMT'" font-size="10">canal gauche -&gt;</text>
+	<text transform="matrix(1 0 0 1 33.082 76.4995)" font-family="'ArialMT'" font-size="10">canal droit -&gt;</text>
+</g>
+<g id="Calque_3">
+	<line fill="none" stroke="#000000" stroke-miterlimit="10" x1="105.352" y1="59" x2="612.7" y2="59"/>
+	<path fill="none" stroke="#000000" stroke-miterlimit="10" d="M612.7,72.27c0,9.452-5.272,17.115-11.777,17.115H117.129   c-6.504,0-11.777-7.663-11.777-17.115V48.5c0-9.452,5.273-17.115,11.777-17.115h483.794c6.505,0,11.777,7.663,11.777,17.115V72.27z   "/>
+</g>
+</svg>
+\ No newline at end of file
diff --git a/files/fr/web/api/web_audio_api/index.html b/files/fr/web/api/web_audio_api/index.html
index 22c996965b..087d05a380 100644
--- a/files/fr/web/api/web_audio_api/index.html
+++ b/files/fr/web/api/web_audio_api/index.html
@@ -4,35 +4,35 @@ slug: Web/API/Web_Audio_API
 translation_of: Web/API/Web_Audio_API
 ---
 <div>
-<p><span style="line-height: 1.5;">La Web Audio API propose un système puissant et flexible pour contrôler les données audio sur internet. Elle permet notamment de sélectionner des sources audio (microphone, flux media), d'y ajouter des effets, de créer des visualisations, d'appliquer des effets de spatialisation (comme la balance), etc.</span></p>
+<p>La Web Audio API propose un système puissant et flexible pour contrôler les données audio sur internet. Elle permet notamment de sélectionner des sources audio (microphone, flux media), d'y ajouter des effets, de créer des visualisations, d'appliquer des effets de spatialisation (comme la balance), etc.</p>
 </div>
 
 <h2 id="Concepts_et_usages">Concepts et usages</h2>
 
-<p><span style="line-height: 1.5;">La Web Audio API effectue des opérations dans un <strong>contexte audio</strong>; elle a été conçue pour supporter le <strong>routing modulaire</strong>. Les opérations audio basiques sont réalisées via des <strong>noeuds audio</strong> reliés entre eux pour former un <strong>graphe de routage audio</strong>. Plusieurs sources - avec différents types d'agencements de canaux - peuvent être supportées, même dans un seul contexte. Ce design modulaire et flexible permet de créer des fonctions audio complexes avec des effets dynamiques.</span></p>
+<p>La Web Audio API effectue des opérations dans un <strong>contexte audio</strong>; elle a été conçue pour supporter le <strong>routing modulaire</strong>. Les opérations audio basiques sont réalisées via des <strong>noeuds audio</strong> reliés entre eux pour former un <strong>graphe de routage audio</strong>. Plusieurs sources - avec différents types d'agencements de canaux - peuvent être supportées, même dans un seul contexte. Ce design modulaire et flexible permet de créer des fonctions audio complexes avec des effets dynamiques.</p>
 
-<p><span style="line-height: 1.5;">Les noeuds audio sont reliés au niveau de leurs entrées et sorties, formant des chaînes ou des réseaux simples. Il peut y avoir une ou plusieurs sources. Les sources fournissent des tableaux d'intensités sonores (échantillons), souvent plusieurs dizaines de milliers par seconde. Ceux-ci peuvent être calculées mathématiquement </span>(avec un {{domxref("OscillatorNode")}}), ou peuvent provenir de fichiers sons ou vidéos (comme {{domxref("AudioBufferSourceNode")}} ou {{domxref("MediaElementAudioSourceNode")}}) ou de flux audio ({{domxref("MediaStreamAudioSourceNode")}}). En réalité, les fichiers sons sont eux-même des enregistrements d'intensités sonores, qui viennent de microphones ou d'instruments électriques, et sont mixés dans une seule onde complexe.</p>
+<p>Les noeuds audio sont reliés au niveau de leurs entrées et sorties, formant des chaînes ou des réseaux simples. Il peut y avoir une ou plusieurs sources. Les sources fournissent des tableaux d'intensités sonores (échantillons), souvent plusieurs dizaines de milliers par seconde. Ceux-ci peuvent être calculées mathématiquement (avec un {{domxref("OscillatorNode")}}), ou peuvent provenir de fichiers sons ou vidéos (comme {{domxref("AudioBufferSourceNode")}} ou {{domxref("MediaElementAudioSourceNode")}}) ou de flux audio ({{domxref("MediaStreamAudioSourceNode")}}). En réalité, les fichiers sons sont eux-même des enregistrements d'intensités sonores, qui viennent de microphones ou d'instruments électriques, et sont mixés dans une seule onde complexe.</p>
 
 <p>Les sorties de ces noeuds peuvent être liées aux entrées d'autres noeuds, qui mixent ces flux d'échantillons sonores ou les séparent en différents flux. Une modification courante est la multiplications des échantillons par une valeur afin d'en augmenter ou diminuer le volume sonore (comme c'est le cas pour le {{domxref("GainNode")}}). Le son est ensuite lié à une destination ({{domxref("AudioContext.destination")}}), qui l'envoie aux enceintes ou au casque audio. Cette dernière connexion n'est utile que si le son doit être entendu.<br>
  <br>
  Un processus de développement typique avec web audio ressemble à ceci :</p>
 
-<ol>
+<ul>
  <li>Création d'un contexte audio</li>
  <li>Dans ce contexte, création des sources — comme <code>&lt;audio&gt;</code>, oscillator, stream</li>
  <li>Création de noeuds d'effets, comme la réverbération, les filtres biquad, la balance, le compresseur</li>
  <li>Choix de la sortie audio (appelée destination), par exemple les enceintes du système</li>
  <li>Connection des sources aux effets, et des effets à la destination</li>
-</ol>
+</ul>
 
-<p><img alt="A simple box diagram with an outer box labeled Audio context, and three inner boxes labeled Sources, Effects and Destination. The three inner boxes have arrow between them pointing from left to right, indicating the flow of audio information." src="https://mdn.mozillademos.org/files/12523/webaudioAPI.svg" style="display: block; height: 143px; margin: 0px auto; width: 643px;"></p>
+<p><img alt="Un diagramme de boîte avec une boîte extérieure intitulée contexte audio et trois boîtes à l'intérieur intitulées source, effets et destination. Les trois boîtes intérieures ont des flèches qui pointent de la gauche vers la droite, indiquant le sens du flux de l'information audio." src="audio-context_.png"></p>
 
 <p>Le timing est contrôlé avec une grande précision et une latence faible, ce qui permet aux développeurs d'écrire un code qui réagit précisément aux événements et qui est capable de traiter des échantillons précis, même avec un taux d'échantillonnage élevé. Cela permet d'envisager des applications telles que des boîtes à rythme ou des séquenceurs.</p>
 
 <p>La Web Audio API permet également de contrôler la <em>spatialisation</em> du son. En utilisant un système basé sur le modèle <em>émetteur - récepteur, </em>elle permet le contrôle de la balance ainsi que la gestion de l'atténuation du son en fonction de la distance, ou effet doppler, induite par un déplacement de la source sonore (ou de l'auditeur).</p>
 
 <div class="note">
-<p><strong>Note</strong>: Vous pouvez lire d'avantage de détails sur la Web Audio API en vous rendant sur notre article<a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API"> Concepts de base de la Web Audio API</a>.</p>
+<p><strong>Note :</strong> Vous pouvez lire d'avantage de détails sur la Web Audio API en vous rendant sur notre article<a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API"> Concepts de base de la Web Audio API</a>.</p>
 </div>
 
 <h2 id="Interface_de_la_Web_Audio_API">Interface de la Web Audio API</h2>
@@ -58,7 +58,7 @@ translation_of: Web/API/Web_Audio_API
 
 <dl>
  <dt>{{domxref("OscillatorNode")}}</dt>
- <dd>Un objet <strong><code style="font-size: 14px;">OscillatorNode</code></strong><strong> </strong>est un module de traitement audio qui génère la création d'une onde sinusoïdale d'une certaine fréquence.</dd>
+ <dd>Un objet <strong><code>OscillatorNode</code></strong><strong> </strong>est un module de traitement audio qui génère la création d'une onde sinusoïdale d'une certaine fréquence.</dd>
  <dt>{{domxref("AudioBuffer")}}</dt>
  <dd>Un objet <strong><code>AudioBuffer</code></strong> est un petit morceau de contenu audio monté en mémoire. Il peut être créé à partir d'un fichier audio avec la méthode {{ domxref("AudioContext.decodeAudioData()") }}, ou à partir de données brutes en utilisant {{ domxref("AudioContext.createBuffer()") }}. Une fois décodé sous cette forme, la source audio peut être placée dans un {{ domxref("AudioBufferSourceNode") }}.</dd>
  <dt>{{domxref("AudioBufferSourceNode")}}</dt>
@@ -66,7 +66,7 @@ translation_of: Web/API/Web_Audio_API
  <dt>{{domxref("MediaElementAudioSourceNode")}}</dt>
  <dd>Un objet <code><strong>MediaElementAudio</strong></code><strong><code>SourceNode</code></strong> est une source audio composée d'un élément  HTML5 {{ htmlelement("audio") }} ou {{ htmlelement("video") }}. C'est un {{domxref("AudioNode")}} qui se comporte comme une source audio.</dd>
  <dt>{{domxref("MediaStreamAudioSourceNode")}}</dt>
- <dd>Un objet <code><strong>MediaStreamAudio</strong></code><strong><code>SourceNode</code></strong> est une source audio composée d'un <a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> {{domxref("MediaStream")}} (tel qu'une webcam ou un microphone). C'est un {{domxref("AudioNode")}} qui se comporte comme une source audio.</dd>
+ <dd>Un objet <code><strong>MediaStreamAudio</strong></code><strong><code>SourceNode</code></strong> est une source audio composée d'un <a href="/en-US/docs/WebRTC">WebRTC</a> {{domxref("MediaStream")}} (tel qu'une webcam ou un microphone). C'est un {{domxref("AudioNode")}} qui se comporte comme une source audio.</dd>
 </dl>
 
 <h3 id="Définition_des_filtres_d'effets_audio">Définition des filtres d'effets audio</h3>
@@ -96,7 +96,7 @@ translation_of: Web/API/Web_Audio_API
  <dt>{{domxref("AudioDestinationNode")}}</dt>
  <dd>Un noeud <strong><code>AudioDestinationNode</code></strong> représente la destination finale d'une source audio source dans un contexte donné — en général les enceintes du matériel.</dd>
  <dt>{{domxref("MediaStreamAudioDestinationNode")}}</dt>
- <dd>Un noeud <code><strong>MediaStreamAudio</strong></code><strong><code>DestinationNode</code></strong> représente une destination audio constituée d'un {{domxref("MediaStream")}} <a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> à une seule piste <code>AudioMediaStreamTrack</code>; il peut être utilisé de façon similaire à un {{domxref("MediaStream")}} obtenu avec {{ domxref("Navigator.getUserMedia") }}. C'est un {{domxref("AudioNode")}} qui se comporte comme une destination audio.</dd>
+ <dd>Un noeud <code><strong>MediaStreamAudio</strong></code><strong><code>DestinationNode</code></strong> représente une destination audio constituée d'un {{domxref("MediaStream")}} <a href="/en-US/docs/WebRTC">WebRTC</a> à une seule piste <code>AudioMediaStreamTrack</code>; il peut être utilisé de façon similaire à un {{domxref("MediaStream")}} obtenu avec {{ domxref("Navigator.getUserMedia") }}. C'est un {{domxref("AudioNode")}} qui se comporte comme une destination audio.</dd>
 </dl>
 
 <h3 id="Analyse_des_données_et_visualisation">Analyse des données et visualisation</h3>
@@ -127,7 +127,7 @@ translation_of: Web/API/Web_Audio_API
 <h3 id="Traitement_audio_avec_JavaScript">Traitement audio avec JavaScript</h3>
 
 <div class="note">
-<p><strong>Note</strong>: Au jour de la publication de la spécification Web Audio API le 29 août 2014, ces fonctionnalités sont dépréciées, et seront bientôt remplacées par {{ anch("Audio_Workers") }}.</p>
+<p><strong>Note :</strong> Au jour de la publication de la spécification Web Audio API le 29 août 2014, ces fonctionnalités sont dépréciées, et seront bientôt remplacées par {{ anch("Audio_Workers") }}.</p>
 </div>
 
 <dl>
@@ -152,7 +152,7 @@ translation_of: Web/API/Web_Audio_API
  <dd>The <code>OfflineAudioCompletionEvent</code> est envoyé aux fonctions de callback qui écoutent l'évènement {{event("complete")}} event implements this interface.</dd>
 </dl>
 
-<h3 id="Audio_Workers" name="Audio_Workers">Audio Workers</h3>
+<h3 id="Audio_Workers">Audio Workers</h3>
 
 <p>Les Audio workers offrent la possibilité de traiter le son directement dans le contexte d'un <a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">web worker</a>. En date du 29 August 2014, ils ne sont encore implémentés par aucun navigateur. Lorsqu'ils seront implémentés, ils remplaceront {{domxref("ScriptProcessorNode")}}, et les autres fonctionnalités mentionnées dans la section <a href="#Audio_processing_via_JavaScript">Traitement audio avec JavaScript</a> ci-avant.</p>
 
@@ -165,7 +165,7 @@ translation_of: Web/API/Web_Audio_API
  <dd>UN objet <code>Event</code> est transmis aux objets {{domxref("AudioWorkerGlobalScope")}} pour effectuer un traitement audio.</dd>
 </dl>
 
-<h2 id="Example" name="Example">Objets obsolètes</h2>
+<h2 id="Example">Objets obsolètes</h2>
 
 <p>Les objets suivants étaient définis dans les versions précédentes de la spécification, mais sont maintenant obsolètes et ont été remplacés.</p>
 
@@ -176,13 +176,13 @@ translation_of: Web/API/Web_Audio_API
  <dd>Utilisé pour définir une forme d'onde périodique. Cet objet est obsolète, et a été remplacé par {{domxref("PeriodicWave")}}.</dd>
 </dl>
 
-<h2 id="Example" name="Example">Exemple</h2>
+<h2 id="Example">Exemple</h2>
 
 <p>Cet exemple montre l'utilisation d'un grand nombre de fonctions Web Audio. La démo est disponible en ligne sur <a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-o-matic</a> (voir aussi le <a href="https://github.com/mdn/voice-change-o-matic"> code source complet sur Github</a>) —c'est une démo expérimentale d'application pour modifier la voix; baissez le son de vos enceintes pour l'utiliser, au moins au début !</p>
 
 <p>Les lignes qui concernent la Web Audio API sont surlignées; si vous voulez en savoir davantage sur les différentes méthodes, consultez la documentation.</p>
 
-<pre class="brush: js; highlight:[1,2,9,10,11,12,36,37,38,39,40,41,62,63,72,114,115,121,123,124,125,147,151]">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); // définition du contexte audio
+<pre class="brush: js">var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); // définition du contexte audio
 // les navigateurs avec un moteur Webkit/blink demandent un préfixe
 
 var voixSelectionnee = document.getElementById("voice"); // case à cocher pour la sélection d'effets de voix
@@ -370,36 +370,32 @@ function muterVoix() { // allumer / éteindre le son
  <li><a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic example</a></li>
  <li><a href="http://mdn.github.io/violent-theremin/">Violent Theremin example</a></li>
  <li><a href="/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialisation_basics">Web audio spatialisation basics</a></li>
- <li><a href="http://www.html5rocks.com/tutorials/webaudio/positional_audio/" title="http://www.html5rocks.com/tutorials/webaudio/positional_audio/">Mixing Positional Audio and WebGL</a></li>
- <li><a href="http://www.html5rocks.com/tutorials/webaudio/games/" title="http://www.html5rocks.com/tutorials/webaudio/games/">Developing Game Audio with the Web Audio API</a></li>
- <li><a href="/en-US/docs/Web/API/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext" title="/en-US/docs/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext">Porting webkitAudioContext code to standards based AudioContext</a></li>
+ <li><a href="http://www.html5rocks.com/tutorials/webaudio/positional_audio/">Mixing Positional Audio and WebGL</a></li>
+ <li><a href="http://www.html5rocks.com/tutorials/webaudio/games/">Developing Game Audio with the Web Audio API</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext">Porting webkitAudioContext code to standards based AudioContext</a></li>
  <li><a href="https://github.com/bit101/tones">Tones</a>: a simple library for playing specific tones/notes using the Web Audio API.</li>
  <li><a href="https://github.com/goldfire/howler.js/">howler.js</a>: a JS audio library that defaults to <a href="https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html">Web Audio API</a> and falls back to <a href="http://www.whatwg.org/specs/web-apps/current-work/#the-audio-element">HTML5 Audio</a>, as well as providing other useful features.</li>
  <li><a href="https://github.com/mattlima/mooog">Mooog</a>: jQuery-style chaining of AudioNodes, mixer-style sends/returns, and more.</li>
 </ul>
 
-<section id="Quick_Links">
-<h3 id="Quicklinks">Quicklinks</h3>
-
-<ol>
- <li data-default-state="open"><strong><a href="#">Guides</a></strong>
+<h3 id="guides">Guides</h3>
 
-  <ol>
+  <ul>
    <li><a href="/fr/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API">Les concepts de base de la Web Audio API</a></li>
    <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser la Web Audio API</a></li>
    <li><a href="/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Visualizations with Web Audio API</a></li>
    <li><a href="/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialisation_basics">Web audio spatialisation basics</a></li>
-   <li><a href="/en-US/docs/Web/API/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext" title="/en-US/docs/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext">Porting webkitAudioContext code to standards based AudioContext</a></li>
-  </ol>
- </li>
- <li data-default-state="open"><strong><a href="#">Exemples</a></strong>
-  <ol>
+   <li><a href="/en-US/docs/Web/API/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext">Porting webkitAudioContext code to standards based AudioContext</a></li>
+  </ul>
+
+<h3 id="démos">Démos</h3>
+  <ul>
    <li><a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a></li>
    <li><a href="http://mdn.github.io/violent-theremin/">Violent Theremin</a></li>
-  </ol>
- </li>
- <li data-default-state="open"><strong><a href="#">Objets</a></strong>
-  <ol>
+  </ul>
+
+<h3 id="api">API</h3>
+  <ul>
    <li>{{domxref("AnalyserNode")}}</li>
    <li>{{domxref("AudioBuffer")}}</li>
    <li>{{domxref("AudioBufferSourceNode")}}</li>
@@ -429,7 +425,5 @@ function muterVoix() { // allumer / éteindre le son
    <li>{{domxref("PeriodicWave")}}</li>
    <li>{{domxref("ScriptProcessorNode")}}</li>
    <li>{{domxref("WaveShaperNode")}}</li>
-  </ol>
- </li>
-</ol>
-</section>
+  </ul>
+
diff --git a/files/fr/web/api/web_audio_api/using_web_audio_api/index.html b/files/fr/web/api/web_audio_api/using_web_audio_api/index.html
index f32d382574..26ea00da32 100644
--- a/files/fr/web/api/web_audio_api/using_web_audio_api/index.html
+++ b/files/fr/web/api/web_audio_api/using_web_audio_api/index.html
@@ -3,9 +3,8 @@ title: Utiliser la Web Audio API
 slug: Web/API/Web_Audio_API/Using_Web_Audio_API
 translation_of: Web/API/Web_Audio_API/Using_Web_Audio_API
 ---
-<div class="summary">
-<p><span class="seoSummary">La <a href="/en-US/docs/Web_Audio_API">Web Audio API</a> offre un méchanisme à la fois simple et puissant pour implémenter et manipuler le contenu audio dans une application web. Elle permet de manipuler mixages audio, effets, balance, etc. Cet article donne les bases pour l'utiliser, à travers quelques exemples simples..</span></p>
-</div>
+
+<p>La <a href="/en-US/docs/Web_Audio_API">Web Audio API</a> offre un méchanisme à la fois simple et puissant pour implémenter et manipuler le contenu audio dans une application web. Elle permet de manipuler mixages audio, effets, balance, etc. Cet article donne les bases pour l'utiliser, à travers quelques exemples simples.</p>
 
 <div>
 <p>La Web Audio API ne vient pas remplacer l'élément <a href="/en-US/docs/Web/HTML/Element/audio">&lt;audio&gt;</a>, mais plutôt le compléter, de même que l'API Canvas 2D coexiste avec l'élément <a href="/en-US/docs/Web/HTML/Element/Img">&lt;video&gt;</a>. Si vous avez seulement besoin de contrôler la lecture d'un fichier audio, &lt;audio&gt; est probablement une meilleure solution, plus rapide. Si vous voulez procéder à un traitement audio plus complexe et à la lecture d'une source, la Web Audio API offre davantage de possibilités en termes de puissance et de contrôle.</p>
@@ -19,16 +18,12 @@ translation_of: Web/API/Web_Audio_API/Using_Web_Audio_API
 
 <p>Notre premier exemple est <a href="http://github.com/mdn/voice-change-o-matic">Voice-change-O-matic</a>, une application web de déformation de la voix, qui permet de choisir différents effets et modes de visualisation. Cette application est rudimentaire, mais elle permet de montrer l'utilisation de plusieurs fonctionnalités de la Web Audio API combinées ensemble  (<a href="http://mdn.github.io/voice-change-o-matic/">run the Voice-change-O-matic live</a>).</p>
 
-<p><img alt="A UI with a sound wave being shown, and options for choosing voice effects and visualizations." src="https://mdn.mozillademos.org/files/7921/voice-change-o-matic.png" style="display: block; height: 500px; margin: 0px auto; width: 640px;"></p>
-
-<p>Un autre exemple pour illustrer la Web Audio API est le <a href="http://mdn.github.io/violent-theremin/">Violent Theremin</a>, une application simple qui permet de changer le pitch et le volume d'un son en fonction du déplacement de la souris. Elle génère également des animations psychédéliques (<a href="https://github.com/mdn/violent-theremin">see Violent Theremin source code</a>).</p>
-
-<p><img alt="A page full of rainbow colours, with two buttons labeled Clear screen and mute. " src="https://mdn.mozillademos.org/files/7919/violent-theremin.png" style="display: block; height: 458px; margin: 0px auto; width: 640px;"></p>
+<p><img alt="Une boîte à rythme avec des contrôles pour la lecture, le volume et le pan" src="boombox.png"></p>
 
 <h2 id="Concepts_de_base">Concepts de base</h2>
 
 <div class="note">
-<p><strong>Note</strong>: la plupart des extraits de code dans cette section viennent de l'exemple <a href="https://github.com/mdn/violent-theremin">Violent Theremin</a>.</p>
+<p><strong>Note :</strong> la plupart des extraits de code dans cette section viennent de l'exemple <a href="https://github.com/mdn/violent-theremin">Violent Theremin</a>.</p>
 </div>
 
 <p>La Web Audio API impliqe de réaliser les opérations de traitement audio dans un <strong>contexte audio</strong>, et elle a été conçue pour permettre le <strong>routage modulaire</strong>. Les opérations de traitement de base sont réalisées par des <strong> noeuds audio</strong>, qui sont reliés entre eux pour former un<strong> graphe de routage audio</strong>. Plusieurs sources — avec différentes configuration de canaux — peuvent cohabiter dans un seul contexte. Ce design modulaire offre la flexibilité nécessaire pour créer des fonctions complexes avec des effets dynamiques.</p>
@@ -51,7 +46,7 @@ translation_of: Web/API/Web_Audio_API/Using_Web_Audio_API
 </pre>
 
 <div class="note">
-<p><strong>Note</strong>: On peut créer plusieurs contextes audio dans le même document, bien que ce soit probablement superflu dans la plupart des cas.</p>
+<p><strong>Note :</strong> On peut créer plusieurs contextes audio dans le même document, bien que ce soit probablement superflu dans la plupart des cas.</p>
 </div>
 
 <p>Il faut rajouter une version préfixée pour les navigateurs Webkit/Blink browsers, tout en conservant la version non préfixée pour Firefox (desktop/mobile/OS). Ce qui donne :</p>
@@ -60,7 +55,7 @@ translation_of: Web/API/Web_Audio_API/Using_Web_Audio_API
 </pre>
 
 <div class="note">
-<p><strong>Note</strong>: <span style="line-height: 1.5;">Safari risque de planter si l'objet </span><code style="line-height: 1.5; font-style: normal;">window</code><span style="line-height: 1.5;"> n'est pas explicitement mentionné lors de la création d'un contexte audio</span></p>
+<p><strong>Note :</strong> Safari risque de planter si l'objet <code>window</code> n'est pas explicitement mentionné lors de la création d'un contexte audio</p>
 </div>
 
 <h3 id="Création_d'une_source_audio">Création d'une source audio</h3>
@@ -71,7 +66,7 @@ translation_of: Web/API/Web_Audio_API/Using_Web_Audio_API
  <li>générées en JavaScript par un noeud audio tel qu'un oscillateur. Pour créer un {{domxref("OscillatorNode")}} on utilise la méthode {{domxref("AudioContext.createOscillator")}}.</li>
  <li>créées à partir de données PCM brutes: le contexte audio a des méthodes pour décoder lesformats supportés; voir {{ domxref("AudioContext.createBuffer()") }}, {{domxref("AudioContext.createBufferSource()")}}, et {{domxref("AudioContext.decodeAudioData()")}}.</li>
  <li>récupérées dans des élements HTML tels que {{HTMLElement("video")}} ou {{HTMLElement("audio")}}: voir {{domxref("AudioContext.createMediaElementSource()")}}.</li>
- <li>prises dans un <a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> {{domxref("MediaStream")}} comme une webcam ou un microphone. Voir {{ domxref("AudioContext.createMediaStreamSource()") }}.</li>
+ <li>prises dans un <a href="/en-US/docs/WebRTC">WebRTC</a> {{domxref("MediaStream")}} comme une webcam ou un microphone. Voir {{ domxref("AudioContext.createMediaStreamSource()") }}.</li>
 </ul>
 
 <p>Pour notre exemple nous nous contenterons de créer un oscillateur pour générer un son simple comme source, et un noeud de gain pour contrôler le volume:</p>
@@ -81,11 +76,11 @@ var noeudGain = contexteAudio.createGain();
 </pre>
 
 <div class="note">
-<p><strong>Note</strong>: Pour jouer un fichier audio directement, il faut charger le fichier en XHR, le décoder en mémoire tampon, puis associer le tampon à une source. Voir l'exemple <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L48-L68">Voice-change-O-matic</a>.</p>
+<p><strong>Note :</strong> Pour jouer un fichier audio directement, il faut charger le fichier en XHR, le décoder en mémoire tampon, puis associer le tampon à une source. Voir l'exemple <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L48-L68">Voice-change-O-matic</a>.</p>
 </div>
 
 <div class="note">
-<p><strong>Note</strong>: Scott Michaud a écrit la librairie <a href="https://github.com/ScottMichaud/AudioSampleLoader">AudioSampleLoader</a>, très pratique pour charger et décoder un ou plusieurs extraits audio. Elle peut aider à simplifier le processus de chargement XHR / mémoire tampon décrit dans la note précédente.</p>
+<p><strong>Note :</strong> Scott Michaud a écrit la librairie <a href="https://github.com/ScottMichaud/AudioSampleLoader">AudioSampleLoader</a>, très pratique pour charger et décoder un ou plusieurs extraits audio. Elle peut aider à simplifier le processus de chargement XHR / mémoire tampon décrit dans la note précédente.</p>
 </div>
 
 <h3 id="Lien_entre_les_noeuds_source_et_destination">Lien entre les noeuds source et destination</h3>
@@ -111,10 +106,12 @@ noeudGain.connect(contexteAudio.destination);
 
 <p>Ce code créerait le graphe audio suivant :</p>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/7949/voice-change-o-matic-graph.png" style="display: block; height: 563px; margin: 0px auto; width: 232px;">Il est possible de connecter plusieurs noeuds à un seul noeud, par exemple pour mixer plusieurs sources ensemble, et les passer dans un seul noeud d'effet, tel qu'un noeud de gain.</p>
+<p><img alt="Un graphe audio avec un élément audio source connecté à la destination par défaut" src="graph1.jpg"></p>
+
+<p>Il est possible de connecter plusieurs noeuds à un seul noeud, par exemple pour mixer plusieurs sources ensemble, et les passer dans un seul noeud d'effet, tel qu'un noeud de gain.</p>
 
 <div class="note">
-<p><strong>Note</strong>: Depuis Firefox 32, les outils de développement intégrés incluent un <a href="/en-US/docs/Tools/Web_Audio_Editor">éditeur audio</a>,  très utile pour débugger les graphes audio.</p>
+<p><strong>Note :</strong> Depuis Firefox 32, les outils de développement intégrés incluent un <a href="/en-US/docs/Tools/Web_Audio_Editor">éditeur audio</a>,  très utile pour débugger les graphes audio.</p>
 </div>
 
 <h3 id="Lecture_du_son_et_définition_du_pitch">Lecture du son et définition du pitch</h3>
diff --git a/files/fr/web/api/web_audio_api/visualizations_with_web_audio_api/index.html b/files/fr/web/api/web_audio_api/visualizations_with_web_audio_api/index.html
index 14da8cbd47..8a128b4d81 100644
--- a/files/fr/web/api/web_audio_api/visualizations_with_web_audio_api/index.html
+++ b/files/fr/web/api/web_audio_api/visualizations_with_web_audio_api/index.html
@@ -3,12 +3,10 @@ title: Visualisations avec la Web Audio API
 slug: Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API
 translation_of: Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API
 ---
-<div class="summary">
 <p>L'une des fonctionnalités les plus intéressantes de la Web Audio API est la possibilité d'extraire de la source audio la fréquence, la forme d'onde et d'autres données, qui permettent de créer des visualisations. Cet article explique comment, et fournit quelques exemples basiques.</p>
-</div>
 
 <div class="note">
-<p><strong>Note</strong>: Vous pouvez trouver des exemples de tous les extraits de the code dans notre démo <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a>.</p>
+<p><strong>Note :</strong> Vous pouvez trouver des exemples de tous les extraits de the code dans notre démo <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a>.</p>
 </div>
 
 <h2 id="Concepts_de_base">Concepts de base</h2>
@@ -26,13 +24,13 @@ analyseur.connect(distortion);
 // etc.</pre>
 
 <div class="note">
-<p><strong>Note</strong>: il n'est pas nécessaire de connecter la sortie de l'analyseur à un noeud pour qu'il fonctionne, il suffit que l'entrée soit connectée à la source, directement ou via un autre noeud.</p>
+<p><strong>Note :</strong> il n'est pas nécessaire de connecter la sortie de l'analyseur à un noeud pour qu'il fonctionne, il suffit que l'entrée soit connectée à la source, directement ou via un autre noeud.</p>
 </div>
 
 <p>L'analyseur va alors capturer les données audio en usant une Transformation de Fourier Rapide (fft) à une certaine fréquence, en fonction de ce qui est spécifié dans la propriété {{ domxref("AnalyserNode.fftSize") }} (la valeur par défaut est 2048).</p>
 
 <div class="note">
-<p><strong>Note</strong>: Vous pouvez aussi spécifier des valeurs de puissance minimum et maximum pour la plage de mise à l'échelle fft, en utilisant {{ domxref("AnalyserNode.minDecibels") }} et {{ domxref("AnalyserNode.maxDecibels") }}, et plusieurs valeurs de transition en utilisant {{ domxref("AnalyserNode.smoothingTimeConstant") }}.</p>
+<p><strong>Note :</strong> Vous pouvez aussi spécifier des valeurs de puissance minimum et maximum pour la plage de mise à l'échelle fft, en utilisant {{ domxref("AnalyserNode.minDecibels") }} et {{ domxref("AnalyserNode.maxDecibels") }}, et plusieurs valeurs de transition en utilisant {{ domxref("AnalyserNode.smoothingTimeConstant") }}.</p>
 </div>
 
 <p>Pour capturer des données, il faut utiliser les méthodes {{ domxref("AnalyserNode.getFloatFrequencyData()") }} et {{ domxref("AnalyserNode.getByteFrequencyData()") }} pour la fréquence, et {{ domxref("AnalyserNode.getByteTimeDomainData()") }} et {{ domxref("AnalyserNode.getFloatTimeDomainData()") }} pour la forme d'onde.</p>
@@ -122,7 +120,7 @@ var tableauDonnees = new Uint8Array(tailleMemoireTampon);</pre>
 
 <p>Ce qui nous donne un affichage de forme d'onde, actualisé plusieurs fois par seconde :</p>
 
-<p><img alt="a black oscilloscope line, showing the waveform of an audio signal" src="https://mdn.mozillademos.org/files/7977/wave.png" style="display: block; height: 96px; margin: 0px auto; width: 640px;"></p>
+<p><img alt="Une ligne d'oscilloscope noire, illustrant la forme d'onde d'un signal audio" src="wave.png"></p>
 
 <h2 id="Création_d'un_graphique_à_barres_représentant_la_fréquence">Création d'un graphique à barres représentant la fréquence</h2>
 
@@ -175,10 +173,8 @@ var tableauDonnees = new Uint8Array(tailleMemoireTampon);</pre>
 
 <p>Ce code donne le résultat suivant:</p>
 
-<p><img alt="a series of red bars in a bar graph, showing intensity of different frequencies in an audio signal" src="https://mdn.mozillademos.org/files/7975/bar-graph.png" style="height: 157px; width: 1260px;"></p>
+<p><img alt="Une série de barres rouges dans un barre-graphe qui illustre l'intensité des différentes fréquences d'un signal audio" src="bar-graph.png"></p>
 
 <div class="note">
-<p><strong>Note</strong>: Les examples de cet article montrent l'utilisation de {{ domxref("AnalyserNode.getByteFrequencyData()") }} et {{ domxref("AnalyserNode.getByteTimeDomainData()") }}. Pour des exemples montrant {{ domxref("AnalyserNode.getFloatFrequencyData()") }} et {{ domxref("AnalyserNode.getFloatTimeDomainData()") }}, voir notre démo <a href="http://mdn.github.io/voice-change-o-matic-float-data/">Voice-change-O-matic-float-data</a> (et son <a href="https://github.com/mdn/voice-change-o-matic-float-data">code source</a>) — elle est identique à la <a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic </a>originale, à ceci près qu'elle utilise des données à virgule flottante, au lieu de données non signées.</p>
-</div>
-
-<p> </p>
+<p><strong>Note :</strong> Les examples de cet article montrent l'utilisation de {{ domxref("AnalyserNode.getByteFrequencyData()") }} et {{ domxref("AnalyserNode.getByteTimeDomainData()") }}. Pour des exemples montrant {{ domxref("AnalyserNode.getFloatFrequencyData()") }} et {{ domxref("AnalyserNode.getFloatTimeDomainData()") }}, voir notre démo <a href="http://mdn.github.io/voice-change-o-matic-float-data/">Voice-change-O-matic-float-data</a> (et son <a href="https://github.com/mdn/voice-change-o-matic-float-data">code source</a>) — elle est identique à la <a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic </a>originale, à ceci près qu'elle utilise des données à virgule flottante, au lieu de données non signées.</p>
+</div>
+\ No newline at end of file
diff --git a/files/fr/web/api/web_audio_api/web_audio_spatialization_basics/index.html b/files/fr/web/api/web_audio_api/web_audio_spatialization_basics/index.html
index 3c90e6ecc5..d0de8755ec 100644
--- a/files/fr/web/api/web_audio_api/web_audio_spatialization_basics/index.html
+++ b/files/fr/web/api/web_audio_api/web_audio_spatialization_basics/index.html
@@ -3,9 +3,7 @@ title: Web audio spatialization basics
 slug: Web/API/Web_Audio_API/Web_audio_spatialization_basics
 translation_of: Web/API/Web_Audio_API/Web_audio_spatialization_basics
 ---
-<div class="summary">
-<p><span class="seoSummary">En plus de sa grande variété de fonctionnalités et d'options, la Web Audio API permet aussi d'émuler la différence dans l'écoute d'un son lorsqu'un auditeur se déplace par rapport à une source, par exemple un panoramique lorsqu'il se déplace de gauche à droite de la source. On parle alors de spatialisation. Cet article expose les notions de base pour implémenter ce type de système.</span></p>
-</div>
+<p>En plus de sa grande variété de fonctionnalités et d'options, la Web Audio API permet aussi d'émuler la différence dans l'écoute d'un son lorsqu'un auditeur se déplace par rapport à une source, par exemple un panoramique lorsqu'il se déplace de gauche à droite de la source. On parle alors de spatialisation. Cet article expose les notions de base pour implémenter ce type de système.</p>
 
 <p>Le cas d'utilisation le plus simple est la simulation des altérations d'un son de façon réaliste pour imaginer comment une source se comportera pour un personnage qui se déplace dans un environnement 3D.</p>
 
@@ -18,14 +16,10 @@ translation_of: Web/API/Web_Audio_API/Web_audio_spatialization_basics
  <li>L'objet {{ domxref("PannerNode") }} représente la position dans l'espace 3D d'une source audio; on le crée avec la méthode {{ domxref("AudioContext.createPanner()") }}. On peut paramétrer un certain nombre d'options comme la position, l'orientation, la vitesse, et l'angle s'un cône qui indique dans quelle direction le son peut être entendu (s'il n'est pas omnidirectionnel).</li>
 </ol>
 
-<p>Vous devez créer et paramétrer ces deux objects, et le navigateur fait le reste er génère le rendu audio. Le diagramme ci-dessous montre les différentes choses qui peuvent être contrôlés pour un {{ domxref("PannerNode") }}.</p>
-
-<p><img alt="The PannerNode brings a spatial position and velocity and a directionality for a given signal." src="https://mdn.mozillademos.org/files/5087/WebAudioPannerNode.png" style="display: block; height: 228px; margin: 0px auto; width: 568px;"></p>
-
 <p>Dans cet article nous allons nous concentrer sur la position de l'auditeur et du panoramique, tous deux paramétrés à l'aide de la méthode <code>setPosition(). </code>Celle-co accepte trois valeurs qui correspondent à X, Y, et Z dans un système de coordonnées cartésien.</p>
 
 <div class="note">
-<p><strong>Note</strong>: Trouver les bonnes valeurs pour que le cas d'utilisation fonctionne bien et semble réaliste n'est pas toujours évident et peur prendre du temps, et il faut souvent continuer à modifier les valeurs par la suite. Nous discuterons ceci plus en détail en parcourant le code qui suit.</p>
+<p><strong>Note :</strong> Trouver les bonnes valeurs pour que le cas d'utilisation fonctionne bien et semble réaliste n'est pas toujours évident et peur prendre du temps, et il faut souvent continuer à modifier les valeurs par la suite. Nous discuterons ceci plus en détail en parcourant le code qui suit.</p>
 </div>
 
 <p>Les autres options  disponibles, que nous ne traiterons pas ici, sont :</p>
@@ -38,12 +32,10 @@ translation_of: Web/API/Web_Audio_API/Web_audio_spatialization_basics
 
 <h2 id="A_simple_demo_Room_of_metal">A simple demo: Room of metal</h2>
 
-<p>In our demo, you can move left and right past a 2.5D stereo that can be made to play a groovy tune, and you can also move towards the stereo. As you move left and right, the tune will pan to emulate how the tune will sound as you change your position proportional to the sound source. When you zoom in and out, the sound will get louder and quieter to suit.<br>
- <br>
- <img alt="a minimal UI with a portable stereo in the center of it, and buttons marked play, stop, left arrow, right arrow, zoom in and zoom out. It says Room of Metal at the top." src="https://mdn.mozillademos.org/files/8141/room-of-metal.png" style="display: block; height: 298px; margin: 0px auto; width: 640px;"></p>
+<p>In our demo, you can move left and right past a 2.5D stereo that can be made to play a groovy tune, and you can also move towards the stereo. As you move left and right, the tune will pan to emulate how the tune will sound as you change your position proportional to the sound source. When you zoom in and out, the sound will get louder and quieter to suit.</p>
 
 <div class="note">
-<p><strong>Note</strong>: You can see this example <a href="https://mdn.github.io/webaudio-examples/panner-node/">running live</a>, and <a href="https://github.com/mdn/panner-node">view the source code</a>.</p>
+<p><strong>Note :</strong> You can see this example <a href="https://mdn.github.io/webaudio-examples/panner-node/">running live</a>, and <a href="https://github.com/mdn/panner-node">view the source code</a>.</p>
 </div>
 
 <p>Let's walk through the code and see how this was actually done.</p>
@@ -262,12 +254,8 @@ zoomOutButton.onmouseup = function () {
   window.cancelAnimationFrame(zoomOutLoop);
 }</pre>
 
-<h2 id="Summary">Summary</h2>
-
 <p>As you can see, the actual panner code is pretty simple — specify the positions, and the browser takes care of the rest. It is working out the surrounding code, and the values to use for positioning, which takes a bit more time.</p>
 
 <div class="note">
-<p><strong>Note</strong>: You are probably thinking "why didn't you move the listener and keep the panner still instead: surely that is a bit more obvious?" Well, perhaps, but we felt that since the panner has more methods and properties available to it, moving it would allow more control in the long term.</p>
-</div>
-
-<p> </p>
+<p><strong>Note :</strong> You are probably thinking "why didn't you move the listener and keep the panner still instead: surely that is a bit more obvious?" Well, perhaps, but we felt that since the panner has more methods and properties available to it, moving it would allow more control in the long term.</p>
+</div>
+\ No newline at end of file
author	SphinxKnight <SphinxKnight@users.noreply.github.com>	2021-09-26 13:11:47 +0200
committer	GitHub <noreply@github.com>	2021-09-26 13:11:47 +0200
commit	6772831200d14c2436aea2d0c837f40dbf12156f (patch)
tree	e41b587ce1834baf8c737454c0ae110ebc8208ca /files/fr/web/api/web_audio_api
parent	707941dbecfb0cc1e75dd32d2dacac4d1845bf2c (diff)
download	translated-content-6772831200d14c2436aea2d0c837f40dbf12156f.tar.gz translated-content-6772831200d14c2436aea2d0c837f40dbf12156f.tar.bz2 translated-content-6772831200d14c2436aea2d0c837f40dbf12156f.zip