diff options
9 files changed, 306 insertions, 476 deletions
diff --git a/files/fr/web/api/analysernode/fftsize/index.md b/files/fr/web/api/analysernode/fftsize/index.md index 1c06163251..bc7057c049 100644 --- a/files/fr/web/api/analysernode/fftsize/index.md +++ b/files/fr/web/api/analysernode/fftsize/index.md @@ -28,54 +28,54 @@ Un nombre entier non signé. L'exemple suivant montre comment créer simplement un `AnalyserNode` avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lines 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). ```js -var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); -var analyseur = contexteAudio.createAnalyser(); +var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); +var analyser = audioCtx.createAnalyser(); ... -analyseur.fftSize = 2048; -var tailleMemoireTampon = analyseur.fftSize; -var tableauDonnees = new Uint8Array(tailleMemoireTampon); -analyseur.getByteTimeDomainData(tableauDonnees); - -// dessine un oscilloscope de la source audio - -function dessiner() { - - dessin = requestAnimationFrame(dessiner); - - analyseur.getBy - - contexteCanvas. - contexte - - contexteCanvas. - cont - - contexteCanvas.beginPa - - var largeurTran - v - - for(var i = 0; i < tailleMemo - - var v = - - - - - - contexteCanvas.lin - - - - - - c - contexteCanvas.stroke(); +analyser.fftSize = 2048; +var bufferLength = analyser.frequencyBinCount; +var dataArray = new Uint8Array(bufferLength); +analyser.getByteTimeDomainData(dataArray); + +// dessine un oscilloscope pour la source audio courante + +function draw() { + + drawVisual = requestAnimationFrame(draw); + + analyser.getByteTimeDomainData(dataArray); + + canvasCtx.fillStyle = 'rgb(200, 200, 200)'; + canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); + + canvasCtx.lineWidth = 2; + canvasCtx.strokeStyle = 'rgb(0, 0, 0)'; + + canvasCtx.beginPath(); + + var sliceWidth = WIDTH * 1.0 / bufferLength; + var x = 0; + + for(var i = 0; i < bufferLength; i++) { + + var v = dataArray[i] / 128.0; + var y = v * HEIGHT/2; + + if(i === 0) { + canvasCtx.moveTo(x, y); + } else { + canvasCtx.lineTo(x, y); + } + + x += sliceWidth; + } + + canvasCtx.lineTo(canvas.width, canvas.height/2); + canvasCtx.stroke(); }; - - dessiner(); + + draw(); ``` ## Spécifications diff --git a/files/fr/web/api/analysernode/getbytetimedomaindata/index.md b/files/fr/web/api/analysernode/getbytetimedomaindata/index.md index 38997fa346..9f3f326739 100644 --- a/files/fr/web/api/analysernode/getbytetimedomaindata/index.md +++ b/files/fr/web/api/analysernode/getbytetimedomaindata/index.md @@ -31,54 +31,48 @@ Un tableau {{domxref("Uint8Array")}}. L'exemple suivant montre comment créer simplement un `AnalyserNode` avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](https://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lignes 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). ```js -var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); -var analyseur = contexteAudio.createAnalyser(); +const audioCtx = new (window.AudioContext || window.webkitAudioContext)(); +const analyser = audioCtx.createAnalyser(); ... -analyseur.fftSize = 2048; -var tailleMemoireTampon = analyseur.frequencyBinCount; -var tableauDonnees = new Uint8Array(tailleMemoireTampon); -analyseur.getByteTimeDomainData(tableauDonnees); +analyser.fftSize = 2048; +const bufferLength = analyser.fftSize; +const dataArray = new Uint8Array(bufferLength); +analyser.getByteTimeDomainData(dataArray); + +// dessine un oscilloscope pour la source audio courante +function draw() { + drawVisual = requestAnimationFrame(draw); + analyser.getByteTimeDomainData(dataArray); + + canvasCtx.fillStyle = 'rgb(200, 200, 200)'; + canvasCtx.fillRect(0, 0, WIDTH, HEIGHT); + + canvasCtx.lineWidth = 2; + canvasCtx.strokeStyle = 'rgb(0, 0, 0)'; + + const sliceWidth = WIDTH * 1.0 / bufferLength; + let x = 0; + + canvasCtx.beginPath(); + for(var i = 0; i < bufferLength; i++) { + const v = dataArray[i]/128.0; + const y = v * HEIGHT/2; + + if(i === 0) + canvasCtx.moveTo(x, y); + else + canvasCtx.lineTo(x, y); + + x += sliceWidth; + } + + canvasCtx.lineTo(WIDTH, HEIGHT/2); + canvasCtx.stroke(); +}; -// dessine un oscilloscope de la source audio - -function dessiner() { - - dessin = requestAnimationFrame(dessiner); - - analyseur.getBy - - contexteCanvas. - contexte - - contexteCanvas. - cont - - contexteCanvas.begin - - var largeurBarr - v - - for(var i = 0; i < tailleMemo - - var v = - - - - - - contexteCanvas.l - - - - - - c - contexteCanvas.stroke(); - }; - - dessiner(); +draw(); ``` ## Paramètres diff --git a/files/fr/web/api/audiobuffersourcenode/loopstart/index.md b/files/fr/web/api/audiobuffersourcenode/loopstart/index.md index 0279ecf959..6f992c5bff 100644 --- a/files/fr/web/api/audiobuffersourcenode/loopstart/index.md +++ b/files/fr/web/api/audiobuffersourcenode/loopstart/index.md @@ -27,34 +27,32 @@ Lorsque la lecture de la source audio est terminée, elle boucle. Il est possibl ```js function getData() { - source = contexteAudio.createBufferSource(); - requete = new XMLHttpRequest(); - - requete.open('GET', 'viper.ogg', true); - - requete.responseType = 'arraybuffer'; - - - requete.onload = function() { - var donneesAudio = requete.response; - - contexteAudio.decodeAudioData - maMemoireTampon = buffer; - dureeMorceau = buffer.duration; - source.buffer = maMemoireTampon; - source.playbackRate. - source.connect(conte - s - - - - }, - - function(e){"Erreur lors du décodage des données audio " + e.err}); + source = audioCtx.createBufferSource(); + request = new XMLHttpRequest(); + + request.open('GET', 'viper.ogg', true); + request.responseType = 'arraybuffer'; + + request.onload = function() { + var audioData = request.response; + + audioCtx.decodeAudioData(audioData, function(buffer) { + myBuffer = buffer; + songLength = buffer.duration; + source.buffer = myBuffer; + source.playbackRate.value = playbackControl.value; + source.connect(audioCtx.destination); + source.loop = true; + + loopstartControl.setAttribute('max', Math.floor(songLength)); + loopendControl.setAttribute('max', Math.floor(songLength)); + }, + + function(e){"Erreur lors du décodage des données " + e.err}); } - requete.send(); + request.send(); } ... diff --git a/files/fr/web/api/audiobuffersourcenode/playbackrate/index.md b/files/fr/web/api/audiobuffersourcenode/playbackrate/index.md index ff2be37ab8..caeab234af 100644 --- a/files/fr/web/api/audiobuffersourcenode/playbackrate/index.md +++ b/files/fr/web/api/audiobuffersourcenode/playbackrate/index.md @@ -41,37 +41,32 @@ Dans cet exemple, la fonction {{domxref("AudioContext.decodeAudioData")}} est ut ```js function getData() { - source = contexteAudio.createBufferSource(); - requete = new XMLHttpRequest(); - - requete.open('GET', 'viper.ogg', true); - - requete.responseType = 'arraybuffer'; - - - requete.onload = function() { - var donneesAudio = requete.response; - - contexteAudio.decodeAudioData - maMemoireTampon = buffer; - dureeMorceau = buffer.duration; - source.buffer = maMemoireTampon; - source.playbackRate. - source.connect(conte - s - - - - }, - - function(e){"Erreur lors du décodage des données audio " + e.err}); + source = audioCtx.createBufferSource(); + request = new XMLHttpRequest(); + + request.open('GET', 'viper.ogg', true); + + request.responseType = 'arraybuffer'; + + request.onload = function() { + var audioData = request.response; + + audioCtx.decodeAudioData(audioData, function(buffer) { + myBuffer = buffer; + source.buffer = myBuffer; + source.playbackRate.value = playbackControl.value; + source.connect(audioCtx.destination); + source.loop = true; + }, + + function(e){"Erreur lors du décodage des données " + e.err}); } - requete.send(); + request.send(); } -// connecte les boutons pour lancer et arrêter la lecture, et modifier la vitesse de lecture +// wire up buttons to stop and play audio, and range slider control play.onclick = function() { getData(); diff --git a/files/fr/web/api/canvas_api/tutorial/drawing_shapes/index.md b/files/fr/web/api/canvas_api/tutorial/drawing_shapes/index.md index 57d00b74d8..35811261e3 100644 --- a/files/fr/web/api/canvas_api/tutorial/drawing_shapes/index.md +++ b/files/fr/web/api/canvas_api/tutorial/drawing_shapes/index.md @@ -262,29 +262,29 @@ L'instruction pour le paramètre `antihoraire` a pour résultat que la première ``` ```js -function dessiner() { - var canevas = document.getElementById('canevas'); - if (canevas.getContext) { - var ctx = canevas.getContext('2d'); - - for(var i = 0; i < 4 - for(var j = 0; j < +function draw() { + var canvas = document.getElementById('canevas'); + if (canvas.getContext) { + var ctx = canvas.getContext('2d'); + + for (var i = 0; i < 4; i++) { + for (var j = 0; j < 3; j++) { ctx.beginPath(); - var x = 25 + j * 50; // Coordonné - var y = 25 + i * 50; // Coordonné - var rayon = 20; // Rayon de l'arc - var angleInitial = 0; // Point de départ sur le cercle - var angleFinal = Math.PI + (Math.PI * j) / 2; // Point d - var antihoraire - - - - f - - - - - } + var x = 25 + j * 50; // abscisse (x) + var y = 25 + i * 50; // ordonnée (y) + var radius = 20; // rayon d'arc + var startAngle = 0; // Point de départ du cercle + var endAngle = Math.PI + (Math.PI * j) / 2; // Point final pour le cercle + var counterclockwise = i % 2 !== 0; // sens de rotation horaire ou non + + ctx.arc(x, y, radius, startAngle, endAngle, counterclockwise); + + if (i > 1) { + ctx.fill(); + } else { + ctx.stroke(); + } + } } } } diff --git a/files/fr/web/api/event/comparison_of_event_targets/index.md b/files/fr/web/api/event/comparison_of_event_targets/index.md index 0d640f3db7..3e62c82893 100644 --- a/files/fr/web/api/event/comparison_of_event_targets/index.md +++ b/files/fr/web/api/event/comparison_of_event_targets/index.md @@ -164,18 +164,18 @@ Problème : Seulement disponible dans un navigateur basé sur Mozilla ? Problèm <p>Clicking on the text will show the difference between explicitOriginalTarget, originalTarget and target</p> <script> function handleClicks(e) { - document.getElementById('target').innerHTML = e.target; - document.getElementById('currentTarget').innerHTML = e.currentTarget; - document.getElementById('relatedTarget').innerHTML = e.relatedTarget; - document.getElementById('explicitOriginalTarget').innerHTML = e.explicitOriginalTarget; - document.getElementById('originalTarget').innerHTML = e.originalTarget; + document.getElementById('target').innerHTML = e.target; + document.getElementById('currentTarget').innerHTML = e.currentTarget; + document.getElementById('relatedTarget').innerHTML = e.relatedTarget; + document.getElementById('explicitOriginalTarget').innerHTML = e.explicitOriginalTarget; + document.getElementById('originalTarget').innerHTML = e.originalTarget; } - + function handleMouseover(e) { - - - } - + document.getElementById('target').innerHTML = e.target; + document.getElementById('relatedTarget').innerHTML = e.relatedTarget; + } + document.addEventListener('click', handleClicks, false); document.addEventListener('mouseover', handleMouseover, false); </script> diff --git a/files/fr/web/api/history_api/example/index.md b/files/fr/web/api/history_api/example/index.md index a9473b7582..1442068e52 100644 --- a/files/fr/web/api/history_api/example/index.md +++ b/files/fr/web/api/history_api/example/index.md @@ -194,202 +194,203 @@ Voici un exemple de site web AJAX composé uniquement de trois pages (_page_un.p ```js "use strict"; -var ajaxRequest = new (function () { +const ajaxRequest = new (function () { function closeReq () { oLoadingBox.parentNode && document.body.removeChild(oLoadingBox); bIsLoading = false; } - + function abortReq () { - if (!bIsLoadi - oReq.abort( - + if (!bIsLoading) { return; } + oReq.abort(); + closeReq(); } - - fu - alert("Unknown err + + function ajaxError () { + alert("Unknown error."); } - - function ajaxLoad + + function ajaxLoad () { var vMsg, nStatus = this.status; switch (nStatus) { case 200: - vMsg = JSON.parse + vMsg = JSON.parse(this.responseText); document.title = oPageInfo.title = vMsg.page; - document.getElementById - i - hi - + document.getElementById(sTargetId).innerHTML = vMsg.content; + if (bUpdateURL) { + history.pushState(oPageInfo, oPageInfo.title, oPageInfo.url); + bUpdateURL = false; } break; - ult: - vMsg = nSta - switch + default: + vMsg = nStatus + ": " + (oHTTPStatus[nStatus] || "Unknown"); + switch (Math.floor(nStatus / 100)) { /* case 1: - // - consol - bre - 2: - // - consol - - - - con - + // Informational 1xx + console.log("Information code " + vMsg); + break; + case 2: + // Successful 2xx + console.log("Successful code " + vMsg); + break; + case 3: + // Redirection 3xx + console.log("Redirection code " + vMsg); + break; */ case 4: - /* - alert( - bre - 5: - /* S - alert( - bre - - - - + /* Client Error 4xx */ + alert("Client Error #" + vMsg); + break; + case 5: + /* Server Error 5xx */ + alert("Server Error #" + vMsg); + break; + default: + /* Unknown status */ + ajaxError(); + } } closeReq(); } - - function filterURL (sURL, sView - return sURL.replace(rSearch, + + function filterURL (sURL, sViewMode) { + return sURL.replace(rSearch, "") + ("?" + sURL.replace(rHost, "&").replace(rView, sViewMode ? "&" + sViewKey + "=" + sViewMode : "").slice(1)).replace(rEndQstMark, ""); } - + function getPage (sPage) { if (bIsLoading) { return; } oReq = new XMLHttpRequest(); - bIsLoading = + bIsLoading = true; oReq.onload = ajaxLoad; - - if (sPage) { oPageInfo.ur - oReq.open("get", filterU + oReq.onerror = ajaxError; + if (sPage) { oPageInfo.url = filterURL(sPage, null); } + oReq.open("get", filterURL(oPageInfo.url, "json"), true); oReq.send(); - oLoadingBox.parent + oLoadingBox.parentNode || document.body.appendChild(oLoadingBox); } - + function requestPage (sURL) { - i - + if (history.pushState) { + bUpdateURL = true; getPage(sURL); - se { - /* Ajax navigation is n - location.assi + } else { + /* Ajax navigation is not supported */ + location.assign(sURL); } } - - function processLi - if (this.className === sAjaxClass + + function processLink () { + if (this.className === sAjaxClass) { requestPage(this.href); - + return false; } return true; } - + function init () { oPageInfo.title = document.title; - for (var oLin + history.replaceState(oPageInfo, oPageInfo.title, oPageInfo.url); + for (var oLink, nIdx = 0, nLen = document.links.length; nIdx < nLen; document.links[nIdx++].onclick = processLink); } - + const - + /* customizable constants */ - sTargetId = "ajax-cont - - /* not customizable - rSearch = /\?.*$/, r - oLoadingBox = + sTargetId = "ajax-content", sViewKey = "view_as", sAjaxClass = "ajax-nav", + + /* not customizable constants */ + rSearch = /\?.*$/, rHost = /^[^\?]*\?*&*/, rView = new RegExp("&" + sViewKey + "\\=[^&]*|&*$", "i"), rEndQstMark = /\?$/, + oLoadingBox = document.createElement("div"), oCover = document.createElement("div"), oLoadingImg = new Image(), oPageInfo = { title: null, url: location.href - HTTPStatus = /* - 100: "Continue" - 101: "Swit - 102: "Proc + }, oHTTPStatus = /* http://www.iana.org/assignments/http-status-codes/http-status-codes.xml */ { + 100: "Continue", + 101: "Switching Protocols", + 102: "Processing", 200: "OK", - 201: "Created + 201: "Created", 202: "Accepted", - 203: "Non-Author - 204: "No Content - 205: "Reset Cont - 206: "Partial Conte - 207: "Multi-Sta - 208: "Already R + 203: "Non-Authoritative Information", + 204: "No Content", + 205: "Reset Content", + 206: "Partial Content", + 207: "Multi-Status", + 208: "Already Reported", 226: "IM Used", - 300: "Multipl - 301: "Moved P + 300: "Multiple Choices", + 301: "Moved Permanently", 302: "Found", 303: "See Other", - 304: "Not Modifi - 305: "Use Proxy" - 306: "Reserv - 307: "Tempor - 308: "Perman + 304: "Not Modified", + 305: "Use Proxy", + 306: "Reserved", + 307: "Temporary Redirect", + 308: "Permanent Redirect", 400: "Bad Request", - 401: "Unauthorize - 402: "Payment Req + 401: "Unauthorized", + 402: "Payment Required", 403: "Forbidden", 404: "Not Found", - 405: "Method Not Allow - 406: "Not Acce - 407: "Proxy Au - 408: "Reques - 409: "Confli + 405: "Method Not Allowed", + 406: "Not Acceptable", + 407: "Proxy Authentication Required", + 408: "Request Timeout", + 409: "Conflict", 410: "Gone", - 411: "Length Requi - 412: "Precondition - 413: "Request Enti - 414: "Request-URI - 415: "Unsupported - 416: "Requested Range N - 417: "Expectat - 422: "Unproces + 411: "Length Required", + 412: "Precondition Failed", + 413: "Request Entity Too Large", + 414: "Request-URI Too Long", + 415: "Unsupported Media Type", + 416: "Requested Range Not Satisfiable", + 417: "Expectation Failed", + 422: "Unprocessable Entity", 423: "Locked", - 424: "Failed Depen + 424: "Failed Dependency", 425: "Unassigned", - 426: "Upgrade Requ + 426: "Upgrade Required", 427: "Unassigned", - 428: "Precondition - 429: "Too Many Req + 428: "Precondition Required", + 429: "Too Many Requests", 430: "Unassigned", - 431: "Request Header - - - - 503: "Service Unavailab - 504: "Gateway Time - 505: "HTTP Version - 506: "Variant Also Negot - 507: "Insufficient St - 508: "Loop Detecte - 509: "Unassigne - 510: "Not Exten - 511: "Network Authentication Requ + 431: "Request Header Fields Too Large", + 500: "Internal Server Error", + 501: "Not Implemented", + 502: "Bad Gateway", + 503: "Service Unavailable", + 504: "Gateway Timeout", + 505: "HTTP Version Not Supported", + 506: "Variant Also Negotiates (Experimental)", + 507: "Insufficient Storage", + 508: "Loop Detected", + 509: "Unassigned", + 510: "Not Extended", + 511: "Network Authentication Required" }; - + var - - oReq, bIsLoadi - - oLoadingBox.id = "aja + + oReq, bIsLoading = false, bUpdateURL = false; + + oLoadingBox.id = "ajax-loader"; oCover.onclick = abortReq; oLoadingImg.src = "data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA=="; oCover.appendChild(oLoadingImg); oLoadingBox.appendChild(oCover); - - onpopstate = function ( + + onpopstate = function (oEvent) { bUpdateURL = false; - oPageInfo.title = oEvent.state.ti - oPageInfo. - + oPageInfo.title = oEvent.state.title; + oPageInfo.url = oEvent.state.url; + getPage(); }; - - window.addEventListener - + + window.addEventListener ? addEventListener("load", init, false) : window.attachEvent ? attachEvent("onload", init) : (onload = init); + // Public methods this.open = requestPage; diff --git a/files/fr/web/api/web_audio_api/index.md b/files/fr/web/api/web_audio_api/index.md index 449857d226..b2de30618f 100644 --- a/files/fr/web/api/web_audio_api/index.md +++ b/files/fr/web/api/web_audio_api/index.md @@ -146,169 +146,9 @@ Les objets suivants étaient définis dans les versions précédentes de la spé - {{domxref("WaveTableNode")}} - : Utilisé pour définir une forme d'onde périodique. Cet objet est obsolète, et a été remplacé par {{domxref("PeriodicWave")}}. -## Exemple - -Cet exemple montre l'utilisation d'un grand nombre de fonctions Web Audio. La démo est disponible en ligne sur [Voice-change-o-matic](http://mdn.github.io/voice-change-o-matic/) (voir aussi le [code source complet sur Github](https://github.com/mdn/voice-change-o-matic)) —c'est une démo expérimentale d'application pour modifier la voix; baissez le son de vos enceintes pour l'utiliser, au moins au début ! - -Les lignes qui concernent la Web Audio API sont surlignées; si vous voulez en savoir davantage sur les différentes méthodes, consultez la documentation. - -```js -var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); // définition du contexte audio -// les navigateurs avec un moteur Webkit/blink demandent un préfixe - -var voixSelectionnee = document.getElementById("voice"); // case à cocher pour la sélection d'effets de voix -var visualisationSelectionnee = document.getElementById("visual"); // case à cocher pour la sélection d'options de visualisation audio -var silence = document.querySelector('.mute'); // bouton pour couper le son -var renduVisuel; // requestAnimationFrame - -var analyseur = contexteAudio.createAnalyser(); -var distorsion = contexteAudio.createWaveShaper(); -var gainVolume = contexteAudio.createGain(); -var filtreAccordable = contexteAudio.createBiquadFilter(); - -function creerCourbeDistorsion(taille) { // fonction qui crée une forme de courbe qui sera utilisée par le générateur de l'onde de distorsion - var k = typeof taille === 'number' ? taille : 50, - nombre_echantillons = 44100, - courbe = new Float32Array(nombre_echantillons), - angle = Math.PI / 180, - i = 0, - x; - r ( ; i < nombre_echantillons; ++i ) - x = i * 2 / nombre_echantillons - 1; - courbe[i] = ( 3 + k ) * x * 20 * angle / ( Math.PI + k * Math.abs(x) ); - } - return courbe; -}; - -navigator.getUserMedia ( - // contraintes - uniquement audio dans cet exemple - { - audio: true - }, - - // callback de succès - function(flux) { - source = contexteAudio.createMediaStreamSource(flux); - source.connect(analyseur); - analyseur.connect(distorsion); - distorsion.connect(filtreAccordable); - filtreAccordable.connect(gainVolume); - gainVolume.connect(contexteAudio.destination); // connecte les différents noeuds de graphes audio entre eux - - genererVisualisation(flux); - voiceChange(); - - }, - - // callback d'erreur - function(err) { - console.log("L'erreur GUM suivante a eu lieu : " + err); - } -); - -function genererVisualisation(flux) { - const LARGEUR = canvas.width; - const HAUTEUR = canvas.height; - - var parametreVisualisation = visualisationSelectionnee.value; - console.log(parametreVisualisation); - - if(parametreVisualisation == "sinewave") { - analyseur.fftSize = 2048; - var tailleBuffer = analyseur.frequencyBinCount; // la moitié de la valeur FFT (Transformation de Fourier rapide) - var tableauDonnees = new Uint8Array(tailleBuffer); // crée un tableau pour stocker les données - - canvasCtx.clearRec - - function draw() { - - renduVisuel = - - analyseur.getByteTi - - canvasCtx.fillStyle - canvas - - canvasCtx.lineWidth - can - - canvasCtx.beginPath - - var sliceWi - var - - fo - - - - - - - - canvasCtx.line - - - x += sliceWidth; - } - - - c - }; - - draw(); - - } else if(parametreVisualisation == "off") { - canvasCtx.clearRect(0, 0, LARGEUR, HAUTEUR); - canvasCtx.fillStyle = "red"; - canvasCtx.fillRect(0, 0, LARGEUR, HAUTEUR); - } - -} - -function modifierVoix() { - distorsion.curve = new Float32Array; - filtreAccordable.gain.value = 0; // reset les effets à chaque fois que la fonction modifierVoix est appelée - - var choixVoix = voixSelectionnee.value; - console.log(choixVoix); - - if(choixVoix == "distortion") { - distorsion.curve = creerCourbeDistorsion(400); // applique la distorsion au son en utilisant le noeud d'onde de forme - else if(choixVoix == "biquad") { - filtreAccordable.type = "lowshelf"; - filtreAccordable.frequency.value = 1000; - filtreAccordable.gain.value = 25; // applique le filtre lowshelf aux sons qui utilisent le filtre accordable - } else if(choixVoix == "off") { - console.log("Choix de la voix désactivé"); // ne fait rien, quand l'option off est sélectionnée - } - -} - -// écouteurs d'évènements pour les changements de visualisation et de voix - -visualisationSelectionnee.onchange = function() { - window.cancelAnimationFrame(renduVisuel); - genererVisualisation(flux); -} - -voixSelectionnee.onchange = function() { - modifierVoix(); -} - -silence.onclick = muterVoix; - -function muterVoix() { // allumer / éteindre le son - if(silence.id == "") { - gainVolume.gain.value = 0; // gain à 0 pour éteindre le son - silence.id = "activated"; - silence.innerHTML = "Unmute"; - else { - gainVolume.gain. - silence.id = ""; - silence.innerHTML = "Mute"; - } -} -``` +## Exemples + +Vous pouvez trouver différents exemples dans [le dépôt webaudio-example](https://github.com/mdn/webaudio-examples/) sur GitHub. ## Spécifications diff --git a/files/fr/web/api/xmlhttprequest/using_xmlhttprequest/index.md b/files/fr/web/api/xmlhttprequest/using_xmlhttprequest/index.md index 9c366f23af..aae0a7236e 100644 --- a/files/fr/web/api/xmlhttprequest/using_xmlhttprequest/index.md +++ b/files/fr/web/api/xmlhttprequest/using_xmlhttprequest/index.md @@ -532,21 +532,23 @@ function AJAXSubmit (oFormElement) { var oReq = new XMLHttpRequest(); oReq.onload = ajaxSuccess; if (oFormElement.method.toLowerCase() === "post") { - oReq.open("post", oFormElement.action, true); + oReq.open("post", oFormElement.action); oReq.send(new FormData(oFormElement)); - else { - var oField, sFieldType, nFile, sSearch = - for (var nItem = 0; nItem < oFormElement + } else { + var oField, sFieldType, nFile, sSearch = ""; + for (var nItem = 0; nItem < oFormElement.elements.length; nItem++) { oField = oFormElement.elements[nItem]; - if (!oField.hasAttribute("na - sFieldType = oField.nodeName + if (!oField.hasAttribute("name")) { continue; } + sFieldType = oField.nodeName.toUpperCase() === "INPUT" && oField.hasAttribute("type") ? + oField.getAttribute("type").toUpperCase() : "TEXT"; if (sFieldType === "FILE") { - for (nFile = 0; nFile < oField.files.length; sSearch += "&" + esca - } - - + for (nFile = 0; nFile < oField.files.length; + sSearch += "&" + escape(oField.name) + "=" + escape(oField.files[nFile++].name)); + } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) { + sSearch += "&" + escape(oField.name) + "=" + escape(oField.value); + } } - oReq.open("get", oFormElement.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&/, "?")), true); + oReq.open("get", oFormElement.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&/, "?")), true); oReq.send(null); } } |