From c05efa8d7ae464235cf83d7c0956e42dc6974103 Mon Sep 17 00:00:00 2001 From: julieng Date: Sat, 2 Oct 2021 17:20:14 +0200 Subject: move *.html to *.md --- .../api/baseaudiocontext/createpanner/index.html | 157 --------------------- .../web/api/baseaudiocontext/createpanner/index.md | 157 +++++++++++++++++++++ 2 files changed, 157 insertions(+), 157 deletions(-) delete mode 100644 files/fr/web/api/baseaudiocontext/createpanner/index.html create mode 100644 files/fr/web/api/baseaudiocontext/createpanner/index.md (limited to 'files/fr/web/api/baseaudiocontext/createpanner') diff --git a/files/fr/web/api/baseaudiocontext/createpanner/index.html b/files/fr/web/api/baseaudiocontext/createpanner/index.html deleted file mode 100644 index 2c11e2a02e..0000000000 --- a/files/fr/web/api/baseaudiocontext/createpanner/index.html +++ /dev/null @@ -1,157 +0,0 @@ ---- -title: BaseAudioContext.createPanner() -slug: Web/API/BaseAudioContext/createPanner -tags: - - API - - AudioContext - - BaseAudioContext - - Méthode - - Reference - - Web Audio - - Web Audio API - - createPanner -translation_of: Web/API/BaseAudioContext/createPanner ---- -

{{ APIRef("Web Audio API") }}

- -
-

La méthode createPanner() de l'interface {{ domxref("BaseAudioContext") }} est utilisée pour créer un nouveau {{domxref("PannerNode")}}, qui sert à spatialiser dans un environnement 3D un flux audio entrant.

-
- -

Le panner node est spatialisé en relation avec l'{{domxref("AudioListener") }} de l'AudioContext (défini par l'attribut {{domxref("AudioContext.listener") }}), qui représente la position et l'orientation de la personne écoutant le flux audio.

- -

Syntaxe

- -
baseAudioCtx.createPanner();
- -

Retourne

- -

Un {{domxref("PannerNode")}}.

- -

Exemple

- -

Dans l'exemple suivant, vous pouvez voir comment la méthode createPanner(), l'{{domxref("AudioListener")}} et le {{domxref("PannerNode")}} peuvent être utilisés pour contrôler la spatialisation d'un flux audio. Généralement, vous définirez la position dans un espace 3D que votre écouteur et votre panner (source) occupaient initialement, puis ajuster la position de l'un ou des deux au fur et à mesure de l'utilisation. Vous pourriez par exemple vouloir déplacer un personnage dans un monde de jeu vidéo, et vouloir que le rendu audio change de manière réaliste tandis que le personnage s'approche ou s'éloigne d'un diffuseur audio tel qu'une chaîne stéréo. Dans cet exemple, vous pouvez voir ceci contrôlé par les fonctions moveRight(), moveLeft(), etc., qui définissent de nouvelles valeurs pour la position du panner via la fonction PositionPanner().

- -

Pour voir une implantation complète, visitez notre exemple de panner-node (lisez le code source aussi !) – cette démonstration vous transporte dans un environnement 2.5D appelé "Pièce de métal", où vous pouvez jouer un morceau sur une boom box et vous déplacer autour de celle-ci pour entendre comment le son change !

- -

Notez la manière dont nous avons utilisé la détection de fonctionnalité pour soit donner au navigateur les nouvelles valeurs des propriétés (comme {{domxref("AudioListener.forwardX")}}) pour définir la position, etc. s'il le permet, ou d'anciennes méthodes (comme {{domxref("AudioListener.setOrientation()")}}) s'il les permet aussi mais non les nouvelles propriétés.

- -
// set up listener and panner position information
-var WIDTH = window.innerWidth;
-var HEIGHT = window.innerHeight;
-
-var xPos = Math.floor(WIDTH/2);
-var yPos = Math.floor(HEIGHT/2);
-var zPos = 295;
-
-// define other variables
-
-var AudioContext = window.AudioContext || window.webkitAudioContext;
-var audioCtx = new AudioContext();
-
-var panner = audioCtx.createPanner();
-panner.panningModel = 'HRTF';
-panner.distanceModel = 'inverse';
-panner.refDistance = 1;
-panner.maxDistance = 10000;
-panner.rolloffFactor = 1;
-panner.coneInnerAngle = 360;
-panner.coneOuterAngle = 0;
-panner.coneOuterGain = 0;
-
-if(panner.orientationX) {
-  panner.orientationX.setValueAtTime(1, audioCtx.currentTime);
-  panner.orientationY.setValueAtTime(0, audioCtx.currentTime);
-  panner.orientationZ.setValueAtTime(0, audioCtx.currentTime);
-} else {
-  panner.setOrientation(1,0,0);
-}
-
-var listener = audioCtx.listener;
-
-if(listener.forwardX) {
-  listener.forwardX.setValueAtTime(0, audioCtx.currentTime);
-  listener.forwardY.setValueAtTime(0, audioCtx.currentTime);
-  listener.forwardZ.setValueAtTime(-1, audioCtx.currentTime);
-  listener.upX.setValueAtTime(0, audioCtx.currentTime);
-  listener.upY.setValueAtTime(1, audioCtx.currentTime);
-  listener.upZ.setValueAtTime(0, audioCtx.currentTime);
-} else {
-  listener.setOrientation(0,0,-1,0,1,0);
-}
-
-var source;
-
-var play = document.querySelector('.play');
-var stop = document.querySelector('.stop');
-
-var boomBox = document.querySelector('.boom-box');
-
-var listenerData = document.querySelector('.listener-data');
-var pannerData = document.querySelector('.panner-data');
-
-leftBound = (-xPos) + 50;
-rightBound = xPos - 50;
-
-xIterator = WIDTH/150;
-
-// listener will always be in the same place for this demo
-
-if(listener.positionX) {
-  listener.positionX.setValueAtTime(xPos, audioCtx.currentTime);
-  listener.positionY.setValueAtTime(yPos, audioCtx.currentTime);
-  listener.positionZ.setValueAtTime(300, audioCtx.currentTime);
-} else {
-  listener.setPosition(xPos,yPos,300);
-}
-
-listenerData.innerHTML = 'Listener data: X ' + xPos + ' Y ' + yPos + ' Z ' + 300;
-
-// panner will move as the boombox graphic moves around on the screen
-function positionPanner() {
-  if(panner.positionX) {
-    panner.positionX.setValueAtTime(xPos, audioCtx.currentTime);
-    panner.positionY.setValueAtTime(yPos, audioCtx.currentTime);
-    panner.positionZ.setValueAtTime(zPos, audioCtx.currentTime);
-  } else {
-    panner.setPosition(xPos,yPos,zPos);
-  }
-  pannerData.innerHTML = 'Panner data: X ' + xPos + ' Y ' + yPos + ' Z ' + zPos;
-}
- -
-

Note : In terms of working out what position values to apply to the listener and panner, to make the sound appropriate to what the visuals are doing on screen, there is quite a bit of math involved, but you will soon get used to it with a bit of experimentation.

-
- -

Spécifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Web Audio API', '#dom-baseaudiocontext-createpanner', 'createPanner()')}}{{Spec2('Web Audio API')}}
- -

Compatibilité des navigateurs

- -
-
- - -

{{Compat("api.BaseAudioContext.createPanner")}}

-
-
- -

Voir aussi

- - diff --git a/files/fr/web/api/baseaudiocontext/createpanner/index.md b/files/fr/web/api/baseaudiocontext/createpanner/index.md new file mode 100644 index 0000000000..2c11e2a02e --- /dev/null +++ b/files/fr/web/api/baseaudiocontext/createpanner/index.md @@ -0,0 +1,157 @@ +--- +title: BaseAudioContext.createPanner() +slug: Web/API/BaseAudioContext/createPanner +tags: + - API + - AudioContext + - BaseAudioContext + - Méthode + - Reference + - Web Audio + - Web Audio API + - createPanner +translation_of: Web/API/BaseAudioContext/createPanner +--- +

{{ APIRef("Web Audio API") }}

+ +
+

La méthode createPanner() de l'interface {{ domxref("BaseAudioContext") }} est utilisée pour créer un nouveau {{domxref("PannerNode")}}, qui sert à spatialiser dans un environnement 3D un flux audio entrant.

+
+ +

Le panner node est spatialisé en relation avec l'{{domxref("AudioListener") }} de l'AudioContext (défini par l'attribut {{domxref("AudioContext.listener") }}), qui représente la position et l'orientation de la personne écoutant le flux audio.

+ +

Syntaxe

+ +
baseAudioCtx.createPanner();
+ +

Retourne

+ +

Un {{domxref("PannerNode")}}.

+ +

Exemple

+ +

Dans l'exemple suivant, vous pouvez voir comment la méthode createPanner(), l'{{domxref("AudioListener")}} et le {{domxref("PannerNode")}} peuvent être utilisés pour contrôler la spatialisation d'un flux audio. Généralement, vous définirez la position dans un espace 3D que votre écouteur et votre panner (source) occupaient initialement, puis ajuster la position de l'un ou des deux au fur et à mesure de l'utilisation. Vous pourriez par exemple vouloir déplacer un personnage dans un monde de jeu vidéo, et vouloir que le rendu audio change de manière réaliste tandis que le personnage s'approche ou s'éloigne d'un diffuseur audio tel qu'une chaîne stéréo. Dans cet exemple, vous pouvez voir ceci contrôlé par les fonctions moveRight(), moveLeft(), etc., qui définissent de nouvelles valeurs pour la position du panner via la fonction PositionPanner().

+ +

Pour voir une implantation complète, visitez notre exemple de panner-node (lisez le code source aussi !) – cette démonstration vous transporte dans un environnement 2.5D appelé "Pièce de métal", où vous pouvez jouer un morceau sur une boom box et vous déplacer autour de celle-ci pour entendre comment le son change !

+ +

Notez la manière dont nous avons utilisé la détection de fonctionnalité pour soit donner au navigateur les nouvelles valeurs des propriétés (comme {{domxref("AudioListener.forwardX")}}) pour définir la position, etc. s'il le permet, ou d'anciennes méthodes (comme {{domxref("AudioListener.setOrientation()")}}) s'il les permet aussi mais non les nouvelles propriétés.

+ +
// set up listener and panner position information
+var WIDTH = window.innerWidth;
+var HEIGHT = window.innerHeight;
+
+var xPos = Math.floor(WIDTH/2);
+var yPos = Math.floor(HEIGHT/2);
+var zPos = 295;
+
+// define other variables
+
+var AudioContext = window.AudioContext || window.webkitAudioContext;
+var audioCtx = new AudioContext();
+
+var panner = audioCtx.createPanner();
+panner.panningModel = 'HRTF';
+panner.distanceModel = 'inverse';
+panner.refDistance = 1;
+panner.maxDistance = 10000;
+panner.rolloffFactor = 1;
+panner.coneInnerAngle = 360;
+panner.coneOuterAngle = 0;
+panner.coneOuterGain = 0;
+
+if(panner.orientationX) {
+  panner.orientationX.setValueAtTime(1, audioCtx.currentTime);
+  panner.orientationY.setValueAtTime(0, audioCtx.currentTime);
+  panner.orientationZ.setValueAtTime(0, audioCtx.currentTime);
+} else {
+  panner.setOrientation(1,0,0);
+}
+
+var listener = audioCtx.listener;
+
+if(listener.forwardX) {
+  listener.forwardX.setValueAtTime(0, audioCtx.currentTime);
+  listener.forwardY.setValueAtTime(0, audioCtx.currentTime);
+  listener.forwardZ.setValueAtTime(-1, audioCtx.currentTime);
+  listener.upX.setValueAtTime(0, audioCtx.currentTime);
+  listener.upY.setValueAtTime(1, audioCtx.currentTime);
+  listener.upZ.setValueAtTime(0, audioCtx.currentTime);
+} else {
+  listener.setOrientation(0,0,-1,0,1,0);
+}
+
+var source;
+
+var play = document.querySelector('.play');
+var stop = document.querySelector('.stop');
+
+var boomBox = document.querySelector('.boom-box');
+
+var listenerData = document.querySelector('.listener-data');
+var pannerData = document.querySelector('.panner-data');
+
+leftBound = (-xPos) + 50;
+rightBound = xPos - 50;
+
+xIterator = WIDTH/150;
+
+// listener will always be in the same place for this demo
+
+if(listener.positionX) {
+  listener.positionX.setValueAtTime(xPos, audioCtx.currentTime);
+  listener.positionY.setValueAtTime(yPos, audioCtx.currentTime);
+  listener.positionZ.setValueAtTime(300, audioCtx.currentTime);
+} else {
+  listener.setPosition(xPos,yPos,300);
+}
+
+listenerData.innerHTML = 'Listener data: X ' + xPos + ' Y ' + yPos + ' Z ' + 300;
+
+// panner will move as the boombox graphic moves around on the screen
+function positionPanner() {
+  if(panner.positionX) {
+    panner.positionX.setValueAtTime(xPos, audioCtx.currentTime);
+    panner.positionY.setValueAtTime(yPos, audioCtx.currentTime);
+    panner.positionZ.setValueAtTime(zPos, audioCtx.currentTime);
+  } else {
+    panner.setPosition(xPos,yPos,zPos);
+  }
+  pannerData.innerHTML = 'Panner data: X ' + xPos + ' Y ' + yPos + ' Z ' + zPos;
+}
+ +
+

Note : In terms of working out what position values to apply to the listener and panner, to make the sound appropriate to what the visuals are doing on screen, there is quite a bit of math involved, but you will soon get used to it with a bit of experimentation.

+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#dom-baseaudiocontext-createpanner', 'createPanner()')}}{{Spec2('Web Audio API')}}
+ +

Compatibilité des navigateurs

+ +
+
+ + +

{{Compat("api.BaseAudioContext.createPanner")}}

+
+
+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf