diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/fr/web/api/baseaudiocontext | |
parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip |
initial commit
Diffstat (limited to 'files/fr/web/api/baseaudiocontext')
6 files changed, 910 insertions, 0 deletions
diff --git a/files/fr/web/api/baseaudiocontext/createbiquadfilter/index.html b/files/fr/web/api/baseaudiocontext/createbiquadfilter/index.html new file mode 100644 index 0000000000..d7af5e1521 --- /dev/null +++ b/files/fr/web/api/baseaudiocontext/createbiquadfilter/index.html @@ -0,0 +1,86 @@ +--- +title: BaseAudioContext.createBiquadFilter() +slug: Web/API/BaseAudioContext/createBiquadFilter +tags: + - API + - BaseAudioContext + - Méthode + - Reference + - Web Audio + - Web Audio API + - createBiquadFilter +translation_of: Web/API/BaseAudioContext/createBiquadFilter +--- +<p>{{ APIRef("Web Audio API") }}</p> + +<div> +<p>La méthode <code>createBiquadFilter()</code> de l'interface {{ domxref("BaseAudioContext") }} crée un {{ domxref("BiquadFilterNode") }}, qui représente un filtre de second ordre configurable comme plusieurs types de filtres communs différents.</p> +</div> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">baseAudioContext.createBiquadFilter();</pre> + +<h3 id="Description" name="Description">Retourne</h3> + +<p>un {{domxref("BiquadFilterNode")}}.</p> + +<h2 id="Example" name="Example">Exemple</h2> + +<p>L'exemple suivant montre une utilisation basique d'un AudioContext pour créer un nœud de filtre Biquad. Pour un exemple fonctionnel complet, visitez notre démonstration <a href="https://mdn.github.io/voice-change-o-matic/">voice-change-o-matic</a> (et lisez de même le <a href="https://github.com/mdn/voice-change-o-matic">code source</a>).</p> + +<pre class="brush: js">var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); + +//set up the different audio nodes we will use for the app +var analyser = audioCtx.createAnalyser(); +var distortion = audioCtx.createWaveShaper(); +var gainNode = audioCtx.createGain(); +var biquadFilter = audioCtx.createBiquadFilter(); +var convolver = audioCtx.createConvolver(); + +// connect the nodes together + +source = audioCtx.createMediaStreamSource(stream); +source.connect(analyser); +analyser.connect(distortion); +distortion.connect(biquadFilter); +biquadFilter.connect(convolver); +convolver.connect(gainNode); +gainNode.connect(audioCtx.destination); + +// Manipulate the Biquad filter + +biquadFilter.type = "lowshelf"; +biquadFilter.frequency.setValueAtTime(1000, audioCtx.currentTime); +biquadFilter.gain.setValueAtTime(25, audioCtx.currentTime);</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Web Audio API', '#dom-baseaudiocontext-createbiquadfilter', 'createBiquadFilter()')}}</td> + <td>{{Spec2('Web Audio API')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div> + + +<p>{{Compat("api.BaseAudioContext.createBiquadFilter")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser l'API Web Audio</a></li> +</ul> diff --git a/files/fr/web/api/baseaudiocontext/createbuffer/index.html b/files/fr/web/api/baseaudiocontext/createbuffer/index.html new file mode 100644 index 0000000000..b10510eb94 --- /dev/null +++ b/files/fr/web/api/baseaudiocontext/createbuffer/index.html @@ -0,0 +1,175 @@ +--- +title: BaseAudioContext.createBuffer() +slug: Web/API/BaseAudioContext/createBuffer +tags: + - API + - AudioContext + - BaseAudioContext + - Method + - Reference + - Web Audio API + - createBuffer +translation_of: Web/API/BaseAudioContext/createBuffer +--- +<p>{{APIRef("API Web Audio")}}</p> + +<p>La méthode <code>createBuffer()</code> de l'interface {{domxref("BaseAudioContext")}} est utilisée pour créer un nouvel objet {{domxref("AudioBuffer")}} vide, qui peut ensuite être rempli.</p> + +<p>Pour plus de détails sur les tampons audio, consultez la page de référence {{domxref ("AudioBuffer")}}.</p> + +<div class="note"> +<p><strong>Note :</strong> <code>createBuffer()</code> permettait de prendre des données compressées et de restituer des échantillons décodés, mais cette possibilité a été supprimée de la spécification, du fait que tout le décodage était effectué dans le thread principal, donc <code>createBuffer()</code> bloquait l'exécution du reste du code. La méthode asynchrone <code>decodeAudioData()</code> fait la même chose - prend l'audio compressé, par exemple, un fichier MP3, et vous renvoie directement un {{domxref("AudioBuffer")}} que vous pouvez ensuite faire jouer via {{domxref("AudioBufferSourceNode")}}. Pour des utilisations simples comme la lecture d'un fichier MP3, <code>decodeAudioData()</code> est ce que vous devriez utiliser.</p> +</div> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">var tampon = baseAudioContext.createBuffer(<em>nbDeCanaux</em>, <em>longueur</em>, <em>frequenceDEchantillonnage</em>);</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<div class="note"> +<p><strong>Note :</strong> pour une explication en profondeur de la façon dont les tampons audio fonctionnent, ainsi que de leur signification, lire <a href="/fr/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API">Les concepts de base de la Web Audio API</a> de notre guide des concepts de base.</p> +</div> + +<dl> + <dt>nbDeCanaux</dt> + <dd>Un nombre entier représentant le nombre de canaux que ce tampon doit avoir. Les implémentations doivent prendre en charge un minimum de 1 canal et un maximum de 32 canaux.</dd> + <dt>longueur</dt> + <dd><span id="result_box" lang="fr"><span class="alt-edited">Un entier représentant la taille du tampon dans les trames d'échantillons.</span></span></dd> + <dt>frequenceDEchantillonnage</dt> + <dd>La fréquence d'échantillonnage des données audio linéaires en trames d'échantillons par seconde. Une implémentation doit supporter des fréquences d'échantillonnage comprises au minimum dans la plage 22050 et 96000.</dd> +</dl> + +<h3 id="Retourne">Retourne</h3> + +<p>Un {{domxref("AudioBuffer")}}.</p> + +<h2 id="Exemples">Exemples</h2> + +<p>Tout d'abord, deux exemples triviaux simples pour aider à expliquer comment les paramètres sont utilisés :</p> + +<pre class="brush: js">var ctxAudio = new AudioContext(); +var tampon = ctxAudio.createBuffer(2, 22050, 44100);</pre> + +<p>Si vous utilisez cet appel, vous obtiendrez un tampon stéréo (deux canaux), qui, lorsque relu avec un <code>AudioContext</code> fonctionnant à 44100Hz (très courant, la plupart des cartes son normales fonctionnent à cette fréquence), durera 0,5 seconde : 22050 trames / 44100 Hz = 0,5 seconde.</p> + +<pre class="brush: js">var ctxAudio = new AudioContext(); +var tampon = ctxAudio.createBuffer(1, 22050, 22050);</pre> + +<p>Si vous utilisez cet appel, vous obtiendrez un tampon mono (un canal), qui, lorsqu'il sera relu avec un <code>AudioContext</code> fonctionnant à 44100Hz, sera automatiquement *rééchantillonné* à 44100Hz (et produira donc 44100 trames), et durera 1,0 seconde : 44100 images / 44100Hz = 1 seconde.</p> + +<div class="note"> +<p><strong>Note :</strong> le rééchantillonnage audio est très similaire au redimensionnement d'une image : supposons que vous ayez une image 16 x 16, mais que vous vouliez qu'elle remplisse une zone 32x32: vous la redimensionnez (rééchantillonnez). Le résultat aura une qualité moindre (il pourra être flou ou bizarre, selon l'algorithme de redimensionnement), mais cela fonctionnera, et l'image redimensionnée prendra moins de place. L'audio rééchantillonné est exactement la même chose - vous économisez de l'espace, mais en pratique, vous ne pourrez pas reproduire correctement le contenu haute fréquence (les sons aigus).</p> +</div> + +<p>Examinons maintenant un exemple de <code>createBuffer()</code> plus complexe, dans lequel nous créons un tampon de deux secondes, le remplissons de bruit blanc, puis le reproduisons via {{domxref("AudioBufferSourceNode")}}. Le commentaire devrait clairement faire comprendre ce qui se passe. Vous pouvez également exécuter le code en direct ou regarder le source.</p> + +<pre class="brush: js;highlight[14]">var ctxAudio = new (window.AudioContext || window.webkitAudioContext)(); + +// Création d'un tampon stéréo vide de trois secondes à la fréquence d'échantillonnage de l'AudioContext +var monArrayBuffer = ctxAudio.createBuffer(2, ctxAudio.sampleRate * 3, ctxAudio.sampleRate); + +// Remplissage du tampon avec du bruit blanc ; +// simplement des valeurs aléatoires entre -1,0 et 1,0 +for (var canal = 0; canal < monArrayBuffer.numberOfChannels; canal++) { + // Cela nous donne le ArrayBuffer qui contient effectivement les données + var donneesCourantes = monArrayBuffer.getChannelData(canal); + for (var i = 0; i < monArrayBuffer.length; i++) { + // Math.random() est dans [0; 1,0] + // l'audio doit se trouver dans [-1,0; 1,0] + donneesCourantes[i] = Math.random() * 2 - 1; + } +} + +// Récupération d'un AudioBufferSourceNode. +// C'est l'AudioNode à utiliser quand nous voulons lire un AudioBuffer +var source = ctxAudio.createBufferSource(); +// Définir le tampon dans l'AudioBufferSourceNode +source.buffer = monArrayBuffer; +// Connecter l'AudioBufferSourceNode à la destination, +// de sorte que nous puissions entendre le son +source.connect(ctxAudio.destination); +// Démarrer la lecture de la source +source.start();</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('Web Audio API', '#dom-baseaudiocontext-createbuffer', 'createBuffer()')}}</td> + <td>{{Spec2('Web Audio API')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(25.0)}} </td> + <td>{{CompatNo}}</td> + <td>15.0 {{property_prefix("webkit")}}<br> + 22</td> + <td>6.0{{property_prefix("webkit")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>26.0</td> + <td>1.2</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>33.0</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utilisation de l'API Web Audio</a></li> +</ul> diff --git a/files/fr/web/api/baseaudiocontext/createbuffersource/index.html b/files/fr/web/api/baseaudiocontext/createbuffersource/index.html new file mode 100644 index 0000000000..4449e78563 --- /dev/null +++ b/files/fr/web/api/baseaudiocontext/createbuffersource/index.html @@ -0,0 +1,93 @@ +--- +title: BaseAudioContext.createBufferSource() +slug: Web/API/BaseAudioContext/createBufferSource +translation_of: Web/API/BaseAudioContext/createBufferSource +--- +<p>{{ APIRef("Web Audio API") }}</p> + +<p><span class="seoSummary">La méthode <code>createBufferSource()</code> de l’interface {{ domxref("BaseAudioContext") }} est utilisée pour créer un nouveau {{ domxref("AudioBufferSourceNode") }}, qui peut être employé pour jouer des données audio contenues dans un objet {{ domxref("AudioBuffer") }}.</span> Des {{ domxref("AudioBuffer") }} peuvent être créés en utilisant {{domxref("BaseAudioContext.createBuffer")}}, ou sont retournés par la méthode {{domxref("BaseAudioContext.decodeAudioData")}} quand elle a terminé de décoder une piste audio avec succès.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">var <var>source</var> = <var>baseAudioContext</var>.createBufferSource();</pre> + +<h3 id="Retourne">Retourne</h3> + +<p>Un {{domxref("AudioBufferSourceNode")}}.</p> + +<h2 id="Exemple">Exemple</h2> + +<p>Dans cet exemple, on crée un tampon de deux secondes, on le remplit avec du bruit blanc, puis on le joue via un {{ domxref("AudioBufferSourceNode") }}. Les commentaires devraient expliquer clairement ce qui se passe.</p> + +<div class="note"> +<p><strong>Note :</strong> Vous pouvez également <a href="https://mdn.github.io/webaudio-examples/audio-buffer/" lang="en-US">exécuter le code en direct</a>, ou <a href="https://github.com/mdn/webaudio-examples/blob/master/audio-buffer/index.html" lang="en-US">voir la source</a>.</p> +</div> + +<pre class="brush: js;highlight[31]">var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); +var button = document.querySelector('button'); +var pre = document.querySelector('pre'); +var myScript = document.querySelector('script'); + +pre.innerHTML = myScript.innerHTML; + +// Stéréo +var channels = 2; +// Crée un tampon stéréo vide de deux secondes au +// taux d’échantillonage de l’AudioContext +var frameCount = audioCtx.sampleRate * 2.0; + +var myArrayBuffer = audioCtx.createBuffer(2, frameCount, audioCtx.sampleRate); + +button.onclick = function() { + // Remplit le tampon avec du bruit blanc ; + // simplement des valeurs aléatoires entre -1.0 et 1.0 + for (var channel = 0; channel < channels; channel++) { + // Ceci nous donne l’ArrayBuffer qui contient les données + var nowBuffering = myArrayBuffer.getChannelData(channel); + for (var i = 0; i < frameCount; i++) { + // Math.random() est parmi [0; 1.0] + // audio doit être parmi [-1.0; 1.0] + nowBuffering[i] = Math.random() * 2 - 1; + } + } + + // Obtient un AudioBufferSourceNode. + // C’est l’AudioNode à utiliser quand nous voulons jouer un AudioBuffer + var source = audioCtx.createBufferSource(); + // renseigne l’AudioBufferSourceNode avec notre tampon + source.buffer = myArrayBuffer; + // connecte l’AudioBufferSourceNode à la + // destination afin qu’on puisse entendre le son + source.connect(audioCtx.destination); + // commence la lecture de la source + source.start(); +}</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('Web Audio API', '#dom-baseaudiocontext-createbuffersource', 'createBufferSource()')}}</td> + <td>{{Spec2('Web Audio API')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">La table de compatibilité dans cette page est générée à partir de données structurées. Si vous souhaitez contribuer aux données, veuillez consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une <em>pull request.</em></div> + +<p>{{Compat("api.BaseAudioContext.createBufferSource")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API" lang="fr">Utiliser la Web Audio API</a></li> +</ul> diff --git a/files/fr/web/api/baseaudiocontext/createpanner/index.html b/files/fr/web/api/baseaudiocontext/createpanner/index.html new file mode 100644 index 0000000000..9630c4af5f --- /dev/null +++ b/files/fr/web/api/baseaudiocontext/createpanner/index.html @@ -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 +--- +<p>{{ APIRef("Web Audio API") }}</p> + +<div> +<p>La méthode <code>createPanner()</code> 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.</p> +</div> + +<p>Le <em>panner node</em> 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.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">baseAudioCtx.createPanner();</pre> + +<h3 id="Retourne">Retourne</h3> + +<p>Un {{domxref("PannerNode")}}.</p> + +<h2 id="Exemple">Exemple</h2> + +<p>Dans l'exemple suivant, vous pouvez voir comment la méthode <code>createPanner()</code>, 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 <em>panner</em> (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 <code>moveRight()</code>, <code>moveLeft()</code>, etc., qui définissent de nouvelles valeurs pour la position du <em>panner</em> via la fonction <code>PositionPanner()</code>.</p> + +<p>Pour voir une implantation complète, visitez notre <a href="https://mdn.github.io/webaudio-examples/panner-node/">exemple de panner-node</a> (<a href="https://github.com/mdn/webaudio-examples/tree/master/panner-node">lisez le code source aussi !</a>) – 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 !</p> + +<p>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.</p> + +<pre class="brush: js">// 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; +}</pre> + +<div class="note"> +<p><strong>Note</strong>: 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.</p> +</div> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Web Audio API', '#dom-baseaudiocontext-createpanner', 'createPanner()')}}</td> + <td>{{Spec2('Web Audio API')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div> +<div> + + +<p>{{Compat("api.BaseAudioContext.createPanner")}}</p> +</div> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser l'API Web Audio</a></li> +</ul> diff --git a/files/fr/web/api/baseaudiocontext/createperiodicwave/index.html b/files/fr/web/api/baseaudiocontext/createperiodicwave/index.html new file mode 100644 index 0000000000..94622f3a32 --- /dev/null +++ b/files/fr/web/api/baseaudiocontext/createperiodicwave/index.html @@ -0,0 +1,108 @@ +--- +title: BaseAudioContext.createPeriodicWave() +slug: Web/API/BaseAudioContext/createPeriodicWave +tags: + - API + - Audio + - AudioContext + - BaseAudioContext + - Media + - Méthode + - Web Audio API + - createPeriodicWave +translation_of: Web/API/BaseAudioContext/createPeriodicWave +--- +<p>{{ APIRef("Web Audio API") }}</p> + +<div> +<p><span class="seoSummary">La méthode <code>createPeriodicWave()</code> de l'interface {{ domxref("BaseAudioContext") }} est utilisée pour créer une {{domxref("PeriodicWave")}} (onde périodique), qui sert à définir une onde sinusoïdale périodique qui peut être utilisée pour modeler la sortie d'un {{ domxref("OscillatorNode") }}.</span></p> +</div> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">var onde = <em>AudioContext</em>.createPeriodicWave(<em>réel</em>, <em>imag</em>[, <em>constraints</em>]);</pre> + +<h3 id="Retour">Retour</h3> + +<p>Un {{domxref("PeriodicWave")}}.</p> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>réel</code></dt> + <dd>Un tableau de termes cosinus (traditionnellement les termes A).</dd> + <dt><code>imag</code></dt> + <dd>Un tableau de termes sinus (traditionnellement les termes B).</dd> + <dt><code>contraintes</code> {{optional_inline}}</dt> + <dd>Un objet dictionnaire spécifiant si la normalisation doit être désactivée (si non spécifié, la normalisation est activée par défaut). Il accepte une propriété : + <ul> + <li><code>disableNormalization</code>: si réglé à <code>true</code>, la normalisation est désactivée pour l'onde périodique. Sa valeur par défaut est <code>false</code>.</li> + </ul> + </dd> +</dl> + +<div class="note"> +<p>Si normalisée, l'onde résultante aura une valeur absolue de sommet égale à 1.</p> +</div> + +<h2 id="Exemple">Exemple</h2> + +<p>L'exemple suivant illustre un usage simple de <code>createPeriodicWave()</code>, pour créer un objet {{domxref("PeriodicWave")}} contenant une simple courbe de sinus.</p> + +<pre class="brush: js">var réel = new Float32Array(2); +var imag = new Float32Array(2); +var contexteAudio = new AudioContext(); +var oscillateur = contexteAudio.createOscillator(); + +réel[0] = 0; +imag[0] = 0; +réel[1] = 1; +imag[1] = 0; + +var onde = contexteAudio.createPeriodicWave(réel, imag, {disableNormalization: true}); + +oscillateur.setPeriodicWave(wave); + +oscillateur.connect(contexteAudio.destination); + +oscillateur.start(); +oscillateur.stop(2);</pre> + +<p>Cela fonctionne car un son n'ayant qu'un unique harmonique est par définition une onde sinusoïdale.</p> + +<p>Ici, nous créons une <code>PeriodicWave</code> avec deux valeurs. La première est le décalage DC, qui est la valeur à la quelle l'ocillateur démarre. 0 est une bonne valeur de départ ici car nous voulons commencer la courbe au milieu de l'intervalle [-1.0; 1.0].</p> + +<p>La seconde valeur et les suivantes sont les composantes de sinus et de cosinus. Vous pouvez les voir comme le résultat d'une transformation de Fourier, où l'on obtient les valeurs du domaine de fréquence à partir de la valeur du domaine de temps. Ici, avec <code>createPeriodicWave()</code>, vous spécifiez les fréquences, et le navigateur calcule une transformation inverse de Fourier pour obtenir un tampon de domaine de temps pour la fréquence de l'oscillateur. Ici, nous définissons seulement un composant au volume maximal (1.0) sur l'harmonique fondamentale, ainsi on obtient une courbe sinusoïdale.</p> + +<p>Les coefficients de la transformation de Fourier doivent être données dans un ordre <em>croissant</em> (c'est-à-dire <math><semantics><mrow><mrow><mo>(</mo><mrow><mi>a</mi><mo>+</mo><mi>b</mi><mi>i</mi></mrow><mo>)</mo></mrow><msup><mi>e</mi><mi>i</mi></msup><mo>,</mo><mrow><mo>(</mo><mrow><mi>c</mi><mo>+</mo><mi>d</mi><mi>i</mi></mrow><mo>)</mo></mrow><msup><mi>e</mi><mrow><mn>2</mn><mi>i</mi></mrow></msup><mo>,</mo><mrow><mo>(</mo><mrow><mi>f</mi><mo>+</mo><mi>g</mi><mi>i</mi></mrow><mo>)</mo></mrow><msup><mi>e</mi><mrow><mn>3</mn><mi>i</mi></mrow></msup></mrow><annotation encoding="TeX">\left(a+bi\right)e^{i} , \left(c+di\right)e^{2i} , \left(f+gi\right)e^{3i} </annotation></semantics></math> etc) et peuvent être positifs ou négatifs. Une méthode simple pour obtenir manuellement de tels coefficients (bien qu'elle ne soit la meilleure) est d'utiliser une calculateur graphique.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('Web Audio API', '#dom-baseaudiocontext-createperiodicwave', 'createPeriodicWave')}}</td> + <td>{{Spec2('Web Audio API')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div> + + +<p>{{Compat("api.BaseAudioContext.createPeriodicWave")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Utiliser l'API Web Audio</a></li> +</ul> diff --git a/files/fr/web/api/baseaudiocontext/index.html b/files/fr/web/api/baseaudiocontext/index.html new file mode 100644 index 0000000000..76208b71b9 --- /dev/null +++ b/files/fr/web/api/baseaudiocontext/index.html @@ -0,0 +1,291 @@ +--- +title: BaseAudioContext +slug: Web/API/BaseAudioContext +tags: + - API + - Audio + - BaseAudioContext + - Interface + - Reference + - TopicStub + - Web Audio API +translation_of: Web/API/BaseAudioContext +--- +<div>{{APIRef("Web Audio API")}}</div> + +<p class="summary"><span class="seoSummary">L'interface <code>BaseAudioContext</code> agit comme une définition de base pour les graphiques de traitement audio en ligne et hors ligne, comme représenté par {{domxref("AudioContext")}} et {{domxref("OfflineAudioContext")}} respectivement.</span> Vous n'utiliseriez pas <code>BaseAudioContext</code> directement — vous utiliseriez ses fonctionnalités via l'une de ces deux interfaces héréditaires.</p> + +<p>Un <code>BaseAudioContext</code> peut être une cible d'événements, il implémente donc l'interface {{domxref("EventTarget")}}.</p> + +<p>{{InheritanceDiagram}}</p> + +<h2 id="Propriétés">Propriétés</h2> + +<dl> + <dt>{{domxref("BaseAudioContext.audioWorklet")}} {{experimental_inline}} {{readonlyInline}}</dt> + <dd>Renvoie l'objet {{domxref("AudioWorklet")}}, utilisé pour créer des AudioNodes personnalisés avec traitement JavaScript.</dd> + <dt>{{domxref("BaseAudioContext.currentTime")}} {{readonlyInline}}</dt> + <dd>Renvoie un double représentant une durée matérielle toujours croissante en secondes utilisée pour la planification. Il commence à <code>0</code>.</dd> + <dt>{{domxref("BaseAudioContext.destination")}} {{readonlyInline}}</dt> + <dd>Renvoie un {{domxref("AudioDestinationNode")}} représentant la destination finale de tout l'audio dans le contexte. Il peut être considéré comme le périphérique de rendu audio.</dd> + <dt>{{domxref("BaseAudioContext.listener")}} {{readonlyInline}}</dt> + <dd>Renvoie l'objet {{domxref("AudioListener")}}, utilisé pour la spatialisation 3D.</dd> + <dt>{{domxref("BaseAudioContext.sampleRate")}} {{readonlyInline}}</dt> + <dd>Renvoie un float représentant la fréquence d'échantillonnage (en échantillons par seconde) utilisée par tous les <span class="tlid-translation translation" lang="fr"><span title="">nœuds dans ce contexte.</span></span> La fréquence d'échantillonnage d'un {{domxref("AudioContext")}} ne peut pas être modifiée.</dd> + <dt>{{domxref("BaseAudioContext.state")}} {{readonlyInline}}</dt> + <dd>Renvoie l'état actuel de l'<code>AudioContext</code>.</dd> +</dl> + +<h3 id="Gestionnaires_dévénements">Gestionnaires d'événements</h3> + +<dl> + <dt>{{domxref("BaseAudioContext.onstatechange")}}</dt> + <dd>Un gestionnaire d'événements qui s'exécute lorsqu'un événement de type {{event("statechange")}} s'est déclenché. Cela se produit lorsque l'état de l'<code>AudioContext</code> change, en raison de l'appel de l'une des méthodes de changement d'état ({{domxref("AudioContext.suspend")}}, {{domxref("AudioContext.resume")}}, ou {{domxref("AudioContext.close")}}).</dd> +</dl> + +<h2 id="Méthodes">Méthodes</h2> + +<p><em>Implémente également les méthodes de l'interface </em>{{domxref("EventTarget")}}.</p> + +<dl> + <dt>{{domxref("BaseAudioContext.createBuffer()")}}</dt> + <dd>Crée un nouvel objet {{ domxref("AudioBuffer") }} vide, qui peut ensuite être rempli de données et lu via un {{ domxref("AudioBufferSourceNode") }}.</dd> + <dt>{{domxref("BaseAudioContext.createConstantSource()")}}</dt> + <dd>Crée un objet {{domxref("ConstantSourceNode")}}, qui est une source audio qui émet en continu un signal sonore monophonique (un canal) dont les échantillons ont tous la même valeur.</dd> + <dt>{{domxref("BaseAudioContext.createBufferSource()")}}</dt> + <dd>Crée un {{domxref("AudioBufferSourceNode")}}, qui peut être utilisé pour lire et manipuler des données audio contenues dans un objet {{ domxref("AudioBuffer") }}. Les {{ domxref("AudioBuffer") }} sont créés à l'aide de {{domxref("AudioContext.createBuffer")}} ou renvoyés par {{domxref("AudioContext.decodeAudioData")}} lorsqu'il décode avec succès une piste audio.</dd> + <dt>{{domxref("BaseAudioContext.createScriptProcessor()")}}</dt> + <dd>Crée un {{domxref("ScriptProcessorNode")}}, qui peut être utilisé pour le traitement audio direct via JavaScript.</dd> + <dt>{{domxref("BaseAudioContext.createStereoPanner()")}}</dt> + <dd>Crée un {{domxref("StereoPannerNode")}}, qui peut être utilisé pour appliquer un panoramique stéréo à une source audio.</dd> + <dt>{{domxref("BaseAudioContext.createAnalyser()")}}</dt> + <dd>Crée un {{domxref("AnalyserNode")}}, qui peut être utilisé pour exposer les données de temps et de fréquence audio et par exemple pour créer des visualisations de données.</dd> + <dt>{{domxref("BaseAudioContext.createBiquadFilter()")}}</dt> + <dd>Crée un {{domxref("BiquadFilterNode")}}, qui représente un filtre du second ordre configurable en plusieurs types de filtres courants: passe-haut, passe-bas, passe-bande, etc.</dd> + <dt>{{domxref("BaseAudioContext.createChannelMerger()")}}</dt> + <dd>Crée un {{domxref("ChannelMergerNode")}}, qui est utilisé pour combiner les canaux de plusieurs flux audio en un seul flux audio.</dd> + <dt>{{domxref("BaseAudioContext.createChannelSplitter()")}}</dt> + <dd>Crée un {{domxref("ChannelSplitterNode")}}, qui est utilisé pour accéder aux canaux individuels d'un flux audio et les traiter séparément.</dd> + <dt>{{domxref("BaseAudioContext.createConvolver()")}}</dt> + <dd>Crée un {{domxref("ConvolverNode")}}, qui peut être utilisé pour appliquer des effets de convolution à votre graphique audio, par exemple un effet de réverbération.</dd> + <dt>{{domxref("BaseAudioContext.createDelay()")}}</dt> + <dd>Crée un {{domxref("DelayNode")}}, qui est utilisé pour retarder le signal audio entrant d'une certaine quantité. Ce nœud est également utile pour créer des boucles de rétroaction dans un graphique d'API Web Audio.</dd> + <dt>{{domxref("BaseAudioContext.createDynamicsCompressor()")}}</dt> + <dd>Crée un {{domxref("DynamicsCompressorNode")}}, qui peut être utilisé pour appliquer une compression acoustique à un signal audio.</dd> + <dt>{{domxref("BaseAudioContext.createGain()")}}</dt> + <dd>Crée un {{domxref("GainNode")}}, qui peut être utilisé pour contrôler le volume global du graphique audio.</dd> + <dt>{{domxref("BaseAudioContext.createIIRFilter()")}}</dt> + <dd>Crée un {{domxref("IIRFilterNode")}}, qui représente un filtre du second ordre configurable en plusieurs types de filtres communs différents.</dd> + <dt>{{domxref("BaseAudioContext.createOscillator()")}}</dt> + <dd>Crée un {{domxref("OscillatorNode")}}, une source représentant une forme d'one périodique. Cela génère essentiellement un ton.</dd> + <dt>{{domxref("BaseAudioContext.createPanner()")}}</dt> + <dd>Crée un {{domxref("PannerNode")}}, qui est utilisé pour spatialiser un flux audio entrant dans l'espace 3D.</dd> + <dt>{{domxref("BaseAudioContext.createPeriodicWave()")}}</dt> + <dd>Crée un {{domxref("PeriodicWave")}}, utilisé pour définir une forme d'one périodique qui peut être utilisée pour déterminer la sortie d'un {{ domxref("OscillatorNode") }}.</dd> + <dt>{{domxref("BaseAudioContext.createWaveShaper()")}}</dt> + <dd>Crée un {{domxref("WaveShaperNode")}}, qui est utilisé pour implémenter des effets de distorsion non linéaires.</dd> + <dt>{{domxref("BaseAudioContext.decodeAudioData()")}}</dt> + <dd>Décode de manière asynchrone les données de fichiers audio contenues dans un {{domxref("ArrayBuffer")}}. Dans ce cas, le ArrayBuffer est généralement chargé à partir de l'attribut <code>response</code> d'un {{domxref("XMLHttpRequest")}} après avoir défini le <code>responseType</code> sur <code>arraybuffer</code>. Cette méthode ne foncionne que sur des fichiers complets et non sur des fragments de fichiers audio.</dd> + <dt>{{domxref("BaseAudioContext.resume()")}}</dt> + <dd>Reprend la progression du temps dans un contexte audio précédemment suspendu / mis en pause.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<p>Déclaration de context audio de base:</p> + +<pre class="brush: js notranslate">var audioCtx = new AudioContext();</pre> + +<p>Variante de nagivateur croisé:</p> + +<pre class="brush: js notranslate">var AudioContext = window.AudioContext || window.webkitAudioContext; +var audioCtx = new AudioContext(); + +var oscillatorNode = audioCtx.createOscillator(); +var gainNode = audioCtx.createGain(); +var finish = audioCtx.destination; +// etc.</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('Web Audio API', '#BaseAudioContext', 'BaseAudioContext')}}</td> + <td>{{Spec2('Web Audio API')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Support de base</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>15.0{{property_prefix("webkit")}}<br> + 22</td> + <td>6.0{{property_prefix("webkit")}}</td> + </tr> + <tr> + <td><code>baseLatency</code></td> + <td>{{CompatChrome(60)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>createConstantSource()</code></td> + <td>{{CompatChrome(56)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop(52)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera(43)}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>createStereoPanner()</code></td> + <td>{{CompatChrome(42)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(37.0)}} </td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>onstatechange</code>, <code>state</code>, <code>suspend()</code>, <code>resume()</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(40.0)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatSafari(8.0)}}</td> + </tr> + <tr> + <td>Sans préfixe</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td></td> + <td></td> + <td></td> + <td></td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Android Webview</th> + <th>Chrome pour Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Support de base</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>2.2</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>baseLatency</code></td> + <td>{{CompatChrome(60)}}</td> + <td>{{CompatChrome(60)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>createConstantSource()</code></td> + <td>{{CompatChrome(56)}}</td> + <td>{{CompatChrome(56)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile(52)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>createStereoPanner()</code></td> + <td>{{CompatChrome(42)}}</td> + <td>{{CompatChrome(42)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>onstatechange</code>, <code>state</code>, <code>suspend()</code>, <code>resume()</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Sans préfixe</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOperaMobile(43)}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul style="margin-left: 40px;"> + <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Utilisation de l'API Web Audio</a></li> + <li>{{domxref("AudioContext")}}</li> + <li>{{domxref("OfflineAudioContext")}}</li> +</ul> |