Prepare Games section for Markdown conversion (#3006)

* Remove summary / seoSummary

* Fix another file with seoSummary / span mess

* Remove spans

* Remove fonts

* Remove notranslate

* Fix nested code/pre blocks

* fix minor errors (one offs and some others)

* Fix notes

* Fix images

* Fix absolute and/or English links

7 files changed, 243 insertions, 263 deletions

diff --git a/files/fr/games/techniques/2d_collision_detection/index.html b/files/fr/games/techniques/2d_collision_detection/index.html
index d44d9b55f0..d8f6c3687c 100644
--- a/files/fr/games/techniques/2d_collision_detection/index.html
+++ b/files/fr/games/techniques/2d_collision_detection/index.html
@@ -11,11 +11,9 @@ translation_of: Games/Techniques/2D_collision_detection
 ---
 <div>{{GamesSidebar}}</div><p>  {{IncludeSubnav("/fr/docs/Jeux")}}  </p>
 
-<div class="summary">
 <p>Les algorithmes de détection de collisions dans les jeux en 2 dimensions dépendent de la forme des objets à détecter (par exemple : rectangle contre rectangle, cercle contre rectangle, cercle contre cercle…). Habituellement, il est préférable d’utiliser une forme générique appelée masque de collision (« <em>hitbox</em> ») qui couvrira l’entité. Ainsi, les collisions ne seront pas assurées au pixel près mais cela permettra d’avoir de bonnes performances pour un grand nombre d’entités à tester.</p>
 
 <p>Cet article donne un résumé des techniques les plus utilisées pour la détection des collisions dans les jeux en deux dimensions.</p>
-</div>
 
 <h2 id="Boîtes_englobantes_alignées_sur_les_axes">Boîtes englobantes alignées sur les axes</h2>
 
@@ -41,7 +39,7 @@ if (5 &lt; 30 &amp;&amp;
 }</pre>
 
 <div class="note">
-<p><strong>Note</strong> : vous pouvez tester un <a class="external" href="http://jsfiddle.net/knam8/">exemple interactif de cet algorithme</a> sur jsFiddle, pour mieux comprendre le fonctionnement de ce code.</p>
+<p><strong>Note :</strong> vous pouvez tester un <a class="external" href="http://jsfiddle.net/knam8/">exemple interactif de cet algorithme</a> sur jsFiddle, pour mieux comprendre le fonctionnement de ce code.</p>
 </div>
 
 <h2 id="Collision_de_cercles">Collision de cercles</h2>
@@ -60,7 +58,7 @@ if (distance &lt; circle1.radius + circle2.radius) {
 }</pre>
 
 <div class="note">
-<p><strong>Note :</strong> vous pouvez tester un <a class="external" href="http://jsfiddle.net/gQ3hD/2/">exemple interactif de cet algorithme</a> sur jsFiddle, pour mieux comprendre le fonctionnement de ce code.</p>
+<p><strong>Note :</strong> vous pouvez tester un <a class="external" href="http://jsfiddle.net/gQ3hD/2/">exemple interactif de cet algorithme</a> sur jsFiddle, pour mieux comprendre le fonctionnement de ce code.</p>
 </div>
 
 <h2 id="Théorème_des_axes_séparateurs">Théorème des axes séparateurs</h2>
diff --git a/files/fr/games/techniques/3d_on_the_web/basic_theory/index.html b/files/fr/games/techniques/3d_on_the_web/basic_theory/index.html
index c6d3d4bdc9..4243e68e9a 100644
--- a/files/fr/games/techniques/3d_on_the_web/basic_theory/index.html
+++ b/files/fr/games/techniques/3d_on_the_web/basic_theory/index.html
@@ -19,7 +19,7 @@ translation_of: Games/Techniques/3D_on_the_web/Basic_theory
 
 <p>La 3D est principalement basée sur la représentation de formes 3D dans l'espace, avec un système de coordonnées utilisé pour calculer leurs positions.</p>
 
-<p><img alt="Coordinate system" src="https://mdn.mozillademos.org/files/13326/mdn-games-3d-coordinate-system.png" style="height: 338px; width: 600px;"></p>
+<p><img src="mdn-games-3d-coordinate-system.png"></p>
 
 <p>WebGL utilise le système de coordonnées de droite — l'axe x pointe vers la droite, l'axe y vers le haut et l'axe z dans la profondeur, comme shématisé ci-dessus.</p>
 
@@ -36,7 +36,7 @@ translation_of: Games/Techniques/3D_on_the_web/Basic_theory
 
 <p>Vous pouvez faire de la géométrie en utilisant ces informations — voici l'exemple d'un cube :</p>
 
-<p><img alt="Cube" src="https://mdn.mozillademos.org/files/13324/mdn-games-3d-cube.png" style="height: 265px; width: 600px;"></p>
+<p><img alt="Cube" src="mdn-games-3d-cube.png"></p>
 
 <p>Une face de la forme donnée est un plan entre des sommets. Par exemple, un cube a 8 différents sommets (points dans l'espace) et 6 différentes faces, chacune construite à partir de 4 sommets. Une norme définit de quelle manière la face est orientée. De plus, en connectant les points, on crée les arêtes du cube.La géométrie est basée sur les sommets et les faces, où le matériau est une texture, utilisant une couleur ou une image. Si l'on connecte la géométrie avec le matériau, on obtient une maille (mesh)</p>
 
@@ -44,7 +44,7 @@ translation_of: Games/Techniques/3D_on_the_web/Basic_theory
 
 <p>Le rendu des tuyaux est un procédé avec lequel les images sont préparées et affichées sur l'écran. Les graphismes utilisant les rendus de tuyaux prennent des objets 3D construits à partir de primitives décrites à l'aide de sommets, les transforment, calculent les fragments, et les affichent sur un écran 2D en tant que pixels.</p>
 
-<p><img alt="Rendering pipeline" src="https://mdn.mozillademos.org/files/13334/mdn-games-3d-rendering-pipeline.png" style="height: 225px; width: 600px;"></p>
+<p><img alt="Rendering pipeline" src="mdn-games-3d-rendering-pipeline.png"></p>
 
 <p>Terminologie utilisée dans le diagramme ci-dessus :</p>
 
@@ -54,21 +54,21 @@ translation_of: Games/Techniques/3D_on_the_web/Basic_theory
  <li>Un <strong>Pixel </strong>: Un point sur l'écran arrangé sur une grille 2D, qui prend une couleur RVBA.</li>
 </ul>
 
-<p>Le traitement des sommets et des fragments est programmable — vous pouvez <a href="https://developer.mozilla.org/fr/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders">écrire vos propres shaders</a> qui manipulent le rendu.</p>
+<p>Le traitement des sommets et des fragments est programmable — vous pouvez <a href="/fr/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders">écrire vos propres shaders</a> qui manipulent le rendu.</p>
 
 <h2 id="Traitement_de_sommet">Traitement de sommet</h2>
 
 <p>Le traitement de sommet consiste à combiner les informations à propos de chaque sommet dans des primitives et de définir leurs coordonnées dans l'espace 3D pour le spectateur. C'est comme prendre une photo de la scène donnée que vous avez préparée — vous devez placer les objets en premier, configurer la caméra, et prendre la photo.</p>
 
-<p><img alt="Vertex processing" src="https://mdn.mozillademos.org/files/13336/mdn-games-3d-vertex-processing.png" style="height: 338px; width: 600px;"></p>
+<p><img src="mdn-games-3d-vertex-processing.png"></p>
 
 <p>Il y a 4 étapes dans ce traitement : la première implique d'arranger les objets dans le monde, elle est appelée la <strong>transformation du modèle</strong>. Ensuite, il y a la <strong>transformation de la vue</strong>, qui prend soin de positionner et de régler l'orientation de la caméra dans l'espace 3D. La caméra a 3 paramètres — position, direction et orientation — qui doivent être définis pour la scène nouvellement créée.</p>
 
-<p><img alt="Camera" src="https://mdn.mozillademos.org/files/13322/mdn-games-3d-camera.png" style="height: 225px; width: 600px;"></p>
+<p><img alt="Camera" src="mdn-games-3d-camera.png"></p>
 
-<p>La <strong>transformation de la projection</strong> (aussi appelée transformation de la perspective) définit ensuite les réglages de la caméra. Elle définit ce qui peut être vu par la caméra — la configuration inclut le champ de vision, le ratio d'aspect, et éventuellement les plans proches et éloignés. Lisez le <a href="https://developer.mozilla.org/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js#Camera">paragraphe sur la Caméra</a> dans l'article de Three.js pour en savoir plus.</p>
+<p>La <strong>transformation de la projection</strong> (aussi appelée transformation de la perspective) définit ensuite les réglages de la caméra. Elle définit ce qui peut être vu par la caméra — la configuration inclut le champ de vision, le ratio d'aspect, et éventuellement les plans proches et éloignés. Lisez le <a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js#Camera">paragraphe sur la Caméra</a> dans l'article de Three.js pour en savoir plus.</p>
 
-<p><img alt="Camera settings" src="https://mdn.mozillademos.org/files/13320/mdn-games-3d-camera-settings.png" style="height: 338px; width: 600px;"></p>
+<p><img src="mdn-games-3d-camera-settings.png"></p>
 
 <p>La dernière étape est la transformation de la fenêtre, qui implique la production de tout pour la prochaine étape dans le rendu du tuyau.</p>
 
@@ -76,7 +76,7 @@ translation_of: Games/Techniques/3D_on_the_web/Basic_theory
 
 <p>La rastérisation convertit les primitives (des sommets reliés) à un ensemble de fragments.</p>
 
-<p><img alt="Rasterization" src="https://mdn.mozillademos.org/files/13332/mdn-games-3d-rasterization.png" style="height: 338px; width: 600px;"></p>
+<p><img src="mdn-games-3d-rasterization.png"></p>
 
 <p>Ces fragments — qui sont des projections 3D de pixels 2D — sont alignés sur la grille de pixels, donc éventuellement ils peuvent être affichés comme des pixels sur un écran 2D durant la phase de fusion du résultat.</p>
 
@@ -84,13 +84,13 @@ translation_of: Games/Techniques/3D_on_the_web/Basic_theory
 
 <p>Le traitement de fragment se concentre sur les textures et les lumières — il calcule les couleurs finales à partir des paramètres donnés.</p>
 
-<p><img alt="Fragment processing" src="https://mdn.mozillademos.org/files/13328/mdn-games-3d-fragment-processing.png" style="height: 338px; width: 600px;"></p>
+<p><img src="mdn-games-3d-fragment-processing.png"></p>
 
 <h3 id="Textures">Textures</h3>
 
 <p>Les textures sont des images 2D utilisées dans l'espace 3D pour faire que les objets rendent mieux et paraissent plus réalistes. Les textures sont combinées à partir de simples éléments de texture appelés texels, de la même manière que les images sont combinées à partir de pixels. Appliquer des textures sur des objets durant le traitement des fragments, vous permet de l'ajuster en lui donnant une enveloppe ou des filtres si nécessaire.</p>
 
-<p><span id="result_box" lang="fr"><span>L'habillage de texture permet de répéter l'image 2D autour de l'objet 3D.</span> <span>Le filtrage de texture est appliqué lorsque la résolution d'origine ou l'image de texture est différente du fragment affiché </span></span> — <span lang="fr"><span> elle sera réduite ou agrandie en conséquence.</span></span></p>
+<p>L'habillage de texture permet de répéter l'image 2D autour de l'objet 3D. Le filtrage de texture est appliqué lorsque la résolution d'origine ou l'image de texture est différente du fragment affiché  —  elle sera réduite ou agrandie en conséquence.</p>
 
 <h3 id="Lumières">Lumières</h3>
 
@@ -105,7 +105,7 @@ translation_of: Games/Techniques/3D_on_the_web/Basic_theory
 
 <h2 id="Fusion_de_sortie">Fusion de sortie</h2>
 
-<p>Durant l'étape de manipulation du résultat, tous les fragments des primitives de l'espace 3D sont transformés sur une grille de pixels 2D qui est ensuite affichée sur l'écran.<img alt="Output merging" src="https://mdn.mozillademos.org/files/13330/mdn-games-3d-output-merging.png" style="height: 338px; width: 600px;"></p>
+<p>Durant l'étape de manipulation du résultat, tous les fragments des primitives de l'espace 3D sont transformés sur une grille de pixels 2D qui est ensuite affichée sur l'écran.<img src="mdn-games-3d-output-merging.png"></p>
 
 <p>Durant la fusion de sortie, quelques traitements sont aussi appliqués pour ignorer de l'information qui n'est pas utile — par exemple, les paramètres des objets qui sont à l'extérieur de l'écran ou derrière d'autres, et par conséquent non visibles, ne sont pas calculés.</p>
 
@@ -117,10 +117,10 @@ translation_of: Games/Techniques/3D_on_the_web/Basic_theory
 <p>Maintenant vous connaissez les bases de la théorie derrière la manipulation 3D, si vous voulez passer à la pratique et voir quelques démonstrations en action, continuez avec les tutoriels ci-dessous :</p>
 
 <ul>
- <li><a href="https://developer.mozilla.org/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js">Construction d'une démo de base avec Three.js</a></li>
- <li><span class="seosummary"><a href="https://developer.mozilla.org/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js">Construction d'une démo de base avec Babylon.js</a></span></li>
- <li><a href="https://developer.mozilla.org/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas">Construction d'une démo de base avec PlayCanvas</a></li>
- <li><a href="https://developer.mozilla.org/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame">Construction d'une démo de base avec</a><a href="https://developer.mozilla.org/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame"> A-Frame</a></li>
+ <li><a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js">Construction d'une démo de base avec Three.js</a></li>
+ <li><a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js">Construction d'une démo de base avec Babylon.js</a></li>
+ <li><a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas">Construction d'une démo de base avec PlayCanvas</a></li>
+ <li><a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame">Construction d'une démo de base avec</a><a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame"> A-Frame</a></li>
 </ul>
 
 <p>Allez-y et faites quelques expémentations 3D sympas par vous-même !</p>
diff --git a/files/fr/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/index.html b/files/fr/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/index.html
index 45db4b35e0..8a10f15237 100644
--- a/files/fr/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/index.html
+++ b/files/fr/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/index.html
@@ -12,9 +12,9 @@ tags:
   - camera
 translation_of: Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas
 ---
-<div>{{GamesSidebar}}</div><p class="summary"><span class="seoSummary"><strong>PlayCanvas</strong> est un populaire moteur 3D WebGL de jeu, originellement concu par Will Eastcott et Dave Evans. Il est disponible en <a href="https://github.com/playcanvas/engine">open-source sur GitHub</a>, avec un <a href="http://developer.playcanvas.com/en/user-manual/designer/">éditeur</a> en ligne et une bonne <a href="http://developer.playcanvas.com/en/">documentation</a>.</span> L'éditeur en ligne est gratuit pour les projets publics avec jusqu'à deux membres d'équipe, mais il y a aussi des <a href="https://playcanvas.com/plans">plans payants</a><font color="#0b0116"> si vous vous lancez dans un projet commercial privé avec plus de développeurs.</font></p>
+<div>{{GamesSidebar}}</div><p><strong>PlayCanvas</strong> est un populaire moteur 3D WebGL de jeu, originellement concu par Will Eastcott et Dave Evans. Il est disponible en <a href="https://github.com/playcanvas/engine">open-source sur GitHub</a>, avec un <a href="http://developer.playcanvas.com/en/user-manual/designer/">éditeur</a> en ligne et une bonne <a href="http://developer.playcanvas.com/en/">documentation</a>. L'éditeur en ligne est gratuit pour les projets publics avec jusqu'à deux membres d'équipe, mais il y a aussi des <a href="https://playcanvas.com/plans">plans payants</a> si vous vous lancez dans un projet commercial privé avec plus de développeurs.</p>
 
-<p><img alt="PlayCanvas website." src="https://mdn.mozillademos.org/files/12251/playcanvas-cover.png" style="display: block; height: 242px; margin: 0px auto; width: 600px;"></p>
+<p><img alt="Site PlayCanvas" src="playcanvas-cover.png"></p>
 
 <h2 id="Jeux_et_Démos">Jeux et Démos</h2>
 
@@ -26,10 +26,10 @@ translation_of: Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Pla
  <li>Des visualisations comme the <a href="http://playcanv.as/b/FQbBsJTd">Star Lord</a> et <a href="http://playcanv.as/p/RqJJ9oU9">BMW i8</a> mettent également en valeur les possibilités du moteur.</li>
 </ul>
 
-<p><img alt="A list of PlayCanvas demos: Tanx, Swooop, Star Lord, BMW i8." src="https://mdn.mozillademos.org/files/12253/playcanvas-demos.png" style="display: block; height: 400px; margin: 0px auto; width: 600px;"></p>
+<p><img src="playcanvas-demos.png"></p>
 
 <div class="note">
-<p><strong>Note</strong>: Consultez la liste des <a href="https://playcanvas.com/explore">démos</a> pour trouver plus d'exemples.</p>
+<p><strong>Note :</strong> Consultez la liste des <a href="https://playcanvas.com/explore">démos</a> pour trouver plus d'exemples.</p>
 </div>
 
 <h2 id="Moteur_vs_Éditeur">Moteur vs Éditeur</h2>
@@ -38,26 +38,12 @@ translation_of: Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Pla
 
 <h2 id="Moteur_PlayCanvas">Moteur PlayCanvas</h2>
 
-<p>Conçu pour les navigateurs modernes, PlayCanvas est un moteur de jeu 3D complet intégrant le chargement de ressources, un système d'entité et de composants, une manipulation avancée des graphismes, un moteur de collision et de physique (conçu avec <a href="https://github.com/kripken/ammo.js/">ammo.js</a>), la gestion du son et des simplifications pour la gestion des entrées de nombreux dispositifs (y compris les manettes de jeu). C'est une liste assez impressionnante de sonctionnalités — observez-en quelques-unes en action en consultant la rubrique <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/engine">Conception d'une démo de base avec PlayCanvas</a> pour plus de détails.</p>
-
-<p> </p>
+<p>Conçu pour les navigateurs modernes, PlayCanvas est un moteur de jeu 3D complet intégrant le chargement de ressources, un système d'entité et de composants, une manipulation avancée des graphismes, un moteur de collision et de physique (conçu avec <a href="https://github.com/kripken/ammo.js/">ammo.js</a>), la gestion du son et des simplifications pour la gestion des entrées de nombreux dispositifs (y compris les manettes de jeu). C'est une liste assez impressionnante de sonctionnalités — observez-en quelques-unes en action en consultant la rubrique <a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/engine">Conception d'une démo de base avec PlayCanvas</a> pour plus de détails.</p>
 
 <h2 id="Éditeur_PlayCanvas">Éditeur PlayCanvas </h2>
 
-<p>Au lieu de tout coder à parir de zéro, vous pouvez également utiliser l'éditeur en ligne. Cela peut être un environnement de travail plus agréable si vous n'êtes pas très orienté codage. Voici la <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/editor">construction d'une démo de base avec l'éditeur de PlayCanvas</a> pour plus de détails.</p>
+<p>Au lieu de tout coder à parir de zéro, vous pouvez également utiliser l'éditeur en ligne. Cela peut être un environnement de travail plus agréable si vous n'êtes pas très orienté codage. Voici la <a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/editor">construction d'une démo de base avec l'éditeur de PlayCanvas</a> pour plus de détails.</p>
 
 <h2 id="Résumé">Résumé</h2>
 
-<p> </p>
-
 <p>Votre approche sera déterminante. Les designers préféreront utiliser l'éditeur en ligne alors que les programmeurs voudront avoir le contrôle total de l'environnement de codage et utiliseront probablement les fichiers source du moteur. Ce qui est intéressant est que vous êtes libre dans le choix des outils vous convenant le mieux.</p>
-
-<p> </p>
-
-<p style="margin: 0px;"> </p>
-
-<p> </p>
-
-<p style="margin: 0px;"> </p>
-
-<p> </p>
diff --git a/files/fr/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.html b/files/fr/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.html
index 0ba029383f..ea4b25a2c8 100644
--- a/files/fr/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.html
+++ b/files/fr/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.html
@@ -5,10 +5,10 @@ translation_of: Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Thr
 ---
 <div>{{GamesSidebar}}</div>
 
-<p class="summary"><span class="tlid-translation translation" lang="fr"><span title="">Une scène 3D  dans un jeu - même la plus simple - contient des éléments standard comme des formes situées dans un système de coordonnées, une caméra pour les voir réellement, des lumières et des matériaux pour amelioré son esthétique, des animations pour la rendre vivante, etc. <strong>Three</strong></span><span title=""><strong>.js</strong>, comme avec toute autre bibliothèque 3D, fournit des fonctions d'assistance intégrées pour vous aider à implémenter plus rapidement les fonctionnalités 3D courantes.</span> <span title="">Dans cet article, nous vous expliquerons les bases de l'utilisation de Three, notamment la configuration d'un environnement de développement, la structuration du code HTML nécessaire, les objets fondamentaux de Three et la manière de créer une démonstration de base.</span></span></p>
+<p>Une scène 3D  dans un jeu - même la plus simple - contient des éléments standard comme des formes situées dans un système de coordonnées, une caméra pour les voir réellement, des lumières et des matériaux pour amelioré son esthétique, des animations pour la rendre vivante, etc. <strong>Three</strong><strong>.js</strong>, comme avec toute autre bibliothèque 3D, fournit des fonctions d'assistance intégrées pour vous aider à implémenter plus rapidement les fonctionnalités 3D courantes. Dans cet article, nous vous expliquerons les bases de l'utilisation de Three, notamment la configuration d'un environnement de développement, la structuration du code HTML nécessaire, les objets fondamentaux de Three et la manière de créer une démonstration de base.</p>
 
 <div class="note">
-<p><strong>Note</strong>:<span class="tlid-translation translation" lang="fr"><span title=""> Nous avons choisi Three car il s'agit de l'une des bibliothèques WebGL les plus populaires, et il est facile de commencer.</span> <span title="">Nous n'essayons pas de dire que c'est mieux que toute autre bibliothèque WebGL disponible, et vous devriez vous sentir libre d'essayer une autre bibliothèque, comme CopperLicht, GLGE ou PlayCanvas</span></span></p>
+<p><strong>Note :</strong> Nous avons choisi Three car il s'agit de l'une des bibliothèques WebGL les plus populaires, et il est facile de commencer. Nous n'essayons pas de dire que c'est mieux que toute autre bibliothèque WebGL disponible, et vous devriez vous sentir libre d'essayer une autre bibliothèque, comme CopperLicht, GLGE ou PlayCanvas</p>
 </div>
 
 <h2 id="Configuration_de_l_environnement_de_Developpement">Configuration de l environnement de Developpement</h2>
@@ -26,7 +26,7 @@ translation_of: Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Thr
 
 <p>Voici la structure que nous allons utiliser</p>
 
-<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
 &lt;html&gt;
 &lt;head&gt;
 	&lt;meta charset="utf-8"&gt;
@@ -61,55 +61,55 @@ translation_of: Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Thr
 
 <p>Grace à cette approche, une solution de secour peut etre  utilisée , si une technologie n'est pas prise en charge par le navigatueur.</p>
 
-<pre class="brush: js notranslate">var renderer = new THREE.WebGLRenderer({antialias:true});
+<pre class="brush: js">var renderer = new THREE.WebGLRenderer({antialias:true});
 renderer.setSize(WIDTH, HEIGHT);
 renderer.setClearColor(0xDDDDDD, 1);
 document.body.appendChild(renderer.domElement);
 </pre>
 
-<p><span class="tlid-translation translation" lang="fr"><span title="">Nous créons un nouveau rendu WebGL, définissons sa taille pour qu'elle corresponde à tout l'espace disponible à l'écran et ajoutons la structure DOM à la page.</span> <span title="">Vous avez peut-être remarqué le paramètre d'antialias dans la première ligne - cela rend les bords des formes plus fluides.</span> <span title="">La méthode setClearColor () définit notre arrière-plan sur une couleur gris clair, au lieu de la couleur noire par défaut.</span><br>
+<p>Nous créons un nouveau rendu WebGL, définissons sa taille pour qu'elle corresponde à tout l'espace disponible à l'écran et ajoutons la structure DOM à la page. Vous avez peut-être remarqué le paramètre d'antialias dans la première ligne - cela rend les bords des formes plus fluides. La méthode setClearColor () définit notre arrière-plan sur une couleur gris clair, au lieu de la couleur noire par défaut.<br>
  <br>
- <span title="">Ajoutez ce code dans notre deuxième balise script du fichier index.html, juste en dessous du commentaire JavaScript.</span></span></p>
+ Ajoutez ce code dans notre deuxième balise script du fichier index.html, juste en dessous du commentaire JavaScript.</p>
 
 <h2 id="Scene">Scene</h2>
 
-<p><span class="tlid-translation translation" lang="fr"><span title="">Une scène est l'endroit où tout se passe.</span> <span title="">Lors de la création de nouveaux objets dans la démo, nous les ajoutons tous à l'intérieur de la scène pour devenir visibles à l'écran.</span> <span title="">Dans <strong>three.js</strong>, la scène est représentée par un objet Scene.</span> <span title="">Créons-le, en ajoutant la ligne suivante sous nos lignes précédentes:</span></span></p>
+<p>Une scène est l'endroit où tout se passe. Lors de la création de nouveaux objets dans la démo, nous les ajoutons tous à l'intérieur de la scène pour devenir visibles à l'écran. Dans <strong>three.js</strong>, la scène est représentée par un objet Scene. Créons-le, en ajoutant la ligne suivante sous nos lignes précédentes:</p>
 
-<pre class="brush: js notranslate">var scene = new THREE.Scene();
+<pre class="brush: js">var scene = new THREE.Scene();
 </pre>
 
 <p>plutard nous utiliserons la methode add() , pour ajouter des objets a cette scene.</p>
 
 <h2 id="Camera">Camera</h2>
 
-<p><span class="tlid-translation translation" lang="fr"><span title="">Nous avons la scène , mais nous devons encore ajouter une caméra pour voir notre travail - imaginez un film sans caméra.</span> <span title="">Les lignes suivantes mettent la caméra en place dans le système de coordonnées 3D et la pointent dans la direction de notre scène, afin que nous puissions enfin voir quelque chose:</span></span></p>
+<p>Nous avons la scène , mais nous devons encore ajouter une caméra pour voir notre travail - imaginez un film sans caméra. Les lignes suivantes mettent la caméra en place dans le système de coordonnées 3D et la pointent dans la direction de notre scène, afin que nous puissions enfin voir quelque chose:</p>
 
-<pre class="brush: js notranslate">var camera = new THREE.PerspectiveCamera(70, WIDTH/HEIGHT);
+<pre class="brush: js">var camera = new THREE.PerspectiveCamera(70, WIDTH/HEIGHT);
 camera.position.z = 50;
 scene.add(camera);
 </pre>
 
-<p><span class="tlid-translation translation" lang="fr"><span title="">Ajoutez les lignes ci-dessus à votre code, en dessous de celles précédemment ajoutées.</span><br>
+<p>Ajoutez les lignes ci-dessus à votre code, en dessous de celles précédemment ajoutées.<br>
  <br>
- <span title="">Il existe d'autres types de camera (Cube, Orthographique), mais la plus simple est Perspective.</span> <span title="">Pour l'initialiser, nous devons définir son champ de vision et son rapport d'aspect: le premier est utilisé pour définir la quantité de vue, et le second est important pour que les objets à l'écran aient les bonnes proportions lors du rendu, et ne semblent pas étirés</span> <span title="">.</span> <span title="">Expliquons les valeurs que nous définissons pour le code ci-dessus:</span></span></p>
+ Il existe d'autres types de camera (Cube, Orthographique), mais la plus simple est Perspective. Pour l'initialiser, nous devons définir son champ de vision et son rapport d'aspect: le premier est utilisé pour définir la quantité de vue, et le second est important pour que les objets à l'écran aient les bonnes proportions lors du rendu, et ne semblent pas étirés . Expliquons les valeurs que nous définissons pour le code ci-dessus:></p>
 
 <ul>
- <li><span class="tlid-translation translation" lang="fr"><span title="">La valeur que nous fixons pour le champ de vision, 70, est quelque chose que nous pouvons expérimenter: plus la valeur est élevée, plus la quantité de scène que la caméra affichera sera grande.</span> <span title="">Imaginez une vue de caméra normale, par opposition à un effet fish-eye, qui permet de voir beaucoup plus.</span> <span title="">La valeur par défaut est 50.</span></span></li>
- <li><span title="">Le rapport hauteur / largeur est défini sur la largeur et la hauteur actuelles de la fenêtre afin qu'il soit ajusté dynamiquement.</span> <span title="">Nous pourrions définir un rapport fixe - par exemple 16 ⁄ 9, qui est le rapport d'aspect d'un téléviseur à écran large.</span> <span title="">La valeur par défaut est 1.</span></li>
- <li><span class="tlid-translation translation" lang="fr"><span title="">La position z, avec une valeur de 50 unités, est la distance entre la caméra et le centre de la scène sur l'axe z.</span> <span title="">Ici, nous reculons la caméra, afin que les objets de la scène puissent être visualisés.</span> <span title="">50 se sent bien.</span> <span title="">Ce n'est ni trop près, ni trop loin, et la taille des objets leur permet de rester sur la scène, dans le champ de vision donné.</span> <span title="">Les valeurs x et y, si elles ne sont pas spécifiées, seront définies par défaut sur 0.</span></span></li>
+ <li>La valeur que nous fixons pour le champ de vision, 70, est quelque chose que nous pouvons expérimenter: plus la valeur est élevée, plus la quantité de scène que la caméra affichera sera grande. Imaginez une vue de caméra normale, par opposition à un effet fish-eye, qui permet de voir beaucoup plus. La valeur par défaut est 50.</li>
+ <li>Le rapport hauteur / largeur est défini sur la largeur et la hauteur actuelles de la fenêtre afin qu'il soit ajusté dynamiquement. Nous pourrions définir un rapport fixe - par exemple 16 ⁄ 9, qui est le rapport d'aspect d'un téléviseur à écran large. La valeur par défaut est 1.</li>
+ <li>La position z, avec une valeur de 50 unités, est la distance entre la caméra et le centre de la scène sur l'axe z. Ici, nous reculons la caméra, afin que les objets de la scène puissent être visualisés. 50 se sent bien. Ce n'est ni trop près, ni trop loin, et la taille des objets leur permet de rester sur la scène, dans le champ de vision donné. Les valeurs x et y, si elles ne sont pas spécifiées, seront définies par défaut sur 0.</li>
 </ul>
 
-<p><span class="tlid-translation translation" lang="fr"><span title="">Vous devez expérimenter ces valeurs et voir comment elles changent ce que vous voyez dans la scène.</span></span> .</p>
+<p>Vous devez expérimenter ces valeurs et voir comment elles changent ce que vous voyez dans la scène. .</p>
 
 <div class="note">
-<p><strong>Note</strong>: <span class="tlid-translation translation" lang="fr"><span title="">Les valeurs de distance (par exemple pour la position z de la caméra) sont sans unité et peuvent être tout ce que vous jugez approprié pour votre scène: millimètres, mètres, pieds ou miles.</span> </span></p>
+<p><strong>Note :</strong> Les valeurs de distance (par exemple pour la position z de la caméra) sont sans unité et peuvent être tout ce que vous jugez approprié pour votre scène: millimètres, mètres, pieds ou miles. </p>
 </div>
 
 <h2 id="Rendu_de_la_scene">Rendu de la scene</h2>
 
-<p><span class="tlid-translation translation" lang="fr"><span title="">Tout est prêt, mais on ne voit toujours rien.</span> <span title="">Bien que nous ayons configuré le moteur de rendu, nous devons toujours effetué le rendu.</span> <span title="">Notre fonction render () fera ce travail, avec un peu d'aide de requestAnimationFrame (), ce qui fait que la scène sera  restituée sur chaque image:</span></span></p>
+<p>Tout est prêt, mais on ne voit toujours rien. Bien que nous ayons configuré le moteur de rendu, nous devons toujours effetué le rendu. Notre fonction render () fera ce travail, avec un peu d'aide de requestAnimationFrame (), ce qui fait que la scène sera  restituée sur chaque image:</p>
 
-<pre class="brush: js notranslate">function render() {
+<pre class="brush: js">function render() {
 	requestAnimationFrame(render);
 	renderer.render(scene, camera);
 }
@@ -124,7 +124,7 @@ render();
 
 <p>Now our scene is properly rendering, we can start adding 3D shapes. To speed up development, Three.js provides a bunch of predefined primitives, which you can use to create shapes instantly in a single line of code. There's cubes, spheres, cylinders, and more complicated shapes available. Detail like drawing required vertices and faces, for a given shape, is handled by the Three framework, so we can focus on higher level coding. Let's start, by defining the geometry for a cube shape, adding the following just above the <code>render()</code> function:</p>
 
-<pre class="brush: js notranslate">var boxGeometry = new THREE.BoxGeometry(10, 10, 10);
+<pre class="brush: js">var boxGeometry = new THREE.BoxGeometry(10, 10, 10);
 </pre>
 
 <p>In this case, we define a simple cube that is 10 x 10 x 10 units. The geometry itself is not enough though, we also need a material that will be used for our shape.</p>
@@ -133,7 +133,7 @@ render();
 
 <p>A material is what covers an object, the colors, or textures on its surface. In our case, we will choose a simple blue color to paint our box. There are a number of predefined materials which can be used: Basic, Phong, Lambert. Let's play with the last two later, but for now, the Basic one should be enough:</p>
 
-<pre class="brush: js notranslate">var basicMaterial = new THREE.MeshBasicMaterial({color: 0x0095DD});
+<pre class="brush: js">var basicMaterial = new THREE.MeshBasicMaterial({color: 0x0095DD});
 </pre>
 
 <p>Add this line below the previously added.</p>
@@ -144,7 +144,7 @@ render();
 
 <p>To apply the material to a geometry, a mesh is used. This takes on a shape, and adds the specified material to every face:</p>
 
-<pre class="brush: js notranslate">var cube = new THREE.Mesh(boxGeometry, basicMaterial);
+<pre class="brush: js">var cube = new THREE.Mesh(boxGeometry, basicMaterial);
 </pre>
 
 <p>Again, add this line below the one you previously added.</p>
@@ -153,17 +153,17 @@ render();
 
 <p>We've now created a cube, using the geometry and material defined earlier. The last thing to do is to place the cube to our scene. Add this line below the previous one:</p>
 
-<pre class="brush: js notranslate">scene.add(cube);
+<pre class="brush: js">scene.add(cube);
 </pre>
 
 <p>If you save, and refresh your Web browser, our object will now look like a square, because it's facing the camera. The good thing about objects, is that we can move them on the scene, however we want. For example, rotating and scaling as we like. Let's apply a little rotation to the cube, so we can see more than one face.  Again, adding our code below the previous:</p>
 
-<pre class="brush: js notranslate">cube.rotation.set(0.4, 0.2, 0);
+<pre class="brush: js">cube.rotation.set(0.4, 0.2, 0);
 </pre>
 
 <p>Congratulations, you've created an object in a 3D environment! This might have proven easier than you first thought? Here's how it should look:</p>
 
-<p><img alt="Blue cube on a gray background rendered with Three.js." src="https://mdn.mozillademos.org/files/11849/cube.png" style="display: block; height: 400px; margin: 0px auto; width: 600px;"></p>
+<p><img src="cube.png"></p>
 
 <p>And here's the code we have created so far:</p>
 
@@ -175,12 +175,12 @@ render();
 
 <p>Now we will add more shapes to the scene, and explore other shapes, materials, lighting, and more. Let's move the cube to the left, to make space for some friends. Adding the following line just below the previous one:</p>
 
-<pre class="brush: js notranslate">cube.position.x = -25;
+<pre class="brush: js">cube.position.x = -25;
 </pre>
 
 <p>Now onto more shapes and materials. What might happen when you add a torus, wrapped in the Phong material? Try adding the following lines, just below the lines defining the cube.</p>
 
-<pre class="brush: js notranslate">var torusGeometry = new THREE.TorusGeometry(7, 1, 6, 12);
+<pre class="brush: js">var torusGeometry = new THREE.TorusGeometry(7, 1, 6, 12);
 var phongMaterial = new THREE.MeshPhongMaterial({color: 0xFF9500});
 var torus = new THREE.Mesh(torusGeometry, phongMaterial);
 scene.add(torus);
@@ -190,7 +190,7 @@ scene.add(torus);
 
 <p>We can choose more fun predefined shapes. Let's play some more. Add the following lines, below those defining the torus:</p>
 
-<pre class="brush: js notranslate">var dodecahedronGeometry = new THREE.DodecahedronGeometry(7);
+<pre class="brush: js">var dodecahedronGeometry = new THREE.DodecahedronGeometry(7);
 var lambertMaterial = new THREE.MeshLambertMaterial({color: 0xEAEFF2});
 var dodecahedron = new THREE.Mesh(dodecahedronGeometry, lambertMaterial);
 dodecahedron.position.x = 25;
@@ -205,14 +205,14 @@ scene.add(dodecahedron);
 
 <p>There are various types of light sources available in Three.js. The most basic is <code>PointLight</code>, which works like a flashlight, shining a spotlight in a defined direction. Add the following lines, below your shape definitions:</p>
 
-<pre class="brush: js notranslate">var light = new THREE.PointLight(0xFFFFFF);
+<pre class="brush: js">var light = new THREE.PointLight(0xFFFFFF);
 light.position.set(-10, 15, 50);
 scene.add(light);
 </pre>
 
 <p>We define a white point of light, set its position a little away from the center of the scene, so it can light up some parts of the shapes, finally adding it to the scene. Now everything works as it should, all three shapes are visible. You should check the documentation for other types of lights, like Ambient, Directional, Hemisphere, or Spot. Experiment placing them on our scene, to see how they affect it.</p>
 
-<p><img alt="Shapes: blue cube, dark yellow torus and dark gray dodecahedron on a gray background rendered with Three.js." src="https://mdn.mozillademos.org/files/11851/shapes.png" style="height: 400px; width: 600px;"></p>
+<p><img src="shapes.png"></p>
 
 <p>This looks a little boring though. In a game, something is usually happening. We might see animations and such. So let's try breathing a little life into these shapes, by animating them!</p>
 
@@ -224,7 +224,7 @@ scene.add(light);
 
 <p>Rotating is straighforward. You add a value to a given direction of rotation on each frame. Add this line of code, right after the <code>requestAnimationFrame()</code> invocation inside the <code>render</code> function:</p>
 
-<pre class="brush: js notranslate">cube.rotation.y += 0.01;
+<pre class="brush: js">cube.rotation.y += 0.01;
 </pre>
 
 <p>This rotates the cube on every frame, by a tiny bit, so the animation looks smooth.</p>
@@ -233,12 +233,12 @@ scene.add(light);
 
 <p>We can also scale an object. Applying a constant value, we would make it grow, or shrink just once. Let's make things more interesting. First, we implement a helper variable, called <code>t,</code> for counting elapsed time. Add it right before the <code>render()</code> function:</p>
 
-<pre class="brush: js notranslate">var t = 0;
+<pre class="brush: js">var t = 0;
 </pre>
 
 <p>Now let's increase the value by a given constant value, on each frame of the animation. Add the following lines, just below the <code>requestAnimationFrame()</code> invocation:</p>
 
-<pre class="brush: js notranslate">t += 0.01;
+<pre class="brush: js">t += 0.01;
 torus.scale.y = Math.abs(Math.sin(t));
 </pre>
 
@@ -250,7 +250,7 @@ torus.scale.y = Math.abs(Math.sin(t));
 
 <p>Aside from rotation, and scaling, we can additionally move objects around the scene. Add the following, again just below our <code>requestAnimationFrame()</code> invocation:</p>
 
-<pre class="brush: js notranslate">dodecahedron.position.y = -7*Math.sin(t*2);
+<pre class="brush: js">dodecahedron.position.y = -7*Math.sin(t*2);
 </pre>
 
 <p>This will move the dodecahedron up and down, by applying the <code>sin()</code> value to the y axis on each frame, and a little adjustment to make it look cooler. Try changing these values, to see how it affects the animations.</p>
@@ -261,6 +261,6 @@ torus.scale.y = Math.abs(Math.sin(t));
 
 <p>{{JSFiddleEmbed("https://jsfiddle.net/rybr720u/","","350")}}</p>
 
-<p>You can also <a href="https://github.com/end3r/MDN-Games-3D/blob/gh-pages/Three.js/shapes.html">see it on GitHub</a> and <a href="https://github.com/end3r/MDN-Games-3D/">fork the repository</a>, if you want to play with it locally. Now you understand the basics of Three.js, you can jump back to the parent page, <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web">3D on the Web</a>.</p>
+<p>You can also <a href="https://github.com/end3r/MDN-Games-3D/blob/gh-pages/Three.js/shapes.html">see it on GitHub</a> and <a href="https://github.com/end3r/MDN-Games-3D/">fork the repository</a>, if you want to play with it locally. Now you understand the basics of Three.js, you can jump back to the parent page, <a href="/fr/docs/Games/Techniques/3D_on_the_web">3D on the Web</a>.</p>
 
-<p>You could also try learning raw WebGL, to gain a better understanding of what's going on underneath. See our <a href="/en-US/docs/Web/API/WebGL_API">WebGL documentation</a>.</p>
+<p>You could also try learning raw WebGL, to gain a better understanding of what's going on underneath. See our <a href="/fr/docs/Web/API/WebGL_API">WebGL documentation</a>.</p>
diff --git a/files/fr/games/techniques/3d_on_the_web/index.html b/files/fr/games/techniques/3d_on_the_web/index.html
index b4e0aa353d..47d25bbffd 100644
--- a/files/fr/games/techniques/3d_on_the_web/index.html
+++ b/files/fr/games/techniques/3d_on_the_web/index.html
@@ -14,72 +14,72 @@ translation_of: Games/Techniques/3D_on_the_web
 
 <p>  {{IncludeSubnav("/fr/docs/Jeux")}}</p>
 
-<p class="summary"><span id="result_box" lang="fr"><span>Pour des expériences de jeu riches sur le Web, l'arme de choix est WebGL, qui est fourni sur HTML {{htmlelement ("canvas")}}.</span> <span>WebGL est essentiellement un OpenGL ES 2.0 pour le Web - c'est une API JavaScript fournissant des outils pour créer des animations interactives riches et bien sûr aussi des jeux.</span> <span>Vous pouvez générer et rendre des graphiques 3D dynamiques avec du JavaScript accéléré.</span></span></p>
+<p>Pour des expériences de jeu riches sur le Web, l'arme de choix est WebGL, qui est fourni sur HTML {{htmlelement ("canvas")}}. WebGL est essentiellement un OpenGL ES 2.0 pour le Web - c'est une API JavaScript fournissant des outils pour créer des animations interactives riches et bien sûr aussi des jeux. Vous pouvez générer et rendre des graphiques 3D dynamiques avec du JavaScript accéléré.</p>
 
-<h2 id="Documentation_et_support_du_navigateur"><span class="short_text" id="result_box" lang="fr"><span>Documentation et support du navigateur</span></span></h2>
+<h2 id="Documentation_et_support_du_navigateur">Documentation et support du navigateur</h2>
 
-<p>La documentation et les spécifications du projet <a href="https://developer.mozilla.org/fr/docs/Web/API/WebGL_API">WebGL</a> sont gérées par le <a href="https://www.khronos.org/">Groupe Khronos</a>, <span id="result_box" lang="fr"><span>pas le W3C comme pour la plupart des API Web.</span> <span>Le support sur les navigateurs modernes est très bon, même sur mobile, donc vous n'avez pas trop</span></span><span lang="fr"><span> à vous en soucier.</span> <span>Les principaux navigateurs prennent en charge WebGL et tout ce dont vous avez besoin est de vous concentrer sur l'optimisation des performances sur les appareils que vous utilisez.</span></span></p>
+<p>La documentation et les spécifications du projet <a href="/fr/docs/Web/API/WebGL_API">WebGL</a> sont gérées par le <a href="https://www.khronos.org/">Groupe Khronos</a>, pas le W3C comme pour la plupart des API Web. Le support sur les navigateurs modernes est très bon, même sur mobile, donc vous n'avez pas trop à vous en soucier. Les principaux navigateurs prennent en charge WebGL et tout ce dont vous avez besoin est de vous concentrer sur l'optimisation des performances sur les appareils que vous utilisez.</p>
 
-<p><span id="result_box" lang="fr"><span>Il y a un effort continu pour rendre libre WebGL 2.0 (basé sur OpenGL ES 3.0) dans un proche avenir, ce qui apporterait de nombreuses améliorations et aiderait les développeurs à construire des jeux pour le Web moderne en utilisant le matériel puissant actuel.</span></span></p>
+<p>Il y a un effort continu pour rendre libre WebGL 2.0 (basé sur OpenGL ES 3.0) dans un proche avenir, ce qui apporterait de nombreuses améliorations et aiderait les développeurs à construire des jeux pour le Web moderne en utilisant le matériel puissant actuel.</p>
 
 <h2 id="Explication_des_bases_de_la_théorie_3D">Explication des bases de la théorie 3D</h2>
 
-<p><span id="result_box" lang="fr"><span>Les bases de la théorie 3D s'articulent autour des formes représentées dans un espace 3D, avec un système de coordonnées utilisé pour calculer leurs positions.</span> <span>Consultez <a href="https://developer.mozilla.org/fr/docs/Games/Techniques/3D_on_the_web/Basic_theory">notre article de base sur la théorie 3D</a> pour toutes les informations dont vous avez besoin.</span></span></p>
+<p>Les bases de la théorie 3D s'articulent autour des formes représentées dans un espace 3D, avec un système de coordonnées utilisé pour calculer leurs positions. Consultez <a href="/fr/docs/Games/Techniques/3D_on_the_web/Basic_theory">notre article de base sur la théorie 3D</a> pour toutes les informations dont vous avez besoin.</p>
 
 <h2 id="Concepts_avancés">Concepts avancés</h2>
 
-<p><span id="result_box" lang="fr"><span>Vous pouvez faire beaucoup plus avec WebGL.</span> <span>Il y a des concepts avancés dans lesquels vous devriez plonger et en apprendre davantage </span></span> — <span lang="fr"><span> les "shaders", la détection de collision ou le dernier sujet brûlant </span></span> — <span lang="fr"><span>la réalité virtuelle sur le Web.</span></span></p>
+<p>Vous pouvez faire beaucoup plus avec WebGL. Il y a des concepts avancés dans lesquels vous devriez plonger et en apprendre davantage  —  les "shaders", la détection de collision ou le dernier sujet brûlant  — la réalité virtuelle sur le Web.</p>
 
 <h3 id="Shaders">Shaders</h3>
 
-<p><span id="result_box" lang="fr"><span>Il convient de distinguer les shaders, qui sont un cas particulier.</span> <span>Les Shaders utilisent GLSL, un langage d'ombrage OpenGL spécial avec une syntaxe similaire à C, qui est exécuté directement par le pipeline graphique.</span> <span>Ils peuvent être divisés en "Vertex Shaders" et "Fragment Shaders" (ou "Pixel Shaders") </span></span> — <span lang="fr"><span> le premier transforme les positions des formes en véritables coordonnées de dessin 3D, tandis que le second calcule les couleurs de rendu et d'autres attributs.</span> <span>Vous devriez absolument lire l'article <a href="https://developer.mozilla.org/fr/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders">GLSL Shaders</a> pour en apprendre plus à leur sujet.</span></span></p>
+<p>Il convient de distinguer les shaders, qui sont un cas particulier. Les Shaders utilisent GLSL, un langage d'ombrage OpenGL spécial avec une syntaxe similaire à C, qui est exécuté directement par le pipeline graphique. Ils peuvent être divisés en "Vertex Shaders" et "Fragment Shaders" (ou "Pixel Shaders")  —  le premier transforme les positions des formes en véritables coordonnées de dessin 3D, tandis que le second calcule les couleurs de rendu et d'autres attributs. Vous devriez absolument lire l'article <a href="/fr/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders">GLSL Shaders</a> pour en apprendre plus à leur sujet.</p>
 
 <h3 id="Détection_de_collision">Détection de collision</h3>
 
-<p><span id="result_box" lang="fr"><span>Il est difficile d'imaginer un jeu sans la détection de collision </span></span> — <span lang="fr"><span> nous devons toujours mettre au point quand quelque chose frappe quelque chose d'autre.</span> <span>Nous avons des informations disponibles pour votre apprentissage de :</span></span></p>
+<p>Il est difficile d'imaginer un jeu sans la détection de collision  —  nous devons toujours mettre au point quand quelque chose frappe quelque chose d'autre. Nous avons des informations disponibles pour votre apprentissage de :</p>
 
 <ul>
- <li><a href="https://developer.mozilla.org/fr/docs/Games/Techniques/2D_collision_detection">détection de collision 2D</a></li>
- <li><a href="https://developer.mozilla.org/fr/docs/Games/Techniques/3D_collision_detection">détection de collision 3D</a></li>
+ <li><a href="/fr/docs/Games/Techniques/2D_collision_detection">détection de collision 2D</a></li>
+ <li><a href="/fr/docs/Games/Techniques/3D_collision_detection">détection de collision 3D</a></li>
 </ul>
 
 <h3 id="Réalité_virtuelle_sur_le_web">Réalité virtuelle sur le web</h3>
 
-<p><span id="result_box" lang="fr"><span>Le concept de réalité virtuelle n'est pas nouveau, mais il est en train de conquérir le web grâce à des avancées matérielles telles que l'</span></span> <a href="https://www.oculus.com/en-us/rift/">Oculus Rift</a> <span lang="fr"><span> et l'<a href="https://developer.mozilla.org/fr/docs/Web/API/WebVR_API">API WebVR</a> (actuellement expérimental) pour capturer les informations du matériel de réalité virtuelle et les rendre disponibles pour les applications JavaScript.</span> <span>Pour en savoir plus, lisez <a href="https://developer.mozilla.org/fr/docs/Games/Techniques/3D_on_the_web/WebVR">WebVR - Réalité virtuelle pour le Web</a>.</span></span></p>
+<p>Le concept de réalité virtuelle n'est pas nouveau, mais il est en train de conquérir le web grâce à des avancées matérielles telles que l' <a href="https://www.oculus.com/en-us/rift/">Oculus Rift</a>  et l'<a href="/fr/docs/Web/API/WebVR_API">API WebVR</a> (actuellement expérimental) pour capturer les informations du matériel de réalité virtuelle et les rendre disponibles pour les applications JavaScript. Pour en savoir plus, lisez <a href="/fr/docs/Games/Techniques/3D_on_the_web/WebVR">WebVR - Réalité virtuelle pour le Web</a>.</p>
 
-<p><span id="result_box" lang="fr"><span>Il y a aussi la <a href="https://developer.mozilla.org/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame">construction d'une démo de base avec l'article A-Frame</a> qui montre comment il est facile de construire des environnements 3D pour la réalité virtuelle en utilisant le framework </span></span> <a href="http://aframe.io/">A-Frame</a> <span lang="fr"><span>.</span></span></p>
+<p>Il y a aussi la <a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame">construction d'une démo de base avec l'article A-Frame</a> qui montre comment il est facile de construire des environnements 3D pour la réalité virtuelle en utilisant le framework  <a href="http://aframe.io/">A-Frame</a> .</p>
 
-<h2 id="Lessor_des_bibliothèques_et_des_cadres"><span class="short_text" id="result_box" lang="fr"><span>L'essor des bibliothèques et des cadres</span></span></h2>
+<h2 id="Lessor_des_bibliothèques_et_des_cadres">L'essor des bibliothèques et des cadres</h2>
 
-<p><span id="result_box" lang="fr"><span>Le codage de WebGL brut est assez complexe, mais vous aurez envie de le maîtriser à long terme, car vos projets seront plus avancés (consultez notre <a href="https://developer.mozilla.org/fr/docs/Web/API/WebGL_API">documentation WebGL</a> pour commencer). Pour les projets de monde réel, vous utiliserez probablement aussi</span> <span>un </span></span> "framework" <span lang="fr"><span> pour accélérer le développement et vous aider à gérer le projet.</span> <span>L'utilisation d'un "framework" pour les jeux 3D permet également d'optimiser les performances, car les outils que vous utilisez vous permettent de vous concentrer sur la construction du jeu.</span></span></p>
+<p>Le codage de WebGL brut est assez complexe, mais vous aurez envie de le maîtriser à long terme, car vos projets seront plus avancés (consultez notre <a href="/fr/docs/Web/API/WebGL_API">documentation WebGL</a> pour commencer). Pour les projets de monde réel, vous utiliserez probablement aussi un  "framework"  pour accélérer le développement et vous aider à gérer le projet. L'utilisation d'un "framework" pour les jeux 3D permet également d'optimiser les performances, car les outils que vous utilisez vous permettent de vous concentrer sur la construction du jeu.</p>
 
-<p><span id="result_box" lang="fr"><span>La bibliothèque 3D JavaScript la plus populaire est </span></span> <a href="http://threejs.org/">Three.js</a><span lang="fr"><span>, un outil polyvalent qui rend les techniques 3D plus simples à implémenter.</span> <span>Il existe d'autres bibliothèques et cadres de développement de jeux populaires qui valent la peine d'être regardés ;</span> </span> <a href="https://aframe.io">A-Frame</a>, <a href="https://playcanvas.com/">PlayCanvas</a> <span lang="fr"><span> et </span></span> <a href="http://www.babylonjs.com/">Babylon.js</a> <span lang="fr"><span> sont parmi les plus reconnaissables avec une documentation riche, des éditeurs en ligne et des communautés actives.</span></span></p>
+<p>La bibliothèque 3D JavaScript la plus populaire est  <a href="http://threejs.org/">Three.js</a>, un outil polyvalent qui rend les techniques 3D plus simples à implémenter. Il existe d'autres bibliothèques et cadres de développement de jeux populaires qui valent la peine d'être regardés ;  <a href="https://aframe.io">A-Frame</a>, <a href="https://playcanvas.com/">PlayCanvas</a>  et  <a href="http://www.babylonjs.com/">Babylon.js</a>  sont parmi les plus reconnaissables avec une documentation riche, des éditeurs en ligne et des communautés actives.</p>
 
-<h3 id="Construction_dune_démo_de_base_avec_A-Frame"><span class="short_text" id="result_box" lang="fr"><span>Construction d'une démo de base avec A-Frame</span></span></h3>
+<h3 id="Construction_dune_démo_de_base_avec_A-Frame">Construction d'une démo de base avec A-Frame</h3>
 
-<p>A-Frame <span id="result_box" lang="fr"><span>est un "framework" web pour construire des expériences 3D et de la réalité virtuelle.</span> <span>Sous le capot, il s'agit d'un "framework" </span></span> three.js <span lang="fr"><span> avec un modèle déclaratif entité-composant, ce qui signifie que nous pouvons construire des scènes avec seulement du HTML.</span> <span>Voir la page</span></span> <a href="https://developer.mozilla.org/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame">Construction d'une démo de base avec</a><a href="https://developer.mozilla.org/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame"> A-Frame</a> <span id="result_box" lang="fr"><span>pour le processus étape par étape de création de la démo</span></span> .</p>
+<p>A-Frame est un "framework" web pour construire des expériences 3D et de la réalité virtuelle. Sous le capot, il s'agit d'un "framework"  three.js  avec un modèle déclaratif entité-composant, ce qui signifie que nous pouvons construire des scènes avec seulement du HTML. Voir la page <a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame">Construction d'une démo de base avec</a><a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame"> A-Frame</a> pour le processus étape par étape de création de la démo .</p>
 
 <h3 id="Construction_dune_démo_de_base_avec_Babylon.js">Construction d'une démo de base avec Babylon.js</h3>
 
-<p><span class="seosummary">Babylon.js </span> <span id="result_box" lang="fr"><span>est l'un des moteurs de jeux 3D les plus populaires utilisés par les développeurs.</span> <span>Comme avec n'importe quelle autre bibliothèque 3D, il fournit des fonctions intégrées pour vous aider à implémenter les fonctionnalités 3D courantes plus rapidement.</span> <span>Voir la page</span></span> <span class="seosummary"> <a href="https://developer.mozilla.org/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js">Construction d'une démo de base avec Babylon.js</a> sur les bases et l'utilisation de Babylon.js, </span> <span id="result_box" lang="fr"><span>y compris la mise en place d'un environnement de développement, la structuration du code HTML nécessaire et l'écriture du code JavaScript</span></span><span class="seosummary">.</span></p>
+<p>Babylon.js  est l'un des moteurs de jeux 3D les plus populaires utilisés par les développeurs. Comme avec n'importe quelle autre bibliothèque 3D, il fournit des fonctions intégrées pour vous aider à implémenter les fonctionnalités 3D courantes plus rapidement. Voir la page <a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js">Construction d'une démo de base avec Babylon.js</a> sur les bases et l'utilisation de Babylon.js, y compris la mise en place d'un environnement de développement, la structuration du code HTML nécessaire et l'écriture du code JavaScript.</p>
 
 <h3 id="Construction_dune_démo_de_base_avec_PlayCanvas">Construction d'une démo de base avec PlayCanvas</h3>
 
-<p><span id="result_box" lang="fr"><span>PlayCanvas est un moteur de jeu 3D WebGL populaire ouvert sur GitHub, avec un éditeur disponible en ligne et une bonne documentation.</span> <span>Voir la page</span></span> <a href="https://developer.mozilla.org/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas">Construction d'une démo de base avec PlayCanvas</a> pour des détails de haut niveau, <span id="result_box" lang="fr"><span>et d'autres articles montrant comment créer des démos à l'aide de la bibliothèque PlayCanvas et de l'éditeur en ligne.</span></span></p>
+<p>PlayCanvas est un moteur de jeu 3D WebGL populaire ouvert sur GitHub, avec un éditeur disponible en ligne et une bonne documentation. Voir la page <a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas">Construction d'une démo de base avec PlayCanvas</a> pour des détails de haut niveau, et d'autres articles montrant comment créer des démos à l'aide de la bibliothèque PlayCanvas et de l'éditeur en ligne.</p>
 
 <h3 id="Construction_dune_démo_de_base_avec_Three.js">Construction d'une démo de base avec Three.js</h3>
 
-<p>Three.js, <span id="result_box" lang="fr"><span>comme toute autre bibliothèque, vous donne un énorme avantage : au lieu d'écrire des centaines de lignes de code WebGL pour construire quelque chose d'intéressant, vous pouvez utiliser des fonctions intégrées pour le faire beaucoup plus facilement et plus rapidement.</span> <span>Voir la page</span></span> <a href="https://developer.mozilla.org/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js">Construction d'une démo de base avec Three.js</a>  <span id="result_box" lang="fr"><span>pour le processus étape par étape de création de la démo</span></span> .</p>
+<p>Three.js, comme toute autre bibliothèque, vous donne un énorme avantage : au lieu d'écrire des centaines de lignes de code WebGL pour construire quelque chose d'intéressant, vous pouvez utiliser des fonctions intégrées pour le faire beaucoup plus facilement et plus rapidement. Voir la page <a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js">Construction d'une démo de base avec Three.js</a>  pour le processus étape par étape de création de la démo .</p>
 
 <h3 id="Autres_outils">Autres outils</h3>
 
-<p><span id="result_box" lang="fr"><span>Les deux </span></span> <a href="http://unity3d.com/">Unity</a> <span lang="fr"><span> et </span></span> <a href="https://www.unrealengine.com/">Unreal</a> <span lang="fr"><span> peuvent exporter votre jeu vers </span></span> <a href="https://developer.mozilla.org/fr/docs/Web/API/WebGL_API">WebGL</a> <span lang="fr"><span> avec </span></span> <a href="https://developer.mozilla.org/en-US/docs/Games/Tools/asm.js">asm.js</a> <span lang="fr"><span>, de sorte que vous êtes libre d'utiliser leurs outils et techniques pour construire des jeux qui seront exportés vers le web.</span></span></p>
+<p>Les deux  <a href="http://unity3d.com/">Unity</a>  et  <a href="https://www.unrealengine.com/">Unreal</a>  peuvent exporter votre jeu vers  <a href="/fr/docs/Web/API/WebGL_API">WebGL</a>  avec  <a href="/fr/docs/Games/Tools/asm.js">asm.js</a> , de sorte que vous êtes libre d'utiliser leurs outils et techniques pour construire des jeux qui seront exportés vers le web.</p>
 
-<p><img alt="" src="http://end3r.github.io/MDN-Games-3D/A-Frame/img/shapes.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+<p><img alt="" src="shapes.png"></p>
 
 <h2 id="Où_aller_ensuite">Où aller ensuite</h2>
 
-<p><span id="result_box" lang="fr"><span>Avec cet article, nous avons juste effleuré la surface de ce qu'il est possible de faire avec les technologies actuellement disponibles.</span> <span>Vous pouvez créer des jeux 3D immersifs, beaux et rapides à l'aide de WebGL, les bibliothèques et les frameworks s'appuient dessus.</span></span></p>
+<p>Avec cet article, nous avons juste effleuré la surface de ce qu'il est possible de faire avec les technologies actuellement disponibles. Vous pouvez créer des jeux 3D immersifs, beaux et rapides à l'aide de WebGL, les bibliothèques et les frameworks s'appuient dessus.</p>
 
 <h3 id="Code_source">Code source</h3>
 
@@ -88,9 +88,9 @@ translation_of: Games/Techniques/3D_on_the_web
 <h3 id="API">API</h3>
 
 <ul>
- <li><a href="https://developer.mozilla.org/fr/docs/Web/HTML/Canvas">Canvas API</a></li>
- <li><a href="https://developer.mozilla.org/fr/docs/Web/API/WebGL_API">WebGL API</a></li>
- <li><a href="https://developer.mozilla.org/fr/docs/Web/API/WebVR_API">WebVR API</a></li>
+ <li><a href="/fr/docs/Web/HTML/Canvas">Canvas API</a></li>
+ <li><a href="/fr/docs/Web/API/WebGL_API">WebGL API</a></li>
+ <li><a href="/fr/docs/Web/API/WebVR_API">WebVR API</a></li>
 </ul>
 
 <h3 id="Frameworks">Frameworks</h3>
@@ -106,8 +106,8 @@ translation_of: Games/Techniques/3D_on_the_web
 <h3 id="Tutorials">Tutorials</h3>
 
 <ul>
- <li><a href="https://developer.mozilla.org/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js">Construction d'une démo de base avec Three.js</a></li>
- <li><a href="https://developer.mozilla.org/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas">Construction d'une démo de base avec PlayCanvas</a></li>
- <li><span class="seosummary"><a href="https://developer.mozilla.org/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js">Construction d'une démo de base avec Babylon.js</a></span></li>
- <li><a href="https://developer.mozilla.org/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame">Construction d'une démo de base avec</a><a href="https://developer.mozilla.org/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame"> A-Frame</a></li>
+ <li><a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js">Construction d'une démo de base avec Three.js</a></li>
+ <li><a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas">Construction d'une démo de base avec PlayCanvas</a></li>
+ <li><a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js">Construction d'une démo de base avec Babylon.js</a></li>
+ <li><a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame">Construction d'une démo de base avec</a><a href="/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame"> A-Frame</a></li>
 </ul>
diff --git a/files/fr/games/techniques/audio_for_web_games/index.html b/files/fr/games/techniques/audio_for_web_games/index.html
index 74fda3abbe..a3bf43e413 100644
--- a/files/fr/games/techniques/audio_for_web_games/index.html
+++ b/files/fr/games/techniques/audio_for_web_games/index.html
@@ -11,9 +11,7 @@ translation_of: Games/Techniques/Audio_for_Web_Games
 ---
 <div>{{GamesSidebar}}</div><p>  {{IncludeSubnav("/fr/docs/Jeux")}}</p>
 
-<div class="summary">
 <p>L'audio représente une chose essentielle dans n'importe quel jeu vidéo; il apporte de l'information et contribue à l'atmosphère du jeu. La prise en charge de l'audio a évolué de manière rapide mais il reste encore beaucoup de différences de prise en charge entre les navigateurs. Nous avons souvent besoin de décider quelles parties de notre contenu audio est intéressant et laquelle ne l'est pas, et mettre en place une stratégie en conséquence. Cet article fournit un guide détaillé sur l'implémentation de l'audio dans les jeux HTML5, détaillant quels choix technologiques fonctionneront sur le plus grand nombre de navigateurs.</p>
-</div>
 
 <h2 id="Avertissement_sur_l'audio_sur_mobile">Avertissement sur l'audio sur mobile</h2>
 
@@ -21,39 +19,39 @@ translation_of: Games/Techniques/Audio_for_Web_Games
 
 <h3 id="Lecture_automatique">Lecture automatique</h3>
 
-<p>Beaucoup de navigateurs mobiles vont simplement ignorer n'importe quelle requête de lancement automatique de musique faite par votre jeu; à la place, l'utilisateur va être obligé de lancer lui même la lecture via une action quelconque. Cela signifie que vous allez devoir prendre en compte cette diférence lors de l'implementation de votre lecture automatique. Ce problème est généralement <span id="result_box" lang="fr"><span>atténué en chargeant l'audio à l'avance et en l'amorçant sur un événement initié par l'utilisateur.</span></span></p>
+<p>Beaucoup de navigateurs mobiles vont simplement ignorer n'importe quelle requête de lancement automatique de musique faite par votre jeu; à la place, l'utilisateur va être obligé de lancer lui même la lecture via une action quelconque. Cela signifie que vous allez devoir prendre en compte cette diférence lors de l'implementation de votre lecture automatique. Ce problème est généralement atténué en chargeant l'audio à l'avance et en l'amorçant sur un événement initié par l'utilisateur.</p>
 
-<p><span id="result_box" lang="fr"><span>Pour une lecture automatique audio plus passive, par exemple une musique de fond qui commence dès qu'un jeu se charge, une astuce consiste à détecter l'événement * any * initié par l'utilisateur et à démarrer la lecture.</span> <span>Pour d'autres sons plus actifs qui seront utilisés pendant le jeu, nous pouvons envisager de les amorcer dès que l'on appuie sur un bouton de démarrage.</span></span></p>
+<p>Pour une lecture automatique audio plus passive, par exemple une musique de fond qui commence dès qu'un jeu se charge, une astuce consiste à détecter l'événement * any * initié par l'utilisateur et à démarrer la lecture. Pour d'autres sons plus actifs qui seront utilisés pendant le jeu, nous pouvons envisager de les amorcer dès que l'on appuie sur un bouton de démarrage.</p>
 
-<p><span id="result_box" lang="fr"><span>Pour faire primer l'audio de cette façon, nous voulons en jouer une partie ;</span> <span>pour cette raison, il est utile d'inclure un moment de silence à la fin de votre échantillon audio.</span> <span>Ce silence signifiera que nous pouvons maintenant utiliser JavaScript pour lire ce fichier à des points arbitraires.</span></span></p>
+<p>Pour faire primer l'audio de cette façon, nous voulons en jouer une partie ; pour cette raison, il est utile d'inclure un moment de silence à la fin de votre échantillon audio. Ce silence signifiera que nous pouvons maintenant utiliser JavaScript pour lire ce fichier à des points arbitraires.</p>
 
 <div class="note">
-<p><strong>Note </strong>: <span id="result_box" lang="fr"><span>Jouer une partie de votre fichier au volume zéro pourrait également fonctionner si le navigateur vous permet de changer le volume (voir ci-dessous).</span> <span>Notez également que la lecture et la mise en pause immédiate de votre audio ne garantissent pas qu'un petit morceau d'audio ne sera pas lu.</span></span></p>
+<p><strong>Note :</strong> Jouer une partie de votre fichier au volume zéro pourrait également fonctionner si le navigateur vous permet de changer le volume (voir ci-dessous). Notez également que la lecture et la mise en pause immédiate de votre audio ne garantissent pas qu'un petit morceau d'audio ne sera pas lu.</p>
 </div>
 
 <div class="note">
-<p><strong>Note </strong>: <span id="result_box" lang="fr"><span>L'ajout d'une application Web sur votre écran d'accueil mobile peut changer ses capacités.</span> <span>Dans le cas d'une lecture automatique sur iOS, cela semble être le cas actuellement.</span> <span>Si possible, vous devriez essayer votre code sur plusieurs appareils et platesformes pour voir comment cela fonctionne.</span></span></p>
+<p><strong>Note :</strong> L'ajout d'une application Web sur votre écran d'accueil mobile peut changer ses capacités. Dans le cas d'une lecture automatique sur iOS, cela semble être le cas actuellement. Si possible, vous devriez essayer votre code sur plusieurs appareils et platesformes pour voir comment cela fonctionne.</p>
 </div>
 
 <h3 id="Volume">Volume</h3>
 
-<p><span id="result_box" lang="fr"><span>Le contrôle du volume programmé peut être désactivé dans les navigateurs mobiles.</span> <span>La raison souvent donnée est que l'utilisateur doit maîtriser le volume au niveau du système d'exploitation et cela ne doit pas être ignoré.</span></span></p>
+<p>Le contrôle du volume programmé peut être désactivé dans les navigateurs mobiles. La raison souvent donnée est que l'utilisateur doit maîtriser le volume au niveau du système d'exploitation et cela ne doit pas être ignoré.</p>
 
-<h3 id="Mise_en_mémoire_tampon_et_préchargement"><span class="short_text" id="result_box" lang="fr"><span>Mise en mémoire tampon et préchargement</span></span></h3>
+<h3 id="Mise_en_mémoire_tampon_et_préchargement">Mise en mémoire tampon et préchargement</h3>
 
-<p><span id="result_box" lang="fr"><span>Probablement comme une tentative d'atténuation de l'utilisation des données du réseau mobile, nous trouvons souvent que la mise en mémoire tampon est désactivée avant que la lecture n'ait été lancée.</span> <span>La mise en mémoire tampon est le processus par lequel le navigateur télécharge le média à l'avance, ce que nous devons souvent faire pour assurer une lecture fluide.</span></span></p>
+<p>Probablement comme une tentative d'atténuation de l'utilisation des données du réseau mobile, nous trouvons souvent que la mise en mémoire tampon est désactivée avant que la lecture n'ait été lancée. La mise en mémoire tampon est le processus par lequel le navigateur télécharge le média à l'avance, ce que nous devons souvent faire pour assurer une lecture fluide.</p>
 
 <div class="note">
-<p><strong>Note </strong>: <span id="result_box" lang="fr"><span>À bien des égards, le concept de mise en mémoire tampon est obsolète.</span> <span>Tant que les demandes de plage d'octets sont acceptées (ce qui est le comportement par défaut), nous devrions pouvoir sauter à un point spécifique de l'audio sans avoir à télécharger le contenu précédent.</span> <span>Cependant, le préchargement est toujours utile;</span> <span>sans cela, il faudrait toujours avoir une certaine communication client-serveur avant de commencer à jouer.</span></span></p>
+<p><strong>Note :</strong> À bien des égards, le concept de mise en mémoire tampon est obsolète. Tant que les demandes de plage d'octets sont acceptées (ce qui est le comportement par défaut), nous devrions pouvoir sauter à un point spécifique de l'audio sans avoir à télécharger le contenu précédent. Cependant, le préchargement est toujours utile; sans cela, il faudrait toujours avoir une certaine communication client-serveur avant de commencer à jouer.</p>
 </div>
 
-<h3 id="Lecture_audio_simultanée"><span class="short_text" id="result_box" lang="fr"><span>Lecture audio simultanée</span></span></h3>
+<h3 id="Lecture_audio_simultanée">Lecture audio simultanée</h3>
 
-<p><span id="result_box" lang="fr"><span>Une exigence de nombreux jeux est de jouer plus d'un morceau audio en même temps ;</span> <span>par exemple, il peut y avoir de la musique de fond et des effets sonores pour diverses actions se produisant dans le jeu.</span> <span>Bien que la situation évolue rapidement avec l'adoption de l'</span></span> <a href="https://developer.mozilla.org/fr/docs/Web/API/Web_Audio_API">API Web Audio</a> <span lang="fr"><span>, la méthode actuellement la plus largement supportée, utilisant l'élément vanilla {{htmlelement ("audio")}}, produit des résultats inégaux sur les appareils mobiles.</span></span></p>
+<p>Une exigence de nombreux jeux est de jouer plus d'un morceau audio en même temps ; par exemple, il peut y avoir de la musique de fond et des effets sonores pour diverses actions se produisant dans le jeu. Bien que la situation évolue rapidement avec l'adoption de l' <a href="/fr/docs/Web/API/Web_Audio_API">API Web Audio</a> , la méthode actuellement la plus largement supportée, utilisant l'élément vanilla {{htmlelement ("audio")}}, produit des résultats inégaux sur les appareils mobiles.</p>
 
-<h3 id="Test_et_support"><span class="short_text" id="result_box" lang="fr"><span>Test et support</span></span></h3>
+<h3 id="Test_et_support">Test et support</h3>
 
-<p><span id="result_box" lang="fr"><span>Voici un tableau qui montre quelles plateformes mobiles prennent en charge les fonctionnalités mentionnées ci-dessus.</span></span></p>
+<p>Voici un tableau qui montre quelles plateformes mobiles prennent en charge les fonctionnalités mentionnées ci-dessus.</p>
 
 <table class="standard-table">
  <caption>Mobile support for web audio features</caption>
@@ -128,236 +126,236 @@ translation_of: Games/Techniques/Audio_for_Web_Games
 </table>
 
 <div class="note">
-<p><strong>* Note </strong>: <span id="result_box" lang="fr"><span>Safari 7 a des problèmes à jouer si vous essayez de démarrer tous les morceaux audio simultanément.</span> <span>Si vous échelonnez la lecture, vous aurez peut-être un certain succès.</span></span></p>
+<p><strong>Note :</strong> Safari 7 a des problèmes à jouer si vous essayez de démarrer tous les morceaux audio simultanément. Si vous échelonnez la lecture, vous aurez peut-être un certain succès.</p>
 </div>
 
 <div class="note">
-<p><strong>Note </strong>: <span id="result_box" lang="fr"><span>La lecture audio simultanée est testée à l'aide de notre <a href="http://jsfiddle.net/dmkyaq0r/">exemple de test audio simultané</a>, avec lequel nous essayons de lire trois morceaux en même temps en utilisant l'API audio standard.</span></span></p>
+<p><strong>Note :</strong> La lecture audio simultanée est testée à l'aide de notre <a href="http://jsfiddle.net/dmkyaq0r/">exemple de test audio simultané</a>, avec lequel nous essayons de lire trois morceaux en même temps en utilisant l'API audio standard.</p>
 </div>
 
 <div class="note">
-<p><strong>Note </strong>: <span id="result_box" lang="fr"><span>La fonctionnalité de lecture automatique simple est testée avec notre</span></span> <a href="http://jsfiddle.net/vpdspp2b/">exemp;e test lecture automatique</a>.</p>
+<p><strong>Note :</strong> La fonctionnalité de lecture automatique simple est testée avec notre <a href="http://jsfiddle.net/vpdspp2b/">exemp;e test lecture automatique</a>.</p>
 </div>
 
 <div class="note">
-<p><strong>Note </strong>: <span class="short_text" id="result_box" lang="fr"><span>La variabilité du volume est testée avec notre</span></span> <a href="http://jsfiddle.net/7ta12vw4/">exemple test volume</a>.</p>
+<p><strong>Note :</strong> La variabilité du volume est testée avec notre <a href="http://jsfiddle.net/7ta12vw4/">exemple test volume</a>.</p>
 </div>
 
-<h2 id="Solutions_de_contournement_pour_mobile"><span class="short_text" id="result_box" lang="fr"><span>Solutions de contournement pour mobile</span></span></h2>
+<h2 id="Solutions_de_contournement_pour_mobile">Solutions de contournement pour mobile</h2>
 
-<p><span id="result_box" lang="fr"><span>Bien que les navigateurs mobiles puissent présenter les problèmes évoqués ci-dessus, il existe des moyens de les contourner.</span></span></p>
+<p>Bien que les navigateurs mobiles puissent présenter les problèmes évoqués ci-dessus, il existe des moyens de les contourner.</p>
 
 <h3 id="Les_sprites_audio">Les "sprites" audio</h3>
 
-<p><span id="result_box" lang="fr"><span>Les "sprites" audio empruntent leur nom aux <a href="https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Images/Sprites_CSS">"sprites" CSS</a> ; c'est une technique visuelle permettant d'utiliser CSS avec une seule ressource graphique pour la découper en une série d'objets-images.</span> <span>Nous pouvons appliquer le même principe à l'audio, au lieu de disposer d'un petit nombre de petits fichiers audio qui prennent du temps à charger et à lire, nous avons un fichier audio plus grand contenant tous les fragments audio plus petits dont nous avons besoin.</span> <span>Pour lire un son spécifique à partir du fichier, nous utilisons simplement les périodes de début et de fin connues pour chaque "sprite" audio.</span></span></p>
+<p>Les "sprites" audio empruntent leur nom aux <a href="/fr/docs/Web/CSS/CSS_Images/Sprites_CSS">"sprites" CSS</a> ; c'est une technique visuelle permettant d'utiliser CSS avec une seule ressource graphique pour la découper en une série d'objets-images. Nous pouvons appliquer le même principe à l'audio, au lieu de disposer d'un petit nombre de petits fichiers audio qui prennent du temps à charger et à lire, nous avons un fichier audio plus grand contenant tous les fragments audio plus petits dont nous avons besoin. Pour lire un son spécifique à partir du fichier, nous utilisons simplement les périodes de début et de fin connues pour chaque "sprite" audio.</p>
 
-<p><span id="result_box" lang="fr"><span>L'avantage est que nous pouvons amorcer un morceau d'audio et avoir nos "sprites" prêts à partir.</span> <span>Pour ce faire, nous pouvons juste jouer et mettre en pause instantanément la plus grande partie de l'audio.</span> <span>Nous réduisons également le nombre de demandes de serveur et économisons de la bande passante.</span></span></p>
+<p>L'avantage est que nous pouvons amorcer un morceau d'audio et avoir nos "sprites" prêts à partir. Pour ce faire, nous pouvons juste jouer et mettre en pause instantanément la plus grande partie de l'audio. Nous réduisons également le nombre de demandes de serveur et économisons de la bande passante.</p>
 
 <pre class="brush: js">var myAudio = document.createElement("audio");
 myAudio.src = "mysprite.mp3";
 myAudio.play();
 myAudio.pause();</pre>
 
-<p><span id="result_box" lang="fr"><span>Vous aurez besoin d'échantillonner l'heure actuelle pour savoir quand l'arrêter.</span> <span>Si vous espacez vos sons individuels d'au moins 500 ms, l'utilisation de l'événement <code>timeUpdate</code> (qui se déclenche toutes les 250 ms) devrait suffire.</span> <span>Vos fichiers peuvent être légèrement plus longs que ce qu'ils devraient être, mais le silence se compresse bien.</span></span></p>
+<p>Vous aurez besoin d'échantillonner l'heure actuelle pour savoir quand l'arrêter. Si vous espacez vos sons individuels d'au moins 500 ms, l'utilisation de l'événement <code>timeUpdate</code> (qui se déclenche toutes les 250 ms) devrait suffire. Vos fichiers peuvent être légèrement plus longs que ce qu'ils devraient être, mais le silence se compresse bien.</p>
 
-<p><span id="result_box" lang="fr"><span>Voici un exemple d'un lecteur de "sprite" audio - nous allons d'abord configurer l'interface utilisateur en HTML :</span></span></p>
+<p>Voici un exemple d'un lecteur de "sprite" audio - nous allons d'abord configurer l'interface utilisateur en HTML :</p>
 
-<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>audio</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>myAudio<span class="punctuation token">"</span></span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://jPlayer.org/tmp/countdown.mp3<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>audio</span><span class="punctuation token">&gt;</span></span>
-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">data-start</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>18<span class="punctuation token">"</span></span> <span class="attr-name token">data-stop</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>19<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>0<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span>
-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">data-start</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>16<span class="punctuation token">"</span></span> <span class="attr-name token">data-stop</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>17<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>1<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span>
-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">data-start</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>14<span class="punctuation token">"</span></span> <span class="attr-name token">data-stop</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>15<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>2<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span>
-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">data-start</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>12<span class="punctuation token">"</span></span> <span class="attr-name token">data-stop</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>13<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>3<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span>
-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">data-start</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>10<span class="punctuation token">"</span></span> <span class="attr-name token">data-stop</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>11<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>4<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span>
-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">data-start</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>8<span class="punctuation token">"</span></span>  <span class="attr-name token">data-stop</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>9<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>5<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span>
-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">data-start</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>6<span class="punctuation token">"</span></span>  <span class="attr-name token">data-stop</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>7<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>6<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span>
-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">data-start</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>4<span class="punctuation token">"</span></span>  <span class="attr-name token">data-stop</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>5<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>7<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span>
-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">data-start</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>2<span class="punctuation token">"</span></span>  <span class="attr-name token">data-stop</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>3<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>8<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span>
-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">data-start</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>0<span class="punctuation token">"</span></span>  <span class="attr-name token">data-stop</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>1<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>9<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span></code></pre>
+<pre class="brush: html">lt;audio id="myAudio" src="http://jPlayer.org/tmp/countdown.mp3"&gt;&lt;/audio&gt;
+&lt;button data-start="18" data-stop="19"&gt;0&lt;/button&gt;
+&lt;button data-start="16" data-stop="17"&gt;1&lt;/button&gt;
+&lt;button data-start="14" data-stop="15"&gt;2&lt;/button&gt;
+&lt;button data-start="12" data-stop="13"&gt;3&lt;/button&gt;
+&lt;button data-start="10" data-stop="11"&gt;4&lt;/button&gt;
+&lt;button data-start="8"  data-stop="9"&gt;5&lt;/button&gt;
+&lt;button data-start="6"  data-stop="7"&gt;6&lt;/button&gt;
+&lt;button data-start="4"  data-stop="5"&gt;7&lt;/button&gt;
+&lt;button data-start="2"  data-stop="3"&gt;8&lt;/button&gt;
+&lt;button data-start="0"  data-stop="1"&gt;9&lt;/button&gt;</pre>
 
-<p><span id="result_box" lang="fr"><span>Maintenant, nous avons des boutons avec des heures de début et de fin en quelques secondes.</span> <span>Le fichier MP3 "countdown.mp3" se compose d'un numéro qui est prononcé toutes les 2 secondes, l'idée étant de lire ce numéro lorsque le bouton correspondant est pressé.</span></span></p>
+<p>Maintenant, nous avons des boutons avec des heures de début et de fin en quelques secondes. Le fichier MP3 "countdown.mp3" se compose d'un numéro qui est prononcé toutes les 2 secondes, l'idée étant de lire ce numéro lorsque le bouton correspondant est pressé.</p>
 
-<p><span class="short_text" id="result_box" lang="fr"><span>Ajoutons du JavaScript pour que ça marche:</span></span></p>
+<p>Ajoutons du JavaScript pour que ça marche:</p>
 
-<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">var</span> myAudio <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'myAudio'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-<span class="keyword token">var</span> buttons <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">'button'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-<span class="keyword token">var</span> stopTime <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span>
+<pre class="brush: js">var myAudio = document.getElementById('myAudio');
+var buttons = document.getElementsByTagName('button');
+var stopTime = 0;
 
-<span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token">&lt;</span> buttons<span class="punctuation token">.</span>length<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
-  buttons<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
-    myAudio<span class="punctuation token">.</span>currentTime <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">.</span><span class="function token">getAttribute</span><span class="punctuation token">(</span><span class="string token">"data-start"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-    stopTime <span class="operator token">=</span> <span class="keyword token">this</span><span class="punctuation token">.</span><span class="function token">getAttribute</span><span class="punctuation token">(</span><span class="string token">"data-stop"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-    myAudio<span class="punctuation token">.</span><span class="function token">play</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-  <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-<span class="punctuation token">}</span>
+for (var i = 0; i &lt; buttons.length; i++) {
+  buttons[i].addEventListener('click', function() {
+    myAudio.currentTime = this.getAttribute("data-start");
+    stopTime = this.getAttribute("data-stop");
+    myAudio.play();
+  }, false);
+}
 
-myAudio<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'timeupdate'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
-  <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>currentTime <span class="operator token">&gt;</span> stopTime<span class="punctuation token">)</span> <span class="punctuation token">{</span>
-    <span class="keyword token">this</span><span class="punctuation token">.</span><span class="function token">pause</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-  <span class="punctuation token">}</span>
-<span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+myAudio.addEventListener('timeupdate', function() {
+  if (this.currentTime &gt; stopTime) {
+    this.pause();
+  }
+}, false);</pre>
 
 <div class="note">
-<p><strong>Note </strong>: Vous pouvez <a href="http://jsfiddle.net/59vwaame/">essayer notre lecteur de sprite audio</a> sur JSFiddle.</p>
+<p><strong>Note :</strong> Vous pouvez <a href="http://jsfiddle.net/59vwaame/">essayer notre lecteur de sprite audio</a> sur JSFiddle.</p>
 </div>
 
 <div class="note">
-<p><strong>Note </strong>: Sur mobile <span id="result_box" lang="fr"><span>nous pouvons avoir besoin de déclencher ce code à partir d'un événement initié par l'utilisateur, tel qu'un bouton de démarrage pressé, comme décrit ci-dessus.</span></span></p>
+<p><strong>Note :</strong> Sur mobile nous pouvons avoir besoin de déclencher ce code à partir d'un événement initié par l'utilisateur, tel qu'un bouton de démarrage pressé, comme décrit ci-dessus.</p>
 </div>
 
 <div class="note">
-<p><strong>Note </strong>: <span id="result_box" lang="fr"><span>Attention aux débits binaires.</span> <span>L'encodage de votre audio à des débits binaires inférieurs signifie des tailles de fichier plus petites, mais une précision de recherche plus faible.</span></span></p>
+<p><strong>Note :</strong> Attention aux débits binaires. L'encodage de votre audio à des débits binaires inférieurs signifie des tailles de fichier plus petites, mais une précision de recherche plus faible.</p>
 </div>
 
 <h2 id="Musique_de_fond">Musique de fond</h2>
 
-<p><span id="result_box" lang="fr"><span>La musique dans les jeux peut avoir un effet émotionnel puissant.</span> <span>Vous pouvez mélanger et assortir divers échantillons de musique et, en supposant que vous pouvez contrôler le volume de votre élément audio, vous pouvez fondre différentes pièces musicales.</span> <span>En utilisant la méthode </span></span> <code><a href="https://developer.mozilla.org/fr/Apps/Fundamentals/Audio_and_video_delivery/WebAudio_playbackRate_explained">playbackRate()</a></code> <span lang="fr"><span>, vous pouvez même ajuster la vitesse de votre musique sans affecter la hauteur, pour mieux la synchroniser avec l'action.</span></span><br>
+<p>La musique dans les jeux peut avoir un effet émotionnel puissant. Vous pouvez mélanger et assortir divers échantillons de musique et, en supposant que vous pouvez contrôler le volume de votre élément audio, vous pouvez fondre différentes pièces musicales. En utilisant la méthode  <code><a href="/fr/Apps/Fundamentals/Audio_and_video_delivery/WebAudio_playbackRate_explained">playbackRate()</a></code> , vous pouvez même ajuster la vitesse de votre musique sans affecter la hauteur, pour mieux la synchroniser avec l'action.<br>
  <br>
- <span id="result_box" lang="fr"><span>Tout ceci est possible en utilisant l'élément standard {{HTMLElement ("audio")}} associé à l'API </span></span> {{domxref("HTMLMediaElement")}} <span lang="fr"><span>, mais il devient beaucoup plus facile et flexible avec l'<a href="https://developer.mozilla.org/fr/docs/Web/API/Web_Audio_API">API Web Audio</a>.</span></span></p>
+ Tout ceci est possible en utilisant l'élément standard {{HTMLElement ("audio")}} associé à l'API  {{domxref("HTMLMediaElement")}} , mais il devient beaucoup plus facile et flexible avec l'<a href="/fr/docs/Web/API/Web_Audio_API">API Web Audio</a>.</p>
 
 <h2 id="API_Web_Audio_pour_les_jeux">API Web Audio pour les jeux</h2>
 
-<p><span id="result_box" lang="fr"><span>Maintenant qu'il est supporté dans tous les navigateurs modernes à l'exception d'Opera Mini et d'Internet Explorer (<a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/webaudioapi/">bien que Microsoft travaille maintenant dessus</a>), une approche acceptable pour de nombreuses situations est d'utiliser l'<a href="https://developer.mozilla.org/fr/docs/Web/API/Web_Audio_API">API Web Audio</a></span></span><span lang="fr"><span> (voir la page </span></span><a href="http://caniuse.com/#search=web%20audio%20api">Puis-je utiliser l'API Web Audio ?</a> <span lang="fr"><span>pour plus d'informations</span> <span>sur la compatibilité du navigateur).</span> <span>L'API Web Audio est une API JavaScript audio avancée, idéale pour l'audio du jeu.</span> <span>Les développeurs peuvent générer de l'audio et manipuler des échantillons audio tout en positionnant le son dans l'espace de jeu 3D.</span></span></p>
+<p>Maintenant qu'il est supporté dans tous les navigateurs modernes à l'exception d'Opera Mini et d'Internet Explorer (<a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/status/webaudioapi/">bien que Microsoft travaille maintenant dessus</a>), une approche acceptable pour de nombreuses situations est d'utiliser l'<a href="/fr/docs/Web/API/Web_Audio_API">API Web Audio</a> (voir la page <a href="http://caniuse.com/#search=web%20audio%20api">Puis-je utiliser l'API Web Audio ?</a> pour plus d'informations sur la compatibilité du navigateur). L'API Web Audio est une API JavaScript audio avancée, idéale pour l'audio du jeu. Les développeurs peuvent générer de l'audio et manipuler des échantillons audio tout en positionnant le son dans l'espace de jeu 3D.</p>
 
-<p><span id="result_box" lang="fr"><span>Une stratégie inter-navigateurs envisageable serait de fournir un son basique à l'aide de l'élément standard {{HTMLElement ("audio")}} et, là où cela est pris en charge, d'améliorer l'expérience en utilisant l'API Web Audio.</span></span></p>
+<p>Une stratégie inter-navigateurs envisageable serait de fournir un son basique à l'aide de l'élément standard {{HTMLElement ("audio")}} et, là où cela est pris en charge, d'améliorer l'expérience en utilisant l'API Web Audio.</p>
 
 <div class="note">
-<p><strong>Note</strong> : <span id="result_box" lang="fr"><span>De manière significative, iOS Safari prend désormais en charge l'API Web Audio, ce qui signifie qu'il est désormais possible d'écrire des jeux Web avec de l'audio de qualité native pour iOS.</span></span></p>
+<p><strong>Note :</strong> De manière significative, iOS Safari prend désormais en charge l'API Web Audio, ce qui signifie qu'il est désormais possible d'écrire des jeux Web avec de l'audio de qualité native pour iOS.</p>
 </div>
 
-<p><span id="result_box" lang="fr"><span>Comme l'API Web Audio permet un timing et un contrôle précis de la lecture audio, nous pouvons l'utiliser pour jouer des échantillons à des moments spécifiques, ce qui est un aspect immersif crucial du jeu.</span> <span>Vous voulez que ces explosions soient<strong> accompagnées</strong> par un boom tonitruant, pas <strong>l'un après les autres</strong>, après tout.</span></span></p>
+<p>Comme l'API Web Audio permet un timing et un contrôle précis de la lecture audio, nous pouvons l'utiliser pour jouer des échantillons à des moments spécifiques, ce qui est un aspect immersif crucial du jeu. Vous voulez que ces explosions soient<strong> accompagnées</strong> par un boom tonitruant, pas <strong>l'un après les autres</strong>, après tout.</p>
 
 <h3 id="Musique_de_fond_avec_l'API_Web_Audio">Musique de fond avec l'API Web Audio</h3>
 
-<p><span id="result_box" lang="fr"><span>Bien que nous puissions utiliser l'élément {{HTMLElement ("audio")}} pour fournir une musique de fond linéaire, qui ne change pas en réaction à l'environnement du jeu, l'API Web Audio est idéale pour implémenter une expérience musicale plus dynamique.</span> <span>Vous pouvez vouloir que la musique change selon que vous essayez de créer du suspense ou d'encourager le joueur d'une manière ou d'une autre.</span> <span>La musique est une partie importante de l'expérience de jeu et, selon le type de jeu, vous voudrez peut-être investir des efforts considérables pour bien faire les choses.</span></span></p>
+<p>Bien que nous puissions utiliser l'élément {{HTMLElement ("audio")}} pour fournir une musique de fond linéaire, qui ne change pas en réaction à l'environnement du jeu, l'API Web Audio est idéale pour implémenter une expérience musicale plus dynamique. Vous pouvez vouloir que la musique change selon que vous essayez de créer du suspense ou d'encourager le joueur d'une manière ou d'une autre. La musique est une partie importante de l'expérience de jeu et, selon le type de jeu, vous voudrez peut-être investir des efforts considérables pour bien faire les choses.</p>
 
-<p><span id="result_box" lang="fr"><span>Une façon de rendre votre musique plus dynamique est de la diviser en boucles ou en pistes de composant.</span> <span>C'est souvent la façon dont les musiciens composent la musique de toute façon, et l'API Web Audio est extrêmement efficace pour garder ces parties synchronisées.</span> <span>Une fois que vous avez les différentes pistes qui composent votre morceau, vous pouvez apporter des pistes ou en retirer de la façon appropriée.</span></span></p>
+<p>Une façon de rendre votre musique plus dynamique est de la diviser en boucles ou en pistes de composant. C'est souvent la façon dont les musiciens composent la musique de toute façon, et l'API Web Audio est extrêmement efficace pour garder ces parties synchronisées. Une fois que vous avez les différentes pistes qui composent votre morceau, vous pouvez apporter des pistes ou en retirer de la façon appropriée.</p>
 
-<p><span id="result_box" lang="fr"><span>Vous pouvez également appliquer des filtres ou des effets à la musique.</span> <span>Votre personnage est-il dans une grotte ?</span> <span>Augmentez l'écho.</span> <span>Peut-être que vous avez des scènes sous-marines, alors appliquez un filtre qui étouffe le son.</span></span></p>
+<p>Vous pouvez également appliquer des filtres ou des effets à la musique. Votre personnage est-il dans une grotte ? Augmentez l'écho. Peut-être que vous avez des scènes sous-marines, alors appliquez un filtre qui étouffe le son.</p>
 
-<p><span id="result_box" lang="fr"><span>Regardons quelques techniques de l'API Web Audio pour ajuster dynamiquement la musique à partir de ses pistes de base.</span></span></p>
+<p>Regardons quelques techniques de l'API Web Audio pour ajuster dynamiquement la musique à partir de ses pistes de base.</p>
 
-<h3 id="Chargement_des_pistes"><span class="short_text" id="result_box" lang="fr"><span>Chargement des pistes</span></span></h3>
+<h3 id="Chargement_des_pistes">Chargement des pistes</h3>
 
-<p><span id="result_box" lang="fr"><span>Avec l'API Web Audio, vous pouvez charger individuellement des pistes et des boucles séparées en utilisant </span></span> <a href="https://developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a>, <span lang="fr"><span>ce qui signifie que vous pouvez les charger de manière synchrone ou en parallèle.</span> <span>Le chargement synchrone peut signifier que certaines parties de votre musique sont prêtes plus tôt et vous pouvez commencer à les jouer pendant que d'autres se chargent.</span></span></p>
+<p>Avec l'API Web Audio, vous pouvez charger individuellement des pistes et des boucles séparées en utilisant  <a href="/fr/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a>, ce qui signifie que vous pouvez les charger de manière synchrone ou en parallèle. Le chargement synchrone peut signifier que certaines parties de votre musique sont prêtes plus tôt et vous pouvez commencer à les jouer pendant que d'autres se chargent.</p>
 
-<p><span id="result_box" lang="fr"><span>De toute façon, vous pouvez vouloir synchroniser des pistes ou des boucles.</span> <span>L'API Web Audio contient la notion d'horloge interne qui commence à cocher le moment où vous créez un contexte audio.</span> <span>Vous devez prendre en compte le temps entre la création d'un contexte audio et le moment où la première piste audio commence à jouer.</span> <span>L'enregistrement de ce décalage et l'interrogation de l'heure actuelle de la piste de lecture vous donnent suffisamment d'informations pour synchroniser des morceaux audio distincts.</span></span></p>
+<p>De toute façon, vous pouvez vouloir synchroniser des pistes ou des boucles. L'API Web Audio contient la notion d'horloge interne qui commence à cocher le moment où vous créez un contexte audio. Vous devez prendre en compte le temps entre la création d'un contexte audio et le moment où la première piste audio commence à jouer. L'enregistrement de ce décalage et l'interrogation de l'heure actuelle de la piste de lecture vous donnent suffisamment d'informations pour synchroniser des morceaux audio distincts.</p>
 
-<p><span id="result_box" lang="fr"><span>Pour voir cela en action, mettons en place des pistes distinctes :</span></span></p>
+<p>Pour voir cela en action, mettons en place des pistes distinctes :</p>
 
-<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token">ul</span><span class="punctuation token">&gt;</span></span>
-  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>li</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>a</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>track<span class="punctuation token">"</span></span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://jPlayer.org/audio/mp3/gbreggae-leadguitar.mp3<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Lead Guitar<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>a</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>li</span><span class="punctuation token">&gt;</span></span>
-  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>li</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>a</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>track<span class="punctuation token">"</span></span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://jPlayer.org/audio/mp3/gbreggae-drums.mp3<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Drums<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>a</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>li</span><span class="punctuation token">&gt;</span></span>
-  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>li</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>a</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>track<span class="punctuation token">"</span></span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://jPlayer.org/audio/mp3/gbreggae-bassguitar.mp3<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Bass Guitar<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>a</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>li</span><span class="punctuation token">&gt;</span></span>
-  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>li</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>a</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>track<span class="punctuation token">"</span></span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://jPlayer.org/audio/mp3/gbreggae-horns.mp3<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Horns<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>a</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>li</span><span class="punctuation token">&gt;</span></span>
-  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>li</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>a</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>track<span class="punctuation token">"</span></span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://jPlayer.org/audio/mp3/gbreggae-clav.mp3<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Clavi<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>a</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>li</span><span class="punctuation token">&gt;</span></span>
-<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>ul</span><span class="punctuation token">&gt;</span></span></code></pre>
+<pre class="brush: html">ul&gt;
+  &lt;li&gt;&lt;a class="track" href="http://jPlayer.org/audio/mp3/gbreggae-leadguitar.mp3"&gt;Lead Guitar&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a class="track" href="http://jPlayer.org/audio/mp3/gbreggae-drums.mp3"&gt;Drums&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a class="track" href="http://jPlayer.org/audio/mp3/gbreggae-bassguitar.mp3"&gt;Bass Guitar&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a class="track" href="http://jPlayer.org/audio/mp3/gbreggae-horns.mp3"&gt;Horns&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a class="track" href="http://jPlayer.org/audio/mp3/gbreggae-clav.mp3"&gt;Clavi&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;</pre>
 
-<p><span id="result_box" lang="fr"><span>Toutes ces pistes ont le même tempo et sont conçues pour être synchronisées les unes avec les autres.</span></span></p>
+<p>Toutes ces pistes ont le même tempo et sont conçues pour être synchronisées les unes avec les autres.</p>
 
-<pre class="brush: js line-numbers  language-js"><code class="language-js">window<span class="punctuation token">.</span>AudioContext <span class="operator token">=</span> window<span class="punctuation token">.</span>AudioContext <span class="operator token">||</span> window<span class="punctuation token">.</span>webkitAudioContext<span class="punctuation token">;</span>
+<pre class="brush: js">window.AudioContext = window.AudioContext || window.webkitAudioContext;
 
-<span class="keyword token">var</span> offset <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span>
-<span class="keyword token">var</span> context <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">AudioContext</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+var offset = 0;
+var context = new AudioContext();
 
-<span class="keyword token">function</span> <span class="function token">playTrack</span><span class="punctuation token">(</span>url<span class="punctuation token">)</span> <span class="punctuation token">{</span>
-  <span class="keyword token">var</span> request <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">XMLHttpRequest</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-  request<span class="punctuation token">.</span><span class="function token">open</span><span class="punctuation token">(</span><span class="string token">'GET'</span><span class="punctuation token">,</span> url<span class="punctuation token">,</span> <span class="keyword token">true</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-  request<span class="punctuation token">.</span>responseType <span class="operator token">=</span> <span class="string token">'arraybuffer'</span><span class="punctuation token">;</span>
+function playTrack(url) {
+  var request = new XMLHttpRequest();
+  request.open('GET', url, true);
+  request.responseType = 'arraybuffer';
 
-  <span class="keyword token">var</span> audiobuffer<span class="punctuation token">;</span>
+  var audiobuffer;
 
-  <span class="comment token">// Decode asynchronously</span>
-  request<span class="punctuation token">.</span>onload <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+  // Decode asynchronously
+  request.onload = function() {
 
-    <span class="keyword token">if</span> <span class="punctuation token">(</span>request<span class="punctuation token">.</span>status <span class="operator token">==</span> <span class="number token">200</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
+    if (request.status == 200) {
 
-      context<span class="punctuation token">.</span><span class="function token">decodeAudioData</span><span class="punctuation token">(</span>request<span class="punctuation token">.</span>response<span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span>buffer<span class="punctuation token">)</span> <span class="punctuation token">{</span>
-        <span class="keyword token">var</span> source <span class="operator token">=</span> context<span class="punctuation token">.</span><span class="function token">createBufferSource</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-        source<span class="punctuation token">.</span>buffer <span class="operator token">=</span> buffer<span class="punctuation token">;</span>
-        source<span class="punctuation token">.</span><span class="function token">connect</span><span class="punctuation token">(</span>context<span class="punctuation token">.</span>destination<span class="punctuation token">)</span><span class="punctuation token">;</span>
-        console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'context.currentTime '</span> <span class="operator token">+</span> context<span class="punctuation token">.</span>currentTime<span class="punctuation token">)</span><span class="punctuation token">;</span>
+      context.decodeAudioData(request.response, function(buffer) {
+        var source = context.createBufferSource();
+        source.buffer = buffer;
+        source.connect(context.destination);
+        console.log('context.currentTime ' + context.currentTime);
 
-        <span class="keyword token">if</span> <span class="punctuation token">(</span>offset <span class="operator token">==</span> <span class="number token">0</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
-          source<span class="punctuation token">.</span><span class="function token">start</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-          offset <span class="operator token">=</span> context<span class="punctuation token">.</span>currentTime<span class="punctuation token">;</span>
-        <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
-          source<span class="punctuation token">.</span><span class="function token">start</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span>context<span class="punctuation token">.</span>currentTime <span class="operator token">-</span> offset<span class="punctuation token">)</span><span class="punctuation token">;</span>
-        <span class="punctuation token">}</span>
+        if (offset == 0) {
+          source.start();
+          offset = context.currentTime;
+        } else {
+          source.start(0,context.currentTime - offset);
+        }
 
-      <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="punctuation token">{</span>
-        console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'Error decoding audio data:'</span> <span class="operator token">+</span> e<span class="punctuation token">)</span><span class="punctuation token">;</span>
-      <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-    <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
-      console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span><span class="string token">'Audio didn\'t load successfully; error code:'</span> <span class="operator token">+</span> request<span class="punctuation token">.</span>statusText<span class="punctuation token">)</span><span class="punctuation token">;</span>
-    <span class="punctuation token">}</span>
-  <span class="punctuation token">}</span>
-  request<span class="punctuation token">.</span><span class="function token">send</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-<span class="punctuation token">}</span>
+      }, function(e) {
+        console.log('Error decoding audio data:' + e);
+      });
+    } else {
+      console.log('Audio didn\'t load successfully; error code:' + request.statusText);
+    }
+  }
+  request.send();
+}
 
-<span class="keyword token">var</span> tracks <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementsByClassName</span><span class="punctuation token">(</span><span class="string token">'track'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+var tracks = document.getElementsByClassName('track');
 
-<span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">,</span> len <span class="operator token">=</span> tracks<span class="punctuation token">.</span>length<span class="punctuation token">;</span> i <span class="operator token">&lt;</span> len<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
-  tracks<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span><span class="punctuation token">{</span>
+for (var i = 0, len = tracks.length; i &lt; len; i++) {
+  tracks[i].addEventListener('click', function(e){
 
-    <span class="function token">playTrack</span><span class="punctuation token">(</span><span class="keyword token">this</span><span class="punctuation token">.</span>href<span class="punctuation token">)</span><span class="punctuation token">;</span>
-    e<span class="punctuation token">.</span><span class="function token">preventDefault</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-  <span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-<span class="punctuation token">}</span></code></pre>
+    playTrack(this.href);
+    e.preventDefault();
+  });
+}</pre>
 
 <div class="note">
-<p><strong>Note</strong>: Vous pouvez essayer notre <a href="http://jsfiddle.net/c87z11jj/1/">démo multipiste API Web Audio</a> sur JSFiddle.</p>
+<p><strong>Note :</strong> Vous pouvez essayer notre <a href="http://jsfiddle.net/c87z11jj/1/">démo multipiste API Web Audio</a> sur JSFiddle.</p>
 </div>
 
-<p><span id="result_box" lang="fr"><span>Regardons maintenant le code.</span> <span>Nous créons d'abord un nouveau {{domxref ("AudioContext")}} et créons une fonction <code>(playTrack ())</code> qui charge et commence à jouer une piste.</span></span></p>
+<p>Regardons maintenant le code. Nous créons d'abord un nouveau {{domxref ("AudioContext")}} et créons une fonction <code>(playTrack ())</code> qui charge et commence à jouer une piste.</p>
 
-<p><code>start()</code> <span id="result_box" lang="fr"><span>(anciennement appelé <code>noteOn ())</code> commence à lire un élément audio.</span> <span><code>start ()</code> demande trois paramètres (facultatifs) :</span></span></p>
+<p><code>start()</code> (anciennement appelé <code>noteOn ())</code> commence à lire un élément audio. <code>start ()</code> demande trois paramètres (facultatifs) :</p>
 
 <ol>
- <li>when <em>(quand)</em> : <span class="short_text" id="result_box" lang="fr"><span>le temps absolu pour commencer la lecture</span></span> .</li>
+ <li>when <em>(quand)</em> : le temps absolu pour commencer la lecture .</li>
  <li>where (offset) <em>(où)</em> : la partie de l'audio qui doit commencer à être jouée.</li>
  <li>how long <em>(combien de temps)</em> : la durée pendant laquelle elle doit être jouée.</li>
 </ol>
 
-<p><code>stop()</code> <span id="result_box" lang="fr"><span>prend un paramètre facultatif - </span></span>when<span lang="fr"><span> - qui est le délai avant l'arrêt.</span></span><br>
+<p><code>stop()</code> prend un paramètre facultatif - when - qui est le délai avant l'arrêt.<br>
  <br>
- <span id="result_box" lang="fr"><span>Si le second paramètre de <code>start ()</code></span></span> — <span lang="fr"><span> </span></span> the offset (<span lang="fr"><span><em>le décalage</em>) </span></span> — <span lang="fr"><span> est nul, nous commençons à jouer dès le début l'audio donné ; ce que nous faisons en premier.</span> <span>Nous stockons ensuite le {{domxref ("AudioContext.currentTime")}} </span></span> — <span lang="fr"><span> le décalage de la première lecture de la pièce, soustrayons celle des temps actuels pour calculer l'heure réelle, et utilisons cela pour synchroniser nos pistes.</span></span><br>
+ Si le second paramètre de <code>start ()</code> —   the offset (<em>le décalage</em>)  —  est nul, nous commençons à jouer dès le début l'audio donné ; ce que nous faisons en premier. Nous stockons ensuite le {{domxref ("AudioContext.currentTime")}}  —  le décalage de la première lecture de la pièce, soustrayons celle des temps actuels pour calculer l'heure réelle, et utilisons cela pour synchroniser nos pistes.<br>
  <br>
- <span id="result_box" lang="fr"><span>Dans le contexte de votre monde de jeu, vous pouvez avoir des boucles et des échantillons qui sont joués dans différentes circonstances, et il peut être utile de pouvoir les synchroniser avec d'autres pistes pour une expérience plus transparente.</span></span></p>
+ Dans le contexte de votre monde de jeu, vous pouvez avoir des boucles et des échantillons qui sont joués dans différentes circonstances, et il peut être utile de pouvoir les synchroniser avec d'autres pistes pour une expérience plus transparente.</p>
 
 <div class="note">
-<p><strong>Note </strong>: <span id="result_box" lang="fr"><span>Cet exemple n'attend pas la fin du battement avant d'introduire le morceau suivant;</span> <span>nous pourrions le faire si nous connaissions le BPM (battement par minute) des pistes.</span></span></p>
+<p><strong>Note :</strong> Cet exemple n'attend pas la fin du battement avant d'introduire le morceau suivant; nous pourrions le faire si nous connaissions le BPM (battement par minute) des pistes.</p>
 </div>
 
-<p><span id="result_box" lang="fr"><span>Vous pouvez trouver que l'introduction d'une nouvelle piste sonne plus naturelle si elle entre dans le battement, la mesure ou la phrase, selon l'unité que vous voulez pour votre musique de fond.</span></span></p>
+<p>Vous pouvez trouver que l'introduction d'une nouvelle piste sonne plus naturelle si elle entre dans le battement, la mesure ou la phrase, selon l'unité que vous voulez pour votre musique de fond.</p>
 
-<p><span id="result_box" lang="fr"><span>Pour ce faire, avant de jouer la piste que vous voulez synchroniser, vous devez calculer combien de temps cela va durer jusqu'au début de la prochaine unité musicale.</span></span></p>
+<p>Pour ce faire, avant de jouer la piste que vous voulez synchroniser, vous devez calculer combien de temps cela va durer jusqu'au début de la prochaine unité musicale.</p>
 
-<p><span id="result_box" lang="fr"><span>Voici un peu de code qui donne un tempo (le temps en secondes de votre battement / mesure), calcule combien de temps attendre pour jouer la partie suivante </span></span> — <span lang="fr"><span> vous alimentez la valeur initiale de la fonction <code>start ()</code> avec le premier paramètre qui</span> <span>prend le temps absolu de début de la lecture.</span> <span>Notez que le deuxième paramètre (où commencer à jouer à partir de la nouvelle piste) est relatif :</span></span></p>
+<p>Voici un peu de code qui donne un tempo (le temps en secondes de votre battement / mesure), calcule combien de temps attendre pour jouer la partie suivante  —  vous alimentez la valeur initiale de la fonction <code>start ()</code> avec le premier paramètre qui prend le temps absolu de début de la lecture. Notez que le deuxième paramètre (où commencer à jouer à partir de la nouvelle piste) est relatif :</p>
 
-<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">if</span> <span class="punctuation token">(</span>offset <span class="operator token">==</span> <span class="number token">0</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
-  source<span class="punctuation token">.</span><span class="function token">start</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-  offset <span class="operator token">=</span> context<span class="punctuation token">.</span>currentTime<span class="punctuation token">;</span>
-<span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span>
-  <span class="keyword token">var</span> relativeTime <span class="operator token">=</span> context<span class="punctuation token">.</span>currentTime <span class="operator token">-</span> offset<span class="punctuation token">;</span>
-  <span class="keyword token">var</span> beats <span class="operator token">=</span> relativeTime <span class="operator token">/</span> tempo<span class="punctuation token">;</span>
-  <span class="keyword token">var</span> remainder <span class="operator token">=</span> beats <span class="operator token">-</span> Math<span class="punctuation token">.</span><span class="function token">floor</span><span class="punctuation token">(</span>beats<span class="punctuation token">)</span><span class="punctuation token">;</span>
-  <span class="keyword token">var</span> delay <span class="operator token">=</span> tempo <span class="operator token">-</span> <span class="punctuation token">(</span>remainder<span class="operator token">*</span>tempo<span class="punctuation token">)</span><span class="punctuation token">;</span>
-  source<span class="punctuation token">.</span><span class="function token">start</span><span class="punctuation token">(</span>context<span class="punctuation token">.</span>currentTime<span class="operator token">+</span>delay<span class="punctuation token">,</span> relativeTime<span class="operator token">+</span>delay<span class="punctuation token">)</span><span class="punctuation token">;</span>
-<span class="punctuation token">}</span></code></pre>
+<pre class="brush: js">if (offset == 0) {
+  source.start();
+  offset = context.currentTime;
+} else {
+  var relativeTime = context.currentTime - offset;
+  var beats = relativeTime / tempo;
+  var remainder = beats - Math.floor(beats);
+  var delay = tempo - (remainder*tempo);
+  source.start(context.currentTime+delay, relativeTime+delay);
+}</pre>
 
 <div class="note">
-<p><strong>Note</strong>: Ici, vous pouvez <a href="http://jsfiddle.net/c87z11jj/2/">essayer notre code calculateur d'attente</a> , sur JSFiddle (synchronisé à la mesure).</p>
+<p><strong>Note :</strong> Ici, vous pouvez <a href="http://jsfiddle.net/c87z11jj/2/">essayer notre code calculateur d'attente</a> , sur JSFiddle (synchronisé à la mesure).</p>
 </div>
 
 <div class="note">
-<p><strong>Note</strong>: Si le premier paramètre est 0 ou inférieur au contexte <code>currentTime</code>, la musique commence immédiatement.</p>
+<p><strong>Note :</strong> Si le premier paramètre est 0 ou inférieur au contexte <code>currentTime</code>, la musique commence immédiatement.</p>
 </div>
 
 <h3 id="Audio_positionnel">Audio positionnel</h3>
 
-<p><span id="result_box" lang="fr"><span>L'audio positionnel peut être une technique importante pour faire de l'audio un élément clé d'une expérience de jeu immersive.</span> <span>L'API Web Audio permet non seulement de positionner un certain nombre de sources audio dans un espace tridimensionnel, mais également d'appliquer des filtres qui rendent cet audio plus réaliste.</span></span></p>
+<p>L'audio positionnel peut être une technique importante pour faire de l'audio un élément clé d'une expérience de jeu immersive. L'API Web Audio permet non seulement de positionner un certain nombre de sources audio dans un espace tridimensionnel, mais également d'appliquer des filtres qui rendent cet audio plus réaliste.</p>
 
-<p><span id="result_box" lang="fr"><span>En bref, en utilisant les capacités positionnelles de l'API Web Audio, nous pouvons relier d'autres informations sur le monde du jeu pour le joueur.</span></span></p>
+<p>En bref, en utilisant les capacités positionnelles de l'API Web Audio, nous pouvons relier d'autres informations sur le monde du jeu pour le joueur.</p>
 
 <p>Nous pouvons relier :</p>
 
@@ -367,17 +365,17 @@ myAudio<span class="punctuation token">.</span><span class="function token">addE
  <li>l'environnement (caverneux, sous-marin, etc.)</li>
 </ul>
 
-<p><span id="result_box" lang="fr"><span>Ceci est particulièrement utile dans un environnement tridimensionnel rendu en utilisant</span></span> <a href="https://developer.mozilla.org/fr/docs/Web/API/WebGL_API">WebGL</a>, <span id="result_box" lang="fr"><span>avec lequel l'API Web Audio permet d'associer l'audio aux objets et aux points de vue</span></span> .</p>
+<p>Ceci est particulièrement utile dans un environnement tridimensionnel rendu en utilisant <a href="/fr/docs/Web/API/WebGL_API">WebGL</a>, avec lequel l'API Web Audio permet d'associer l'audio aux objets et aux points de vue .</p>
 
 <div class="note">
-<p><strong>Note</strong> : Voir <a href="https://developer.mozilla.org/fr/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics">Web Audio API Spatialization Basics</a> <em>(Bases de la spacialisation de l'API Web Audio)</em> pour plus de détails.</p>
+<p><strong>Note :</strong> Voir <a href="/fr/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics">Web Audio API Spatialization Basics</a> <em>(Bases de la spacialisation de l'API Web Audio)</em> pour plus de détails.</p>
 </div>
 
 <h2 id="See_Also">See Also</h2>
 
 <ul>
- <li><a href="https://developer.mozilla.org/fr/docs/Web/API/Web_Audio_API">Web Audio API sur MDN</a></li>
- <li><a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/audio"><code>&lt;audio&gt;</code> sur MDN</a></li>
+ <li><a href="/fr/docs/Web/API/Web_Audio_API">Web Audio API sur MDN</a></li>
+ <li><a href="/fr/docs/Web/HTML/Element/audio"><code>&lt;audio&gt;</code> sur MDN</a></li>
  <li><a href="http://www.html5rocks.com/en/tutorials/webaudio/games/">Developing Game Audio with the Web Audio API (HTML5Rocks) (en)</a></li>
  <li><a href="http://www.html5rocks.com/en/tutorials/webaudio/positional_audio/">Mixing Positional Audio and WebGL (HTML5Rocks) (en)</a></li>
  <li><a href="https://hacks.mozilla.org/2013/10/songs-of-diridum-pushing-the-web-audio-api-to-its-limits/">Songs of Diridum: Pushing the Web Audio API to Its Limits (en)</a></li>
diff --git a/files/fr/games/techniques/index.html b/files/fr/games/techniques/index.html
index 0b0471d2e7..12534a0449 100644
--- a/files/fr/games/techniques/index.html
+++ b/files/fr/games/techniques/index.html
@@ -9,25 +9,23 @@ translation_of: Games/Techniques
 ---
 <div>{{GamesSidebar}}</div>
 
-<p>  {{IncludeSubnav("/fr/docs/Jeux")}}</p>
+<p>{{IncludeSubnav("/fr/docs/Jeux")}}</p>
 
-<div class="summary">
 <p>Cette page liste un ensemble de techniques utiles à toute personne qui voudrait développer un jeu vidéo à l'aide des technologies du web.</p>
-</div>
 
 <dl>
- <dt><a href="https://developer.mozilla.org/fr/docs/Games/Techniques/Async_scripts" title="/en-US/docs/Games/Techniques/Async_scripts">Utiliser des scripts asynchrones pour asm.js</a></dt>
+ <dt><a href="/fr/docs/Games/Techniques/Async_scripts" title="/fr/docs/Games/Techniques/Async_scripts">Utiliser des scripts asynchrones pour asm.js</a></dt>
  <dd>Principalement pour la création de jeux de moyenne ou de grande taille, les scripts asynchrones sont une technique essentielle dont il faut tirer avantage, ainsi le JavaScript de votre jeux pourra être compilé hors du thread principal et mis en cache pour la future exécution du jeux, résultant en une amélioration significative des performances pour vos utilisateurs. Cet article vous explique comment.</dd>
- <dt><a href="https://developer.mozilla.org/fr/Apps/Fundamentals/Performance/Optimizing_startup_performance" title="/en-US/docs/Apps/Developing/Optimizing_startup_performance">Optimiser les performances au démarrage</a></dt>
+ <dt><a href="/fr/Apps/Fundamentals/Performance/Optimizing_startup_performance" title="/fr/docs/Apps/Developing/Optimizing_startup_performance">Optimiser les performances au démarrage</a></dt>
  <dd>Comment vous assurez que votre jeu se lancera rapidement, en douceur et sans avoir l’air de bloquer le navigateur ou le périphérique de l’utilisateur.</dd>
- <dt><a href="https://developer.mozilla.org/fr/docs/Games/Techniques/WebRTC_data_channels" title="/en-US/docs/Games/WebRTC_data_channels">Utiliser les canaux de données pair-à-pair WebRTC</a></dt>
+ <dt><a href="/fr/docs/Games/Techniques/WebRTC_data_channels" title="/fr/docs/Games/WebRTC_data_channels">Utiliser les canaux de données pair-à-pair WebRTC</a></dt>
  <dd>En plus de prendre en charge les communications audio et vidéo, WebRTC permet de mettre en place des canaux de données pair-à-pair pour échanger activement des données texte ou binaires entre deux joueurs. Cet article explique ce que cela vous apporte et montre comment utiliser les bibliothèques qui rendent cela facile.</dd>
- <dt><a href="https://developer.mozilla.org/fr/docs/Games/Techniques/Efficient_animation_for_web_games" title="/en-US/docs/Games/Techniques/Efficient_animation_for_web_games">Animations efficaces pour les jeux web</a></dt>
+ <dt><a href="/fr/docs/Games/Techniques/Efficient_animation_for_web_games" title="/fr/docs/Games/Techniques/Efficient_animation_for_web_games">Animations efficaces pour les jeux web</a></dt>
  <dd>Cet article couvre les techniques et les conseils pour créer des animations efficaces pour les jeux web, avec une tendance vers la prise en charge des appareils bas de gamme comme des téléphones mobiles. Nous aborderons les transitions CSS et les animations CSS, et les boucles JavaScript utilisant {{ domxref("window.requestAnimationFrame") }}.</dd>
- <dt><a href="https://developer.mozilla.org/fr/docs/Games/Techniques/Audio_for_Web_Games">Audio pour les jeux web</a></dt>
- <dd><span id="result_box" lang="fr"><span>L'audio est une partie importante de tout jeu - il ajoute des commentaires et de l'atmosphère.</span> <span>L'audio basé sur le Web arrive à maturité rapidement, mais il y a encore beaucoup de différences de navigateurs à négocier.</span> <span>Cet article fournit un guide détaillé sur la mise en œuvre de l'audio pour les jeux Web, en examinant ce qui fonctionne actuellement sur un éventail aussi large que possible de platesformes.</span></span></dd>
- <dt><a href="https://developer.mozilla.org/fr/docs/Games/Techniques/2D_collision_detection" title="/en-US/docs/Games/Techniques/2D_collision_detection">Détection de collisions en 2D</a></dt>
+ <dt><a href="/fr/docs/Games/Techniques/Audio_for_Web_Games">Audio pour les jeux web</a></dt>
+ <dd>L'audio est une partie importante de tout jeu - il ajoute des commentaires et de l'atmosphère. L'audio basé sur le Web arrive à maturité rapidement, mais il y a encore beaucoup de différences de navigateurs à négocier. Cet article fournit un guide détaillé sur la mise en œuvre de l'audio pour les jeux Web, en examinant ce qui fonctionne actuellement sur un éventail aussi large que possible de platesformes.</dd>
+ <dt><a href="/fr/docs/Games/Techniques/2D_collision_detection" title="/fr/docs/Games/Techniques/2D_collision_detection">Détection de collisions en 2D</a></dt>
  <dd>Une introduction aux techniques de détection de collisions pour les jeux en deux dimensions.</dd>
- <dt><a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/Tilemaps">Carrelage </a><a href="https://developer.mozilla.org/fr/docs/Games/Techniques/Tilemaps"> </a></dt>
- <dd><span id="result_box" lang="fr"><span>Les carreaux sont une technique très populaire dans les jeux 2D pour construire le monde du jeu.</span> <span>Ces articles fournissent une</span></span> introduction du carrelage (map 2D) et expliquent comment les implémenter avec l'API Canvas.</dd>
+ <dt><a href="/fr/docs/Games/Techniques/Tilemaps">Carrelage </a><a href="/fr/docs/Games/Techniques/Tilemaps"> </a></dt>
+ <dd>Les carreaux sont une technique très populaire dans les jeux 2D pour construire le monde du jeu. Ces articles fournissent une introduction du carrelage (map 2D) et expliquent comment les implémenter avec l'API Canvas.</dd>
 </dl>