From 1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde Mon Sep 17 00:00:00 2001 From: julieng Date: Sat, 2 Oct 2021 17:20:24 +0200 Subject: convert content to md --- files/fr/web/api/abortsignal/index.md | 77 +- .../fr/web/api/analysernode/analysernode/index.md | 74 +- files/fr/web/api/analysernode/fftsize/index.md | 64 +- .../api/analysernode/frequencybincount/index.md | 58 +- .../api/analysernode/getbytefrequencydata/index.md | 71 +- .../analysernode/getbytetimedomaindata/index.md | 69 +- .../analysernode/getfloatfrequencydata/index.md | 76 +- .../analysernode/getfloattimedomaindata/index.md | 70 +- files/fr/web/api/analysernode/index.md | 171 +- files/fr/web/api/analysernode/maxdecibels/index.md | 62 +- files/fr/web/api/analysernode/mindecibels/index.md | 62 +- .../analysernode/smoothingtimeconstant/index.md | 66 +- files/fr/web/api/animation/index.md | 197 +- files/fr/web/api/animation/starttime/index.md | 29 +- .../web/api/animationevent/animationevent/index.md | 74 +- .../web/api/animationevent/animationname/index.md | 43 +- .../fr/web/api/animationevent/elapsedtime/index.md | 45 +- files/fr/web/api/animationevent/index.md | 78 +- .../web/api/animationevent/pseudoelement/index.md | 60 +- files/fr/web/api/atob/index.md | 77 +- files/fr/web/api/attr/index.md | 268 +- files/fr/web/api/attr/localname/index.md | 81 +- files/fr/web/api/attr/namespaceuri/index.md | 71 +- files/fr/web/api/attr/prefix/index.md | 63 +- files/fr/web/api/audiobuffer/audiobuffer/index.md | 74 +- .../web/api/audiobuffer/copyfromchannel/index.md | 72 +- .../fr/web/api/audiobuffer/copytochannel/index.md | 72 +- files/fr/web/api/audiobuffer/duration/index.md | 58 +- .../fr/web/api/audiobuffer/getchanneldata/index.md | 67 +- files/fr/web/api/audiobuffer/index.md | 95 +- files/fr/web/api/audiobuffer/length/index.md | 70 +- .../web/api/audiobuffer/numberofchannels/index.md | 69 +- files/fr/web/api/audiobuffer/samplerate/index.md | 69 +- .../web/api/audiobuffersourcenode/buffer/index.md | 72 +- .../web/api/audiobuffersourcenode/detune/index.md | 64 +- files/fr/web/api/audiobuffersourcenode/index.md | 146 +- .../fr/web/api/audiobuffersourcenode/loop/index.md | 76 +- .../web/api/audiobuffersourcenode/loopend/index.md | 72 +- .../api/audiobuffersourcenode/loopstart/index.md | 72 +- .../audiobuffersourcenode/playbackrate/index.md | 95 +- .../web/api/audiobuffersourcenode/start/index.md | 97 +- .../audiocontext/createmediaelementsource/index.md | 89 +- files/fr/web/api/audiocontext/index.md | 297 +- files/fr/web/api/audiolistener/index.md | 171 +- files/fr/web/api/audionode/index.md | 124 +- files/fr/web/api/audioparam/index.md | 137 +- files/fr/web/api/audioprocessingevent/index.md | 96 +- files/fr/web/api/audioworklet/index.md | 59 +- .../authenticatordata/index.md | 124 +- .../api/authenticatorassertionresponse/index.md | 75 +- .../api/authenticatorattestationresponse/index.md | 49 +- files/fr/web/api/authenticatorresponse/index.md | 51 +- .../baseaudiocontext/createbiquadfilter/index.md | 57 +- .../web/api/baseaudiocontext/createbuffer/index.md | 115 +- .../baseaudiocontext/createbuffersource/index.md | 73 +- .../web/api/baseaudiocontext/creategain/index.md | 81 +- .../web/api/baseaudiocontext/createpanner/index.md | 69 +- .../baseaudiocontext/createperiodicwave/index.md | 90 +- files/fr/web/api/baseaudiocontext/index.md | 221 +- files/fr/web/api/battery_status_api/index.md | 76 +- files/fr/web/api/batterymanager/charging/index.md | 77 +- .../web/api/batterymanager/chargingtime/index.md | 81 +- .../api/batterymanager/dischargingtime/index.md | 81 +- files/fr/web/api/batterymanager/index.md | 119 +- files/fr/web/api/batterymanager/level/index.md | 79 +- files/fr/web/api/beforeunloadevent/index.md | 103 +- .../fr/web/api/biquadfilternode/frequency/index.md | 74 +- files/fr/web/api/biquadfilternode/index.md | 365 +- files/fr/web/api/blob/blob/index.md | 81 +- files/fr/web/api/blob/index.md | 130 +- files/fr/web/api/blob/size/index.md | 30 +- files/fr/web/api/blob/type/index.md | 60 +- files/fr/web/api/blobbuilder/index.md | 178 +- files/fr/web/api/blobevent/blobevent/index.md | 56 +- files/fr/web/api/blobevent/data/index.md | 41 +- files/fr/web/api/blobevent/index.md | 63 +- files/fr/web/api/btoa/index.md | 129 +- files/fr/web/api/cache/add/index.md | 117 +- files/fr/web/api/cache/addall/index.md | 109 +- files/fr/web/api/cache/delete/index.md | 93 +- files/fr/web/api/cache/index.md | 129 +- files/fr/web/api/cache/keys/index.md | 99 +- files/fr/web/api/cache/match/index.md | 103 +- files/fr/web/api/cache/matchall/index.md | 95 +- files/fr/web/api/cache/put/index.md | 114 +- files/fr/web/api/caches/index.md | 86 +- files/fr/web/api/cachestorage/delete/index.md | 72 +- files/fr/web/api/cachestorage/has/index.md | 72 +- files/fr/web/api/cachestorage/index.md | 121 +- files/fr/web/api/cachestorage/keys/index.md | 68 +- files/fr/web/api/cachestorage/match/index.md | 103 +- files/fr/web/api/cachestorage/open/index.md | 76 +- .../web/api/canvas_api/a_basic_ray-caster/index.md | 44 +- files/fr/web/api/canvas_api/index.md | 211 +- .../manipulating_video_using_canvas/index.md | 134 +- .../tutorial/advanced_animations/index.md | 169 +- .../tutorial/applying_styles_and_colors/index.md | 660 +- .../canvas_api/tutorial/basic_animations/index.md | 152 +- .../api/canvas_api/tutorial/basic_usage/index.md | 150 +- .../tutorial/compositing/example/index.md | 55 +- .../api/canvas_api/tutorial/compositing/index.md | 67 +- .../canvas_api/tutorial/drawing_shapes/index.md | 465 +- .../api/canvas_api/tutorial/drawing_text/index.md | 152 +- .../hit_regions_and_accessibility/index.md | 105 +- files/fr/web/api/canvas_api/tutorial/index.md | 54 +- .../canvas_api/tutorial/optimizing_canvas/index.md | 108 +- .../pixel_manipulation_with_canvas/index.md | 247 +- .../canvas_api/tutorial/transformations/index.md | 245 +- .../api/canvas_api/tutorial/using_images/index.md | 314 +- .../web/api/canvasgradient/addcolorstop/index.md | 116 +- files/fr/web/api/canvasgradient/index.md | 51 +- .../web/api/canvasrenderingcontext2d/arc/index.md | 149 +- .../canvasrenderingcontext2d/beginpath/index.md | 88 +- .../beziercurveto/index.md | 106 +- .../api/canvasrenderingcontext2d/canvas/index.md | 65 +- .../canvasrenderingcontext2d/clearrect/index.md | 128 +- .../canvasrenderingcontext2d/closepath/index.md | 88 +- .../createlineargradient/index.md | 128 +- .../canvasrenderingcontext2d/direction/index.md | 106 +- .../canvasrenderingcontext2d/drawimage/index.md | 216 +- .../api/canvasrenderingcontext2d/ellipse/index.md | 122 +- .../web/api/canvasrenderingcontext2d/fill/index.md | 156 +- .../api/canvasrenderingcontext2d/fillrect/index.md | 126 +- .../canvasrenderingcontext2d/fillstyle/index.md | 152 +- .../api/canvasrenderingcontext2d/filltext/index.md | 114 +- .../web/api/canvasrenderingcontext2d/font/index.md | 116 +- .../canvasrenderingcontext2d/getimagedata/index.md | 108 +- .../canvasrenderingcontext2d/globalalpha/index.md | 129 +- .../globalcompositeoperation/index.md | 91 +- .../imagesmoothingenabled/index.md | 73 +- files/fr/web/api/canvasrenderingcontext2d/index.md | 678 +- .../api/canvasrenderingcontext2d/linecap/index.md | 136 +- .../api/canvasrenderingcontext2d/linejoin/index.md | 119 +- .../api/canvasrenderingcontext2d/lineto/index.md | 116 +- .../canvasrenderingcontext2d/measuretext/index.md | 79 +- .../api/canvasrenderingcontext2d/moveto/index.md | 116 +- .../quadraticcurveto/index.md | 112 +- .../web/api/canvasrenderingcontext2d/rect/index.md | 128 +- .../api/canvasrenderingcontext2d/rotate/index.md | 98 +- .../web/api/canvasrenderingcontext2d/save/index.md | 79 +- .../api/canvasrenderingcontext2d/scale/index.md | 130 +- .../canvasrenderingcontext2d/setlinedash/index.md | 118 +- .../canvasrenderingcontext2d/settransform/index.md | 120 +- .../api/canvasrenderingcontext2d/stroke/index.md | 96 +- .../canvasrenderingcontext2d/strokerect/index.md | 126 +- .../canvasrenderingcontext2d/strokestyle/index.md | 151 +- .../canvasrenderingcontext2d/stroketext/index.md | 114 +- .../canvasrenderingcontext2d/textalign/index.md | 114 +- .../canvasrenderingcontext2d/textbaseline/index.md | 118 +- .../canvasrenderingcontext2d/transform/index.md | 120 +- .../canvasrenderingcontext2d/translate/index.md | 100 +- files/fr/web/api/cdatasection/index.md | 84 +- files/fr/web/api/characterdata/index.md | 105 +- files/fr/web/api/clearinterval/index.md | 68 +- files/fr/web/api/client/frametype/index.md | 40 +- files/fr/web/api/client/id/index.md | 40 +- files/fr/web/api/client/index.md | 90 +- files/fr/web/api/client/postmessage/index.md | 61 +- files/fr/web/api/client/url/index.md | 51 +- files/fr/web/api/clients/claim/index.md | 82 +- files/fr/web/api/clients/get/index.md | 63 +- files/fr/web/api/clients/index.md | 81 +- files/fr/web/api/clients/matchall/index.md | 66 +- files/fr/web/api/clients/openwindow/index.md | 58 +- files/fr/web/api/clipboard/index.md | 77 +- files/fr/web/api/clipboard/write/index.md | 62 +- files/fr/web/api/clipboard/writetext/index.md | 64 +- files/fr/web/api/clipboard_api/index.md | 73 +- files/fr/web/api/closeevent/index.md | 377 +- files/fr/web/api/comment/comment/index.md | 50 +- files/fr/web/api/comment/index.md | 69 +- files/fr/web/api/compositionevent/index.md | 83 +- files/fr/web/api/console/assert/index.md | 80 +- files/fr/web/api/console/clear/index.md | 48 +- files/fr/web/api/console/count/index.md | 89 +- files/fr/web/api/console/countreset/index.md | 113 +- files/fr/web/api/console/debug/index.md | 66 +- files/fr/web/api/console/dir/index.md | 60 +- files/fr/web/api/console/dirxml/index.md | 50 +- files/fr/web/api/console/error/index.md | 74 +- files/fr/web/api/console/group/index.md | 72 +- files/fr/web/api/console/groupcollapsed/index.md | 54 +- files/fr/web/api/console/groupend/index.md | 46 +- files/fr/web/api/console/index.md | 390 +- files/fr/web/api/console/info/index.md | 64 +- files/fr/web/api/console/log/index.md | 70 +- files/fr/web/api/console/profile/index.md | 33 +- files/fr/web/api/console/profileend/index.md | 43 +- files/fr/web/api/console/table/index.md | 120 +- files/fr/web/api/console/time/index.md | 52 +- files/fr/web/api/console/timeend/index.md | 50 +- files/fr/web/api/console/timelog/index.md | 94 +- files/fr/web/api/console/timestamp/index.md | 35 +- files/fr/web/api/console/trace/index.md | 70 +- files/fr/web/api/console/warn/index.md | 68 +- files/fr/web/api/console_api/index.md | 83 +- files/fr/web/api/credential/index.md | 66 +- .../fr/web/api/credential_management_api/index.md | 70 +- .../web/api/credentialscontainer/create/index.md | 126 +- files/fr/web/api/credentialscontainer/get/index.md | 111 +- files/fr/web/api/credentialscontainer/index.md | 101 +- .../preventsilentaccess/index.md | 45 +- .../fr/web/api/credentialscontainer/store/index.md | 55 +- files/fr/web/api/crossoriginisolated/index.md | 55 +- files/fr/web/api/crypto/getrandomvalues/index.md | 76 +- files/fr/web/api/crypto/index.md | 78 +- files/fr/web/api/crypto/subtle/index.md | 41 +- files/fr/web/api/crypto_property/index.md | 42 +- files/fr/web/api/cryptokey/index.md | 67 +- files/fr/web/api/css/index.md | 67 +- files/fr/web/api/css_counter_styles/index.md | 30 +- files/fr/web/api/css_font_loading_api/index.md | 36 +- .../index.md | 40 +- files/fr/web/api/css_object_model/index.md | 165 +- .../managing_screen_orientation/index.md | 133 +- .../web/api/css_properties_and_values_api/index.md | 54 +- files/fr/web/api/cssmediarule/index.md | 66 +- files/fr/web/api/cssrulelist/index.md | 47 +- .../web/api/cssstyledeclaration/csstext/index.md | 32 +- files/fr/web/api/cssstyledeclaration/index.md | 129 +- files/fr/web/api/cssstylerule/index.md | 79 +- files/fr/web/api/cssvalue/index.md | 114 +- files/fr/web/api/cssvaluelist/index.md | 65 +- files/fr/web/api/customevent/detail/index.md | 58 +- files/fr/web/api/customevent/index.md | 87 +- .../web/api/customevent/initcustomevent/index.md | 74 +- files/fr/web/api/datatransfer/cleardata/index.md | 107 +- files/fr/web/api/datatransfer/files/index.md | 54 +- files/fr/web/api/datatransfer/index.md | 650 +- .../api/dedicatedworkerglobalscope/close/index.md | 51 +- .../fr/web/api/dedicatedworkerglobalscope/index.md | 189 +- .../api/dedicatedworkerglobalscope/name/index.md | 57 +- .../accelerationincludinggravity/index.md | 72 +- .../devicemotionevent/devicemotionevent/index.md | 84 +- files/fr/web/api/devicemotionevent/index.md | 85 +- .../fr/web/api/devicemotionevent/interval/index.md | 68 +- .../api/devicemotionevent/rotationrate/index.md | 74 +- .../devicemotioneventrotationrate/alpha/index.md | 44 +- .../devicemotioneventrotationrate/beta/index.md | 44 +- .../devicemotioneventrotationrate/gamma/index.md | 44 +- .../web/api/devicemotioneventrotationrate/index.md | 45 +- .../api/deviceorientationevent/absolute/index.md | 56 +- files/fr/web/api/deviceorientationevent/index.md | 92 +- files/fr/web/api/document/activeelement/index.md | 29 +- files/fr/web/api/document/adoptnode/index.md | 61 +- files/fr/web/api/document/alinkcolor/index.md | 27 +- files/fr/web/api/document/anchors/index.md | 87 +- files/fr/web/api/document/applets/index.md | 26 +- files/fr/web/api/document/bgcolor/index.md | 32 +- files/fr/web/api/document/body/index.md | 40 +- .../web/api/document/caretrangefrompoint/index.md | 65 +- files/fr/web/api/document/characterset/index.md | 56 +- files/fr/web/api/document/clear/index.md | 23 +- files/fr/web/api/document/compatmode/index.md | 51 +- files/fr/web/api/document/contenttype/index.md | 19 +- files/fr/web/api/document/createattribute/index.md | 97 +- .../web/api/document/createcdatasection/index.md | 40 +- files/fr/web/api/document/createcomment/index.md | 31 +- .../api/document/createdocumentfragment/index.md | 75 +- files/fr/web/api/document/createelement/index.md | 131 +- files/fr/web/api/document/createelementns/index.md | 125 +- .../api/document/createentityreference/index.md | 10 +- files/fr/web/api/document/createevent/index.md | 106 +- .../fr/web/api/document/createexpression/index.md | 23 +- .../web/api/document/createnodeiterator/index.md | 259 +- .../fr/web/api/document/creatensresolver/index.md | 41 +- .../document/createprocessinginstruction/index.md | 48 +- files/fr/web/api/document/createrange/index.md | 28 +- files/fr/web/api/document/createtextnode/index.md | 80 +- .../fr/web/api/document/createtreewalker/index.md | 291 +- files/fr/web/api/document/currentscript/index.md | 60 +- files/fr/web/api/document/defaultview/index.md | 29 +- files/fr/web/api/document/designmode/index.md | 52 +- files/fr/web/api/document/dir/index.md | 36 +- files/fr/web/api/document/doctype/index.md | 54 +- files/fr/web/api/document/document/index.md | 35 +- files/fr/web/api/document/documentelement/index.md | 72 +- files/fr/web/api/document/documenturi/index.md | 47 +- .../fr/web/api/document/documenturiobject/index.md | 35 +- files/fr/web/api/document/domain/index.md | 46 +- .../api/document/domcontentloaded_event/index.md | 166 +- files/fr/web/api/document/drag_event/index.md | 255 +- files/fr/web/api/document/dragend_event/index.md | 249 +- files/fr/web/api/document/dragenter_event/index.md | 255 +- files/fr/web/api/document/dragleave_event/index.md | 251 +- files/fr/web/api/document/dragover_event/index.md | 254 +- files/fr/web/api/document/dragstart_event/index.md | 262 +- files/fr/web/api/document/drop_event/index.md | 254 +- .../fr/web/api/document/elementfrompoint/index.md | 80 +- .../fr/web/api/document/elementsfrompoint/index.md | 120 +- .../api/document/enablestylesheetsforset/index.md | 58 +- files/fr/web/api/document/evaluate/index.md | 251 +- files/fr/web/api/document/execcommand/index.md | 342 +- files/fr/web/api/document/exitfullscreen/index.md | 62 +- files/fr/web/api/document/exitpointerlock/index.md | 44 +- files/fr/web/api/document/featurepolicy/index.md | 39 +- files/fr/web/api/document/forms/index.md | 141 +- .../api/document/fullscreenchange_event/index.md | 101 +- .../api/document/fullscreenerror_event/index.md | 81 +- files/fr/web/api/document/getboxobjectfor/index.md | 31 +- files/fr/web/api/document/getelementbyid/index.md | 192 +- .../api/document/getelementsbyclassname/index.md | 108 +- .../fr/web/api/document/getelementsbyname/index.md | 106 +- .../web/api/document/getelementsbytagname/index.md | 116 +- .../api/document/getelementsbytagnamens/index.md | 111 +- files/fr/web/api/document/getselection/index.md | 4 +- files/fr/web/api/document/hasfocus/index.md | 96 +- files/fr/web/api/document/head/index.md | 62 +- files/fr/web/api/document/height/index.md | 45 +- files/fr/web/api/document/hidden/index.md | 46 +- files/fr/web/api/document/images/index.md | 33 +- files/fr/web/api/document/implementation/index.md | 37 +- files/fr/web/api/document/importnode/index.md | 88 +- files/fr/web/api/document/index.md | 878 +-- files/fr/web/api/document/keypress_event/index.md | 127 +- files/fr/web/api/document/lastmodified/index.md | 66 +- .../fr/web/api/document/laststylesheetset/index.md | 40 +- files/fr/web/api/document/location/index.md | 59 +- .../web/api/document/mozsetimageelement/index.md | 55 +- .../web/api/document/mozsyntheticdocument/index.md | 28 +- .../web/api/document/onafterscriptexecute/index.md | 38 +- .../api/document/onbeforescriptexecute/index.md | 36 +- .../web/api/document/onfullscreenchange/index.md | 59 +- files/fr/web/api/document/onoffline/index.md | 4 +- files/fr/web/api/document/ononline/index.md | 32 +- files/fr/web/api/document/open/index.md | 75 +- files/fr/web/api/document/origin/index.md | 60 +- files/fr/web/api/document/popupnode/index.md | 36 +- .../api/document/preferredstylesheetset/index.md | 38 +- .../fr/web/api/document/querycommandstate/index.md | 48 +- .../api/document/querycommandsupported/index.md | 75 +- files/fr/web/api/document/queryselector/index.md | 125 +- .../fr/web/api/document/queryselectorall/index.md | 205 +- files/fr/web/api/document/readystate/index.md | 132 +- .../api/document/readystatechange_event/index.md | 110 +- files/fr/web/api/document/referrer/index.md | 30 +- files/fr/web/api/document/registerelement/index.md | 62 +- files/fr/web/api/document/releasecapture/index.md | 27 +- files/fr/web/api/document/scripts/index.md | 55 +- files/fr/web/api/document/scroll_event/index.md | 161 +- .../api/document/selectedstylesheetset/index.md | 48 +- files/fr/web/api/document/stylesheets/index.md | 74 +- files/fr/web/api/document/stylesheetsets/index.md | 49 +- files/fr/web/api/document/title/index.md | 57 +- files/fr/web/api/document/tooltipnode/index.md | 15 +- files/fr/web/api/document/touchend_event/index.md | 166 +- .../web/api/document/transitionend_event/index.md | 117 +- files/fr/web/api/document/url/index.md | 23 +- files/fr/web/api/document/visibilitystate/index.md | 61 +- files/fr/web/api/document/width/index.md | 45 +- files/fr/web/api/document/write/index.md | 94 +- files/fr/web/api/document/writeln/index.md | 62 +- files/fr/web/api/document/xmlencoding/index.md | 25 +- files/fr/web/api/document/xmlversion/index.md | 21 +- .../api/document_object_model/examples/index.md | 354 +- .../how_to_create_a_dom_tree/index.md | 186 +- files/fr/web/api/document_object_model/index.md | 772 +- .../document_object_model/introduction/index.md | 371 +- .../locating_dom_elements_using_selectors/index.md | 54 +- .../index.md | 417 +- .../example/index.md | 34 +- .../using_the_w3c_dom_level_1_core/index.md | 73 +- .../api/document_object_model/whitespace/index.md | 117 +- .../api/documentfragment/documentfragment/index.md | 43 +- files/fr/web/api/documentfragment/index.md | 151 +- .../api/documentfragment/queryselector/index.md | 93 +- .../api/documentfragment/queryselectorall/index.md | 60 +- files/fr/web/api/documenttype/index.md | 131 +- files/fr/web/api/domerror/index.md | 186 +- files/fr/web/api/domexception/index.md | 249 +- files/fr/web/api/domhighrestimestamp/index.md | 95 +- .../api/domimplementation/createdocument/index.md | 96 +- .../domimplementation/createdocumenttype/index.md | 92 +- .../domimplementation/createhtmldocument/index.md | 96 +- .../web/api/domimplementation/hasfeature/index.md | 71 +- files/fr/web/api/domimplementation/index.md | 79 +- files/fr/web/api/dommatrix/index.md | 22 +- files/fr/web/api/domobject/index.md | 25 +- files/fr/web/api/domparser/index.md | 94 +- files/fr/web/api/dompoint/dompoint/index.md | 70 +- files/fr/web/api/dompoint/index.md | 93 +- files/fr/web/api/dompointreadonly/index.md | 81 +- files/fr/web/api/dompointreadonly/w/index.md | 43 +- files/fr/web/api/dompointreadonly/x/index.md | 45 +- files/fr/web/api/dompointreadonly/y/index.md | 45 +- files/fr/web/api/dompointreadonly/z/index.md | 45 +- files/fr/web/api/domquad/index.md | 63 +- files/fr/web/api/domrect/domrect/index.md | 70 +- files/fr/web/api/domrect/index.md | 98 +- files/fr/web/api/domrectreadonly/bottom/index.md | 43 +- .../api/domrectreadonly/domrectreadonly/index.md | 68 +- files/fr/web/api/domrectreadonly/height/index.md | 43 +- files/fr/web/api/domrectreadonly/index.md | 88 +- files/fr/web/api/domrectreadonly/left/index.md | 43 +- files/fr/web/api/domrectreadonly/right/index.md | 43 +- files/fr/web/api/domrectreadonly/top/index.md | 43 +- files/fr/web/api/domrectreadonly/width/index.md | 43 +- files/fr/web/api/domrectreadonly/x/index.md | 43 +- files/fr/web/api/domrectreadonly/y/index.md | 43 +- files/fr/web/api/domstring/binary/index.md | 22 +- files/fr/web/api/domstring/index.md | 53 +- files/fr/web/api/domstringlist/index.md | 45 +- files/fr/web/api/domtimestamp/index.md | 25 +- files/fr/web/api/domtokenlist/add/index.md | 70 +- files/fr/web/api/domtokenlist/contains/index.md | 65 +- files/fr/web/api/domtokenlist/entries/index.md | 63 +- files/fr/web/api/domtokenlist/foreach/index.md | 96 +- files/fr/web/api/domtokenlist/index.md | 157 +- files/fr/web/api/domtokenlist/item/index.md | 65 +- files/fr/web/api/domtokenlist/keys/index.md | 61 +- files/fr/web/api/domtokenlist/length/index.md | 56 +- files/fr/web/api/domtokenlist/remove/index.md | 79 +- files/fr/web/api/domtokenlist/replace/index.md | 68 +- files/fr/web/api/domtokenlist/supports/index.md | 59 +- files/fr/web/api/domtokenlist/toggle/index.md | 68 +- files/fr/web/api/domtokenlist/value/index.md | 56 +- files/fr/web/api/domtokenlist/values/index.md | 61 +- files/fr/web/api/effecttiming/delay/index.md | 80 +- files/fr/web/api/effecttiming/index.md | 79 +- files/fr/web/api/element/animate/index.md | 134 +- files/fr/web/api/element/attachshadow/index.md | 81 +- files/fr/web/api/element/attributes/index.md | 137 +- .../fr/web/api/element/childelementcount/index.md | 102 +- files/fr/web/api/element/classlist/index.md | 173 +- files/fr/web/api/element/classname/index.md | 94 +- files/fr/web/api/element/click_event/index.md | 210 +- files/fr/web/api/element/clientheight/index.md | 46 +- files/fr/web/api/element/clientleft/index.md | 66 +- files/fr/web/api/element/clientwidth/index.md | 61 +- files/fr/web/api/element/closest/index.md | 135 +- .../web/api/element/compositionend_event/index.md | 122 +- .../api/element/compositionstart_event/index.md | 87 +- .../api/element/compositionupdate_event/index.md | 99 +- .../fr/web/api/element/contextmenu_event/index.md | 140 +- files/fr/web/api/element/copy_event/index.md | 127 +- files/fr/web/api/element/dblclick_event/index.md | 150 +- files/fr/web/api/element/error_event/index.md | 121 +- files/fr/web/api/element/focusin_event/index.md | 107 +- files/fr/web/api/element/focusout_event/index.md | 107 +- files/fr/web/api/element/getattribute/index.md | 92 +- .../fr/web/api/element/getattributenames/index.md | 51 +- files/fr/web/api/element/getattributenode/index.md | 47 +- .../fr/web/api/element/getattributenodens/index.md | 41 +- files/fr/web/api/element/getattributens/index.md | 155 +- .../web/api/element/getboundingclientrect/index.md | 124 +- .../api/element/getelementsbyclassname/index.md | 77 +- .../web/api/element/getelementsbytagname/index.md | 73 +- .../api/element/getelementsbytagnamens/index.md | 68 +- files/fr/web/api/element/hasattribute/index.md | 76 +- files/fr/web/api/element/hasattributens/index.md | 71 +- files/fr/web/api/element/hasattributes/index.md | 79 +- files/fr/web/api/element/id/index.md | 63 +- files/fr/web/api/element/index.md | 832 +- files/fr/web/api/element/innerhtml/index.md | 226 +- .../web/api/element/insertadjacentelement/index.md | 171 +- .../fr/web/api/element/insertadjacenthtml/index.md | 110 +- .../fr/web/api/element/insertadjacenttext/index.md | 191 +- files/fr/web/api/element/localname/index.md | 134 +- files/fr/web/api/element/matches/index.md | 122 +- files/fr/web/api/element/mousedown_event/index.md | 108 +- files/fr/web/api/element/mouseenter_event/index.md | 179 +- files/fr/web/api/element/mouseleave_event/index.md | 170 +- files/fr/web/api/element/mousemove_event/index.md | 161 +- files/fr/web/api/element/mouseout_event/index.md | 149 +- files/fr/web/api/element/mouseover_event/index.md | 143 +- files/fr/web/api/element/mouseup_event/index.md | 104 +- files/fr/web/api/element/namespaceuri/index.md | 69 +- files/fr/web/api/element/outerhtml/index.md | 122 +- files/fr/web/api/element/prefix/index.md | 63 +- files/fr/web/api/element/queryselector/index.md | 169 +- files/fr/web/api/element/queryselectorall/index.md | 203 +- .../web/api/element/releasepointercapture/index.md | 91 +- files/fr/web/api/element/removeattribute/index.md | 38 +- .../web/api/element/removeattributenode/index.md | 37 +- .../fr/web/api/element/removeattributens/index.md | 40 +- .../fr/web/api/element/requestfullscreen/index.md | 66 +- files/fr/web/api/element/scrollheight/index.md | 169 +- files/fr/web/api/element/scrollintoview/index.md | 87 +- .../api/element/scrollintoviewifneeded/index.md | 43 +- files/fr/web/api/element/scrollleft/index.md | 69 +- files/fr/web/api/element/scrollleftmax/index.md | 22 +- files/fr/web/api/element/scrollto/index.md | 87 +- files/fr/web/api/element/scrolltop/index.md | 108 +- files/fr/web/api/element/scrollwidth/index.md | 56 +- files/fr/web/api/element/select_event/index.md | 91 +- files/fr/web/api/element/setattribute/index.md | 83 +- files/fr/web/api/element/setattributenode/index.md | 49 +- .../fr/web/api/element/setattributenodens/index.md | 52 +- files/fr/web/api/element/setattributens/index.md | 41 +- files/fr/web/api/element/setcapture/index.md | 66 +- .../fr/web/api/element/setpointercapture/index.md | 97 +- files/fr/web/api/element/tagname/index.md | 67 +- files/fr/web/api/encoding_api/index.md | 57 +- files/fr/web/api/errorevent/index.md | 81 +- files/fr/web/api/event/bubbles/index.md | 73 +- files/fr/web/api/event/cancelable/index.md | 72 +- files/fr/web/api/event/cancelbubble/index.md | 44 +- .../api/event/comparison_of_event_targets/index.md | 255 +- files/fr/web/api/event/currenttarget/index.md | 91 +- files/fr/web/api/event/defaultprevented/index.md | 53 +- files/fr/web/api/event/event/index.md | 71 +- files/fr/web/api/event/eventphase/index.md | 228 +- .../web/api/event/explicitoriginaltarget/index.md | 48 +- files/fr/web/api/event/index.md | 308 +- files/fr/web/api/event/initevent/index.md | 125 +- files/fr/web/api/event/istrusted/index.md | 85 +- files/fr/web/api/event/originaltarget/index.md | 26 +- files/fr/web/api/event/preventdefault/index.md | 102 +- files/fr/web/api/event/returnvalue/index.md | 23 +- files/fr/web/api/event/srcelement/index.md | 22 +- .../api/event/stopimmediatepropagation/index.md | 35 +- files/fr/web/api/event/stoppropagation/index.md | 53 +- files/fr/web/api/event/target/index.md | 88 +- files/fr/web/api/event/timestamp/index.md | 106 +- files/fr/web/api/event/type/index.md | 82 +- files/fr/web/api/eventlistener/index.md | 81 +- files/fr/web/api/eventsource/close/index.md | 63 +- files/fr/web/api/eventsource/index.md | 111 +- files/fr/web/api/eventsource/onopen/index.md | 63 +- .../web/api/eventtarget/addeventlistener/index.md | 605 +- .../fr/web/api/eventtarget/dispatchevent/index.md | 64 +- files/fr/web/api/eventtarget/eventtarget/index.md | 59 +- files/fr/web/api/eventtarget/index.md | 79 +- .../api/eventtarget/removeeventlistener/index.md | 185 +- .../api/extendableevent/extendableevent/index.md | 59 +- files/fr/web/api/extendableevent/index.md | 109 +- .../web/api/extendablemessageevent/data/index.md | 68 +- .../extendablemessageevent/index.md | 90 +- files/fr/web/api/extendablemessageevent/index.md | 102 +- .../extendablemessageevent/lasteventid/index.md | 68 +- .../web/api/extendablemessageevent/origin/index.md | 68 +- .../web/api/extendablemessageevent/ports/index.md | 68 +- .../web/api/featurepolicy/allowedfeatures/index.md | 51 +- .../web/api/featurepolicy/allowsfeature/index.md | 61 +- files/fr/web/api/featurepolicy/features/index.md | 51 +- .../featurepolicy/getallowlistforfeature/index.md | 57 +- files/fr/web/api/featurepolicy/index.md | 61 +- .../federatedcredential/index.md | 50 +- files/fr/web/api/federatedcredential/index.md | 73 +- .../web/api/federatedcredential/provider/index.md | 43 +- files/fr/web/api/fetch/index.md | 202 +- files/fr/web/api/fetch_api/basic_concepts/index.md | 94 +- files/fr/web/api/fetch_api/index.md | 91 +- files/fr/web/api/fetch_api/using_fetch/index.md | 283 +- files/fr/web/api/fetchevent/index.md | 109 +- files/fr/web/api/file/index.md | 192 +- files/fr/web/api/file/name/index.md | 30 +- .../using_files_from_web_applications/index.md | 447 +- .../api/file_and_directory_entries_api/index.md | 64 +- files/fr/web/api/filelist/index.md | 145 +- files/fr/web/api/filereader/filereader/index.md | 58 +- files/fr/web/api/filereader/index.md | 203 +- .../web/api/filereader/readasarraybuffer/index.md | 51 +- .../web/api/filereader/readasbinarystring/index.md | 63 +- files/fr/web/api/filereader/readasdataurl/index.md | 104 +- files/fr/web/api/filereader/readastext/index.md | 69 +- files/fr/web/api/filerequest/index.md | 51 +- files/fr/web/api/filerequest/lockedfile/index.md | 42 +- files/fr/web/api/filerequest/onprogress/index.md | 42 +- files/fr/web/api/focusevent/index.md | 57 +- files/fr/web/api/force_touch_events/index.md | 54 +- files/fr/web/api/formdata/append/index.md | 107 +- files/fr/web/api/formdata/delete/index.md | 78 +- files/fr/web/api/formdata/entries/index.md | 70 +- files/fr/web/api/formdata/formdata/index.md | 119 +- files/fr/web/api/formdata/get/index.md | 66 +- files/fr/web/api/formdata/getall/index.md | 85 +- files/fr/web/api/formdata/has/index.md | 78 +- files/fr/web/api/formdata/index.md | 100 +- files/fr/web/api/formdata/keys/index.md | 66 +- files/fr/web/api/formdata/set/index.md | 101 +- .../api/formdata/using_formdata_objects/index.md | 117 +- files/fr/web/api/formdata/values/index.md | 66 +- files/fr/web/api/fullscreen_api/index.md | 291 +- files/fr/web/api/gainnode/index.md | 107 +- files/fr/web/api/gamepad/index.md | 164 +- files/fr/web/api/gamepad_api/index.md | 103 +- .../api/gamepad_api/using_the_gamepad_api/index.md | 234 +- files/fr/web/api/geolocation/clearwatch/index.md | 74 +- .../api/geolocation/getcurrentposition/index.md | 87 +- files/fr/web/api/geolocation/index.md | 63 +- .../fr/web/api/geolocation/watchposition/index.md | 92 +- files/fr/web/api/geolocation_api/index.md | 143 +- files/fr/web/api/geolocationcoordinates/index.md | 77 +- files/fr/web/api/geolocationposition/index.md | 55 +- .../web/api/geolocationposition/timestamp/index.md | 48 +- files/fr/web/api/geolocationpositionerror/index.md | 86 +- files/fr/web/api/gestureevent/index.md | 76 +- files/fr/web/api/globaleventhandlers/index.md | 421 +- .../web/api/globaleventhandlers/onabort/index.md | 56 +- .../api/globaleventhandlers/onauxclick/index.md | 88 +- .../fr/web/api/globaleventhandlers/onblur/index.md | 51 +- .../web/api/globaleventhandlers/onchange/index.md | 60 +- .../web/api/globaleventhandlers/onclick/index.md | 69 +- .../web/api/globaleventhandlers/onclose/index.md | 41 +- .../api/globaleventhandlers/ondblclick/index.md | 81 +- .../web/api/globaleventhandlers/onerror/index.md | 111 +- .../web/api/globaleventhandlers/onfocus/index.md | 30 +- .../ongotpointercapture/index.md | 55 +- .../web/api/globaleventhandlers/onkeydown/index.md | 36 +- .../api/globaleventhandlers/onkeypress/index.md | 36 +- .../web/api/globaleventhandlers/onkeyup/index.md | 43 +- .../fr/web/api/globaleventhandlers/onload/index.md | 42 +- .../web/api/globaleventhandlers/onloadend/index.md | 62 +- .../api/globaleventhandlers/onloadstart/index.md | 68 +- .../api/globaleventhandlers/onmousedown/index.md | 27 +- .../api/globaleventhandlers/onmousemove/index.md | 30 +- .../api/globaleventhandlers/onmouseout/index.md | 27 +- .../api/globaleventhandlers/onmouseover/index.md | 27 +- .../web/api/globaleventhandlers/onmouseup/index.md | 27 +- .../web/api/globaleventhandlers/onreset/index.md | 67 +- .../web/api/globaleventhandlers/onresize/index.md | 65 +- .../web/api/globaleventhandlers/onscroll/index.md | 27 +- .../web/api/globaleventhandlers/onselect/index.md | 68 +- .../web/api/globaleventhandlers/onwheel/index.md | 41 +- files/fr/web/api/headers/index.md | 135 +- files/fr/web/api/history/index.md | 142 +- files/fr/web/api/history/length/index.md | 46 +- files/fr/web/api/history_api/example/index.md | 244 +- files/fr/web/api/history_api/index.md | 206 +- .../drag_operations/index.md | 361 +- files/fr/web/api/html_drag_and_drop_api/index.md | 311 +- files/fr/web/api/htmlbaseelement/index.md | 81 +- files/fr/web/api/htmlbasefontelement/index.md | 63 +- files/fr/web/api/htmlbodyelement/index.md | 153 +- files/fr/web/api/htmlbrelement/index.md | 87 +- files/fr/web/api/htmlbuttonelement/index.md | 215 +- files/fr/web/api/htmlbuttonelement/labels/index.md | 65 +- .../web/api/htmlcanvaselement/getcontext/index.md | 209 +- files/fr/web/api/htmlcanvaselement/height/index.md | 76 +- files/fr/web/api/htmlcanvaselement/index.md | 389 +- files/fr/web/api/htmlcollection/index.md | 99 +- files/fr/web/api/htmlcollection/item/index.md | 33 +- .../getdistributednodes/index.md | 46 +- files/fr/web/api/htmlcontentelement/index.md | 55 +- .../fr/web/api/htmlcontentelement/select/index.md | 46 +- .../web/api/htmldialogelement/close_event/index.md | 109 +- files/fr/web/api/htmldialogelement/index.md | 187 +- files/fr/web/api/htmldivelement/index.md | 69 +- files/fr/web/api/htmldocument/index.md | 12 +- files/fr/web/api/htmlelement/accesskey/index.md | 10 +- .../api/htmlelement/animationend_event/index.md | 113 +- .../htmlelement/animationiteration_event/index.md | 117 +- .../api/htmlelement/animationstart_event/index.md | 113 +- .../web/api/htmlelement/beforeinput_event/index.md | 117 +- files/fr/web/api/htmlelement/change_event/index.md | 184 +- files/fr/web/api/htmlelement/click/index.md | 115 +- .../web/api/htmlelement/contenteditable/index.md | 84 +- files/fr/web/api/htmlelement/dir/index.md | 78 +- files/fr/web/api/htmlelement/hidden/index.md | 163 +- files/fr/web/api/htmlelement/index.md | 142 +- files/fr/web/api/htmlelement/innertext/index.md | 41 +- files/fr/web/api/htmlelement/input_event/index.md | 113 +- .../web/api/htmlelement/iscontenteditable/index.md | 80 +- files/fr/web/api/htmlelement/lang/index.md | 64 +- files/fr/web/api/htmlelement/offsetheight/index.md | 51 +- files/fr/web/api/htmlelement/offsetleft/index.md | 103 +- files/fr/web/api/htmlelement/offsetparent/index.md | 29 +- files/fr/web/api/htmlelement/offsettop/index.md | 40 +- files/fr/web/api/htmlelement/offsetwidth/index.md | 37 +- files/fr/web/api/htmlelement/outertext/index.md | 30 +- files/fr/web/api/htmlelement/title/index.md | 76 +- .../api/htmlelement/transitionend_event/index.md | 199 +- .../fr/web/api/htmlformcontrolscollection/index.md | 59 +- .../web/api/htmlformelement/acceptcharset/index.md | 22 +- files/fr/web/api/htmlformelement/action/index.md | 23 +- files/fr/web/api/htmlformelement/elements/index.md | 28 +- files/fr/web/api/htmlformelement/encoding/index.md | 6 +- files/fr/web/api/htmlformelement/enctype/index.md | 23 +- files/fr/web/api/htmlformelement/index.md | 346 +- files/fr/web/api/htmlformelement/length/index.md | 26 +- files/fr/web/api/htmlformelement/method/index.md | 22 +- files/fr/web/api/htmlformelement/name/index.md | 30 +- .../api/htmlformelement/reportvalidity/index.md | 60 +- files/fr/web/api/htmlformelement/reset/index.md | 18 +- files/fr/web/api/htmlformelement/submit/index.md | 36 +- .../web/api/htmlformelement/submit_event/index.md | 71 +- files/fr/web/api/htmlformelement/target/index.md | 22 +- files/fr/web/api/htmlframesetelement/index.md | 134 +- .../htmliframeelement/allowpaymentrequest/index.md | 26 +- .../api/htmliframeelement/contentdocument/index.md | 20 +- .../api/htmliframeelement/contentwindow/index.md | 39 +- files/fr/web/api/htmliframeelement/csp/index.md | 26 +- .../api/htmliframeelement/featurepolicy/index.md | 37 +- files/fr/web/api/htmliframeelement/index.md | 145 +- files/fr/web/api/htmlimageelement/image/index.md | 63 +- files/fr/web/api/htmlimageelement/index.md | 229 +- files/fr/web/api/htmlinputelement/index.md | 1074 ++- files/fr/web/api/htmlinputelement/labels/index.md | 69 +- .../web/api/htmlmediaelement/abort_event/index.md | 94 +- .../api/htmlmediaelement/canplay_event/index.md | 109 +- .../htmlmediaelement/canplaythrough_event/index.md | 109 +- .../api/htmlmediaelement/capturestream/index.md | 88 +- .../htmlmediaelement/durationchange_event/index.md | 109 +- .../api/htmlmediaelement/emptied_event/index.md | 109 +- .../web/api/htmlmediaelement/ended_event/index.md | 151 +- files/fr/web/api/htmlmediaelement/index.md | 408 +- files/fr/web/api/htmlmediaelement/play/index.md | 88 +- files/fr/web/api/htmlmediaelement/volume/index.md | 59 +- files/fr/web/api/htmloptionelement/index.md | 220 +- files/fr/web/api/htmloptionelement/option/index.md | 94 +- files/fr/web/api/htmlquoteelement/index.md | 37 +- files/fr/web/api/htmlselectelement/index.md | 244 +- files/fr/web/api/htmlselectelement/remove/index.md | 105 +- .../api/htmlselectelement/selectedindex/index.md | 77 +- .../htmlselectelement/setcustomvalidity/index.md | 51 +- files/fr/web/api/htmlshadowelement/index.md | 36 +- files/fr/web/api/htmlspanelement/index.md | 20 +- files/fr/web/api/htmlstyleelement/index.md | 190 +- files/fr/web/api/htmltablecellelement/index.md | 117 +- files/fr/web/api/htmltableelement/caption/index.md | 42 +- files/fr/web/api/htmltableelement/index.md | 163 +- .../fr/web/api/htmltableelement/insertrow/index.md | 94 +- files/fr/web/api/htmltablerowelement/index.md | 106 +- .../api/htmltablerowelement/insertcell/index.md | 106 +- files/fr/web/api/htmltimeelement/datetime/index.md | 308 +- files/fr/web/api/htmltimeelement/index.md | 65 +- files/fr/web/api/htmlunknownelement/index.md | 51 +- files/fr/web/api/htmlvideoelement/index.md | 177 +- files/fr/web/api/idbcursor/advance/index.md | 122 +- files/fr/web/api/idbcursor/continue/index.md | 137 +- files/fr/web/api/idbcursor/index.md | 201 +- files/fr/web/api/idbdatabase/close/index.md | 83 +- .../web/api/idbdatabase/createobjectstore/index.md | 180 +- .../web/api/idbdatabase/deleteobjectstore/index.md | 129 +- files/fr/web/api/idbdatabase/index.md | 145 +- files/fr/web/api/idbdatabase/name/index.md | 89 +- .../web/api/idbdatabase/objectstorenames/index.md | 87 +- files/fr/web/api/idbdatabase/onabort/index.md | 81 +- files/fr/web/api/idbdatabase/onerror/index.md | 81 +- .../web/api/idbdatabase/onversionchange/index.md | 85 +- files/fr/web/api/idbdatabase/transaction/index.md | 283 +- files/fr/web/api/idbdatabase/version/index.md | 79 +- files/fr/web/api/idbenvironment/index.md | 74 +- files/fr/web/api/idbfactory/cmp/index.md | 163 +- .../fr/web/api/idbfactory/deletedatabase/index.md | 104 +- files/fr/web/api/idbfactory/index.md | 104 +- files/fr/web/api/idbfactory/open/index.md | 155 +- files/fr/web/api/idbindex/count/index.md | 152 +- files/fr/web/api/idbindex/get/index.md | 133 +- files/fr/web/api/idbindex/getall/index.md | 119 +- files/fr/web/api/idbindex/getallkeys/index.md | 143 +- files/fr/web/api/idbindex/getkey/index.md | 152 +- files/fr/web/api/idbindex/index.md | 189 +- files/fr/web/api/idbindex/isautolocale/index.md | 68 +- files/fr/web/api/idbindex/keypath/index.md | 105 +- files/fr/web/api/idbindex/locale/index.md | 74 +- files/fr/web/api/idbindex/multientry/index.md | 101 +- files/fr/web/api/idbindex/name/index.md | 123 +- files/fr/web/api/idbindex/objectstore/index.md | 107 +- files/fr/web/api/idbindex/opencursor/index.md | 171 +- files/fr/web/api/idbindex/openkeycursor/index.md | 156 +- files/fr/web/api/idbindex/unique/index.md | 99 +- files/fr/web/api/idbkeyrange/bound/index.md | 130 +- files/fr/web/api/idbkeyrange/includes/index.md | 107 +- files/fr/web/api/idbkeyrange/index.md | 262 +- files/fr/web/api/idbkeyrange/lower/index.md | 89 +- files/fr/web/api/idbkeyrange/lowerbound/index.md | 109 +- files/fr/web/api/idbkeyrange/loweropen/index.md | 89 +- files/fr/web/api/idbkeyrange/only/index.md | 99 +- files/fr/web/api/idbkeyrange/upper/index.md | 89 +- files/fr/web/api/idbkeyrange/upperbound/index.md | 109 +- files/fr/web/api/idbkeyrange/upperopen/index.md | 91 +- files/fr/web/api/idbobjectstore/add/index.md | 194 +- .../web/api/idbobjectstore/autoincrement/index.md | 107 +- files/fr/web/api/idbobjectstore/clear/index.md | 112 +- files/fr/web/api/idbobjectstore/count/index.md | 115 +- .../fr/web/api/idbobjectstore/createindex/index.md | 247 +- files/fr/web/api/idbobjectstore/delete/index.md | 133 +- .../fr/web/api/idbobjectstore/deleteindex/index.md | 123 +- files/fr/web/api/idbobjectstore/get/index.md | 126 +- files/fr/web/api/idbobjectstore/getall/index.md | 123 +- .../fr/web/api/idbobjectstore/getallkeys/index.md | 138 +- files/fr/web/api/idbobjectstore/getkey/index.md | 122 +- files/fr/web/api/idbobjectstore/index.md | 196 +- files/fr/web/api/idbobjectstore/index/index.md | 137 +- .../fr/web/api/idbobjectstore/indexnames/index.md | 85 +- files/fr/web/api/idbobjectstore/keypath/index.md | 87 +- files/fr/web/api/idbobjectstore/name/index.md | 105 +- .../fr/web/api/idbobjectstore/opencursor/index.md | 121 +- .../web/api/idbobjectstore/openkeycursor/index.md | 120 +- files/fr/web/api/idbobjectstore/put/index.md | 189 +- .../fr/web/api/idbobjectstore/transaction/index.md | 99 +- .../api/idbopendbrequest/blocked_event/index.md | 113 +- files/fr/web/api/idbopendbrequest/index.md | 105 +- files/fr/web/api/idbrequest/error/index.md | 147 +- files/fr/web/api/idbrequest/index.md | 141 +- files/fr/web/api/idbrequest/onerror/index.md | 104 +- files/fr/web/api/idbrequest/onsuccess/index.md | 106 +- files/fr/web/api/idbrequest/readystate/index.md | 85 +- files/fr/web/api/idbrequest/result/index.md | 53 +- files/fr/web/api/idbrequest/source/index.md | 87 +- files/fr/web/api/idbrequest/transaction/index.md | 93 +- files/fr/web/api/idbtransaction/abort/index.md | 91 +- .../fr/web/api/idbtransaction/abort_event/index.md | 109 +- .../web/api/idbtransaction/complete_event/index.md | 100 +- files/fr/web/api/idbtransaction/db/index.md | 91 +- files/fr/web/api/idbtransaction/error/index.md | 99 +- files/fr/web/api/idbtransaction/index.md | 204 +- files/fr/web/api/idbtransaction/mode/index.md | 112 +- .../fr/web/api/idbtransaction/objectstore/index.md | 116 +- .../api/idbtransaction/objectstorenames/index.md | 53 +- files/fr/web/api/idbtransaction/onabort/index.md | 91 +- .../fr/web/api/idbtransaction/oncomplete/index.md | 197 +- files/fr/web/api/idbtransaction/onerror/index.md | 91 +- files/fr/web/api/imagedata/data/index.md | 49 +- files/fr/web/api/imagedata/index.md | 83 +- files/fr/web/api/index.md | 22 +- files/fr/web/api/indexeddb/index.md | 73 +- .../index.md | 144 +- files/fr/web/api/indexeddb_api/index.md | 255 +- .../web/api/indexeddb_api/using_indexeddb/index.md | 915 ++- files/fr/web/api/inputevent/index.md | 79 +- .../fr/web/api/intersection_observer_api/index.md | 469 +- .../api/intersectionobserver/disconnect/index.md | 51 +- files/fr/web/api/intersectionobserver/index.md | 107 +- .../intersectionobserver/index.md | 110 +- .../web/api/intersectionobserver/observe/index.md | 54 +- .../fr/web/api/intersectionobserver/root/index.md | 53 +- .../api/intersectionobserver/rootmargin/index.md | 43 +- .../api/intersectionobserver/takerecords/index.md | 53 +- .../api/intersectionobserver/thresholds/index.md | 45 +- .../api/intersectionobserver/unobserve/index.md | 75 +- .../fr/web/api/intersectionobserverentry/index.md | 85 +- .../api/intersectionobserverentry/target/index.md | 50 +- files/fr/web/api/issecurecontext/index.md | 44 +- files/fr/web/api/keyboardevent/charcode/index.md | 83 +- files/fr/web/api/keyboardevent/code/index.md | 154 +- files/fr/web/api/keyboardevent/index.md | 418 +- files/fr/web/api/keyboardevent/key/index.md | 195 +- .../web/api/keyboardevent/key/key_values/index.md | 7913 +++++++++++--------- .../web/api/keyboardevent/keyboardevent/index.md | 88 +- files/fr/web/api/localfilesystem/index.md | 280 +- files/fr/web/api/location/assign/index.md | 68 +- files/fr/web/api/location/index.md | 183 +- files/fr/web/api/location/reload/index.md | 38 +- files/fr/web/api/location/replace/index.md | 87 +- files/fr/web/api/media_streams_api/index.md | 98 +- .../fr/web/api/mediadevices/getusermedia/index.md | 297 +- files/fr/web/api/mediadevices/index.md | 103 +- files/fr/web/api/mediasource/index.md | 139 +- files/fr/web/api/mediasource/mediasource/index.md | 41 +- files/fr/web/api/mediastream/index.md | 95 +- .../fr/web/api/mediastreamaudiosourcenode/index.md | 97 +- files/fr/web/api/mediastreamevent/index.md | 45 +- files/fr/web/api/mediatrackconstraints/index.md | 77 +- files/fr/web/api/messageevent/index.md | 147 +- files/fr/web/api/mouseevent/index.md | 303 +- files/fr/web/api/mouseevent/offsetx/index.md | 42 +- files/fr/web/api/mouseevent/offsety/index.md | 42 +- files/fr/web/api/mutationobserver/index.md | 251 +- files/fr/web/api/namednodemap/index.md | 105 +- files/fr/web/api/navigator/battery/index.md | 69 +- files/fr/web/api/navigator/connection/index.md | 39 +- files/fr/web/api/navigator/cookieenabled/index.md | 49 +- files/fr/web/api/navigator/credentials/index.md | 52 +- files/fr/web/api/navigator/donottrack/index.md | 49 +- files/fr/web/api/navigator/geolocation/index.md | 44 +- files/fr/web/api/navigator/getgamepads/index.md | 51 +- files/fr/web/api/navigator/getusermedia/index.md | 139 +- files/fr/web/api/navigator/index.md | 307 +- .../api/navigator/mozislocallyavailable/index.md | 51 +- .../api/navigator/registerprotocolhandler/index.md | 44 +- .../web-based_protocol_handlers/index.md | 146 +- files/fr/web/api/navigator/sendbeacon/index.md | 98 +- files/fr/web/api/navigator/serviceworker/index.md | 58 +- files/fr/web/api/navigator/share/index.md | 71 +- files/fr/web/api/navigator/vibrate/index.md | 74 +- files/fr/web/api/network_information_api/index.md | 74 +- files/fr/web/api/node/appendchild/index.md | 116 +- files/fr/web/api/node/baseuri/index.md | 63 +- files/fr/web/api/node/childnodes/index.md | 127 +- files/fr/web/api/node/clonenode/index.md | 95 +- .../web/api/node/comparedocumentposition/index.md | 139 +- files/fr/web/api/node/contains/index.md | 64 +- files/fr/web/api/node/firstchild/index.md | 99 +- files/fr/web/api/node/getrootnode/index.md | 88 +- files/fr/web/api/node/haschildnodes/index.md | 90 +- files/fr/web/api/node/index.md | 448 +- files/fr/web/api/node/insertbefore/index.md | 160 +- files/fr/web/api/node/isconnected/index.md | 66 +- files/fr/web/api/node/isdefaultnamespace/index.md | 33 +- files/fr/web/api/node/isequalnode/index.md | 86 +- files/fr/web/api/node/issamenode/index.md | 107 +- files/fr/web/api/node/issupported/index.md | 91 +- files/fr/web/api/node/lastchild/index.md | 64 +- files/fr/web/api/node/lookupnamespaceuri/index.md | 14 +- files/fr/web/api/node/lookupprefix/index.md | 12 +- files/fr/web/api/node/nextsibling/index.md | 63 +- files/fr/web/api/node/nodename/index.md | 151 +- files/fr/web/api/node/nodetype/index.md | 235 +- files/fr/web/api/node/nodevalue/index.md | 131 +- files/fr/web/api/node/normalize/index.md | 27 +- files/fr/web/api/node/ownerdocument/index.md | 59 +- files/fr/web/api/node/parentelement/index.md | 45 +- files/fr/web/api/node/parentnode/index.md | 57 +- files/fr/web/api/node/previoussibling/index.md | 55 +- files/fr/web/api/node/removechild/index.md | 110 +- files/fr/web/api/node/replacechild/index.md | 82 +- files/fr/web/api/node/textcontent/index.md | 134 +- files/fr/web/api/nodefilter/acceptnode/index.md | 119 +- files/fr/web/api/nodefilter/index.md | 145 +- files/fr/web/api/nodeiterator/detach/index.md | 67 +- .../nodeiterator/expandentityreferences/index.md | 54 +- files/fr/web/api/nodeiterator/filter/index.md | 56 +- files/fr/web/api/nodeiterator/index.md | 313 +- files/fr/web/api/nodeiterator/nextnode/index.md | 55 +- .../pointerbeforereferencenode/index.md | 48 +- .../fr/web/api/nodeiterator/previousnode/index.md | 57 +- .../fr/web/api/nodeiterator/referencenode/index.md | 47 +- files/fr/web/api/nodeiterator/root/index.md | 53 +- files/fr/web/api/nodeiterator/whattoshow/index.md | 239 +- files/fr/web/api/nodelist/entries/index.md | 62 +- files/fr/web/api/nodelist/foreach/index.md | 130 +- files/fr/web/api/nodelist/index.md | 136 +- files/fr/web/api/nodelist/item/index.md | 45 +- files/fr/web/api/nodelist/keys/index.md | 63 +- files/fr/web/api/nodelist/length/index.md | 42 +- files/fr/web/api/nodelist/values/index.md | 63 +- files/fr/web/api/notification/actions/index.md | 49 +- files/fr/web/api/notification/badge/index.md | 35 +- files/fr/web/api/notification/body/index.md | 42 +- files/fr/web/api/notification/close/index.md | 72 +- files/fr/web/api/notification/data/index.md | 44 +- files/fr/web/api/notification/dir/index.md | 54 +- files/fr/web/api/notification/icon/index.md | 42 +- files/fr/web/api/notification/image/index.md | 41 +- files/fr/web/api/notification/index.md | 248 +- files/fr/web/api/notification/lang/index.md | 44 +- files/fr/web/api/notification/maxactions/index.md | 67 +- .../fr/web/api/notification/notification/index.md | 105 +- files/fr/web/api/notification/onclick/index.md | 56 +- files/fr/web/api/notification/onclose/index.md | 23 +- files/fr/web/api/notification/onerror/index.md | 44 +- files/fr/web/api/notification/onshow/index.md | 23 +- files/fr/web/api/notification/permission/index.md | 78 +- files/fr/web/api/notification/renotify/index.md | 44 +- .../api/notification/requestpermission/index.md | 96 +- .../api/notification/requireinteraction/index.md | 43 +- files/fr/web/api/notification/silent/index.md | 42 +- files/fr/web/api/notification/tag/index.md | 44 +- files/fr/web/api/notification/timestamp/index.md | 43 +- files/fr/web/api/notification/title/index.md | 41 +- files/fr/web/api/notification/vibrate/index.md | 42 +- files/fr/web/api/notificationevent/index.md | 88 +- files/fr/web/api/notifications_api/index.md | 91 +- .../using_the_notifications_api/index.md | 197 +- .../fr/web/api/notifyaudioavailableevent/index.md | 16 +- .../offlineaudiocontext/complete_event/index.md | 106 +- files/fr/web/api/offscreencanvas/index.md | 148 +- files/fr/web/api/origin/index.md | 50 +- files/fr/web/api/oscillatornode/index.md | 101 +- files/fr/web/api/page_visibility_api/index.md | 178 +- files/fr/web/api/pagetransitionevent/index.md | 73 +- .../fr/web/api/passwordcredential/iconurl/index.md | 37 +- files/fr/web/api/passwordcredential/index.md | 88 +- files/fr/web/api/passwordcredential/name/index.md | 37 +- .../web/api/passwordcredential/password/index.md | 37 +- .../passwordcredential/passwordcredential/index.md | 101 +- files/fr/web/api/payment_request_api/index.md | 202 +- files/fr/web/api/performance/clearmarks/index.md | 78 +- .../fr/web/api/performance/clearmeasures/index.md | 79 +- .../api/performance/clearresourcetimings/index.md | 65 +- files/fr/web/api/performance/getentries/index.md | 88 +- .../web/api/performance/getentriesbyname/index.md | 92 +- .../web/api/performance/getentriesbytype/index.md | 98 +- files/fr/web/api/performance/index.md | 230 +- files/fr/web/api/performance/mark/index.md | 88 +- files/fr/web/api/performance/measure/index.md | 107 +- files/fr/web/api/performance/memory/index.md | 40 +- files/fr/web/api/performance/navigation/index.md | 47 +- files/fr/web/api/performance/now/index.md | 114 +- .../onresourcetimingbufferfull/index.md | 79 +- .../resourcetimingbufferfull_event/index.md | 94 +- .../setresourcetimingbuffersize/index.md | 72 +- files/fr/web/api/performance/timeorigin/index.md | 39 +- files/fr/web/api/performance/timing/index.md | 47 +- files/fr/web/api/performance/tojson/index.md | 58 +- files/fr/web/api/performance_api/index.md | 211 +- .../using_the_performance_api/index.md | 95 +- files/fr/web/api/performance_timeline/index.md | 86 +- .../using_performance_timeline/index.md | 115 +- .../api/performanceelementtiming/element/index.md | 60 +- .../web/api/performanceelementtiming/id/index.md | 58 +- .../performanceelementtiming/identifier/index.md | 58 +- files/fr/web/api/performanceelementtiming/index.md | 95 +- .../intersectionrect/index.md | 62 +- .../api/performanceelementtiming/loadtime/index.md | 60 +- .../naturalheight/index.md | 60 +- .../performanceelementtiming/naturalwidth/index.md | 71 +- .../performanceelementtiming/rendertime/index.md | 74 +- .../api/performanceelementtiming/tojson/index.md | 63 +- .../web/api/performanceelementtiming/url/index.md | 60 +- .../fr/web/api/performanceentry/duration/index.md | 108 +- .../fr/web/api/performanceentry/entrytype/index.md | 158 +- files/fr/web/api/performanceentry/index.md | 150 +- files/fr/web/api/performanceentry/name/index.md | 145 +- .../fr/web/api/performanceentry/starttime/index.md | 96 +- files/fr/web/api/performanceentry/tojson/index.md | 75 +- files/fr/web/api/performanceeventtiming/index.md | 185 +- files/fr/web/api/performanceframetiming/index.md | 75 +- .../performancelongtasktiming/attribution/index.md | 39 +- .../fr/web/api/performancelongtasktiming/index.md | 39 +- files/fr/web/api/performancemark/index.md | 77 +- files/fr/web/api/performancemeasure/index.md | 77 +- files/fr/web/api/performancenavigation/index.md | 119 +- .../performancenavigation/redirectcount/index.md | 47 +- .../fr/web/api/performancenavigation/type/index.md | 84 +- .../domcomplete/index.md | 52 +- .../domcontentloadedeventend/index.md | 52 +- .../domcontentloadedeventstart/index.md | 52 +- .../dominteractive/index.md | 52 +- .../web/api/performancenavigationtiming/index.md | 163 +- .../loadeventend/index.md | 52 +- .../loadeventstart/index.md | 52 +- .../redirectcount/index.md | 52 +- .../performancenavigationtiming/tojson/index.md | 56 +- .../api/performancenavigationtiming/type/index.md | 78 +- .../unloadeventend/index.md | 52 +- .../unloadeventstart/index.md | 52 +- .../api/performanceobserver/disconnect/index.md | 46 +- files/fr/web/api/performanceobserver/index.md | 73 +- .../web/api/performanceobserver/observe/index.md | 82 +- .../performanceobserver/index.md | 58 +- .../api/performanceobserver/takerecords/index.md | 70 +- .../getentries/index.md | 96 +- .../getentriesbyname/index.md | 80 +- .../getentriesbytype/index.md | 74 +- .../web/api/performanceobserverentrylist/index.md | 67 +- files/fr/web/api/performancepainttiming/index.md | 87 +- .../performanceresourcetiming/connectend/index.md | 56 +- .../connectstart/index.md | 56 +- .../decodedbodysize/index.md | 54 +- .../domainlookupend/index.md | 58 +- .../domainlookupstart/index.md | 56 +- .../encodedbodysize/index.md | 64 +- .../performanceresourcetiming/fetchstart/index.md | 72 +- .../fr/web/api/performanceresourcetiming/index.md | 191 +- .../initiatortype/index.md | 64 +- .../nexthopprotocol/index.md | 56 +- .../performanceresourcetiming/redirectend/index.md | 58 +- .../redirectstart/index.md | 58 +- .../requeststart/index.md | 58 +- .../performanceresourcetiming/responseend/index.md | 56 +- .../responsestart/index.md | 56 +- .../secureconnectionstart/index.md | 57 +- .../servertiming/index.md | 43 +- .../api/performanceresourcetiming/tojson/index.md | 56 +- .../transfersize/index.md | 64 +- .../performanceresourcetiming/workerstart/index.md | 56 +- .../performanceservertiming/description/index.md | 45 +- .../api/performanceservertiming/duration/index.md | 45 +- files/fr/web/api/performanceservertiming/index.md | 96 +- .../web/api/performanceservertiming/name/index.md | 43 +- .../api/performanceservertiming/tojson/index.md | 48 +- .../web/api/performancetiming/connectend/index.md | 47 +- .../api/performancetiming/connectstart/index.md | 47 +- .../api/performancetiming/domainlookupend/index.md | 47 +- .../performancetiming/domainlookupstart/index.md | 47 +- .../web/api/performancetiming/domcomplete/index.md | 47 +- .../domcontentloadedeventend/index.md | 47 +- .../domcontentloadedeventstart/index.md | 47 +- .../api/performancetiming/dominteractive/index.md | 52 +- .../web/api/performancetiming/domloading/index.md | 47 +- .../web/api/performancetiming/fetchstart/index.md | 47 +- files/fr/web/api/performancetiming/index.md | 179 +- .../api/performancetiming/loadeventend/index.md | 47 +- .../api/performancetiming/loadeventstart/index.md | 47 +- .../api/performancetiming/navigationstart/index.md | 47 +- .../web/api/performancetiming/redirectend/index.md | 47 +- .../api/performancetiming/redirectstart/index.md | 47 +- .../api/performancetiming/requeststart/index.md | 47 +- .../web/api/performancetiming/responseend/index.md | 47 +- .../api/performancetiming/responsestart/index.md | 47 +- .../secureconnectionstart/index.md | 47 +- .../api/performancetiming/unloadeventend/index.md | 47 +- .../performancetiming/unloadeventstart/index.md | 47 +- files/fr/web/api/periodicwave/index.md | 61 +- files/fr/web/api/permissions_api/index.md | 95 +- files/fr/web/api/plugin/index.md | 83 +- files/fr/web/api/pointer_events/index.md | 471 +- .../pointer_events/pinch_zoom_gestures/index.md | 151 +- files/fr/web/api/pointer_lock_api/index.md | 206 +- files/fr/web/api/pointerevent/index.md | 251 +- .../positionoptions/enablehighaccuracy/index.md | 42 +- files/fr/web/api/positionoptions/index.md | 59 +- .../fr/web/api/positionoptions/maximumage/index.md | 42 +- files/fr/web/api/positionoptions/timeout/index.md | 44 +- files/fr/web/api/processinginstruction/index.md | 32 +- files/fr/web/api/proximity_events/index.md | 85 +- files/fr/web/api/publickeycredential/index.md | 76 +- files/fr/web/api/push_api/index.md | 119 +- files/fr/web/api/pushevent/index.md | 82 +- files/fr/web/api/queuemicrotask/index.md | 109 +- .../api/range/createcontextualfragment/index.md | 65 +- files/fr/web/api/range/detach/index.md | 53 +- files/fr/web/api/range/extractcontents/index.md | 67 +- files/fr/web/api/range/index.md | 186 +- files/fr/web/api/range/insertnode/index.md | 63 +- files/fr/web/api/range/selectnode/index.md | 60 +- files/fr/web/api/range/setstart/index.md | 67 +- files/fr/web/api/range/surroundcontents/index.md | 83 +- files/fr/web/api/request/credentials/index.md | 67 +- files/fr/web/api/request/index.md | 239 +- files/fr/web/api/request/mode/index.md | 67 +- files/fr/web/api/request/request/index.md | 179 +- files/fr/web/api/resize_observer_api/index.md | 79 +- files/fr/web/api/response/index.md | 181 +- files/fr/web/api/response/ok/index.md | 75 +- files/fr/web/api/rtciceserver/index.md | 112 +- files/fr/web/api/rtcpeerconnection/index.md | 428 +- .../rtcpeerconnection/setconfiguration/index.md | 109 +- files/fr/web/api/screen_capture_api/index.md | 149 +- .../audioprocess_event/index.md | 180 +- files/fr/web/api/selection/collapse/index.md | 67 +- files/fr/web/api/selection/index.md | 178 +- files/fr/web/api/selection/tostring/index.md | 49 +- files/fr/web/api/selection/type/index.md | 62 +- files/fr/web/api/server-sent_events/index.md | 46 +- .../using_server-sent_events/index.md | 153 +- files/fr/web/api/service_worker_api/index.md | 277 +- .../using_service_workers/index.md | 410 +- files/fr/web/api/serviceworker/index.md | 101 +- .../web/api/serviceworker/onstatechange/index.md | 51 +- .../getregistration/index.md | 54 +- files/fr/web/api/serviceworkercontainer/index.md | 113 +- .../api/serviceworkercontainer/register/index.md | 135 +- files/fr/web/api/serviceworkerglobalscope/index.md | 197 +- .../onnotificationclick/index.md | 55 +- .../api/serviceworkerregistration/active/index.md | 59 +- .../getnotifications/index.md | 71 +- .../fr/web/api/serviceworkerregistration/index.md | 163 +- .../api/serviceworkerregistration/scope/index.md | 49 +- .../shownotification/index.md | 132 +- files/fr/web/api/settimeout/index.md | 321 +- .../fr/web/api/shadowroot/delegatesfocus/index.md | 32 +- files/fr/web/api/shadowroot/host/index.md | 53 +- files/fr/web/api/shadowroot/index.md | 117 +- files/fr/web/api/shadowroot/innerhtml/index.md | 31 +- files/fr/web/api/shadowroot/mode/index.md | 55 +- files/fr/web/api/sharedworker/index.md | 112 +- files/fr/web/api/sharedworker/port/index.md | 57 +- .../fr/web/api/sharedworker/sharedworker/index.md | 100 +- .../applicationcache/index.md | 38 +- files/fr/web/api/sharedworkerglobalscope/index.md | 207 +- .../api/sharedworkerglobalscope/onconnect/index.md | 59 +- files/fr/web/api/speechrecognition/index.md | 193 +- files/fr/web/api/speechsynthesisutterance/index.md | 173 +- files/fr/web/api/storage/clear/index.md | 59 +- files/fr/web/api/storage/getitem/index.md | 64 +- files/fr/web/api/storage/index.md | 89 +- files/fr/web/api/storage/key/index.md | 86 +- files/fr/web/api/storage/length/index.md | 69 +- files/fr/web/api/storage/removeitem/index.md | 81 +- files/fr/web/api/storage/setitem/index.md | 91 +- files/fr/web/api/storage_api/index.md | 141 +- files/fr/web/api/storageestimate/index.md | 55 +- files/fr/web/api/storagemanager/estimate/index.md | 81 +- files/fr/web/api/storagemanager/index.md | 45 +- files/fr/web/api/storagemanager/persist/index.md | 55 +- files/fr/web/api/storagemanager/persisted/index.md | 55 +- files/fr/web/api/streams_api/index.md | 181 +- files/fr/web/api/stylesheet/disabled/index.md | 24 +- files/fr/web/api/stylesheet/href/index.md | 58 +- files/fr/web/api/stylesheet/index.md | 73 +- files/fr/web/api/stylesheet/media/index.md | 30 +- files/fr/web/api/stylesheet/ownernode/index.md | 42 +- .../web/api/stylesheet/parentstylesheet/index.md | 29 +- files/fr/web/api/stylesheet/title/index.md | 16 +- files/fr/web/api/stylesheet/type/index.md | 18 +- files/fr/web/api/stylesheetlist/index.md | 14 +- files/fr/web/api/subtlecrypto/digest/index.md | 136 +- files/fr/web/api/subtlecrypto/index.md | 476 +- files/fr/web/api/svgaelement/index.md | 120 +- files/fr/web/api/svgdescelement/index.md | 51 +- files/fr/web/api/svgelement/index.md | 170 +- files/fr/web/api/svgmatrix/index.md | 481 +- files/fr/web/api/svgrect/index.md | 138 +- files/fr/web/api/svgrectelement/index.md | 81 +- files/fr/web/api/svgtitleelement/index.md | 90 +- files/fr/web/api/syncmanager/index.md | 47 +- files/fr/web/api/text/index.md | 146 +- files/fr/web/api/text/splittext/index.md | 95 +- files/fr/web/api/textencoder/index.md | 121 +- files/fr/web/api/textencoder/textencoder/index.md | 64 +- files/fr/web/api/textmetrics/index.md | 107 +- files/fr/web/api/textmetrics/width/index.md | 65 +- files/fr/web/api/timeranges/index.md | 69 +- files/fr/web/api/touch_events/index.md | 179 +- .../index.md | 69 +- files/fr/web/api/transferable/index.md | 83 +- files/fr/web/api/transitionevent/index.md | 73 +- files/fr/web/api/treewalker/currentnode/index.md | 65 +- .../api/treewalker/expandentityreferences/index.md | 66 +- files/fr/web/api/treewalker/filter/index.md | 53 +- files/fr/web/api/treewalker/firstchild/index.md | 61 +- files/fr/web/api/treewalker/index.md | 329 +- files/fr/web/api/treewalker/lastchild/index.md | 63 +- files/fr/web/api/treewalker/nextnode/index.md | 62 +- files/fr/web/api/treewalker/nextsibling/index.md | 52 +- files/fr/web/api/treewalker/parentnode/index.md | 62 +- files/fr/web/api/treewalker/previousnode/index.md | 62 +- .../fr/web/api/treewalker/previoussibling/index.md | 62 +- files/fr/web/api/treewalker/root/index.md | 62 +- files/fr/web/api/treewalker/whattoshow/index.md | 158 +- files/fr/web/api/uievent/detail/index.md | 39 +- files/fr/web/api/uievent/index.md | 161 +- files/fr/web/api/uievent/layerx/index.md | 85 +- files/fr/web/api/url/createobjecturl/index.md | 117 +- files/fr/web/api/url/hash/index.md | 58 +- files/fr/web/api/url/index.md | 241 +- files/fr/web/api/url/protocol/index.md | 55 +- files/fr/web/api/url/revokeobjecturl/index.md | 63 +- files/fr/web/api/url/search/index.md | 67 +- files/fr/web/api/url/searchparams/index.md | 59 +- files/fr/web/api/url/tojson/index.md | 50 +- files/fr/web/api/url/tostring/index.md | 66 +- files/fr/web/api/url/url/index.md | 98 +- files/fr/web/api/urlsearchparams/entries/index.md | 64 +- files/fr/web/api/urlsearchparams/index.md | 146 +- files/fr/web/api/usvstring/index.md | 35 +- files/fr/web/api/vibration_api/index.md | 81 +- files/fr/web/api/videotrack/id/index.md | 41 +- files/fr/web/api/videotrack/index.md | 93 +- files/fr/web/api/vrdisplaycapabilities/index.md | 91 +- files/fr/web/api/web_animations_api/index.md | 99 +- .../basic_concepts_behind_web_audio_api/index.md | 609 +- files/fr/web/api/web_audio_api/index.md | 493 +- .../api/web_audio_api/using_web_audio_api/index.md | 215 +- .../visualizations_with_web_audio_api/index.md | 196 +- .../web_audio_spatialization_basics/index.md | 162 +- files/fr/web/api/web_speech_api/index.md | 184 +- .../using_the_web_speech_api/index.md | 307 +- files/fr/web/api/web_storage_api/index.md | 95 +- .../using_the_web_storage_api/index.md | 188 +- .../index.md | 556 +- files/fr/web/api/web_workers_api/index.md | 151 +- .../structured_clone_algorithm/index.md | 176 +- .../api/web_workers_api/using_web_workers/index.md | 441 +- files/fr/web/api/webgl2renderingcontext/index.md | 480 +- .../webgl_api/by_example/basic_scissoring/index.md | 45 +- .../webgl_api/by_example/boilerplate_1/index.md | 65 +- .../by_example/canvas_size_and_webgl/index.md | 45 +- .../by_example/clearing_by_clicking/index.md | 45 +- .../by_example/clearing_with_colors/index.md | 45 +- .../webgl_api/by_example/color_masking/index.md | 53 +- .../api/webgl_api/by_example/detect_webgl/index.md | 37 +- .../api/webgl_api/by_example/hello_glsl/index.md | 68 +- .../by_example/hello_vertex_attributes/index.md | 66 +- files/fr/web/api/webgl_api/by_example/index.md | 86 +- .../by_example/raining_rectangles/index.md | 64 +- .../by_example/scissor_animation/index.md | 64 +- .../by_example/simple_color_animation/index.md | 45 +- .../by_example/textures_from_code/index.md | 61 +- .../webgl_api/by_example/video_textures/index.md | 12 +- files/fr/web/api/webgl_api/data/index.md | 38 +- files/fr/web/api/webgl_api/index.md | 391 +- .../adding_2d_content_to_a_webgl_context/index.md | 443 +- .../tutorial/animating_objects_with_webgl/index.md | 63 +- .../tutorial/animating_textures_in_webgl/index.md | 72 +- .../creating_3d_objects_using_webgl/index.md | 128 +- .../tutorial/getting_started_with_webgl/index.md | 54 +- files/fr/web/api/webgl_api/tutorial/index.md | 46 +- .../webgl_api/tutorial/lighting_in_webgl/index.md | 105 +- .../using_shaders_to_apply_color_in_webgl/index.md | 178 +- .../tutorial/using_textures_in_webgl/index.md | 434 +- files/fr/web/api/webgl_api/types/index.md | 266 +- files/fr/web/api/webglbuffer/index.md | 73 +- files/fr/web/api/webglframebuffer/index.md | 76 +- files/fr/web/api/webglprogram/index.md | 118 +- .../webglrenderingcontext/activetexture/index.md | 95 +- .../webglrenderingcontext/attachshader/index.md | 119 +- .../api/webglrenderingcontext/bindbuffer/index.md | 176 +- .../api/webglrenderingcontext/bindtexture/index.md | 154 +- .../api/webglrenderingcontext/bufferdata/index.md | 259 +- .../web/api/webglrenderingcontext/canvas/index.md | 83 +- .../web/api/webglrenderingcontext/clear/index.md | 107 +- .../webglrenderingcontext/compileshader/index.md | 99 +- .../webglrenderingcontext/createbuffer/index.md | 84 +- .../webglrenderingcontext/createprogram/index.md | 89 +- .../webglrenderingcontext/createshader/index.md | 100 +- .../webglrenderingcontext/createtexture/index.md | 84 +- .../webglrenderingcontext/deletebuffer/index.md | 84 +- .../webglrenderingcontext/deleteshader/index.md | 68 +- .../api/webglrenderingcontext/drawarrays/index.md | 133 +- .../web/api/webglrenderingcontext/enable/index.md | 193 +- .../enablevertexattribarray/index.md | 119 +- .../webglrenderingcontext/generatemipmap/index.md | 131 +- .../getattriblocation/index.md | 67 +- .../api/webglrenderingcontext/geterror/index.md | 136 +- .../getshaderparameter/index.md | 108 +- .../webglrenderingcontext/gettexparameter/index.md | 378 +- .../getuniformlocation/index.md | 152 +- files/fr/web/api/webglrenderingcontext/index.md | 668 +- .../api/webglrenderingcontext/isbuffer/index.md | 86 +- .../webglrenderingcontext/shadersource/index.md | 86 +- .../api/webglrenderingcontext/teximage2d/index.md | 428 +- .../webglrenderingcontext/texparameter/index.md | 292 +- .../web/api/webglrenderingcontext/uniform/index.md | 153 +- .../webglrenderingcontext/uniformmatrix/index.md | 101 +- .../api/webglrenderingcontext/useprogram/index.md | 87 +- .../vertexattribpointer/index.md | 270 +- .../api/webglrenderingcontext/viewport/index.md | 109 +- files/fr/web/api/webglshader/index.md | 116 +- files/fr/web/api/webgltexture/index.md | 94 +- files/fr/web/api/webrtc_api/connectivity/index.md | 44 +- files/fr/web/api/webrtc_api/index.md | 352 +- .../web/api/webrtc_api/session_lifetime/index.md | 26 +- .../signaling_and_video_calling/index.md | 392 +- .../api/webrtc_api/taking_still_photos/index.md | 144 +- files/fr/web/api/websocket/binarytype/index.md | 40 +- files/fr/web/api/websocket/bufferedamount/index.md | 22 +- files/fr/web/api/websocket/close/index.md | 66 +- files/fr/web/api/websocket/close_event/index.md | 84 +- files/fr/web/api/websocket/error_event/index.md | 71 +- files/fr/web/api/websocket/extensions/index.md | 22 +- files/fr/web/api/websocket/index.md | 177 +- files/fr/web/api/websocket/message_event/index.md | 73 +- files/fr/web/api/websocket/onclose/index.md | 23 +- files/fr/web/api/websocket/onerror/index.md | 31 +- files/fr/web/api/websocket/onmessage/index.md | 23 +- files/fr/web/api/websocket/onopen/index.md | 23 +- files/fr/web/api/websocket/open_event/index.md | 73 +- files/fr/web/api/websocket/protocol/index.md | 22 +- files/fr/web/api/websocket/readystate/index.md | 22 +- files/fr/web/api/websocket/send/index.md | 81 +- files/fr/web/api/websocket/url/index.md | 22 +- files/fr/web/api/websocket/websocket/index.md | 44 +- files/fr/web/api/websockets_api/index.md | 166 +- .../writing_a_websocket_server_in_java/index.md | 206 +- .../writing_websocket_client_applications/index.md | 167 +- .../writing_websocket_servers/index.md | 297 +- files/fr/web/api/webvr_api/index.md | 169 +- .../using_vr_controllers_with_webvr/index.md | 204 +- files/fr/web/api/webvtt_api/index.md | 1223 ++- files/fr/web/api/webxr_device_api/index.md | 343 +- files/fr/web/api/wheelevent/deltax/index.md | 58 +- files/fr/web/api/wheelevent/deltay/index.md | 58 +- files/fr/web/api/wheelevent/deltaz/index.md | 58 +- files/fr/web/api/wheelevent/index.md | 184 +- files/fr/web/api/window/afterprint_event/index.md | 75 +- files/fr/web/api/window/alert/index.md | 63 +- files/fr/web/api/window/applicationcache/index.md | 31 +- files/fr/web/api/window/back/index.md | 46 +- files/fr/web/api/window/beforeprint_event/index.md | 85 +- .../fr/web/api/window/beforeunload_event/index.md | 176 +- files/fr/web/api/window/blur/index.md | 41 +- .../web/api/window/cancelanimationframe/index.md | 54 +- .../fr/web/api/window/cancelidlecallback/index.md | 39 +- files/fr/web/api/window/captureevents/index.md | 50 +- files/fr/web/api/window/clearimmediate/index.md | 55 +- files/fr/web/api/window/close/index.md | 63 +- files/fr/web/api/window/closed/index.md | 106 +- files/fr/web/api/window/confirm/index.md | 44 +- files/fr/web/api/window/console/index.md | 51 +- files/fr/web/api/window/content/index.md | 47 +- files/fr/web/api/window/controllers/index.md | 30 +- files/fr/web/api/window/copy_event/index.md | 83 +- files/fr/web/api/window/customelements/index.md | 69 +- files/fr/web/api/window/cut_event/index.md | 83 +- files/fr/web/api/window/defaultstatus/index.md | 40 +- .../fr/web/api/window/devicemotion_event/index.md | 118 +- .../api/window/deviceorientation_event/index.md | 59 +- files/fr/web/api/window/devicepixelratio/index.md | 44 +- files/fr/web/api/window/dialogarguments/index.md | 12 +- files/fr/web/api/window/directories/index.md | 30 +- files/fr/web/api/window/document/index.md | 40 +- .../web/api/window/domcontentloaded_event/index.md | 98 +- files/fr/web/api/window/dump/index.md | 41 +- files/fr/web/api/window/event/index.md | 39 +- files/fr/web/api/window/find/index.md | 83 +- files/fr/web/api/window/focus/index.md | 35 +- files/fr/web/api/window/frameelement/index.md | 57 +- files/fr/web/api/window/frames/index.md | 32 +- files/fr/web/api/window/fullscreen/index.md | 54 +- .../web/api/window/gamepadconnected_event/index.md | 97 +- .../api/window/gamepaddisconnected_event/index.md | 87 +- files/fr/web/api/window/getcomputedstyle/index.md | 121 +- .../api/window/getdefaultcomputedstyle/index.md | 75 +- files/fr/web/api/window/getselection/index.md | 52 +- files/fr/web/api/window/hashchange_event/index.md | 143 +- files/fr/web/api/window/history/index.md | 54 +- files/fr/web/api/window/home/index.md | 24 +- files/fr/web/api/window/index.md | 1096 ++- files/fr/web/api/window/innerheight/index.md | 83 +- files/fr/web/api/window/innerwidth/index.md | 72 +- files/fr/web/api/window/issecurecontext/index.md | 61 +- .../web/api/window/languagechange_event/index.md | 95 +- files/fr/web/api/window/length/index.md | 25 +- files/fr/web/api/window/load_event/index.md | 119 +- files/fr/web/api/window/localstorage/index.md | 106 +- files/fr/web/api/window/location/index.md | 185 +- files/fr/web/api/window/locationbar/index.md | 75 +- files/fr/web/api/window/matchmedia/index.md | 80 +- files/fr/web/api/window/menubar/index.md | 79 +- files/fr/web/api/window/message_event/index.md | 107 +- .../fr/web/api/window/messageerror_event/index.md | 91 +- files/fr/web/api/window/mozinnerscreenx/index.md | 38 +- files/fr/web/api/window/mozinnerscreeny/index.md | 38 +- files/fr/web/api/window/mozpaintcount/index.md | 24 +- files/fr/web/api/window/name/index.md | 53 +- files/fr/web/api/window/navigator/index.md | 50 +- files/fr/web/api/window/offline_event/index.md | 80 +- files/fr/web/api/window/online_event/index.md | 84 +- files/fr/web/api/window/onpaint/index.md | 27 +- files/fr/web/api/window/open/index.md | 634 +- files/fr/web/api/window/opendialog/index.md | 117 +- files/fr/web/api/window/opener/index.md | 38 +- files/fr/web/api/window/orientation/index.md | 33 +- files/fr/web/api/window/outerheight/index.md | 64 +- files/fr/web/api/window/outerwidth/index.md | 52 +- files/fr/web/api/window/pagehide_event/index.md | 83 +- files/fr/web/api/window/pageshow_event/index.md | 128 +- files/fr/web/api/window/parent/index.md | 41 +- files/fr/web/api/window/paste_event/index.md | 83 +- files/fr/web/api/window/popstate_event/index.md | 139 +- files/fr/web/api/window/postmessage/index.md | 139 +- files/fr/web/api/window/print/index.md | 42 +- files/fr/web/api/window/prompt/index.md | 78 +- .../web/api/window/rejectionhandled_event/index.md | 90 +- .../web/api/window/requestanimationframe/index.md | 82 +- .../fr/web/api/window/requestidlecallback/index.md | 104 +- files/fr/web/api/window/resizeby/index.md | 77 +- files/fr/web/api/window/screen/index.md | 43 +- files/fr/web/api/window/screenx/index.md | 46 +- files/fr/web/api/window/scroll/index.md | 44 +- files/fr/web/api/window/scrollbars/index.md | 81 +- files/fr/web/api/window/scrollby/index.md | 51 +- files/fr/web/api/window/scrollbylines/index.md | 45 +- files/fr/web/api/window/scrollbypages/index.md | 36 +- files/fr/web/api/window/scrollto/index.md | 32 +- files/fr/web/api/window/scrolly/index.md | 78 +- files/fr/web/api/window/sessionstorage/index.md | 74 +- files/fr/web/api/window/showmodaldialog/index.md | 128 +- files/fr/web/api/window/stop/index.md | 47 +- files/fr/web/api/window/storage_event/index.md | 91 +- files/fr/web/api/window/top/index.md | 46 +- files/fr/web/api/window/unload_event/index.md | 206 +- .../web/api/window/vrdisplayconnect_event/index.md | 97 +- .../api/window/vrdisplaydisconnect_event/index.md | 97 +- .../window/vrdisplaypresentchange_event/index.md | 97 +- files/fr/web/api/windowclient/focus/index.md | 59 +- files/fr/web/api/windowclient/focused/index.md | 55 +- files/fr/web/api/windowclient/index.md | 95 +- files/fr/web/api/windowclient/navigate/index.md | 47 +- .../web/api/windowclient/visibilitystate/index.md | 57 +- files/fr/web/api/windoweventhandlers/index.md | 142 +- .../api/windoweventhandlers/onafterprint/index.md | 52 +- .../api/windoweventhandlers/onbeforeprint/index.md | 60 +- .../windoweventhandlers/onbeforeunload/index.md | 41 +- .../api/windoweventhandlers/onhashchange/index.md | 132 +- .../windoweventhandlers/onlanguagechange/index.md | 55 +- .../api/windoweventhandlers/onpopstate/index.md | 48 +- .../web/api/windoweventhandlers/onunload/index.md | 70 +- .../fr/web/api/windoworworkerglobalscope/index.md | 125 +- files/fr/web/api/worker/index.md | 140 +- files/fr/web/api/worker/onmessage/index.md | 66 +- files/fr/web/api/worker/postmessage/index.md | 109 +- files/fr/web/api/worker/terminate/index.md | 58 +- files/fr/web/api/worker/worker/index.md | 90 +- .../fr/web/api/workerglobalscope/console/index.md | 44 +- files/fr/web/api/workerglobalscope/dump/index.md | 54 +- .../api/workerglobalscope/importscripts/index.md | 76 +- files/fr/web/api/workerglobalscope/index.md | 231 +- .../fr/web/api/workerglobalscope/location/index.md | 65 +- .../web/api/workerglobalscope/navigator/index.md | 63 +- .../fr/web/api/workerglobalscope/onerror/index.md | 47 +- .../workerglobalscope/onlanguagechange/index.md | 47 +- .../web/api/workerglobalscope/onoffline/index.md | 47 +- .../fr/web/api/workerglobalscope/ononline/index.md | 45 +- files/fr/web/api/workerglobalscope/self/index.md | 62 +- files/fr/web/api/workerlocation/index.md | 93 +- files/fr/web/api/xmldocument/async/index.md | 30 +- files/fr/web/api/xmldocument/index.md | 83 +- files/fr/web/api/xmldocument/load/index.md | 38 +- .../fr/web/api/xmlhttprequest/abort_event/index.md | 125 +- files/fr/web/api/xmlhttprequest/index.md | 326 +- .../api/xmlhttprequest/onreadystatechange/index.md | 55 +- files/fr/web/api/xmlhttprequest/open/index.md | 84 +- .../fr/web/api/xmlhttprequest/readystate/index.md | 130 +- files/fr/web/api/xmlhttprequest/response/index.md | 225 +- .../web/api/xmlhttprequest/responsetext/index.md | 67 +- files/fr/web/api/xmlhttprequest/send/index.md | 133 +- .../api/xmlhttprequest/setrequestheader/index.md | 66 +- files/fr/web/api/xmlhttprequest/status/index.md | 46 +- files/fr/web/api/xmlhttprequest/timeout/index.md | 47 +- .../xmlhttprequest/using_xmlhttprequest/index.md | 766 +- .../api/xmlhttprequest/withcredentials/index.md | 55 +- .../web/api/xmlhttprequest/xmlhttprequest/index.md | 54 +- .../fr/web/api/xmlhttprequesteventtarget/index.md | 69 +- .../api/xmlhttprequesteventtarget/onload/index.md | 50 +- files/fr/web/api/xmlserializer/index.md | 91 +- files/fr/web/api/xpathexpression/index.md | 12 +- .../web/api/xsltprocessor/basic_example/index.md | 83 +- .../api/xsltprocessor/browser_differences/index.md | 24 +- .../web/api/xsltprocessor/generating_html/index.md | 267 +- files/fr/web/api/xsltprocessor/index.md | 201 +- .../xsl_transformations_in_mozilla_faq/index.md | 85 +- 1498 files changed, 72480 insertions(+), 91427 deletions(-) (limited to 'files/fr/web/api') diff --git a/files/fr/web/api/abortsignal/index.md b/files/fr/web/api/abortsignal/index.md index 11a48ef3d1..e45e67e308 100644 --- a/files/fr/web/api/abortsignal/index.md +++ b/files/fr/web/api/abortsignal/index.md @@ -9,39 +9,36 @@ tags: - Reference translation_of: Web/API/AbortSignal --- -
{{APIRef("DOM")}}{{SeeCompatTable}}
+{{APIRef("DOM")}}{{SeeCompatTable}} -

L'interface AbortSignal représente un objet signal qui vous permet de communiquer avec une requête DOM (telle que Fetch) et de l'annuler si nécessaire par un objet {{domxref("AbortController")}}.

+L'interface **`AbortSignal`** représente un objet signal qui vous permet de communiquer avec une requête DOM (telle que Fetch) et de l'annuler si nécessaire par un objet {{domxref("AbortController")}}. -

Propriétés

+## Propriétés -

L'interface AbortSignal hérite des propriétés de son interface parent {{domxref("EventTarget")}}.

+_L'interface AbortSignal hérite des propriétés de son interface parent {{domxref("EventTarget")}}._ -
-
{{domxref("AbortSignal.aborted")}} {{readonlyInline}}
-
Un {{domxref("Boolean")}} (booléen) qui indique si les requêtes avec lesquelles le signal communique sont annulées (true) ou non (false).
-
+- {{domxref("AbortSignal.aborted")}} {{readonlyInline}} + - : Un {{domxref("Boolean")}} (_booléen_) qui indique si les requêtes avec lesquelles le signal communique sont annulées (`true`) ou non (`false`). -

Gestionnaire d'évènement

+### Gestionnaire d'évènement -
-
{{domxref("AbortSignal.onabort")}}
-
appelé quand un évènement {{event("abort_(dom_abort_api)", "abort")}} est lancé, c'est-à-dire quand les requêtes DOM avec lesquelles le signal communique sont annulées.
-
+- {{domxref("AbortSignal.onabort")}} + - : appelé quand un évènement {{event("abort_(dom_abort_api)", "abort")}} est lancé, c'est-à-dire quand les requêtes DOM avec lesquelles le signal communique sont annulées. -

Méthodes

+## Méthodes -

L'interface AbortSignal hérite des méthodes de son interface parent {{domxref("EventTarget")}}.

+_L'interface AbortSignal hérite des méthodes de son interface parent {{domxref("EventTarget")}}._ -

Exemples

+## Exemples -

Dans l'extrait suivant, nous visons à télécharger une vidéo en utilisant l'API Fetch.

+Dans l'extrait suivant, nous visons à télécharger une vidéo en utilisant l'[API Fetch](/fr/docs/Web/API/Fetch_API). -

Tout d'abord, nous créons un contrôleur en utilisant le constructeur {{domxref("AbortController.AbortController","AbortController()")}}, puis nous saisissons une référence associée à son objet {{domxref("AbortSignal")}} au moyen de la propriété {{domxref("AbortController.signal")}}.

+Tout d'abord, nous créons un contrôleur en utilisant le constructeur {{domxref("AbortController.AbortController","AbortController()")}}, puis nous saisissons une référence associée à son objet {{domxref("AbortSignal")}} au moyen de la propriété {{domxref("AbortController.signal")}}. -

Lorsque la  requête fetch (extraction) est lancée, nous transmettons le paramètre AbortSignal en tant qu'option dans l'objet d'options de la requête (voir {signal} ci-dessous). Cela associe le signal et le contrôleur à la requête d'extraction et nous permet de l'annuler en appelant {{domxref("AbortController.abort()")}}, comme indiqué ci-dessous dans le second écouteur d'événements.

+Lorsque la  [requête fetch](/fr/docs/Web/API/GlobalFetch/fetch) (_extraction_) est lancée, nous transmettons le paramètre `AbortSignal` en tant qu'option dans l'objet d'options de la requête (voir `{signal}` ci-dessous). Cela associe le signal et le contrôleur à la requête d'extraction et nous permet de l'annuler en appelant {{domxref("AbortController.abort()")}}, comme indiqué ci-dessous dans le second écouteur d'événements. -
var controller = new AbortController();
+```js
+var controller = new AbortController();
 var signal = controller.signal;
 
 var downloadBtn = document.querySelector('.download');
@@ -61,38 +58,24 @@ function fetchVideo() {
   }).catch(function(e) {
     reports.textContent = 'Download error: ' + e.message;
   })
-}
+} +``` -
-

Note : Lorsque abort() est appelé, la réponse fetch() rejette avec une erreur AbortError.

-
+> **Note :** Lorsque `abort()` est appelé, la réponse `fetch()` rejette avec une erreur `AbortError`. -

vous pouvez trouver un exemple de travail complet sur GitHub — voir abort-api (voir cas d'usage concret).

+vous pouvez trouver un exemple de travail complet sur GitHub — voir [abort-api](https://github.com/mdn/dom-examples/tree/master/abort-api) ([voir cas d'usage concret](https://mdn.github.io/dom-examples/abort-api/)). -

Spécifications

+## Spécifications - - - - - - - - - - - - - -
SpécificationStatusComment
{{SpecName('DOM WHATWG', '#interface-AbortSignal', 'AbortSignal')}}{{Spec2('DOM WHATWG')}}Définition initiale
+| Spécification | Status | Comment | +| ---------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | +| {{SpecName('DOM WHATWG', '#interface-AbortSignal', 'AbortSignal')}} | {{Spec2('DOM WHATWG')}} | Définition initiale | -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

{{Compat("api.AbortSignal")}}

+{{Compat("api.AbortSignal")}} -

Voir aussi

+## Voir aussi - +- [API Fetch](/fr/docs/Web/API/Fetch_API) +- [Abortable Fetch](https://developers.google.com/web/updates/2017/09/abortable-fetch) par Jake Archibald (en) diff --git a/files/fr/web/api/analysernode/analysernode/index.md b/files/fr/web/api/analysernode/analysernode/index.md index a10fd3ee15..1b030e1dbf 100644 --- a/files/fr/web/api/analysernode/analysernode/index.md +++ b/files/fr/web/api/analysernode/analysernode/index.md @@ -3,47 +3,33 @@ title: AnalyserNode() slug: Web/API/AnalyserNode/AnalyserNode translation_of: Web/API/AnalyserNode/AnalyserNode --- -

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

- -

Le constructeur AnalyserNode crée un nouvel objet {{domxref("AnalyserNode")}}.

- -

Syntax

- -
var analyserNode = new AnalyserNode(context, options)
- -

Paramètres

- -
-
context
-
Référence à un {{domxref("AudioContext")}}.
-
options {{optional_inline}}
-

Un objet avec les propriétés suivantes :

-
    -
  • fftSize: taille initiale sde la FFT pour l'analyse du domaine fréquentiel . La valeur par défaut est 2048.
    • -
  • maxDecibels: valeur maximale de puissance de la plage pour l'analyse FFT, en décibels. La valeur par défaut est -30.
    • -
  • minDecibels: valeur minimale de puissance de la plage pour l'analyse FFT, en décibels. La valeur par défaut est -100.
    • -
  • smoothingTimeConstant:  valeur de lissage pour l'analyse FFT. La valeur par défaut est 0.8
    • -
-
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API','#the-analysernode-interface','AnalyserNode')}}{{Spec2('Web Audio API')}}Première définition.
- -

Compatibilité navigateurs

- -

{{Compat("api.AnalyserNode.AnalyserNode")}}

+{{APIRef("'Web Audio API'")}}{{SeeCompatTable}} + +Le constructeur **`AnalyserNode`** crée un nouvel objet {{domxref("AnalyserNode")}}. + +## Syntax + + var analyserNode = new AnalyserNode(context, options) + +### Paramètres + +- _context_ + - : Référence à un {{domxref("AudioContext")}}. +- _options_ {{optional_inline}} + + - : Un objet avec les propriétés suivantes : + + - `fftSize`: taille initiale sde la FFT pour l'analyse du domaine fréquentiel . La valeur par défaut est 2048. + - `maxDecibels`: valeur maximale de puissance de la plage pour l'analyse FFT, en décibels. La valeur par défaut est -30. + - `minDecibels`: valeur minimale de puissance de la plage pour l'analyse FFT, en décibels. La valeur par défaut est -100. + - `smoothingTimeConstant`:  valeur de lissage pour l'analyse FFT. La valeur par défaut est 0.8 + +## Spécifications + +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- | +| {{SpecName('Web Audio API','#the-analysernode-interface','AnalyserNode')}} | {{Spec2('Web Audio API')}} | Première définition. | + +## Compatibilité navigateurs + +{{Compat("api.AnalyserNode.AnalyserNode")}} diff --git a/files/fr/web/api/analysernode/fftsize/index.md b/files/fr/web/api/analysernode/fftsize/index.md index 966bf915dd..8016e057f1 100644 --- a/files/fr/web/api/analysernode/fftsize/index.md +++ b/files/fr/web/api/analysernode/fftsize/index.md @@ -3,32 +3,32 @@ title: AnalyserNode.fftSize slug: Web/API/AnalyserNode/fftSize translation_of: Web/API/AnalyserNode/fftSize --- -

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

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

La propriété fftSize de l'objet {{ domxref("AnalyserNode") }} est un nombre entier non signé qui représente la taille de la FFT (transfomation de Fourier rapide) à utiliser pour déterminer le domaine fréquentiel.
-
- La valeur de la propriété fftSize property's doit être une puissance de 2 non nulle située dans l'intervalle compris entre 32 et 32768 ; sa valeur par défaut est 2048.

+La propriété `fftSize` de l'objet {{ domxref("AnalyserNode") }} est un nombre entier non signé qui représente la taille de la FFT ([transfomation de Fourier rapide](/en-US/docs/)) à utiliser pour déterminer le domaine fréquentiel. -
-

Note : Si la valeur n'est pas une puissance de 2, ou si elle ne se trouve pas dans l'intervalle spécifiée, l'exception INDEX_SIZE_ERR est levée.

-
+La valeur de la propriété `fftSize` property's doit être une puissance de 2 non nulle située dans l'intervalle compris entre `32` et 32768 ; sa valeur par défaut est `2048`. -

Syntaxe

+> **Note :** Si la valeur n'est pas une puissance de 2, ou si elle ne se trouve pas dans l'intervalle spécifiée, l'exception `INDEX_SIZE_ERR` est levée. -
var contexteAudio = new AudioContext();
+## Syntaxe
+
+```js
+var contexteAudio = new AudioContext();
 var analyseur = contexteAudio.createAnalyser();
 analyseur.fftSize = 2048;
-
+``` -

Valeur

+### Valeur -

Un nombre entier non signé.

+Un nombre entier non signé. -

Exemple

+## Exemple -

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  (et en particulier app.js lines 128–205).

+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)). -
var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+```js
+var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
 var analyseur = contexteAudio.createAnalyser();
 
   ...
@@ -57,7 +57,7 @@ function dessiner() {
       var largeurTranche = LARGEUR * 1.0 / tailleMemoireTampon;
       var x = 0;
 
-      for(var i = 0; i < tailleMemoireTampon; i++) {
+      for(var i = 0; i < tailleMemoireTampon; i++) {
 
         var v = tableauDonnees[i] / 128.0;
         var y = v * HAUTEUR/2;
@@ -75,31 +75,19 @@ function dessiner() {
       contexteCanvas.stroke();
     };
 
-    dessiner();
+    dessiner(); +``` -

Spécifications

+## Spécifications - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#widl-AnalyserNode-fftSize', 'fftSize')}}{{Spec2('Web Audio API')}} 
+| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | +| {{SpecName('Web Audio API', '#widl-AnalyserNode-fftSize', 'fftSize')}} | {{Spec2('Web Audio API')}} |   | -

Compatibilité navigateurs

+## Compatibilité navigateurs -

{{Compat("api.AnalyserNode.fftSize")}}

+{{Compat("api.AnalyserNode.fftSize")}} -

Voir aussi

+## Voir aussi - +- [Utiliser la Web Audio API](/fr/docs/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/analysernode/frequencybincount/index.md b/files/fr/web/api/analysernode/frequencybincount/index.md index 90a99b7f10..003229afbe 100644 --- a/files/fr/web/api/analysernode/frequencybincount/index.md +++ b/files/fr/web/api/analysernode/frequencybincount/index.md @@ -3,26 +3,28 @@ title: AnalyserNode.frequencyBinCount slug: Web/API/AnalyserNode/frequencyBinCount translation_of: Web/API/AnalyserNode/frequencyBinCount --- -

{{ APIRef("Web Audio API") }}
-
- La propriété frequencyBinCount de l'objet AnalyserNode est un nombre entier non signé équivalent à la moitié la taille de la FFT. Il correspond en général au nombre de valeurs que vous aurez à manipuler pour la visualisation.

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

Syntaxe

+La propriété **`frequencyBinCount`** de l'objet [`AnalyserNode`](/fr/docs/Web/API/AnalyserNode) est un nombre entier non signé équivalent à la moitié la taille de la FFT. Il correspond en général au nombre de valeurs que vous aurez à manipuler pour la visualisation. -
var contexteAudio = new AudioContext();
+## Syntaxe
+
+```js
+var contexteAudio = new AudioContext();
 var analyseur = contexteAudio.createAnalyser();
 var tailleMemoireTampon = analyseur.frequencyBinCount;
-
+``` -

Valeur

+### Valeur -

Un nombre entier non signé.

+Un nombre entier non signé. -

Example

+## Example -

L'exemple suivant montre comment créer simplement un  AnalyserNode avec AudioContext, puis utiliser  requestAnimationFrame et <canvas> pour collecter les données temporelles et dessiner un oscilloscopeen sortie. Pour des exemples plus complets, voir notre démo Voice-change-O-matic  (et en particulier app.js lines 128–205).

+L'exemple suivant montre comment créer simplement un  `AnalyserNode` avec [`AudioContext`](/fr/docs/Web/API/AudioContext), puis utiliser  [`requestAnimationFrame`](/fr/docs/Web/API/Window/requestAnimationFrame) et [``](/fr/docs/Web/HTML/Element/canvas) pour collecter les données temporelles et dessiner un oscilloscopeen 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)). -
var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+```js
+var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
 var analyseur = contexteAudio.createAnalyser();
 analyseur.minDecibels = -90;
 analyseur.maxDecibels = -10;
@@ -48,7 +50,7 @@ function dessiner() {
   var hauteurBarre;
   var x = 0;
 
-  for(var i = 0; i < tailleMemoireTampon; i++) {
+  for(var i = 0; i < tailleMemoireTampon; i++) {
     hauteurBarre = tableauDonnees[i];
 
     contexteCanvas.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)';
@@ -58,31 +60,19 @@ function dessiner() {
   }
 };
 
-dessiner();
+dessiner(); +``` -

Spécification

+## Spécification - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#widl-AnalyserNode-frequencyBinCount', 'frequencyBinCount')}}{{Spec2('Web Audio API')}} 
+| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- | +| {{SpecName('Web Audio API', '#widl-AnalyserNode-frequencyBinCount', 'frequencyBinCount')}} | {{Spec2('Web Audio API')}} |   | -

Compatibilité navigateurs

+## Compatibilité navigateurs -

{{Compat("api.AnalyserNode.frequencyBinCount")}}

+{{Compat("api.AnalyserNode.frequencyBinCount")}} -

Voir aussi

+## Voir aussi - +- [Utiliser la Web Audio API](/fr/docs/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/analysernode/getbytefrequencydata/index.md b/files/fr/web/api/analysernode/getbytefrequencydata/index.md index dde3750690..13b054ee57 100644 --- a/files/fr/web/api/analysernode/getbytefrequencydata/index.md +++ b/files/fr/web/api/analysernode/getbytefrequencydata/index.md @@ -3,17 +3,16 @@ title: AnalyserNode.getByteFrequencyData() slug: Web/API/AnalyserNode/getByteFrequencyData translation_of: Web/API/AnalyserNode/getByteFrequencyData --- -

{{ APIRef("Web Audio API") }}
-
- La méthode getByteFrequencyData() de l'objet AnalyserNode copie les données de fréquence dans le {{domxref("Uint8Array")}} passé en argument.

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

Si le tableau a moins d'éléments que {{domxref("AnalyserNode.frequencyBinCount")}}, les excédants sont supprimés; s'il en a davantage, les excédants sont ignorés.

-
+La méthode **`getByteFrequencyData()`** de l'objet [`AnalyserNode`](/fr/docs/Web/API/AnalyserNode) copie les données de fréquence dans le {{domxref("Uint8Array")}} passé en argument. -

Syntaxe

+Si le tableau a moins d'éléments que {{domxref("AnalyserNode.frequencyBinCount")}}, les excédants sont supprimés; s'il en a davantage, les excédants sont ignorés. -
var contexteAudio = new AudioContext();
+## Syntaxe
+
+```js
+var contexteAudio = new AudioContext();
 var analyseur = contexteAudio.createAnalyser();
 
 // Uint8Array devrait avoir la même taille que frequencyBinCount
@@ -21,17 +20,18 @@ var tableauDonnees = new Uint8Array(analyseur.frequencyBinCount);
 
 // remplit le Uint8Array avec les données retournées par la méthode getByteFrequencyData()
 analyseur.getByteFrequencyData(tableauDonnees);
-
+``` -

Retourne

+### Retourne -

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

+Un {{domxref("Uint8Array")}}. -

Exemple

+## Exemple -

L'exemple suivant montre comment créer simplement un  AnalyserNode avec AudioContext, puis utiliser  requestAnimationFrame et <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  (et en particulier app.js lines 128–205).

+L'exemple suivant montre comment créer simplement un  `AnalyserNode` avec [`AudioContext`](/fr/docs/Web/API/AudioContext), puis utiliser  [`requestAnimationFrame`](/fr/docs/Web/API/Window/requestAnimationFrame) et [``](/fr/docs/Web/HTML/Element/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)). -
var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+```js
+var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
 var analyseur = contexteAudio.createAnalyser();
 
   ...
@@ -55,7 +55,7 @@ function dessiner() {
   var hauteurBarre;
   var x = 0;
 
-  for(var i = 0; i < tailleMemoireTampon; i++) {
+  for(var i = 0; i < tailleMemoireTampon; i++) {
     hauteurBarre = tableauDonnees[i];
 
     contexteCanvas.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)';
@@ -65,39 +65,24 @@ function dessiner() {
   }
 };
 
-dessiner();
- -

Paramètres

+dessiner(); +``` -
-
array
-
Le {{domxref("Uint8Array")}} dans lequel seront copiées les données relatives à la fréquence.
-
+## Paramètres -

Spécifications

+- array + - : Le {{domxref("Uint8Array")}} dans lequel seront copiées les données relatives à la fréquence. - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#widl-AnalyserNode-getByteFrequencyData-void-Uint8Array-array', 'getByteFrequencyData()')}}{{Spec2('Web Audio API')}} 
+## Spécifications -

Compatibilité navigateurs

+| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | +| {{SpecName('Web Audio API', '#widl-AnalyserNode-getByteFrequencyData-void-Uint8Array-array', 'getByteFrequencyData()')}} | {{Spec2('Web Audio API')}} |   | -

{{Compat("api.AnalyserNode.getByteFrequencyData")}}

+## Compatibilité navigateurs -

Voir aussi

+{{Compat("api.AnalyserNode.getByteFrequencyData")}} -

Utiliser la Web Audio API

+## Voir aussi -
    -
+[Utiliser la Web Audio API](/fr/docs/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/analysernode/getbytetimedomaindata/index.md b/files/fr/web/api/analysernode/getbytetimedomaindata/index.md index 1610af5c55..7d1f2801af 100644 --- a/files/fr/web/api/analysernode/getbytetimedomaindata/index.md +++ b/files/fr/web/api/analysernode/getbytetimedomaindata/index.md @@ -3,34 +3,35 @@ title: AnalyserNode.getByteTimeDomainData() slug: Web/API/AnalyserNode/getByteTimeDomainData translation_of: Web/API/AnalyserNode/getByteTimeDomainData --- -

{{ APIRef("Mountain View APIRef Project") }}

+{{ APIRef("Mountain View APIRef Project") }} -
-

La méthode getByteTimeDomainData() de l'interface {{ domxref("AnalyserNode") }} copie les données de forme d'onde, ou du domaine temporel, dans un tableau {{domxref("Uint8Array")}} passé en paramètre.

+La méthode **`getByteTimeDomainData()`** de l'interface {{ domxref("AnalyserNode") }} copie les données de forme d'onde, ou du domaine temporel, dans un tableau {{domxref("Uint8Array")}} passé en paramètre. -

Si le tableau a moins d'éléments que la propriété {{domxref("AnalyserNode.fftSize")}}, les données en excès sont supprimées. S'il a davantage d'éléments, les éléments non utilisés sont ignorés.

-
+Si le tableau a moins d'éléments que la propriété {{domxref("AnalyserNode.fftSize")}}, les données en excès sont supprimées. S'il a davantage d'éléments, les éléments non utilisés sont ignorés. -

Syntaxe

+## Syntaxe -
var contexteAudio = new AudioContext();
+```js
+var contexteAudio = new AudioContext();
 var analyseur = contexteAudio.createAnalyser();
 
 // La taille du tableau Uint8Array doit correspondre à la valeur de la propriété fftSize
 var tableauDonnees = new Uint8Array(analyseur.fftSize);
 
 // remplit le tableau Uint8Array avec les données renvoyées par la méthode getByteTimeDomainData()
-analyseur.getByteTimeDomainData(tableauDonnees);
+analyseur.getByteTimeDomainData(tableauDonnees); +``` -

Renvoie

+### Renvoie -

Un tableau {{domxref("Uint8Array")}}.

+Un tableau {{domxref("Uint8Array")}}. -

Exemple

+## Exemple -

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  (et en particulier app.js lignes 128–205).

+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)). -
var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+```js
+var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
 var analyseur = contexteAudio.createAnalyser();
 
   ...
@@ -59,7 +60,7 @@ function dessiner() {
       var largeurBarre = WIDTH * 1.0 / tailleMemoireTampon;
       var x = 0;
 
-      for(var i = 0; i < tailleMemoireTampon; i++) {
+      for(var i = 0; i < tailleMemoireTampon; i++) {
 
         var v = tableauDonnees[i] / 128.0;
         var y = v * HAUTEUR/2;
@@ -77,38 +78,24 @@ function dessiner() {
       contexteCanvas.stroke();
     };
 
-    dessiner();
+    dessiner(); +``` -

Paramètres

+## Paramètres -
-
array
-
Le tableau {{domxref("Uint8Array")}} dans lequel les données temporelles seront copiées.
-
+- array + - : Le tableau {{domxref("Uint8Array")}} dans lequel les données temporelles seront copiées. -

Spécifications

+## Spécifications - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#widl-AnalyserNode-getByteTimeDomainData-void-Uint8Array-array', 'getByteTimeDomainData()')}}{{Spec2('Web Audio API')}} 
+| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | +| {{SpecName('Web Audio API', '#widl-AnalyserNode-getByteTimeDomainData-void-Uint8Array-array', 'getByteTimeDomainData()')}} | {{Spec2('Web Audio API')}} |   | -

Compatibilité navigateurs

+## Compatibilité navigateurs -

{{Compat("api.AnalyserNode.getByteTimeDomainData")}}

+{{Compat("api.AnalyserNode.getByteTimeDomainData")}} -

See also

+## See also - +- [Utiliser la Web Audio API](/fr/docs/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/analysernode/getfloatfrequencydata/index.md b/files/fr/web/api/analysernode/getfloatfrequencydata/index.md index fb4e6e2785..0cc626b2f2 100644 --- a/files/fr/web/api/analysernode/getfloatfrequencydata/index.md +++ b/files/fr/web/api/analysernode/getfloatfrequencydata/index.md @@ -3,17 +3,16 @@ title: AnalyserNode.getFloatFrequencyData() slug: Web/API/AnalyserNode/getFloatFrequencyData translation_of: Web/API/AnalyserNode/getFloatFrequencyData --- -

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

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

La méthode getFloatFrequencyData() de l'interface {{ domxref("AnalyserNode") }} copie les données de fréquence dans un tableau {{domxref("Float32Array")}} passé en paramètre.

+La méthode **`getFloatFrequencyData()`** de l'interface {{ domxref("AnalyserNode") }} copie les données de fréquence dans un tableau {{domxref("Float32Array")}} passé en paramètre. -

Si le tableau a moins d'éléments que la propriété {{domxref("AnalyserNode.frequencyBinCount")}}, les données en excès sont supprimées. S'il a davantage d'éléments, les éléments non utilisés sont ignorés.

-
+Si le tableau a moins d'éléments que la propriété {{domxref("AnalyserNode.frequencyBinCount")}}, les données en excès sont supprimées. S'il a davantage d'éléments, les éléments non utilisés sont ignorés. -

Syntaxe

+## Syntaxe -
var contexteAudio = new AudioContext();
+```js
+var contexteAudio = new AudioContext();
 var analyseur = contexteAudio.createAnalyser();
 
 // La taille du tableau Float32Array doit correspondre à la valeur de la propriété frequencyBinCount
@@ -21,24 +20,23 @@ var tableauDonnees = new Float32Array(analyseur.frequencyBinCount);
 
 // remplit le tableau Uint8Array avec les données renvoyées par la méthode getByteTimeDomainData()
 analyseur.getByteTimeDomainData(tableauDonnees);
-
+``` -

Paramètres

+### Paramètres -
-
array
-
{{domxref("Float32Array")}} dans lequel seront copiées les données de fréquence. Pour tout échantillon silencieux, la valeur est -Infinity.
-
+- `array` + - : {{domxref("Float32Array")}} dans lequel seront copiées les données de fréquence. Pour tout échantillon silencieux, la valeur est `-Infinity`. -

Valeur de retour

+### Valeur de retour -

undefined.

+`undefined`. -

Exemple

+## Exemple -

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  (et en particulier app.js lignes 128–205).

+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 lignes 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). -
var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+```js
+var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
 var analyseur = contexteAudio.createAnalyser();
 
   ...
@@ -60,7 +58,7 @@ function dessiner() {
   var hauteurBarre;
   var x = 0;
 
-  for(var i = 0; i < tailleMemoireTampon; i++) {
+  for(var i = 0; i < tailleMemoireTampon; i++) {
     hauteurBarre = (tableauDonnees[i] + 140)*2;
     contexteCanvas.fillStyle = 'rgb(' + Math.floor(hauteurBarre+100) + ',50,50)';
     contexteCanvas.fillRect(x, HEIGHT-hauteurBarre/2, largeurBarre, hauteurBarre/2);
@@ -68,38 +66,24 @@ function dessiner() {
   }
 };
 
-dessiner();
+dessiner(); +``` -

Paramètres

+## Paramètres -
-
array
-
Le tableau {{domxref("Float32Array")}} dans lequel seront copiées les données du domaine fréquentiel.
-
+- array + - : Le tableau {{domxref("Float32Array")}} dans lequel seront copiées les données du domaine fréquentiel. -

Spécifications

+## Spécifications - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#widl-AnalyserNode-getFloatFrequencyData-void-Float32Array-array', 'getFloatFrequencyData()')}}{{Spec2('Web Audio API')}} 
+| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | +| {{SpecName('Web Audio API', '#widl-AnalyserNode-getFloatFrequencyData-void-Float32Array-array', 'getFloatFrequencyData()')}} | {{Spec2('Web Audio API')}} |   | -

Compatibilité navigateurs

+## Compatibilité navigateurs -

{{Compat("api.AnalyserNode.getFloatFrequencyData")}}

+{{Compat("api.AnalyserNode.getFloatFrequencyData")}} -

See also

+## See also - +- [Utiliser la Web Audio API](/fr/docs/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/analysernode/getfloattimedomaindata/index.md b/files/fr/web/api/analysernode/getfloattimedomaindata/index.md index a69bb7d0b3..1388f536b1 100644 --- a/files/fr/web/api/analysernode/getfloattimedomaindata/index.md +++ b/files/fr/web/api/analysernode/getfloattimedomaindata/index.md @@ -3,17 +3,16 @@ title: AnalyserNode.getFloatTimeDomainData() slug: Web/API/AnalyserNode/getFloatTimeDomainData translation_of: Web/API/AnalyserNode/getFloatTimeDomainData --- -

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

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

La méthode getFloatTimeDomainData() de l'interface {{ domxref("AnalyserNode") }} copie les données de forme d'onde ou du domaine temporel, dans un tableau {{domxref("Float32Array")}} passé en paramètre.

+La méthode **`getFloatTimeDomainData()`** de l'interface {{ domxref("AnalyserNode") }} copie les données de forme d'onde ou du domaine temporel, dans un tableau {{domxref("Float32Array")}} passé en paramètre. -

Si le tableau a moins d'éléments que la propriété {{domxref("AnalyserNode.fftSize")}}, les données en excès sont supprimées. S'il a davantage d'éléments, les éléments non utilisés sont ignorés.

-
+Si le tableau a moins d'éléments que la propriété {{domxref("AnalyserNode.fftSize")}}, les données en excès sont supprimées. S'il a davantage d'éléments, les éléments non utilisés sont ignorés. -

Syntaxe

+## Syntaxe -
var contexteAudio = new AudioContext();
+```js
+var contexteAudio = new AudioContext();
 var analyseur = contexteAudio.createAnalyser();
 
 // La taille du tableau Float32Array doit correspondre à la valeur de la propriété fftSize
@@ -21,17 +20,18 @@ var tableauDonnees = new Float32Array(analyseur.fftSize);
 
 // remplit le tableau Float32Array avec les données renvoyées par la méthode getFloatTimeDomainData()
 analyseur.getFloatTimeDomainData(tableauDonnees);
-
+``` -

Renvoie

+### Renvoie -

Un tableau {{domxref("Float32Array")}}.

+Un tableau {{domxref("Float32Array")}}. -

Exemple

+## Exemple -

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  (et en particulier app.js lignes 128–205).

+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 lignes 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). -
var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+```js
+var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
 var analyseur = contexteAudio.createAnalyser();
 
   ...
@@ -56,7 +56,7 @@ function dessiner() {
   var largeurTranche = LARGEUR * 1.0 / tailleMemoireTampon;
   var x = 0;
 
-  for(var i = 0; i < tailleMemoireTampon; i++) {
+  for(var i = 0; i < tailleMemoireTampon; i++) {
     var v = tableauDonnees[i] * 200.0;
     var y = HAUTEUR/2 + v;
 
@@ -72,40 +72,26 @@ function dessiner() {
   contexteCanvas.stroke();
 };
 
-dessiner();
+dessiner(); +``` -

 

-

Paramètres

-
-
array
-
Un tableau {{domxref("Float32Array")}} dans lequel seront copiées les données du domaine temporel.
-
+## Paramètres -

Spécifications

+- array + - : Un tableau {{domxref("Float32Array")}} dans lequel seront copiées les données du domaine temporel. - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#widl-AnalyserNode-getFloatTimeDomainData-void-Float32Array-array', 'getFloatTimeDomainData()')}}{{Spec2('Web Audio API')}} 
+## Spécifications -

Compatibilité navigateurs

+| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- | +| {{SpecName('Web Audio API', '#widl-AnalyserNode-getFloatTimeDomainData-void-Float32Array-array', 'getFloatTimeDomainData()')}} | {{Spec2('Web Audio API')}} |   | -

{{Compat("api.AnalyserNode.getFloatTimeDomainData")}}

+## Compatibilité navigateurs -

Voir aussi

+{{Compat("api.AnalyserNode.getFloatTimeDomainData")}} - +## Voir aussi + +- [Utiliser la Web Audio API](/fr/docs/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/analysernode/index.md b/files/fr/web/api/analysernode/index.md index 217c8b7f64..26a61aa63f 100644 --- a/files/fr/web/api/analysernode/index.md +++ b/files/fr/web/api/analysernode/index.md @@ -7,99 +7,92 @@ tags: - Reference translation_of: Web/API/AnalyserNode --- -
{{APIRef("Web Audio API")}}
+{{APIRef("Web Audio API")}} -

L' interface AnalyserNode représente un noeud capable de fournir en temps réel des informations d'analyse de la fréquence et du domaine temporel. C'est un {{domxref("AudioNode")}} qui transmet le flux audio inchangé depuis l'entrée vers la sortie, mais permet de capturer les données générées pour les traiter et/ou les visualiser.

+L' interface **`AnalyserNode`\*\*** \*\*représente un noeud capable de fournir en temps réel des informations d'analyse de la fréquence et du domaine temporel. C'est un {{domxref("AudioNode")}} qui transmet le flux audio inchangé depuis l'entrée vers la sortie, mais permet de capturer les données générées pour les traiter et/ou les visualiser. -

Il a exactement une entrée et une sortie. Le noeud fonctionne même si la sortie n'est pas connectée.

+Il a exactement une entrée et une sortie. Le noeud fonctionne même si la sortie n'est pas connectée. -

Sans modifier le flux audio, le nœud permet d'obtenir la fréquence et les données temporelles associées en utilisant une transformée de Fourier rapide.

+![Sans modifier le flux audio, le nœud permet d'obtenir la fréquence et les données temporelles associées en utilisant une transformée de Fourier rapide.](fttaudiodata_en.svg) - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + +
Nombre d'entrées1
Nombre de sorties1 (mais peut ne pas être connectée)
Mode de comptage des canaux"explicit"
Nombre de canaux1
Interprétation du canal"speakers"
Nombre d'entrées1
Nombre de sorties1 (mais peut ne pas être connectée)
Mode de comptage des canaux"explicit"
Nombre de canaux1
Interprétation du canal"speakers"
-

Héritage

+## Héritage -

L'interface hérite des parents suivants:

+L'interface hérite des parents suivants: -

{{InheritanceDiagram}}

+{{InheritanceDiagram}} -

Constructeur

+## Constructeur -
-
{{domxref("AnalyserNode.AnalyserNode", "AnalyserNode()")}}
-
Crée une nouvelle instance de l'objet AnalyserNode.
-
+- {{domxref("AnalyserNode.AnalyserNode", "AnalyserNode()")}} + - : Crée une nouvelle instance de l'objet `AnalyserNode`. -

Propriétés

+## Propriétés -

Hérite des propriétés de son parent. {{domxref("AudioNode")}}.

+_Hérite des propriétés de son parent._ _{{domxref("AudioNode")}}_. -
-
{{domxref("AnalyserNode.fftSize")}}
-
Entier long non signé qui représente la taille de la FFT (transformation de Fourier rapide) qui sera utilisé pour déterminer le domaine fréquentiel.
-
{{domxref("AnalyserNode.frequencyBinCount")}} {{readonlyInline}}
-
Entier long non signé égal à la moitié fftSize. C'est en général le nombre de valeurs qu'on manipule pour la visualisation.
-
{{domxref("AnalyserNode.minDecibels")}}
-
Nombre flottant à double précision qui représente la valeur minimale de puissance dans la plage de mise à l'échelle pour l'analyse des données FFT, pour la conversion en octets non signés - cela équivaut à la valeur minimum de la plage de résultats de getByteFrequencyData().
-
{{domxref("AnalyserNode.maxDecibels")}}
-
Nombre flottant à double précision qui représente la valeur maximale de puissance dans la plage de mise à l'échelle pour l'analyse des données FFT, pour la conversion en octets non signés - cela équivaut à la valeur maximum de la plage de résultats de getByteFrequencyData().
-
{{domxref("AnalyserNode.smoothingTimeConstant")}}
-
Nombre flottant à double précision qui représente la moyenne de la trame en cours avec la dernière trame analysée - elle permet de lisser la transition entre les valeurs.
-
+- {{domxref("AnalyserNode.fftSize")}} + - : Entier long non signé qui représente la taille de la [FFT](/en-US/docs/) (transformation de Fourier rapide) qui sera utilisé pour déterminer le domaine fréquentiel. +- {{domxref("AnalyserNode.frequencyBinCount")}} {{readonlyInline}} + - : Entier long non signé égal à la moitié fftSize. C'est en général le nombre de valeurs qu'on manipule pour la visualisation. +- {{domxref("AnalyserNode.minDecibels")}} + - : Nombre flottant à double précision qui représente la valeur minimale de puissance dans la plage de mise à l'échelle pour l'analyse des données FFT, pour la conversion en octets non signés - cela équivaut à la valeur minimum de la plage de résultats de `getByteFrequencyData()`. +- {{domxref("AnalyserNode.maxDecibels")}} + - : Nombre flottant à double précision qui représente la valeur maximale de puissance dans la plage de mise à l'échelle pour l'analyse des données FFT, pour la conversion en octets non signés - cela équivaut à la valeur maximum de la plage de résultats de `getByteFrequencyData()`. +- {{domxref("AnalyserNode.smoothingTimeConstant")}} + - : Nombre flottant à double précision qui représente la moyenne de la trame en cours avec la dernière trame analysée - elle permet de lisser la transition entre les valeurs. -

Méthodes

+## Méthodes -

Hérite des propriétés de son parent, {{domxref("AudioNode")}}.

+_Hérite des propriétés de son parent,_ _{{domxref("AudioNode")}}_. -
-
{{domxref("AnalyserNode.getFloatFrequencyData()")}}
-
Copie les données de fréquence dans un tableau {{domxref("Float32Array")}} passé en paramètre.
-
+- {{domxref("AnalyserNode.getFloatFrequencyData()")}} + - : Copie les données de fréquence dans un tableau {{domxref("Float32Array")}} passé en paramètre. -
-
{{domxref("AnalyserNode.getByteFrequencyData()")}}
-
Copie les données de fréquence dans un tableau {{domxref("Uint8Array")}} passé en paramètre.
-
{{domxref("AnalyserNode.getFloatTimeDomainData()")}}
-
Copie les données de forme d'onde ou du domaine temporel dans un tableau {{domxref("Float32Array")}} passé en paramètre.
-
+ -
-
{{domxref("AnalyserNode.getByteTimeDomainData()")}}
-
Copie les données de forme d'onde ou du domaine temporel dans un tableau {{domxref("Uint8Array")}} passé en paramètre.
-
+- {{domxref("AnalyserNode.getByteFrequencyData()")}} + - : Copie les données de fréquence dans un tableau {{domxref("Uint8Array")}} passé en paramètre. +- {{domxref("AnalyserNode.getFloatTimeDomainData()")}} + - : Copie les données de forme d'onde ou du domaine temporel dans un tableau {{domxref("Float32Array")}} passé en paramètre. -

Exemples

+ -
-

Note :: Voir Visualisations avec la Web Audio API pour plus d'informations.

-
+- {{domxref("AnalyserNode.getByteTimeDomainData()")}} + - : Copie les données de forme d'onde ou du domaine temporel dans un tableau {{domxref("Uint8Array")}} passé en paramètre. -

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  (et en particulier app.js lines 128–205).

+## Exemples -
var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+> **Note :**: Voir [Visualisations avec la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API) pour plus d'informations.
+
+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 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();
 
   ...
@@ -130,7 +123,7 @@ function dessiner() {
       var sliceWidth = WIDTH * 1.0 / tailleMemoireTampon;
       var x = 0;
 
-      for(var i = 0; i < tailleMemoireTampon; i++) {
+      for(var i = 0; i < tailleMemoireTampon; i++) {
 
         var v = tableauDonnees[i] / 128.0;
         var y = v * HEIGHT/2;
@@ -148,31 +141,19 @@ function dessiner() {
       contexteCanvas.stroke();
     };
 
-    dessiner();
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Web Audio API', '#the-analysernode-interface', 'AnalyserNode')}}{{Spec2('Web Audio API')}} 
+ dessiner(); +``` + +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------ | +| {{SpecName('Web Audio API', '#the-analysernode-interface', 'AnalyserNode')}} | {{Spec2('Web Audio API')}} |   | -

Compatibilité navigateurs

+## Compatibilité navigateurs -

{{Compat("api.AnalyserNode")}}

+{{Compat("api.AnalyserNode")}} -

Voir aussi

+## Voir aussi - +- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/analysernode/maxdecibels/index.md b/files/fr/web/api/analysernode/maxdecibels/index.md index 046c1bcf64..8273d1f001 100644 --- a/files/fr/web/api/analysernode/maxdecibels/index.md +++ b/files/fr/web/api/analysernode/maxdecibels/index.md @@ -3,32 +3,32 @@ title: AnalyserNode.maxDecibels slug: Web/API/AnalyserNode/maxDecibels translation_of: Web/API/AnalyserNode/maxDecibels --- -

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

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

La propriété maxDecibels de l'objet {{ domxref("AnalyserNode") }} est un nombre  flottant à double précision représentant la puissance maximum de l'intervalle pour l'analyse des données FFT, pour une conversion vers des valeurs non signées ou des nombres flottants — en d'autres termes, elle spécifie la valeur maximum pour l'intervalle de résultats des méthodes getFloatFrequencyData() et getByteFrequencyData().

+La propriété **`maxDecibels`** de l'objet {{ domxref("AnalyserNode") }} est un nombre  flottant à double précision représentant la puissance maximum de l'intervalle pour l'analyse des données FFT, pour une conversion vers des valeurs non signées ou des nombres flottants — en d'autres termes, elle spécifie la valeur maximum pour l'intervalle de résultats des méthodes `getFloatFrequencyData()` et `getByteFrequencyData()`. -

Sa valeur par défaut est -30.

+Sa valeur par défaut est `-30`. -
-

Note : Si une valeur supérieure à AnalyserNode.maxDecibels est indiquée, une erreur INDEX_SIZE_ERR est levée.

-
+> **Note :** Si une valeur supérieure à `AnalyserNode.maxDecibels` est indiquée, une erreur `INDEX_SIZE_ERR` est levée. -

Syntaxe

+## Syntaxe -
var contexteAudio = new AudioContext();
+```js
+var contexteAudio = new AudioContext();
 var analyseur = contexteAudio.createAnalyser();
 analyseur.maxDecibels = -10;
-
+``` -

Valeur

+### Valeur -

Un nombre flottant à double précision.

+Un nombre flottant à double précision. -

Exemple

+## Exemple -

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  (et en particulier app.js lignes 128–205).

+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 lignes 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). -
var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+```js
+var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
 var analyseur = contexteAudio.createAnalyser();
 analyseur.minDecibels = -90;
 analyseur.maxDecibels = -10;
@@ -54,7 +54,7 @@ function dessiner() {
   var hauteurBarre;
   var x = 0;
 
-  for(var i = 0; i < tailleMemoireTampon; i++) {
+  for(var i = 0; i < tailleMemoireTampon; i++) {
     hauteurBarre = tableauDonnees[i];
 
     contexteCanvas.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)';
@@ -64,31 +64,19 @@ function dessiner() {
   }
 };
 
-dessiner();
+dessiner(); +``` -

Spécifications

+## Spécifications - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#widl-AnalyserNode-maxDecibels', 'maxDecibels')}}{{Spec2('Web Audio API')}} 
+| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | +| {{SpecName('Web Audio API', '#widl-AnalyserNode-maxDecibels', 'maxDecibels')}} | {{Spec2('Web Audio API')}} |   | -

Compatibilité navigateurs

+## Compatibilité navigateurs -

{{Compat("api.AnalyserNode.maxDecibels")}}

+{{Compat("api.AnalyserNode.maxDecibels")}} -

Voir aussi

+## Voir aussi - +- [Utiliser la Web Audio API](/fr/docs/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/analysernode/mindecibels/index.md b/files/fr/web/api/analysernode/mindecibels/index.md index af3c639646..c33c9be56f 100644 --- a/files/fr/web/api/analysernode/mindecibels/index.md +++ b/files/fr/web/api/analysernode/mindecibels/index.md @@ -3,32 +3,32 @@ title: AnalyserNode.minDecibels slug: Web/API/AnalyserNode/minDecibels translation_of: Web/API/AnalyserNode/minDecibels --- -

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

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

La propriété minDecibels de l'objet {{ domxref("AnalyserNode") }} est un nombre flottant à double précision représentant la puissance maximum de l'intervalle pour l'analyse des données FFT, pour une conversion vers des valeurs non signées ou des nombres flottants — en d'autres termes, elle spécifie la valeur minimum pour l'intervalle de résultats des méthodes getFloatFrequencyData() et getByteFrequencyData().

+La propriété **`minDecibels`** de l'objet {{ domxref("AnalyserNode") }} est un nombre flottant à double précision représentant la puissance maximum de l'intervalle pour l'analyse des données FFT, pour une conversion vers des valeurs non signées ou des nombres flottants — en d'autres termes, elle spécifie la valeur minimum pour l'intervalle de résultats des méthodes `getFloatFrequencyData()` et `getByteFrequencyData()`. -

Sa valeur par défaut est -100.

+Sa valeur par défaut est `-100`. -
-

Note : Si une valeur inférieure à AnalyserNode.minDecibels est indiquée, une erreur INDEX_SIZE_ERR est levée.

-
+> **Note :** Si une valeur inférieure à `AnalyserNode.minDecibels` est indiquée, une erreur `INDEX_SIZE_ERR` est levée. -

Syntaxe

+## Syntaxe -
var contexteAudio = new AudioContext();
+```js
+var contexteAudio = new AudioContext();
 var analyseur = contexteAudio.createAnalyser();
 analyseur.maxDecibels = -90;
-
+``` -

Valeur

+### Valeur -

Un nombre flottant à double précision.

+Un nombre flottant à double précision. -

Exemple

+## Exemple -

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  (et en particulier app.js lines 128–205).

+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)). -
var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+```js
+var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
 var analyseur = contexteAudio.createAnalyser();
 analyseur.minDecibels = -90;
 analyseur.maxDecibels = -10;
@@ -54,7 +54,7 @@ function dessiner() {
   var hauteurBarre;
   var x = 0;
 
-  for(var i = 0; i < tailleMemoireTampon; i++) {
+  for(var i = 0; i < tailleMemoireTampon; i++) {
     hauteurBarre = tableauDonnees[i];
 
     canvasCtx.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)';
@@ -64,31 +64,19 @@ function dessiner() {
   }
 };
 
-dessiner();
+dessiner(); +``` -

Spécifications

+## Spécifications - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#widl-AnalyserNode-maxDecibels', 'maxDecibels')}}{{Spec2('Web Audio API')}} 
+| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | +| {{SpecName('Web Audio API', '#widl-AnalyserNode-maxDecibels', 'maxDecibels')}} | {{Spec2('Web Audio API')}} |   | -

Compatibilité navigateurs

+## Compatibilité navigateurs -

{{Compat("api.AnalyserNode.minDecibels")}}

+{{Compat("api.AnalyserNode.minDecibels")}} -

See also

+## See also - +- [Utiliser la Web Audio API](/fr/docs/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/analysernode/smoothingtimeconstant/index.md b/files/fr/web/api/analysernode/smoothingtimeconstant/index.md index 5e438dd47b..627d35e4b5 100644 --- a/files/fr/web/api/analysernode/smoothingtimeconstant/index.md +++ b/files/fr/web/api/analysernode/smoothingtimeconstant/index.md @@ -3,36 +3,36 @@ title: AnalyserNode.smoothingTimeConstant slug: Web/API/AnalyserNode/smoothingTimeConstant translation_of: Web/API/AnalyserNode/smoothingTimeConstant --- -

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

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

La propriété smoothingTimeConstant de l'interface {{ domxref("AnalyserNode") }} est un nombre flottant à double précision qui représente une moyenne entre le buffer courant et le buffer précédent - elle sert à lisser la transition entre les valeurs.

+La propriété **`smoothingTimeConstant`** de l'interface {{ domxref("AnalyserNode") }} est un nombre flottant à double précision qui représente une moyenne entre le buffer courant et le buffer précédent - elle sert à lisser la transition entre les valeurs. -

La valeur est 0.8 par défaut; elle doit être comprise entre 0 et 1. Lorsqu'elle vaut 0, aucune moyenne n'est effectuée, tandis que la valeur 1 signifie que le chevauchement entre le buffer en cours et le buffer précédent est conséquent lors du calcul des valeurs, ce qui a pour effet d'adoucir le changement lors des appels {{domxref("AnalyserNode.getFloatFrequencyData")}}/{{domxref("AnalyserNode.getByteFrequencyData")}}.

+La valeur est `0.8` par défaut; elle doit être comprise entre `0` et `1`. Lorsqu'elle vaut 0, aucune moyenne n'est effectuée, tandis que la valeur 1 signifie que le chevauchement entre le buffer en cours et le buffer précédent est conséquent lors du calcul des valeurs, ce qui a pour effet d'adoucir le changement lors des appels {{domxref("AnalyserNode.getFloatFrequencyData")}}/{{domxref("AnalyserNode.getByteFrequencyData")}}. -

En termes techniques, on applique une fenêtre de Blackman pour lisser les valeurs dans le temps. La valeur par défaut convient à la plupart des cas.

+En termes techniques, on applique une [fenêtre de Blackman](http://webaudio.github.io/web-audio-api/#blackman-window) pour lisser les valeurs dans le temps. La valeur par défaut convient à la plupart des cas. -
-

Note : Si la valeur n'est pas comprise entre 0 et 1, une exception INDEX_SIZE_ERR est levée.

-
+> **Note :** Si la valeur n'est pas comprise entre 0 et 1, une exception `INDEX_SIZE_ERR` est levée. -

Syntaxe

+## Syntaxe -
var contexteAudio = new AudioContext();
+```js
+var contexteAudio = new AudioContext();
 var analyseur = contexteAudio.createAnalyser();
 analyseur.smoothingTimeConstant = 1;
-
+``` -

Valeur

+### Valeur -

Un nombre flottant à double précision.

+Un nombre flottant à double précision. -

Exemple

+## Exemple -

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  (et en particulier app.js lines 128–205).

+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)). -

Si vou sêtes curieux du fonctionnement de smoothingTimeConstant(), essayez de cloner l'exemple ci-dessous et d'affecter : analyser.smoothingTimeConstant = 0;. Vous verrez que les changements de valeur sont bien plus discordants.

+`Si vou sêtes curieux du fonctionnement de smoothingTimeConstant()`, essayez de cloner l'exemple ci-dessous et d'affecter : `analyser.smoothingTimeConstant = 0;`. Vous verrez que les changements de valeur sont bien plus discordants. -
var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+```js
+var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
 var analyseur = contexteAudio.createAnalyser();
 analyseur.minDecibels = -90;
 analyseur.maxDecibels = -10;
@@ -59,7 +59,7 @@ function dessiner() {
   var hauteurBarre;
   var x = 0;
 
-  for(var i = 0; i < tailleMemoireTampon; i++) {
+  for(var i = 0; i < tailleMemoireTampon; i++) {
     hauteurBarre = tableauDonnees[i];
 
     contexteCanvas.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)';
@@ -69,31 +69,19 @@ function dessiner() {
   }
 };
 
-dessiner();
+dessiner(); +``` -

Spécifications

+## Spécifications - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#widl-AnalyserNode-smoothingTimeConstant', 'smoothingTimeConstant')}}{{Spec2('Web Audio API')}} 
+| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- | +| {{SpecName('Web Audio API', '#widl-AnalyserNode-smoothingTimeConstant', 'smoothingTimeConstant')}} | {{Spec2('Web Audio API')}} |   | -

Compatibilité navigateurs

+## Compatibilité navigateurs -

{{Compat("api.AnalyserNode.smoothingTimeConstant")}}

+{{Compat("api.AnalyserNode.smoothingTimeConstant")}} -

Voir aussi

+## Voir aussi - +- [Utiliser la Web Audio API](/fr/docs/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/animation/index.md b/files/fr/web/api/animation/index.md index d2a3f61044..d8e34a9cdb 100644 --- a/files/fr/web/api/animation/index.md +++ b/files/fr/web/api/animation/index.md @@ -12,111 +12,92 @@ tags: - web animation api translation_of: Web/API/Animation --- -

{{ APIRef("Web Animations API") }}{{SeeCompatTable}}

- -

L'interface Animation de l'API Web Animations correspond à un lecteur d'animations et offre les commandes nécessaires au contrôle et à la chronologie d'un noeud ou d'une source d'animation.

- -

Constructeur

- -
-
{{domxref("Animation.Animation()", "Animation()")}}
-
Crée une nouvelle instance de l'objet Animation.
-
- -

Propriétés

- -
-
{{domxref("Animation.currentTime")}}
-
La valeur actuelle de temps de l'animation en millisecondes, que l'animation soit en pause ou en cours. Si l'animation ne possède pas de {{domxref("AnimationTimeline", "timeline")}}, est inactive ou n'a toujours pas été lancée, la valeur est null.
-
- -
-
{{domxref("Animation.effect")}}
-
Récupère et défini le {{domxref("KeyframeEffect")}} associé à cette animation.
-
{{domxref("Animation.finished")}} {{readOnlyInline}}
-
Retourne la Promise terminée en cours pour cette animation.
-
- -
-
{{domxref("Animation.id")}}
-
Récupère et défini le String utilisé pour identifier l'animation.
-
{{domxref("Animation.playState")}} {{readOnlyInline}}
-
Retourne une valeur énumérée qui décit l'état de lecture de l'animation.
-
- -
-
{{domxref("Animation.playbackRate")}}
-
Retourne et défini la fréquence de lecture de l'animation.
-
- -
-
{{domxref("Animation.ready")}} {{readOnlyInline}}
-
Retourne la Promise prête en cours pour l'animation.
-
- -
-
{{domxref("Animation.startTime")}}
-
Retourne et défini le moment prévu auquel la lecture de l'animation devrait commencer.
-
- -
-
{{domxref("Animation.timeline")}}
-
Retourne et défini la {{domxref("AnimationTimeline", "timeline")}} associée à cette animation.
-
- -

Gestionnaire d'événements

- -
-
{{domxref("Animation.oncancel")}}
-
Retourne et défini le gestionnaire d'événement pour l'événement cancel (annuler).
-
{{domxref("Animation.onfinish")}}
-
Retourne et défini le gestionnaire d'événement pour l'événement finish (terminer).
-
- -

Méthodes

- -
-
{{domxref("Animation.cancel()")}}
-
Supprime toutes les {{domxref("KeyframeEffect", "keyframeEffects")}} dues à cette animation et interomp la lecture.
-
- -
-
{{domxref("Animation.finish()")}}
-
Cherche la fin de l'animation, en fonction que l'animation soit en lecture normale ou inversée.
-
- -
-
{{domxref("Animation.pause()")}}
-
Suspend la lecture de l'animation.
-
- -
-
{{domxref("Animation.play()")}}
-
Démarre ou reprend la lecture de l'animation, ou redémarre l'animation au début si celle-ci est déjà terminée.
-
- -
-
{{domxref("Animation.reverse()")}}
-
Inverse la direction de lecture, en s'arrêtant au début de l'animation. Si l'animation est terminée ou annulée, elle sera jouée de la fin vers le début.
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaire
{{SpecName("Web Animations", "#the-animation-interface", "Animation")}}{{Spec2("Web Animations")}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.Animation")}}

\ No newline at end of file +{{ APIRef("Web Animations API") }}{{SeeCompatTable}} + +L'interface **`Animation`** de [l'API Web Animations](/en-US/docs/Web/API/Web_Animations_API) correspond à un lecteur d'animations et offre les commandes nécessaires au contrôle et à la chronologie d'un noeud ou d'une source d'animation. + +## Constructeur + +- {{domxref("Animation.Animation()", "Animation()")}} + - : Crée une nouvelle instance de l'objet `Animation`. + +## Propriétés + +- {{domxref("Animation.currentTime")}} + - : La valeur actuelle de temps de l'animation en millisecondes, que l'animation soit en pause ou en cours. Si l'animation ne possède pas de {{domxref("AnimationTimeline", "timeline")}}, est inactive ou n'a toujours pas été lancée, la valeur est `null`. + + + +- {{domxref("Animation.effect")}} + - : Récupère et défini le {{domxref("KeyframeEffect")}} associé à cette animation. +- {{domxref("Animation.finished")}} {{readOnlyInline}} + - : Retourne la `Promise `terminée en cours pour cette animation. + + + +- {{domxref("Animation.id")}} + - : Récupère et défini le `String` utilisé pour identifier l'animation. +- {{domxref("Animation.playState")}} {{readOnlyInline}} + - : Retourne une valeur énumérée qui décit l'état de lecture de l'animation. + + + +- {{domxref("Animation.playbackRate")}} + - : Retourne et défini la fréquence de lecture de l'animation. + + + +- {{domxref("Animation.ready")}} {{readOnlyInline}} + - : Retourne la `Promise `prête en cours pour l'animation. + + + +- {{domxref("Animation.startTime")}} + - : Retourne et défini le moment prévu auquel la lecture de l'animation devrait commencer. + + + +- {{domxref("Animation.timeline")}} + - : Retourne et défini la {{domxref("AnimationTimeline", "timeline")}} associée à cette animation. + +### Gestionnaire d'événements + +- {{domxref("Animation.oncancel")}} + - : Retourne et défini le gestionnaire d'événement pour l'événement `cancel `(annuler). +- {{domxref("Animation.onfinish")}} + - : Retourne et défini le gestionnaire d'événement pour l'événement `finish` (terminer). + +## Méthodes + +- {{domxref("Animation.cancel()")}} + - : Supprime toutes les {{domxref("KeyframeEffect", "keyframeEffects")}} dues à cette animation et interomp la lecture. + + + +- {{domxref("Animation.finish()")}} + - : Cherche la fin de l'animation, en fonction que l'animation soit en lecture normale ou inversée. + + + +- {{domxref("Animation.pause()")}} + - : Suspend la lecture de l'animation. + + + +- {{domxref("Animation.play()")}} + - : Démarre ou reprend la lecture de l'animation, ou redémarre l'animation au début si celle-ci est déjà terminée. + + + +- {{domxref("Animation.reverse()")}} + - : Inverse la direction de lecture, en s'arrêtant au début de l'animation. Si l'animation est terminée ou annulée, elle sera jouée de la fin vers le début. + +## Spécifications + +| Spécification | État | Commentaire | +| ------------------------------------------------------------------------------------------------ | ------------------------------------ | ------------------- | +| {{SpecName("Web Animations", "#the-animation-interface", "Animation")}} | {{Spec2("Web Animations")}} | Définition initiale | + +## Compatibilité des navigateurs + +{{Compat("api.Animation")}} diff --git a/files/fr/web/api/animation/starttime/index.md b/files/fr/web/api/animation/starttime/index.md index 48d8361bf8..9ea48fff52 100644 --- a/files/fr/web/api/animation/starttime/index.md +++ b/files/fr/web/api/animation/starttime/index.md @@ -11,30 +11,25 @@ tags: translation_of: Web/API/Window/mozAnimationStartTime original_slug: Web/API/Window/mozAnimationStartTime --- -

{{APIRef("Mozilla Extensions")}}{{Non-standard_Header}}{{Obsolete_Header("Gecko42")}}

+{{APIRef("Mozilla Extensions")}}{{Non-standard_Header}}{{Obsolete_Header("Gecko42")}} -

Renvoie l'heure, en millisecondes depuis l'époque, à laquelle les animations ont commencé maintenant doivent être considérées comme ayant commencé. Cette valeur doit être utilisée à la place, par exemple, Date.now(), car cette valeur sera la même pour toutes les animations lancées dans cette fenêtre pendant cet intervalle d'actualisation, leur permettant de rester synchronisées les unes avec les autres.

+Renvoie l'heure, en millisecondes depuis l'époque, à laquelle les animations ont commencé maintenant doivent être considérées comme ayant commencé. Cette valeur doit être utilisée à la place, par exemple, [`Date.now()`](/en/JavaScript/Reference/Global_Objects/Date/now), car cette valeur sera la même pour toutes les animations lancées dans cette fenêtre pendant cet intervalle d'actualisation, leur permettant de rester synchronisées les unes avec les autres. -

Cela permet également aux animations basées sur JavaScript de rester synchronisées avec les transitions CSS et les animations SMIL déclenchées pendant le même intervalle d'actualisation.

+Cela permet également aux animations basées sur JavaScript de rester synchronisées avec les transitions CSS et les animations SMIL déclenchées pendant le même intervalle d'actualisation. -

Syntaxe

+## Syntaxe -
time = window.mozAnimationStartTime;
-
+ time = window.mozAnimationStartTime; -

Paramètres

+### Paramètres -
    -
  • time est le temps en millisecondes depuis l'époque à laquelle les animations de la fenêtre actuelle doivent être considérées comme ayant démarré.
    • -
+- _`time`_ est le temps en millisecondes depuis l'époque à laquelle les animations de la fenêtre actuelle doivent être considérées comme ayant démarré. -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

{{Compat("api.Window.mozAnimationStartTime")}}

+{{Compat("api.Window.mozAnimationStartTime")}} -

Voir également

+## Voir également -
    -
  • {{domxref("window.mozRequestAnimationFrame()")}}
    • -
  • {{domxref("window.onmozbeforepaint")}}
    • -
+- {{domxref("window.mozRequestAnimationFrame()")}} +- {{domxref("window.onmozbeforepaint")}} diff --git a/files/fr/web/api/animationevent/animationevent/index.md b/files/fr/web/api/animationevent/animationevent/index.md index aa793738cf..e8be077157 100644 --- a/files/fr/web/api/animationevent/animationevent/index.md +++ b/files/fr/web/api/animationevent/animationevent/index.md @@ -3,63 +3,45 @@ title: AnimationEvent() slug: Web/API/AnimationEvent/AnimationEvent translation_of: Web/API/AnimationEvent/AnimationEvent --- -

{{APIRef("Web Animations")}}{{SeeCompatTable}}

+{{APIRef("Web Animations")}}{{SeeCompatTable}} -

Le constructeur AnimationEvent() retourne un nouvel {{domxref("AnimationEvent")}}, représentant un évènement en relation avec une animation.

+Le constructeur **`AnimationEvent()`** retourne un nouvel {{domxref("AnimationEvent")}}, représentant un évènement en relation avec une animation. -

Syntaxe

+## Syntaxe -
animationEvent = new AnimationEvent(type, {animationName: aPropertyName,
-                                           elapsedTime  : aFloat,
-                                           pseudoElement: aPseudoElementName});
-
+ animationEvent = new AnimationEvent(type, {animationName: aPropertyName, + elapsedTime : aFloat, + pseudoElement: aPseudoElementName}); -

Paramètres

+### Paramètres -

Le constructeur AnimationEvent() constructeur hérite également des arguments de  {{domxref("Event.Event", "Event()")}}.

+*Le constructeur `AnimationEvent()` *constructeur hérite également des arguments de  _{{domxref("Event.Event", "Event()")}}._ -
-
type
-
Un {{domxref("DOMString")}} représentant le nom du type de AnimationEvent. Il est sensible à la casse (majuscule-minuscule) et peut être: 'animationstart', 'animationend', or 'animationiteration'.
-
animationName {{optional_inline}}
-
Un {{domxref("DOMString")}} contenant la valeur de  la propriété associée avec la transition.{{cssxref("animation-name")}} . Prend par défaut "".
-
elapsedTime {{optional_inline}}
-
Un float donne le montant de temps d'une application qui a fonctionné, en secondes, quand l'évenenement est déclenché, excluant le temps de pause des animations. Pour un évènement "animationstart" , elapsedTime est de 0.0 jusqu'a ce qu'il y ai une valeur négative pour une valeur {{cssxref("animation-delay")}}, dans le case où l'évenement est déclenché par elapsedTime contenant (-1 *  délais). SA valeur par défaut vaut 0.0.
-
pseudoElement {{optional_inline}}
-
Is a {{domxref("DOMString")}}, starting with "::", containing the name of the pseudo-element the animation runs on. If the animation doesn't run on a pseudo-element but on the element itself, specify an empty string: "". It defaults to "".
-
+- `type` + - : Un {{domxref("DOMString")}} représentant le nom du type de `AnimationEvent`. Il est sensible à la casse (majuscule-minuscule) et peut être: `'animationstart'`, `'animationend'`, or `'animationiteration'`. +- `animationName` {{optional_inline}} + - : Un {{domxref("DOMString")}} contenant la valeur de  la propriété associée avec la transition.{{cssxref("animation-name")}} . Prend par défaut `""`. +- `elapsedTime` {{optional_inline}} + - : Un `float` donne le montant de temps d'une application qui a fonctionné, en secondes, quand l'évenenement est déclenché, excluant le temps de pause des animations. Pour un évènement `"animationstart"` , `elapsedTime` est de `0.0` jusqu'a ce qu'il y ai une valeur négative pour une valeur {{cssxref("animation-delay")}}, dans le case où l'évenement est déclenché par `elapsedTime` contenant `(-1 * `_délais_`)`. SA valeur par défaut vaut `0.0`. +- `pseudoElement` {{optional_inline}} + - : Is a {{domxref("DOMString")}}, starting with `"::"`, containing the name of the [pseudo-element](/en-US/docs/Web/CSS/Pseudo-elements) the animation runs on. If the animation doesn't run on a pseudo-element but on the element itself, specify an empty string: `""`. It defaults to `""`. -

Return value

+### Return value -

A new {{domxref("AnimationEvent")}}, initialized per any provided options.

+A new {{domxref("AnimationEvent")}}, initialized per any provided options. -

Specifications

+## Specifications - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{ SpecName('CSS3 Animations', '#AnimationEvent-interface', 'AnimationEvent()') }}{{ Spec2('CSS3 Animations')}}Initial definition.
+| Specification | Status | Comment | +| ------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | ------------------- | +| {{ SpecName('CSS3 Animations', '#AnimationEvent-interface', 'AnimationEvent()') }} | {{ Spec2('CSS3 Animations')}} | Initial definition. | -

Browser compatibility

+## Browser compatibility -

{{Compat("api.AnimationEvent.AnimationEvent")}}

+{{Compat("api.AnimationEvent.AnimationEvent")}} -

See also

+## See also -
    -
  • Using CSS animations
    • -
  • Animation-related CSS properties and at-rules: {{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}}
    • -
  • The {{domxref("AnimationEvent")}} interface it belongs to.
    • -
+- [Using CSS animations](/en-US/docs/CSS/Using_CSS_animations) +- Animation-related CSS properties and at-rules: {{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}} +- The {{domxref("AnimationEvent")}} interface it belongs to. diff --git a/files/fr/web/api/animationevent/animationname/index.md b/files/fr/web/api/animationevent/animationname/index.md index c47cf112be..d3ff5d4520 100644 --- a/files/fr/web/api/animationevent/animationname/index.md +++ b/files/fr/web/api/animationevent/animationname/index.md @@ -10,41 +10,26 @@ tags: - Reference translation_of: Web/API/AnimationEvent/animationName --- -

{{SeeCompatTable}}{{ apiref("AnimationEvent") }}

+{{SeeCompatTable}}{{ apiref("AnimationEvent") }} -

La propriété en lecture seule AnimationEvent.animationName est une {{domxref("DOMString")}} contenant la valeur de la propriété CSS {{cssxref("animation-name")}} associée à la transition.

+La propriété en lecture seule **`AnimationEvent.animationName`** est une {{domxref("DOMString")}} contenant la valeur de la propriété CSS {{cssxref("animation-name")}} associée à la transition. -

Syntaxe

+## Syntaxe -
nom = AnimationEvent.animationName
+ nom = AnimationEvent.animationName -

Spécifications

+## Spécifications - - - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('CSS3 Animations', '#AnimationEvent-animationName', 'AnimationEvent.animationName')}}{{Spec2('CSS3 Animations')}}Première définition.
+| Spécification | Statut | Commentaires | +| -------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- | +| {{SpecName('CSS3 Animations', '#AnimationEvent-animationName', 'AnimationEvent.animationName')}} | {{Spec2('CSS3 Animations')}} | Première définition. | -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

{{Compat("api.AnimationEvent.animationName")}}

+{{Compat("api.AnimationEvent.animationName")}} -

Voir aussi

+## Voir aussi -
    -
  • Utiliser les animations CSS
    • -
  • {{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}}.
    • -
  • L'interface {{domxref("AnimationEvent")}} à laquelle elle appartient.
    • -
+- [Utiliser les animations CSS](/fr/docs/CSS/Animations_CSS) +- {{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}}. +- L'interface {{domxref("AnimationEvent")}} à laquelle elle appartient. diff --git a/files/fr/web/api/animationevent/elapsedtime/index.md b/files/fr/web/api/animationevent/elapsedtime/index.md index 2b5dcaeece..fa48fdb4e1 100644 --- a/files/fr/web/api/animationevent/elapsedtime/index.md +++ b/files/fr/web/api/animationevent/elapsedtime/index.md @@ -10,43 +10,28 @@ tags: - Reference translation_of: Web/API/AnimationEvent/elapsedTime --- -

{{SeeCompatTable}}{{ apiref("AnimationEvent") }}

+{{SeeCompatTable}}{{ apiref("AnimationEvent") }} -

Résumé

+## Résumé -

La propriété en lecture seule AnimationEvent.elapsedTime est un float indiquant la quantité de temps pendant laquelle l'animation a tournée, en secondes, quand l'évènement a été déclenché, excluant tout temps où l'animation était en pause. Pour un évènement "animationstart", elapsedTime est 0.0 sauf si {{cssxref("animation-delay")}} a une valeur négative, dans ce cas l'évènement est déclenché avec elapsedTime contenant (-1 * délai).

+La propriété en lecture seule **`AnimationEvent.elapsedTime`** est un `float` indiquant la quantité de temps pendant laquelle l'animation a tournée, en secondes, quand l'évènement a été déclenché, excluant tout temps où l'animation était en pause. Pour un évènement ` "animationstart", ``elapsedTime` est `0.0` sauf si {{cssxref("animation-delay")}} a une valeur négative, dans ce cas l'évènement est déclenché avec `elapsedTime `contenant `(-1 * `_délai_`)`. -

Syntaxe

+## Syntaxe -
temps = AnimationEvent.elapsedTime
+ temps = AnimationEvent.elapsedTime -

Spécifications

+## Spécifications - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{ SpecName('CSS3 Animations', '#AnimationEvent-elapsedTime', 'AnimationEvent.elapsedTime') }}{{ Spec2('CSS3 Animations')}}Première définition
+| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------- | +| {{ SpecName('CSS3 Animations', '#AnimationEvent-elapsedTime', 'AnimationEvent.elapsedTime') }} | {{ Spec2('CSS3 Animations')}} | Première définition | -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

{{Compat("api.AnimationEvent.elapsedTime")}}

+{{Compat("api.AnimationEvent.elapsedTime")}} -

Voir aussi

+## Voir aussi -
    -
  • Utiliser les animations CSS
    • -
  • Propriétés CSS et règles @ en relations avec les animations CSS: {{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}}.
    • -
  • L'interface {{domxref("AnimationEvent")}} à laquelle elle appartient.
    • -
+- [Utiliser les animations CSS](/fr/docs/CSS/Animations_CSS) +- Propriétés CSS et règles @ en relations avec les animations CSS: {{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}}. +- L'interface {{domxref("AnimationEvent")}} à laquelle elle appartient. diff --git a/files/fr/web/api/animationevent/index.md b/files/fr/web/api/animationevent/index.md index 9b24b82be1..a576a5d556 100644 --- a/files/fr/web/api/animationevent/index.md +++ b/files/fr/web/api/animationevent/index.md @@ -9,70 +9,46 @@ tags: - Web Animations translation_of: Web/API/AnimationEvent --- -

{{SeeCompatTable}}{{APIRef("Web Animations API")}}

+{{SeeCompatTable}}{{APIRef("Web Animations API")}} -

L'interface AnimationEvent représentent les évènements apportant des informations sur les animations CSS.

+L'interface **`AnimationEvent`** représentent les évènements apportant des informations sur les [animations CSS](/fr/docs/CSS/Animations_CSS). -

{{InheritanceDiagram}}

+{{InheritanceDiagram}} -
-
+## Constructeur -

Constructeur

+- {{domxref("AnimationEvent.AnimationEvent", "AnimationEvent()")}} + - : Créer un évènement AnimationEvent avec les paramètres spécifiés. -
-
{{domxref("AnimationEvent.AnimationEvent", "AnimationEvent()")}}
-
Créer un évènement AnimationEvent avec les paramètres spécifiés.
-
+## Propriétés -

Propriétés

+_Hérite également des propriétés de son parent {{domxref("Event")}}._ -

Hérite également des propriétés de son parent {{domxref("Event")}}.

+- {{domxref("AnimationEvent.animationName")}} {{readonlyInline}} + - : Est une {{domxref("DOMString")}} contenant la valeur de la propriété CSS {{cssxref("animation-name")}} associée à la transition. +- {{domxref("AnimationEvent.elapsedTime")}} {{readonlyInline}} + - : Est un nombre à virgule flottante, donnant le temps pendant lequel l'animation s'est déroulée, en secondes, quand l'évènement est déclenché, en excluant tous les temps de pause de l'animation. Pour un évènement `animationstart`, `elapsedTime` est à 0.0 sauf si {{cssxref("animation-delay")}} a une valeur négative. Dans ce cas, l'évènement sera déclenché avec `elapsedTime` contenant (-1 \* la valeur de `animation-delay`). +- {{domxref("AnimationEvent.pseudoElement")}} {{readonlyInline}} + - : est une {{domxref("DOMString")}}, démarrant avec '::', contenant le nom du pseudo-élément où l'animation se déroule. Si l'animation ne se déroule pas sur un pseudo-élément, mais sur un élément, la chaîne de caractères sera vide. -
-
{{domxref("AnimationEvent.animationName")}} {{readonlyInline}}
-
Est une {{domxref("DOMString")}} contenant la valeur de la propriété CSS {{cssxref("animation-name")}} associée à la transition.
-
{{domxref("AnimationEvent.elapsedTime")}} {{readonlyInline}}
-
Est un nombre à virgule flottante, donnant le temps pendant lequel l'animation s'est déroulée, en secondes, quand l'évènement est déclenché, en excluant tous les temps de pause de l'animation. Pour un évènement animationstart, elapsedTime est à 0.0 sauf si {{cssxref("animation-delay")}} a une valeur négative. Dans ce cas, l'évènement sera déclenché avec elapsedTime contenant (-1 * la valeur de animation-delay).
-
{{domxref("AnimationEvent.pseudoElement")}} {{readonlyInline}}
-
est une {{domxref("DOMString")}}, démarrant avec '::', contenant le nom du pseudo-élément où l'animation se déroule. Si l'animation ne se déroule pas sur un pseudo-élément, mais sur un élément, la chaîne de caractères sera vide.
-
+## Méthodes -

Méthodes

+_Hérite également des propriétés de son parent {{domxref("Event")}}._ -

Hérite également des propriétés de son parent {{domxref("Event")}}.

+- {{domxref("AnimationEvent.initAnimationEvent()")}} {{non-standard_inline}}{{deprecated_inline}} + - : Initialise un AnimationEvent créé avec la méthode obsolète {{domxref("Document.createEvent()", "Document.createEvent(\"AnimationEvent\")")}}. -
-
{{domxref("AnimationEvent.initAnimationEvent()")}} {{non-standard_inline}}{{deprecated_inline}}
-
Initialise un AnimationEvent créé avec la méthode obsolète {{domxref("Document.createEvent()", "Document.createEvent(\"AnimationEvent\")")}}.
-
+## Spécifications -

Spécifications

+| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- | +| {{ SpecName('CSS3 Animations', '#AnimationEvent-interface', 'AnimationEvent') }} | {{ Spec2('CSS3 Animations') }} | Première définition. | - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{ SpecName('CSS3 Animations', '#AnimationEvent-interface', 'AnimationEvent') }}{{ Spec2('CSS3 Animations') }}Première définition.
+## Compatibilité des navigateurs -

Compatibilité des navigateurs

+{{Compat("api.AnimationEvent")}} -

{{Compat("api.AnimationEvent")}}

+## Voir également -

Voir également

- -
    -
  • Utiliser les animations CSS
    • -
  • {{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}}.
    • -
+- [Utiliser les animations CSS](/fr/docs/CSS/Animations_CSS) +- {{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}}. diff --git a/files/fr/web/api/animationevent/pseudoelement/index.md b/files/fr/web/api/animationevent/pseudoelement/index.md index 9bee1cda03..1799a5b9da 100644 --- a/files/fr/web/api/animationevent/pseudoelement/index.md +++ b/files/fr/web/api/animationevent/pseudoelement/index.md @@ -9,40 +9,26 @@ tags: - Reference translation_of: Web/API/AnimationEvent/pseudoElement --- -

{{SeeCompatTable}}{{ apiref("AnimationEvent") }}

- -

La propriété en lecture seule AnimationEvent.pseudoElement est une {{domxref("DOMString")}}, commençant par '::', contenant le nom du pseudo-élément sur lequel tourne l'animation. Si l'animation ne tourne pas sur un pseudo-élément, mais sur un élément, c'est une chaîne de caractère vide : ''.

- -

Syntaxe

- -
nom = AnimationEvent.pseudoElement
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{ SpecName('CSS3 Animations', '#AnimationEvent-pseudoElement', 'AnimationEvent.pseudoElement') }}{{ Spec2('CSS3 Animations')}}Définition initiale.
-

Compatibilité des navigateurs

- -

{{Compat("api.AnimationEvent.pseudoElement")}}

- -

Voir également

- -
    -
  • Utiliser les animations CSS
    • -
  • Propriétés et règles @ en relation avec les animations CSS : {{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}}.
    • -
  • L'interface {{domxref("AnimationEvent")}} à laquelle elle est rattachée.
    • -
+{{SeeCompatTable}}{{ apiref("AnimationEvent") }} + +La propriété en lecture seule **`AnimationEvent.pseudoElement`** est une {{domxref("DOMString")}}, commençant par `'::'`, contenant le nom du [pseudo-élément](/fr/docs/CSS/Pseudo-éléments) sur lequel tourne l'animation. Si l'animation ne tourne pas sur un pseudo-élément, mais sur un élément, c'est une chaîne de caractère vide : ` ''``. ` + +## Syntaxe + + nom = AnimationEvent.pseudoElement + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- | +| {{ SpecName('CSS3 Animations', '#AnimationEvent-pseudoElement', 'AnimationEvent.pseudoElement') }} | {{ Spec2('CSS3 Animations')}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("api.AnimationEvent.pseudoElement")}} + +## Voir également + +- [Utiliser les animations CSS](/fr/docs/CSS/Animations_CSS) +- Propriétés et règles @ en relation avec les animations CSS : {{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}}. +- L'interface {{domxref("AnimationEvent")}} à laquelle elle est rattachée. diff --git a/files/fr/web/api/atob/index.md b/files/fr/web/api/atob/index.md index b7b3b16a43..d99df91aed 100644 --- a/files/fr/web/api/atob/index.md +++ b/files/fr/web/api/atob/index.md @@ -10,69 +10,40 @@ tags: translation_of: Web/API/WindowOrWorkerGlobalScope/atob original_slug: Web/API/WindowOrWorkerGlobalScope/atob --- -

{{APIRef ("HTML DOM")}}
- La fonction WindowOrWorkerGlobalScope.atob() décode une chaîne de données qui a été codée en utilisant le codage en base 64. Vous pouvez utiliser la méthode {{domxref("WindowOrWorkerGlobalScope.btoa","btoa()")}} pour encoder et transmettre des données qui pourraient causer des problèmes de communication, puis les transmettre et utiliser la méthode atob() pour décoder les données . Par exemple, vous pouvez coder, transmettre et décoder des caractères de contrôle tels que les valeurs ASCII 0 à 31.

+{{APIRef ("HTML DOM")}} +La fonction `WindowOrWorkerGlobalScope.atob()` décode une chaîne de données qui a été codée en utilisant le codage en base 64. Vous pouvez utiliser la méthode {{domxref("WindowOrWorkerGlobalScope.btoa","btoa()")}} pour encoder et transmettre des données qui pourraient causer des problèmes de communication, puis les transmettre et utiliser la méthode atob() pour décoder les données . Par exemple, vous pouvez coder, transmettre et décoder des caractères de contrôle tels que les valeurs ASCII 0 à 31. -

Pour une utilisation avec des chaînes Unicode ou UTF-8, voir cette note sur l'encodage et le décodage Base64 et cette note sur btoa().

+Pour une utilisation avec des chaînes Unicode ou UTF-8, voir [cette note sur l'encodage et le décodage Base64](/fr/docs/D%C3%A9coder_encoder_en_base64) et [cette note sur btoa()](/fr-FR/docs/Web/API/window.btoa#Unicode_Strings). -

Syntaxe

+## Syntaxe -
var donneesDecodees = scope.atob(donneesEncodees);
-
+ var donneesDecodees = scope.atob(donneesEncodees); -

Déclenche

+### Déclenche -

Déclenche une {{jsxref("DOMException")}} si la longueur de la chaîne passée en entrée n'est pas un multiple de 4.

+Déclenche une {{jsxref("DOMException")}} si la longueur de la chaîne passée en entrée n'est pas un multiple de 4. -

Exemple

+## Exemple -
donneesEncodees = window.btoa('Salut, monde'); // encode une chaîne
-donneesDecodees = window.atob(donneesEncodees); // décode la chaîne
-
+ donneesEncodees = window.btoa('Salut, monde'); // encode une chaîne + donneesDecodees = window.atob(donneesEncodees); // décode la chaîne -

Spécifications

+## Spécifications - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', 'webappapis.html#dom-btoa', 'WindowOrWorkerGlobalScope.atob()')}}{{Spec2('HTML WHATWG')}}Méthode déplacée dans le mixin WindowOrWorkerGlobalScope dans la spéc la plus récente.
{{SpecName('HTML WHATWG', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}{{Spec2('HTML WHATWG')}}Pas de changement depuis l'instantané le plus récent {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}{{Spec2('HTML5.1')}}Instantané de {{SpecName("HTML WHATWG")}}. Pas de changement.
{{SpecName("HTML5 W3C", "#dom-windowbase64-atob", "WindowBase64.atob()")}}{{Spec2('HTML5 W3C')}}Instantané de {{SpecName("HTML WHATWG")}}. Création de WindowBase64 (les propriétés se trouvaient sur la cible avant cela).
+| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | +| {{SpecName('HTML WHATWG', 'webappapis.html#dom-btoa', 'WindowOrWorkerGlobalScope.atob()')}} | {{Spec2('HTML WHATWG')}} | Méthode déplacée dans le mixin `WindowOrWorkerGlobalScope` dans la spéc la plus récente. | +| {{SpecName('HTML WHATWG', '#dom-windowbase64-atob', 'WindowBase64.atob()')}} | {{Spec2('HTML WHATWG')}} | Pas de changement depuis l'instantané le plus récent {{SpecName("HTML5.1")}}. | +| {{SpecName('HTML5.1', '#dom-windowbase64-atob', 'WindowBase64.atob()')}} | {{Spec2('HTML5.1')}} | Instantané de {{SpecName("HTML WHATWG")}}. Pas de changement. | +| {{SpecName("HTML5 W3C", "#dom-windowbase64-atob", "WindowBase64.atob()")}} | {{Spec2('HTML5 W3C')}} | Instantané de {{SpecName("HTML WHATWG")}}. Création de `WindowBase64` (les propriétés se trouvaient sur la cible avant cela). | -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

{{Compat("api.WindowOrWorkerGlobalScope.atob")}}

+{{Compat("api.WindowOrWorkerGlobalScope.atob")}} -

Voir aussi

+## Voir aussi - +- [Base64 encoding and decoding](/Web/API/WindowBase64/Base64_encoding_and_decoding) +- [Les  URL de `données`](/fr/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) +- {{domxref("WindowOrWorkerGlobalScope.btoa","window.btoa()")}} +- [Components.utils.importGlobalProperties](/fr-FR/docs/Components.utils.importGlobalProperties) diff --git a/files/fr/web/api/attr/index.md b/files/fr/web/api/attr/index.md index 8a97846bae..930c7df714 100644 --- a/files/fr/web/api/attr/index.md +++ b/files/fr/web/api/attr/index.md @@ -7,155 +7,119 @@ tags: - DOM translation_of: Web/API/Attr --- -
{{APIRef("DOM")}}
- -

Ce type représente un attribut d'un élément DOM comme un objet. Dans la plupart des méthodes DOM, vous auriez probablement récupéré l'attribut directement comme une chaîne (par exemple, {{domxref ("element.getAttribute()")}}, mais certaines fonctions (par exemple, {{domxref ("element.getAttributeNode()" )}}) ou des moyens d'itération donnent des types Attr.

- -
-

Attention : À partir de Gecko 7.0 {{geckoRelease ("7.0")}}, ceux qui vont être retirés afficheront des messages d'avertissement dans la console. Vous devriez modifier votre code en conséquence. Voir {{anch("Propriétés et méthodes dépréciées")}} pour une liste complète.

-
- -

Propriétés

- -
-
{{domxref("Attr.name", "name")}} {{readOnlyInline}}
-
Le nom de l'attribut.
-
{{domxref("Attr.namespaceURI", "namespaceURI")}} {{readOnlyInline}}
-
Une {{domxref("DOMString","Chaîne de caractères")}} représentant l'URI de l'espace nom de l'attribut ou null s'il n'y a pas d'espace nom.
-
{{domxref("Attr.localName", "localName")}} {{readOnlyInline}}
-
Une {{domxref("DOMString","Chaîne de caractères")}} représentant la partie locale du nom qualifié de l'attribut.
-
{{domxref("Attr.prefix", "prefix")}} {{readOnlyInline}}
-
Une {{domxref("DOMString","Chaîne de caractères")}} représentant le préfixe de l'espace nom de l'attribut, ou null si aucun préfixe n'est spécifié.
-
{{domxref("Attr.ownerElement", "ownerElement")}} {{readOnlyInline}}
-
L'élément contenant l'attribut.
-
- -
-

Note : DOM Niveau 4 a supprimé cette propriété . L'hypothèse était que puisque nous obtenons un objet Attr d'un {{domxref("Element")}}, nous devrions déjà connaître les éléments associés.
- Comme cela n'est pas vrai quand les objets Attr  sont retournés par {{domxref("Document.evaluate")}}, le DOM Living Standard a réintroduit la propriété.

- -

Gecko affiche une note de dépréciation à partir de Gecko 7.0 {{geckoRelease("7.0")}}. Cette note a été supprimée dans Gecko 49.0 {{geckoRelease("49.0")}}.

-
- -
-
{{domxref("Attr.specified", "specified")}} {{readOnlyInline}}
-
Cette propriété renvoie toujours la valeur true. À l'origine, elle renvoyait true si l'attribut était explicitement spécifié dans le code source ou par un script, et false si sa valeur provenait de la valeur par défaut définie dans la DTD du document.
-
{{domxref("Attr.value", "Value")}}
-
La valeur de l'attribut.
-
- -
-

Note: DOM Niveau 3 a défini namespaceURI, localName et prefix sur l'interface {{domxref("Node")}}. Dans DOM4 ils ont été déplacés vers Attr.

- -

Cette modification est implémentée dans Chrome depuis la version 46.0 et Firefox à partir de la version 48.0.

-
- -

Propriétés et méthodes dépréciées

- -

Les propriétés suivantes ont été dépréciées. Si elle est disponible, la méthode ou propriété de remplacement appropriée est fournie.

- -
-
attributes
-
Cette propriété retourne désormais toujours NULL.
-
childNodes {{obsolete_inline(14)}}
-
Cette propriété retourne désormais toujours un {{domxref("NodeList")}}  vide.
-
firstChild {{obsolete_inline(14)}}
-
Cette propriété retourne désormais toujours NULL.
-
isId {{readOnlyInline}}
-
Indique si l'attribut est un "attribut ID". Un "attribut ID" étant un attribut dont la valeur devrait être unique dans un document DOM. En HTML DOM, "id" est le seul attribut ID, mais les documents XML peuvent en définir d'autres. Qu'un attribut soit unique ou non est souvent déterminé par  un {{Glossary("DTD")}}  ou une autre description de schéma.
-
lastChild {{obsolete_inline(14)}}
-
Cette propriété retourne désormais toujours NULL.
-
nextSibling
-
Cette propriété retourne désormais toujours NULL.
-
nodeName
-
Utilisez {{domxref("Attr.name")}} à la place.
-
nodeType
-
Cette propriété retourne toujours 2. (ATTRIBUTE_NODE).
-
nodeValue
-
Utilisez {{domxref("Attr.value")}} à la place.
-
ownerDocument
-
Vous n'auriez pas dû l'utiliser en premier lieu, donc cela ne devrait pas vous ennuyer qu'il soit retiré.
-
parentNode
-
Cette propriété retourne désormais toujours NULL.
-
previousSibling
-
Cette propriété retourne désormais toujours NULL.
-
schemaTypeInfo {{obsolete_inline}} {{readOnlyInline}}
-
Les informations de type associées à cet attribut. Bien que l'information de type contenue dans cet attribut soit garantie après le chargement du document ou l'appel de {{domxref("Document.normalizeDocument")}}, cette propriété peut ne pas être fiable si le nœud a été déplacé.
-
specified
-
Cette propriété retourne désormais toujours true.
-
textContent
-
Utilisez {{domxref ("Attr.value")}} à la place.
-
- -


- Les méthodes suivantes ont été dépréciées:

- -
-
appendChild() {{obsolete_inline(14)}}
-
Modifiez à la place la valeur de {{domxref ("Attr.value")}}.
-
cloneNode()
-
Vous n'auriez pas dû l'utiliser en premier lieu, donc cela ne devrait pas vous ennuyer qu'il soit retiré.
-
createAttribute()
-
Utilisez {{domxref("Attr.setAttribute()")}} à la place.
-
createAttributeNS()
-
Utilisez {{domxref("Attr.setAttributeNS()")}} à la place.
-
getAttributeNode()
-
Utilisez {{domxref("Attr.getAttribute()")}} à la place.
-
getAttributeNodeNS()
-
Utilisez {{domxref("Attr.getAttributeNS()")}} à la place.
-
hasAttributes() {{obsolete_inline("21.0")}}
-
Cette méthode retourne désormais toujours false.
-
hasChildNodes()
-
Cette méthode retourne désormais toujours false.
-
insertBefore()
-
Modifiez à la place la valeur de {{domxref ("Attr.value")}}.
-
isSupported()
-
Vous n'auriez pas dû l'utiliser en premier lieu, donc cela ne devrait pas vous ennuyer qu'il soit retiré.
-
isEqualNode()
-
Vous n'auriez pas dû l'utiliser en premier lieu, donc cela ne devrait pas vous ennuyer qu'il soit retiré.
-
normalize()
-
Vous n'auriez pas dû l'utiliser en premier lieu, donc cela ne devrait pas vous ennuyer qu'il soit retiré.
-
removeAttributeNode()
-
Utilisez {{domxref("Attr.removeAttribute()")}} à la place.
-
removeChild() {{obsolete_inline(14)}}
-
Modifiez à la place la valeur de {{domxref("Attr.value")}}.
-
replaceChild() {{obsolete_inline(14)}}
-
Modifiez à la place la valeur de {{domxref("Attr.value")}}.
-
setAttributeNode()
-
Utilisez {{domxref("Attr.setAttribute()")}} à la place.
-
setAttributeNodeNS()
-
Utilisez {{domxref("Attr.setAttributeNS()")}} à la place.
-
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("DOM WHATWG", "#interface-attr", "Attr")}}{{Spec2("DOM WHATWG")}}Ajoute la propriété ownerElement property
{{SpecName("DOM4", "#interface-attr", "Attr")}}{{Spec2("DOM4")}}A déplacé les namespaceURI, prefix et localName de {{domxref("Node")}} vers cet API et supprimé ownerElement, schemaTypeInfo et isId.
{{SpecName("DOM3 Core", "core.html#ID-637646024", "Attr")}}{{Spec2("DOM3 Core")}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.Attr")}}

+{{APIRef("DOM")}} + +Ce type représente un attribut d'un élément DOM comme un objet. Dans la plupart des méthodes DOM, vous auriez probablement récupéré l'attribut directement comme une chaîne (par exemple, {{domxref ("element.getAttribute()")}}, mais certaines fonctions (par exemple, {{domxref ("element.getAttributeNode()" )}}) ou des moyens d'itération donnent des types Attr. + +> **Attention :** À partir de Gecko 7.0 {{geckoRelease ("7.0")}}, ceux qui vont être retirés afficheront des messages d'avertissement dans la console. Vous devriez modifier votre code en conséquence. Voir {{anch("Propriétés et méthodes dépréciées")}} pour une liste complète. + +## Propriétés + +- {{domxref("Attr.name", "name")}} {{readOnlyInline}} + - : Le nom de l'attribut. +- {{domxref("Attr.namespaceURI", "namespaceURI")}} {{readOnlyInline}} + - : Une {{domxref("DOMString","Chaîne de caractères")}} représentant l'URI de l'espace nom de l'attribut ou `null` s'il n'y a pas d'espace nom. +- {{domxref("Attr.localName", "localName")}} {{readOnlyInline}} + - : Une {{domxref("DOMString","Chaîne de caractères")}} représentant la partie locale du nom qualifié de l'attribut. +- {{domxref("Attr.prefix", "prefix")}} {{readOnlyInline}} + - : Une {{domxref("DOMString","Chaîne de caractères")}} représentant le préfixe de l'espace nom de l'attribut, ou `null` si aucun préfixe n'est spécifié. +- {{domxref("Attr.ownerElement", "ownerElement")}} {{readOnlyInline}} + - : L'élément contenant l'attribut. + +> **Note :** DOM Niveau 4 a supprimé cette propriété . L'hypothèse était que puisque nous obtenons un objet Attr d'un {{domxref("Element")}}, nous devrions déjà connaître les éléments associés. +> Comme cela n'est pas vrai quand les objets `Attr`  sont retournés par {{domxref("Document.evaluate")}}, le DOM Living Standard a réintroduit la propriété. +> +> Gecko affiche une note de dépréciation à partir de Gecko 7.0 {{geckoRelease("7.0")}}. Cette note a été supprimée dans Gecko 49.0 {{geckoRelease("49.0")}}. + +- {{domxref("Attr.specified", "specified")}} {{readOnlyInline}} + - : Cette propriété renvoie toujours la valeur `true`. À l'origine, elle renvoyait true si l'attribut était explicitement spécifié dans le code source ou par un script, et `false` si sa valeur provenait de la valeur par défaut définie dans la DTD du document. +- {{domxref("Attr.value", "Value")}} + - : La valeur de l'attribut. + +> **Note :** DOM Niveau 3 a défini `namespaceURI`, `localName` et `prefix` sur l'interface {{domxref("Node")}}. Dans DOM4 ils ont été déplacés vers `Attr`. +> +> Cette modification est implémentée dans Chrome depuis la version 46.0 et Firefox à partir de la version 48.0. + +## Propriétés et méthodes dépréciées + +Les propriétés suivantes ont été dépréciées. Si elle est disponible, la méthode ou propriété de remplacement appropriée est fournie. + +- `attributes` + - : Cette propriété retourne désormais toujours `NULL`. +- `childNodes `{{obsolete_inline(14)}} + - : Cette propriété retourne désormais toujours `un` {{domxref("NodeList")}}  vide. +- `firstChild `{{obsolete_inline(14)}} + - : Cette propriété retourne désormais toujours `NULL`. +- `isId` {{readOnlyInline}} + - : Indique si l'attribut est un "attribut ID". Un "attribut ID" étant un attribut dont la valeur devrait être unique dans un document DOM. En HTML DOM, "id" est le seul attribut ID, mais les documents XML peuvent en définir d'autres. Qu'un attribut soit unique ou non est souvent déterminé par  un {{Glossary("DTD")}}  ou une autre description de schéma. +- `lastChild `{{obsolete_inline(14)}} + - : Cette propriété retourne désormais toujours `NULL`. +- `nextSibling` + - : Cette propriété retourne désormais toujours `NULL`. +- `nodeName` + - : Utilisez {{domxref("Attr.name")}} à la place. +- `nodeType` + - : Cette propriété retourne toujours 2. (`ATTRIBUTE_NODE`). +- `nodeValue` + - : Utilisez {{domxref("Attr.value")}} à la place. +- `ownerDocument` + - : Vous n'auriez pas dû l'utiliser en premier lieu, donc cela ne devrait pas vous ennuyer qu'il soit retiré. +- `parentNode` + - : Cette propriété retourne désormais toujours NULL. +- `previousSibling` + - : Cette propriété retourne désormais toujours NULL. +- `schemaTypeInfo` {{obsolete_inline}} {{readOnlyInline}} + - : Les informations de type associées à cet attribut. Bien que l'information de type contenue dans cet attribut soit garantie après le chargement du document ou l'appel de {{domxref("Document.normalizeDocument")}}, cette propriété peut ne pas être fiable si le nœud a été déplacé. +- `specified` + - : Cette propriété retourne désormais toujours true. +- `textContent` + - : Utilisez {{domxref ("Attr.value")}} à la place. + +Les méthodes suivantes ont été dépréciées: + +- `appendChild() `{{obsolete_inline(14)}} + - : Modifiez à la place la valeur de {{domxref ("Attr.value")}}. +- `cloneNode()` + - : Vous n'auriez pas dû l'utiliser en premier lieu, donc cela ne devrait pas vous ennuyer qu'il soit retiré. +- `createAttribute()` + - : Utilisez {{domxref("Attr.setAttribute()")}} à la place. +- `createAttributeNS()` + - : Utilisez {{domxref("Attr.setAttributeNS()")}} à la place. +- `getAttributeNode()` + - : Utilisez {{domxref("Attr.getAttribute()")}} à la place. +- `getAttributeNodeNS()` + - : Utilisez {{domxref("Attr.getAttributeNS()")}} à la place. +- `hasAttributes() `{{obsolete_inline("21.0")}} + - : Cette méthode retourne désormais toujours false. +- `hasChildNodes()` + - : Cette méthode retourne désormais toujours false. +- `insertBefore()` + - : Modifiez à la place la valeur de {{domxref ("Attr.value")}}. +- `isSupported()` + - : Vous n'auriez pas dû l'utiliser en premier lieu, donc cela ne devrait pas vous ennuyer qu'il soit retiré. +- `isEqualNode()` + - : Vous n'auriez pas dû l'utiliser en premier lieu, donc cela ne devrait pas vous ennuyer qu'il soit retiré. +- `normalize()` + - : Vous n'auriez pas dû l'utiliser en premier lieu, donc cela ne devrait pas vous ennuyer qu'il soit retiré. +- `removeAttributeNode()` + - : Utilisez {{domxref("Attr.removeAttribute()")}} à la place. +- `removeChild() `{{obsolete_inline(14)}} + - : Modifiez à la place la valeur de {{domxref("Attr.value")}}. +- `replaceChild() `{{obsolete_inline(14)}} + - : Modifiez à la place la valeur de {{domxref("Attr.value")}}. +- `setAttributeNode()` + - : Utilisez {{domxref("Attr.setAttribute()")}} à la place. +- `setAttributeNodeNS()` + - : Utilisez {{domxref("Attr.setAttributeNS()")}} à la place. + +## Spécifications + +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | +| {{SpecName("DOM WHATWG", "#interface-attr", "Attr")}} | {{Spec2("DOM WHATWG")}} | Ajoute la propriété `ownerElement` property | +| {{SpecName("DOM4", "#interface-attr", "Attr")}} | {{Spec2("DOM4")}} | A déplacé les `namespaceURI`, `prefix` et `localName` de {{domxref("Node")}} vers cet API et supprimé `ownerElement`, `schemaTypeInfo` et `isId`. | +| {{SpecName("DOM3 Core", "core.html#ID-637646024", "Attr")}} | {{Spec2("DOM3 Core")}} | Définition initiale | + +## Compatibilité des navigateurs + +{{Compat("api.Attr")}} diff --git a/files/fr/web/api/attr/localname/index.md b/files/fr/web/api/attr/localname/index.md index c23a595af4..a2f6f2e717 100644 --- a/files/fr/web/api/attr/localname/index.md +++ b/files/fr/web/api/attr/localname/index.md @@ -8,78 +8,61 @@ tags: - Reference translation_of: Web/API/Attr/localName --- -
{{APIRef("DOM")}}
+{{APIRef("DOM")}} -

La propriété Attr.localName, en lecture seule, renvoie la partie locale du nom qualifié d'un élément.

+La propriété **`Attr.localName`**, en lecture seule, renvoie la partie locale du nom qualifié d'un élément. -
-

Note : Avant DOM4, cette API était définie dans l'interface {{domxref("Node")}}.

-
+> **Note :** Avant DOM4, cette API était définie dans l'interface {{domxref("Node")}}. -

Syntaxe

+## Syntaxe -
name = attribute.localName
-
+ name = attribute.localName -

Valeur renvoyée

+### Valeur renvoyée -

Une {{domxref("DOMString")}} (chaîne de caractères) qui représente la partie locale du nom qualifié de l'élément.

+Une {{domxref("DOMString")}} _(chaîne de caractères)_ qui représente la partie locale du nom qualifié de l'élément. -

Exemple

+## Exemple -

Cet exemple affiche "id" dans une  fenêtre d'alerte.

+Cet exemple affiche "id" dans une  fenêtre d'alerte. -

Contenu HTML

+### Contenu HTML -
<button id="exemple">Clique ici</button>
+```html + +``` -

Contenu JavaScript

+### Contenu JavaScript -
const element = document.querySelector("#exemple");
+```js
+const element = document.querySelector("#exemple");
 element.addEventListener("click", function() {
   const attribute = element.attributes[0];
   alert(attribute.localName);
 });
-
+``` -

{{ EmbedLiveSample('Exemple','100%',30) }}

+{{ EmbedLiveSample('Exemple','100%',30) }} -

Notes

+## Notes -

Le nom local d'un attribut est la partie du nom qualifié de cet attribut avant les deux points. les noms qualifiés sont utilisés en XML, dans les espaces de nom de certains documents.

+Le nom local d'un attribut est la partie du nom qualifié de cet attribut avant les deux points. les noms qualifiés sont utilisés en XML, dans les espaces de nom de certains documents. -
-

Note : dans {{Gecko("1.9.2")}} et avant, cette propriété renvoie le nom en majuscule pour les attributs HTML du  DOM HTML (contrairement aux atttributs XHTML ). Dans les versions plus récentes, en accord avec HTML5, cette propriété renvoie la casse correspondante au DOM utilisé, c'est-à-dire en minuscule pour les attributs du DOM XHTMl et du DOM HTML.

-
+> **Note :** dans {{Gecko("1.9.2")}} et avant, cette propriété renvoie le nom en majuscule pour les attributs HTML du  DOM HTML (contrairement aux atttributs XHTML ). Dans les versions plus récentes, en accord avec HTML5, cette propriété renvoie la casse correspondante au DOM utilisé, c'est-à-dire en minuscule pour les attributs du DOM XHTMl et du DOM HTML. -

Spécifications

+## Spécifications - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM4', '#interface-attr', 'Attr.localName')}}{{Spec2('DOM4')}}première définition
+| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------- | ------------------------ | ------------------- | +| {{SpecName('DOM4', '#interface-attr', 'Attr.localName')}} | {{Spec2('DOM4')}} | première définition | -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

{{Compat("api.Attr.localName")}}

+{{Compat("api.Attr.localName")}} -

Voir également

+## Voir également -
    -
  • {{domxref("Attr.namespaceURI")}}
    • -
  • {{domxref("Attr.prefix")}}
    • -
  • {{domxref("Element.localName")}}
    • -
  • {{domxref("Node.localName")}}
    • -
+- {{domxref("Attr.namespaceURI")}} +- {{domxref("Attr.prefix")}} +- {{domxref("Element.localName")}} +- {{domxref("Node.localName")}} diff --git a/files/fr/web/api/attr/namespaceuri/index.md b/files/fr/web/api/attr/namespaceuri/index.md index 73f89cbdeb..a8d555f0d8 100644 --- a/files/fr/web/api/attr/namespaceuri/index.md +++ b/files/fr/web/api/attr/namespaceuri/index.md @@ -8,67 +8,52 @@ tags: - namespaceURI translation_of: Web/API/Attr/namespaceURI --- -
{{APIRef("DOM")}}
+{{APIRef("DOM")}} -

La propriété en lecture seule Attr.namespaceURI retourne l'URI d'espace de nom de l'attribut, ou null si l'élément  n'est pas dans un espace de noms.

+La propriété en lecture seule **`Attr.namespaceURI`** retourne l'URI d'espace de nom de l'attribut, ou `null` si l'élément  n'est pas dans un espace de noms. -
-

Note : Avant DOM4 cet API était défini dans l'interface {{domxref("Node")}}.

-
+> **Note :** Avant DOM4 cet API était défini dans l'interface {{domxref("Node")}}. -

Syntaxe

+## Syntaxe -
namespace = attribute.namespaceURI
+ namespace = attribute.namespaceURI -

Exemple

+## Exemple -

Dans cet extrait de code, un attribut est examiné pour son {{domxref("localName")}} et son namespaceURI. Si le namespaceURI renvoie l'espace de noms XUL et le localName retourne "browser" (navigateur), alors le noeud est compris comme étant un <browser/> XUL.

+Dans cet extrait de code, un attribut est examiné pour son {{domxref("localName")}} et son `namespaceURI`. Si le `namespaceURI` renvoie l'espace de noms XUL et le `localName` retourne "browser" (_navigateur_), alors le noeud est compris comme étant un `` XUL. -
if (attribute.localName == "value" &&
+```js
+if (attribute.localName == "value" &&
     attribute.namespaceURI == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") {
   // ceci est une valeur XUL
-}
+} +``` -

Notes

+## Notes -

Ce n'est pas une valeur calculée, mais le résultat d'une recherche d'espace de noms basée sur un examen des déclarations d'espace de noms dans la portée. L'URI de l'espace de noms d'un attribut est figé à l'heure de création de l'attribut.

+Ce n'est pas une valeur calculée, mais le résultat d'une recherche d'espace de noms basée sur un examen des déclarations d'espace de noms dans la portée. L'URI de l'espace de noms d'un attribut est figé à l'heure de création de l'attribut. -

Dans Firefox 3.5 et précédents, l'URI d'espace de nom pour les attributs HTML dans les documents HTML est null. Dans les versions ultérieures, en conformité avec HTML5, il est https://www.w3.org/1999/xhtml comme dans XHTML. {{gecko_minversion_inline("1.9.2")}}

+Dans Firefox 3.5 et précédents, l'URI d'espace de nom pour les attributs HTML dans les documents HTML est `null`. Dans les versions ultérieures, en conformité avec HTML5, il est [`https://www.w3.org/1999/xhtml`](https://www.w3.org/1999/xhtml) comme dans XHTML. {{gecko_minversion_inline("1.9.2")}} -

Vous pouvez créer un attribut avec le namespaceURI spécifié en utilisant la méthode de DOM niveau 2 {{domxref("Element.setAttributeNS")}}.

+Vous pouvez créer un attribut avec le `namespaceURI` spécifié en utilisant la méthode de DOM niveau 2 {{domxref("Element.setAttributeNS")}}. -

Selon la spécification Namespaces en XML, un attribut n'hérite pas de l'espace de noms de l'élément auquel il est attaché. Si un attribut n'est pas explicitement donné à un espace de noms, il n'a pas d'espace de noms.

+Selon la spécification [Namespaces en XML](https://www.w3.org/TR/xml-names11/), un attribut n'hérite pas de l'espace de noms de l'élément auquel il est attaché. Si un attribut n'est pas explicitement donné à un espace de noms, il n'a pas d'espace de noms. -

Le DOM ne gère pas ou n'applique pas la validation de l'espace de noms en soi. Il appartient à l'application DOM de faire toute validation nécessaire. Notez également que le préfixe d'espace de noms, une fois associé à un nœud particulier, ne peut pas être modifié.

+Le DOM ne gère pas ou n'applique pas la validation de l'espace de noms en soi. Il appartient à l'application DOM de faire toute validation nécessaire. Notez également que le préfixe d'espace de noms, une fois associé à un nœud particulier, ne peut pas être modifié. -

Spécifications

+## Spécifications - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("DOM4", "#dom-element-namespaceuri", "Element.namespaceuri")}}{{Spec2("DOM4")}}Définition initiale
+| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------ | ------------------------ | ------------------- | +| {{SpecName("DOM4", "#dom-element-namespaceuri", "Element.namespaceuri")}} | {{Spec2("DOM4")}} | Définition initiale | -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

{{Compat("api.Attr.namespaceURI")}}

+{{Compat("api.Attr.namespaceURI")}} -

Voir aussi

+## Voir aussi -
    -
  • {{domxref("Attr.localName")}}
    • -
  • {{domxref("Attr.prefix")}}
    • -
  • {{domxref("Element.namespaceURI")}}
    • -
  • {{domxref("Node.namespaceURI")}}
    • -
+- {{domxref("Attr.localName")}} +- {{domxref("Attr.prefix")}} +- {{domxref("Element.namespaceURI")}} +- {{domxref("Node.namespaceURI")}} diff --git a/files/fr/web/api/attr/prefix/index.md b/files/fr/web/api/attr/prefix/index.md index 92f9bcfe1b..94ebc28721 100644 --- a/files/fr/web/api/attr/prefix/index.md +++ b/files/fr/web/api/attr/prefix/index.md @@ -8,58 +8,41 @@ tags: - Reference translation_of: Web/API/Attr/prefix --- -
{{APIRef("DOM")}}
+{{APIRef("DOM")}} -

La propriété Attr.prefix en lecture seule renvoie le préfixe de l'espace de noms de l'attribut spécifié ou null si aucun préfixe n'est spécifié

+La propriété **`Attr.prefix `**en lecture seule renvoie le préfixe de l'espace de noms de l'attribut spécifié ou null si aucun préfixe n'est spécifié -
-

Note : Avant DOM4, cette API a été définie dans l'interface {{domxref ("Node")}}.

-
+> **Note :** Avant DOM4, cette API a été définie dans l'interface {{domxref ("Node")}}. -

Syntaxe

+## Syntaxe -
string = attribute.prefix
-
+ string = attribute.prefix -

Exemples

+## Exemples -

Le code suivant affiche "x" dans la console.

+Le code suivant affiche "x" dans la console. -
<div x:id="example" onclick="console.log(this.attributes[0].prefix)"/>
-
+```xml +
+``` -

Notes

+## Notes -

Cela ne fonctionnera que lorsqu'un analyseur conscient de l'espace de noms est utilisé, c'est-à-dire lorsqu'il s'agit d'un document avec un type MIME XML. Cela ne fonctionnera pas pour les documents HTML.

+Cela ne fonctionnera que lorsqu'un analyseur conscient de l'espace de noms est utilisé, c'est-à-dire lorsqu'il s'agit d'un document avec un type MIME XML. Cela ne fonctionnera pas pour les documents HTML. -

Spécifications

+## Spécifications - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("DOM4", "#dom-attr-prefix", "Attr.prefix")}}{{Spec2("DOM4")}}Définition initiale
+| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------ | ------------------------ | ------------------- | +| {{SpecName("DOM4", "#dom-attr-prefix", "Attr.prefix")}} | {{Spec2("DOM4")}} | Définition initiale | -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

{{Compat("api.Attr.prefix")}}

+{{Compat("api.Attr.prefix")}} -

Voir également

+## Voir également -
    -
  • {{domxref("Attr.namespaceURI")}}
    • -
  • {{domxref("Attr.localName")}}
    • -
  • {{domxref("Element.prefix")}}
    • -
  • {{domxref("Node.prefix")}}
    • -
+- {{domxref("Attr.namespaceURI")}} +- {{domxref("Attr.localName")}} +- {{domxref("Element.prefix")}} +- {{domxref("Node.prefix")}} diff --git a/files/fr/web/api/audiobuffer/audiobuffer/index.md b/files/fr/web/api/audiobuffer/audiobuffer/index.md index ce67efa5e8..cb565da1f0 100644 --- a/files/fr/web/api/audiobuffer/audiobuffer/index.md +++ b/files/fr/web/api/audiobuffer/audiobuffer/index.md @@ -3,47 +3,33 @@ title: AudioBuffer() slug: Web/API/AudioBuffer/AudioBuffer translation_of: Web/API/AudioBuffer/AudioBuffer --- -

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

- -

Le constructeur AudioBuffer créer un nouvel objet {{domxref("AudioBuffer")}}.

- -

Syntax

- -
var audioBuffer = new AudioBuffer([options]);
-var audioBuffer = new AudioBuffer(context[, options]);
- -

Parameters

- -
-
context {{obsolete_inline("")}}
-
Référence à un {{domxref("AudioContext")}}. Ce paramètre a été supprimer de la specification. Consultez la section Compatibilité du navigateur pour plus de détails.
-
options {{optional_inline}}
-
Les options sont les suivantes: -
    -
  • length:  Longueur de l'échantillonnage du tampon.
    • -
  • numberOfChannels: Nombre de cannaux du buffer. La valeur par défaut est 1. 
    • -
  • sampleRate: Taux d'échantillonnage du buffer en Hz. La valeur par défaut est le taux d'échantillonnage du context utilisé dans la construction de cet objet
    • -
-
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API','#AudioBuffer','AudioBuffer')}}{{Spec2('Web Audio API')}}Définition initiale
- -

Compatibilité des Navigateurs

- -

{{Compat("api.AudioBuffer.AudioBuffer")}}

+{{APIRef("Web Audio API")}}{{SeeCompatTable}} + +Le constructeur **`AudioBuffer`** créer un nouvel objet {{domxref("AudioBuffer")}}. + +## Syntax + + var audioBuffer = new AudioBuffer([options]); + var audioBuffer = new AudioBuffer(context[, options]); + +### Parameters + +- *context* {{obsolete_inline("")}} + - : Référence à un {{domxref("AudioContext")}}. Ce paramètre a été supprimer de la specification. Consultez la section Compatibilité du navigateur pour plus de détails. +- _options_ {{optional_inline}} + + - : Les options sont les suivantes: + + - `length`:  Longueur de l'échantillonnage du tampon. + - `numberOfChannels`: Nombre de cannaux du buffer. La valeur par défaut est 1. + - `sampleRate`: Taux d'échantillonnage du buffer en Hz. La valeur par défaut est le taux d'échantillonnage du `context` utilisé dans la construction de cet objet + +## Spécifications + +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------- | ------------------------------------ | ------------------- | +| {{SpecName('Web Audio API','#AudioBuffer','AudioBuffer')}} | {{Spec2('Web Audio API')}} | Définition initiale | + +## Compatibilité des Navigateurs + +{{Compat("api.AudioBuffer.AudioBuffer")}} diff --git a/files/fr/web/api/audiobuffer/copyfromchannel/index.md b/files/fr/web/api/audiobuffer/copyfromchannel/index.md index 2ae87ca120..16936ddad9 100644 --- a/files/fr/web/api/audiobuffer/copyfromchannel/index.md +++ b/files/fr/web/api/audiobuffer/copyfromchannel/index.md @@ -8,55 +8,41 @@ tags: - Web Audio API translation_of: Web/API/AudioBuffer/copyFromChannel --- -

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

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

La méthode copyFromChannel() de l'interface {{ domxref("AudioBuffer") }} copie les échantillons de l'un des canaux de l'AudioBuffer dans un tableau.

+La méthode `copyFromChannel() `de l'interface {{ domxref("AudioBuffer") }} copie les échantillons de l'un des canaux de l'`AudioBuffer` dans un tableau. -

Syntaxe

+## Syntaxe -
tableauDonnees.copyFromChannel(destination,numeroCanal,decalageDebut);
+ tableauDonnees.copyFromChannel(destination,numeroCanal,decalageDebut); -

Paramètres

+### Paramètres -
-
destination
-
Un tableau {{domxref("Float32Array")}} dans lequel copier les données.
-
channelNumber
-
Le numéro du canal de l'AudioBuffer depuis lequel copier les données. Si channelNumber est supérieur ou égal à {{domxref("AudioBuffer.numberOfChannels")}}, une exception INDEX_SIZE_ERR est levée.
-
startInChannel {{optional_inline}}
-
Un offset optionnel à partir duquel copier les données. Si la valeur de startInChannel est supérieure à {{domxref("AudioBuffer.length")}}, une exception INDEX_SIZE_ERR est levée.
-
+- _destination_ + - : Un tableau {{domxref("Float32Array")}} dans lequel copier les données. +- _channelNumber_ + - : Le numéro du canal de l'AudioBuffer depuis lequel copier les données. Si *channelNumber* est supérieur ou égal à {{domxref("AudioBuffer.numberOfChannels")}}, une exception `INDEX_SIZE_ERR est` levée. +- _startInChannel_ {{optional_inline}} + - : Un offset optionnel à partir duquel copier les données. Si la valeur de *startInChannel* est supérieure à {{domxref("AudioBuffer.length")}}, une exception `INDEX_SIZE_ERR` est levée. -

Exemple

+## Exemple -
var tableauDonnees = contextAudio.createBuffer(2, frameCount, contextAudio.sampleRate);
+```js
+var tableauDonnees = contextAudio.createBuffer(2, frameCount, contextAudio.sampleRate);
 var autreTableau = new Float32Array(length);
 tableauDonnees.copyFromChannel(autreTableau,1,0);
-
- -

Spécification

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#widl-AudioBuffer-copyFromChannel-void-Float32Array-destination-long-channelNumber-unsigned-long-startInChannel', 'copyFromChannel')}}{{Spec2('Web Audio API')}} 
- -

Compatibilité navigateurs

- -

{{Compat("api.AudioBuffer.copyFromChannel")}}

- -

Voir aussi

- - +``` + +## Spécification + +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- | +| {{SpecName('Web Audio API', '#widl-AudioBuffer-copyFromChannel-void-Float32Array-destination-long-channelNumber-unsigned-long-startInChannel', 'copyFromChannel')}} | {{Spec2('Web Audio API')}} |   | + +## Compatibilité navigateurs + +{{Compat("api.AudioBuffer.copyFromChannel")}} + +## Voir aussi + +- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/audiobuffer/copytochannel/index.md b/files/fr/web/api/audiobuffer/copytochannel/index.md index 38a6393ebc..2dffa72fa8 100644 --- a/files/fr/web/api/audiobuffer/copytochannel/index.md +++ b/files/fr/web/api/audiobuffer/copytochannel/index.md @@ -3,58 +3,44 @@ title: AudioBuffer.copyToChannel() slug: Web/API/AudioBuffer/copyToChannel translation_of: Web/API/AudioBuffer/copyToChannel --- -

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

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

La méthode copyToChannel() de l'interface {{ domxref("AudioBuffer") }} copie les échantillons du tableau source vers le canal de l'AudioBuffer spécifié.

+La méthode `copyToChannel() `de l'interface {{ domxref("AudioBuffer") }} copie les échantillons du tableau source vers le canal de l'`AudioBuffer` spécifié. -

Syntaxe

+## Syntaxe -
myArrayBuffer.copyToChannel(source, channelNumber, startInChannel);
+ myArrayBuffer.copyToChannel(source, channelNumber, startInChannel); -

Paramètres

+### Paramètres -
-
source
-
Le tableau {{jsxref("Float32Array")}} depuis lequel copier les données.
-
channelNumber
-
Le numéro du canal de l'{{domxref("AudioBuffer")}} dans lequel copier les données. Si channelNumber est supérieur ou égal à {{domxref("AudioBuffer.numberOfChannels")}}, une exception INDEX_SIZE_ERR est levée.
-
startInChannel {{optional_inline}}
-
Un offset optionnel à partir duquel copier les données. Si la valeur de startInChannel est supérieure à {{domxref("AudioBuffer.length")}}, une exception INDEX_SIZE_ERR est levée.
-
+- _source_ + - : Le tableau {{jsxref("Float32Array")}} depuis lequel copier les données. +- _channelNumber_ + - : Le numéro du canal de l'{{domxref("AudioBuffer")}} dans lequel copier les données. Si *channelNumber* est supérieur ou égal à {{domxref("AudioBuffer.numberOfChannels")}}, une exception `INDEX_SIZE_ERR est` levée. +- _startInChannel {{optional_inline}}_ + - : Un offset optionnel à partir duquel copier les données. Si la valeur de *startInChannel* est supérieure à {{domxref("AudioBuffer.length")}}, une exception `INDEX_SIZE_ERR` est levée. -

Exemple

+## Exemple -
var tableauDonnees = contextAudio.createBuffer(2, frameCount, contextAudio.sampleRate);
+```js
+var tableauDonnees = contextAudio.createBuffer(2, frameCount, contextAudio.sampleRate);
 var autreTableau = new Float32Array;
 // Copy les données depuis le second canal vers le second tableau.
 tableauDonnees.copyFromChannel(autreTableau,1,0);
 // Copie les données depuis le second tableau vers le premier canal du premier tableau. A présent les deux canaux ont des données identiques.
 tableauDonnees.copyToChannel (autreTableau,0,0);
-
- -

Spécification

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#widl-AudioBuffer-copyToChannel-void-Float32Array-source-long-channelNumber-unsigned-long-startInChannel', 'copyToChannel')}}{{Spec2('Web Audio API')}} 
- -

Compatibilité navigateurs

- -

{{Compat("api.AudioBuffer.copyToChannel")}}

- -

Voir aussi

- - +``` + +## Spécification + +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- | +| {{SpecName('Web Audio API', '#widl-AudioBuffer-copyToChannel-void-Float32Array-source-long-channelNumber-unsigned-long-startInChannel', 'copyToChannel')}} | {{Spec2('Web Audio API')}} |   | + +## Compatibilité navigateurs + +{{Compat("api.AudioBuffer.copyToChannel")}} + +## Voir aussi + +- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/audiobuffer/duration/index.md b/files/fr/web/api/audiobuffer/duration/index.md index 447932473d..ffb7fdaeae 100644 --- a/files/fr/web/api/audiobuffer/duration/index.md +++ b/files/fr/web/api/audiobuffer/duration/index.md @@ -3,24 +3,25 @@ title: AudioBuffer.duration slug: Web/API/AudioBuffer/duration translation_of: Web/API/AudioBuffer/duration --- -

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

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

La propriéré duration  de l'interface {{ domxref("AudioBuffer") }} renvoie un nombre flottant à double précision représentant la durée, en secondes, des données PCM stockées dans le buffer.

-
+La propriéré `duration`  de l'interface {{ domxref("AudioBuffer") }} renvoie un nombre flottant à double précision représentant la durée, en secondes, des données PCM stockées dans le buffer. -

Syntaxe

+## Syntaxe -
var tableauTampon = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
-tableauTampon.duration;
+```js +var tableauTampon = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate); +tableauTampon.duration; +``` -

Valeur

+### Valeur -

Nombre flottant à double précision.

+Nombre flottant à double précision. -

Exemple

+## Exemple -
// Stereo
+```js
+// Stereo
 var nombreCanaux = 2;
 
 // Crée une mémoire tampon vide de 2 secondes
@@ -31,10 +32,10 @@ var tableauDonnees = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteA
 bouton.onclick = function() {
   // remplit la mémoire tampon avec du bruit blanc
   // valeurs aléatoires entre -1.0 et 1.0
-  for (var canal = 0; canal < nombreCanaux; canal++) {
+  for (var canal = 0; canal < nombreCanaux; canal++) {
     // génère le tableau contenant les données
     var tampon = tableauDonnees.getChannelData(canal);
-    for (var i = 0; i < nombreFrames; i++) {
+    for (var i = 0; i < nombreFrames; i++) {
       // Math.random() donne une valeur comprise entre [0; 1.0]
       // l'audio doit être compris entre [-1.0; 1.0]
       tampon[i] = Math.random() * 2 - 1;
@@ -42,31 +43,18 @@ bouton.onclick = function() {
   }
   console.log(tableauDonnees.duration);
 }
-
+``` -

Spécification

+## Spécification - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#widl-AudioBuffer-duration', 'duration')}}{{Spec2('Web Audio API')}} 
+| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- | +| {{SpecName('Web Audio API', '#widl-AudioBuffer-duration', 'duration')}} | {{Spec2('Web Audio API')}} |   | -

Compatibilité navigateurs

+## Compatibilité navigateurs -

{{Compat("api.AudioBuffer.duration")}}

+{{Compat("api.AudioBuffer.duration")}} -

Voir aussi

+## Voir aussi - +- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/audiobuffer/getchanneldata/index.md b/files/fr/web/api/audiobuffer/getchanneldata/index.md index 7f64f907a0..67b9c0d234 100644 --- a/files/fr/web/api/audiobuffer/getchanneldata/index.md +++ b/files/fr/web/api/audiobuffer/getchanneldata/index.md @@ -3,24 +3,27 @@ title: AudioBuffer.getChannelData() slug: Web/API/AudioBuffer/getChannelData translation_of: Web/API/AudioBuffer/getChannelData --- -

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

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

La méthode getChannelData() de l'interface {{ domxref("AudioBuffer") }} renvoie un {{domxref("Float32Array")}} contenant les données PCM associées au canal spécifié (0 correspondant au premier canal).

+La méthode `getChannelData() `de l'interface {{ domxref("AudioBuffer") }} renvoie un {{domxref("Float32Array")}} contenant les données PCM associées au canal spécifié (0 correspondant au premier canal). -

Syntaxe

+## Syntaxe -
var tableauDonnees = contexteAudio.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
-var tampon = tableauDonnees.getChannelData(canal);
+```js +var tableauDonnees = contexteAudio.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate); +var tampon = tableauDonnees.getChannelData(canal); +``` -

Valeur

+### Valeur -

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

+Un {{domxref("Float32Array")}}. -

Exemple

+## Exemple -

Dans l'exemple suivant crée un buffer de 2 secondes, le remplit avec du bruit blanc puis le lit via un {{ domxref("AudioBufferSourceNode") }}. Vous pouvez aussi exécuter le code, or voir le code source.

+Dans l'exemple suivant crée un buffer de 2 secondes, le remplit avec du bruit blanc puis le lit via un {{ domxref("AudioBufferSourceNode") }}. Vous pouvez aussi [exécuter le code](http://mdn.github.io/audio-buffer/), or [voir le code source](https://github.com/mdn/audio-buffer). -
var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+```js
+var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
 var bouton = document.querySelector('button');
 var preformate = document.querySelector('pre');
 var monScript = document.querySelector('script');
@@ -38,10 +41,10 @@ var tableauDonnees = contexteAudio.createBuffer(nombreCanaux, nombreFrames, cont
 bouton.onclick = function() {
   // remplit la mémoire tampon avec du bruit blanc
   // valeurs aléatoires entre -1.0 et 1.0
-  for (var canal = 0; canal < nombreCanaux; canal++) {
+  for (var canal = 0; canal < nombreCanaux; canal++) {
     // génère le tableau contenant les données
     var tampon = tableauDonnees.getChannelData(canal);
-    for (var i = 0; i < nombreFrames; i++) {
+    for (var i = 0; i < nombreFrames; i++) {
       // Math.random() donne une valeur comprise entre [0; 1.0]
       // l'audio doit être compris entre [-1.0; 1.0]
       tampon[i] = Math.random() * 2 - 1;
@@ -61,38 +64,24 @@ bouton.onclick = function() {
 
   // lance la lecture du so
   source.start();
-}
+} +``` -

Paramètres

+## Paramètres -
-
channel
-
The channel property is an index representing the particular channel to get data for. An index value of 0 represents the first channel. If the channel index value is greater than of equal to {{domxref("AudioBuffer.numberOfChannels")}}, an INDEX_SIZE_ERR exception will be thrown.
-
+- channel + - : The channel property is an index representing the particular channel to get data for. An index value of 0 represents the first channel. If the `channel` index value is greater than of equal to {{domxref("AudioBuffer.numberOfChannels")}}, an `INDEX_SIZE_ERR` exception will be thrown. -

Spécification

+## Spécification - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#widl-AudioBuffer-getChannelData-Float32Array-unsigned-long-channel', 'getChannelData')}}{{Spec2('Web Audio API')}} 
+| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- | +| {{SpecName('Web Audio API', '#widl-AudioBuffer-getChannelData-Float32Array-unsigned-long-channel', 'getChannelData')}} | {{Spec2('Web Audio API')}} |   | -

Compatibilité navigateurs

+## Compatibilité navigateurs -

{{Compat("api.AudioBuffer.getChannelData")}}

+{{Compat("api.AudioBuffer.getChannelData")}} -

Voir aussi

+## Voir aussi - +- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/audiobuffer/index.md b/files/fr/web/api/audiobuffer/index.md index faa4f0f309..b914ca7a11 100644 --- a/files/fr/web/api/audiobuffer/index.md +++ b/files/fr/web/api/audiobuffer/index.md @@ -8,48 +8,43 @@ tags: - Web Audio API translation_of: Web/API/AudioBuffer --- -

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

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

L'interface AudioBuffer représente une ressource audio stockée en mémoire, créée à partir d'un fichier audio avec la méthode {{ domxref("AudioContext.decodeAudioData()") }}, ou à partir de données brutes avec {{ domxref("AudioContext.createBuffer()") }}. Une fois mises en mémoire dans un AudioBuffer, les données audio sont transférées dans un {{ domxref("AudioBufferSourceNode") }} afin d'être lues.
-
- Ce type d'objet est conçu pour contenir de petit extraits audio, durant généralement moins de 45s. Pour les sons plus longs, les objets implémentant {{domxref ("MediaAudioElementSourceNode")}} sont plus adaptés. La mémoire tampon contient des données au format non entrelacé IEEE 32-bit PCM linéaire, avec une portée nominale comprise entre -1 et +1. S'il y a plusieurs canaux, ils sont stockés dans des mémoires-tampon distinctes.

+L'interface AudioBuffer représente une ressource audio stockée en mémoire, créée à partir d'un fichier audio avec la méthode {{ domxref("AudioContext.decodeAudioData()") }}, ou à partir de données brutes avec {{ domxref("AudioContext.createBuffer()") }}. Une fois mises en mémoire dans un AudioBuffer, les données audio sont transférées dans un {{ domxref("AudioBufferSourceNode") }} afin d'être lues. -

Constructeur

+Ce type d'objet est conçu pour contenir de petit extraits audio, durant généralement moins de 45s. Pour les sons plus longs, les objets implémentant {{domxref ("MediaAudioElementSourceNode")}} sont plus adaptés. La mémoire tampon contient des données au format non entrelacé IEEE 32-bit PCM linéaire, avec une portée nominale comprise entre -1 et +1. S'il y a plusieurs canaux, ils sont stockés dans des mémoires-tampon distinctes. -
-
{{domxref("AudioBuffer.AudioBuffer", "AudioBuffer()")}}
-
Crée et retourne un nouvel objet AudioBuffer.
-
+## Constructeur -

Propriétés

+- {{domxref("AudioBuffer.AudioBuffer", "AudioBuffer()")}} + - : Crée et retourne un nouvel objet `AudioBuffer`. -
-
{{domxref("AudioBuffer.sampleRate")}} {{readonlyInline}}
-
Retourne un nombre flottant qui représente la fréquence d'échantillonnage, en échantillons par seconde, des données PCM stockées dans la mémoire tampon.
-
{{domxref("AudioBuffer.length")}} {{readonlyInline}}
-
Retourne un nombre entier qui représente la longueur, en trames d'échantillonnage , des données PCM stockées dans la mémoire tampon.
-
{{domxref("AudioBuffer.duration")}} {{readonlyInline}}
-
Retourne un nombre à virgule flottante de double précision qui représente la durée, exprimée en secondes, des données PCM stockées dans la mémoire tampon.
-
{{domxref("AudioBuffer.numberOfChannels")}} {{readonlyInline}}
-
Retourne un nombre entier qui représente le nombre de canaux audio discrets décrits par les données PCM stockées dans la mémoire tampon.
-
+## Propriétés -

Méthodes

+- {{domxref("AudioBuffer.sampleRate")}} {{readonlyInline}} + - : Retourne un nombre flottant qui représente la fréquence d'échantillonnage, en échantillons par seconde, des données PCM stockées dans la mémoire tampon. +- {{domxref("AudioBuffer.length")}} {{readonlyInline}} + - : Retourne un nombre entier qui représente la longueur, en trames d'échantillonnage , des données PCM stockées dans la mémoire tampon. +- {{domxref("AudioBuffer.duration")}} {{readonlyInline}} + - : Retourne un nombre à virgule flottante de double précision qui représente la durée, exprimée en secondes, des données PCM stockées dans la mémoire tampon. +- {{domxref("AudioBuffer.numberOfChannels")}} {{readonlyInline}} + - : Retourne un nombre entier qui représente le nombre de canaux audio discrets décrits par les données PCM stockées dans la mémoire tampon. -
-
{{domxref("AudioBuffer.getChannelData()")}}
-
Retourne un {{domxref ("Float32Array")}} contenant les données PCM associés au canal, défini par l'index du canal (0 représentant le premier canal).
-
{{domxref("AudioBuffer.copyFromChannel()")}}
-
Copie les échantillons du canal associé à AudioBuffer dans un tableau de destination.
-
{{domxref("AudioBuffer.copyToChannel()")}}
-
Copie les échantillons dans le canal associé à AudioBuffer, depuis le tableau source.
-
+## Méthodes -

Exemple

+- {{domxref("AudioBuffer.getChannelData()")}} + - : Retourne un {{domxref ("Float32Array")}} contenant les données PCM associés au canal, défini par l'index du canal (0 représentant le premier canal). +- {{domxref("AudioBuffer.copyFromChannel()")}} + - : Copie les échantillons du canal associé à `AudioBuffer` dans un tableau de destination. +- {{domxref("AudioBuffer.copyToChannel()")}} + - : Copie les échantillons dans le canal associé à `AudioBuffer`, depuis le tableau `source`. -

L'exemple suivant montre comment créer un  AudioBuffer et le remplir avec du bruit blanc. Le code source est disponible sur notre repo audio-buffer demo; une version live est également consultable.

+## Exemple -
// Stéréo
+L'exemple suivant montre comment créer un  `AudioBuffer` et le remplir avec du bruit blanc. Le code source est disponible sur notre repo [audio-buffer demo](https://github.com/mdn/audio-buffer); une [version live](http://mdn.github.io/audio-buffer/) est également consultable.
+
+```js
+// Stéréo
 var nombreCanaux = 2;
 
 // Crée une mémoire tampon vide de 2 secondes
@@ -60,10 +55,10 @@ var tableauDonnees = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteA
 bouton.onclick = function() {
   // remplit la mémoire tampon avec du bruit blanc
   // valeurs aléatoires entre -1.0 et 1.0
-  for (var canal = 0; canal < nombreCanaux; canal++) {
+  for (var canal = 0; canal < nombreCanaux; canal++) {
     // génère le tableau contenant les données
     var tampon = tableauDonnees.getChannelData(canal);
-    for (var i = 0; i < nombreFrames; i++) {
+    for (var i = 0; i < nombreFrames; i++) {
       // Math.random() donne une valeur comprise entre [0; 1.0]
       // l'audio doit être compris entre [-1.0; 1.0]
       tampon[i] = Math.random() * 2 - 1;
@@ -84,31 +79,19 @@ bouton.onclick = function() {
   // lance la lecture du so
   source.start();
 
-}
+} +``` -

Spécifications

+## Spécifications - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#AudioBuffer-section', 'AudioBuffer')}}{{Spec2('Web Audio API')}}Définition initiale
+| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------- | ------------------------------------ | ------------------- | +| {{SpecName('Web Audio API', '#AudioBuffer-section', 'AudioBuffer')}} | {{Spec2('Web Audio API')}} | Définition initiale | -

Compatibilité navigateurs

+## Compatibilité navigateurs -

{{Compat("api.AudioBuffer")}}

+{{Compat("api.AudioBuffer")}} -

Voir aussi

+## Voir aussi - +- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/audiobuffer/length/index.md b/files/fr/web/api/audiobuffer/length/index.md index f61ff06e0d..eae0885d58 100644 --- a/files/fr/web/api/audiobuffer/length/index.md +++ b/files/fr/web/api/audiobuffer/length/index.md @@ -3,25 +3,25 @@ title: AudioBuffer.length slug: Web/API/AudioBuffer/length translation_of: Web/API/AudioBuffer/length --- -

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

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

La propriété length de l'interface {{ domxref("AudioBuffer") }} renvoie un entier représentant la longueur, en trames d'échantillonage, des données PCM stockées dans la mémoire-tampon.

-
+La propriété `length` de l'interface {{ domxref("AudioBuffer") }} renvoie un entier représentant la longueur, en trames d'échantillonage, des données PCM stockées dans la mémoire-tampon. -

Syntaxe

+## Syntaxe -
var tableauMemoireTampon = contexteAudio.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
+```js
+var tableauMemoireTampon = contexteAudio.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
 tableauMemoireTampon.length;
-
+``` -

Valeur

+### Valeur -

Un nombre entier.

+Un nombre entier. -

Exemple

+## Exemple -
// Stereo
+```js
+// Stereo
 var nombreCanaux = 2;
 
 // Crée une mémoire tampon vide de 2 secondes
@@ -33,41 +33,29 @@ var tableauDonnees = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteA
 bouton.onclick = function() {
   // remplit la mémoire tampon avec du bruit blanc
   // valeurs aléatoires entre -1.0 et 1.0
-  for (var canal = 0; canal < nombreCanaux; canal++) {
+  for (var canal = 0; canal < nombreCanaux; canal++) {
     // génère le tableau contenant les données
     var tampon = tableauDonnees.getChannelData(canal);
-    for (var i = 0; i < nombreFrames; i++) {
+    for (var i = 0; i < nombreFrames; i++) {
       // Math.random() donne une valeur comprise entre [0; 1.0]
       // l'audio doit être compris entre [-1.0; 1.0]
       tampon[i] = Math.random() * 2 - 1;
     }
   }
   console.log(tableauDonnees.length);
-}
- -

Spécification

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#widl-AudioBuffer-length', 'length')}}{{Spec2('Web Audio API')}} 
- -

Compatibilité navigateurs

- -

{{Compat("api.AudioBuffer.length")}}

- -

Voir aussi

- - +} +``` + +## Spécification + +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | +| {{SpecName('Web Audio API', '#widl-AudioBuffer-length', 'length')}} | {{Spec2('Web Audio API')}} |   | + +## Compatibilité navigateurs + +{{Compat("api.AudioBuffer.length")}} + +## Voir aussi + +- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/audiobuffer/numberofchannels/index.md b/files/fr/web/api/audiobuffer/numberofchannels/index.md index 470397e34d..0c7c2c1ced 100644 --- a/files/fr/web/api/audiobuffer/numberofchannels/index.md +++ b/files/fr/web/api/audiobuffer/numberofchannels/index.md @@ -3,25 +3,25 @@ title: AudioBuffer.numberOfChannels slug: Web/API/AudioBuffer/numberOfChannels translation_of: Web/API/AudioBuffer/numberOfChannels --- -

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

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

La propriété numberOfChannels de l'interface {{ domxref("AudioBuffer") }} renvoie un nombre entier représentant le nombre de canaux audio diiscrets décrits par les données PCM stockées dans la mémoire-tampon.

-
+La propriété `numberOfChannels` de l'interface {{ domxref("AudioBuffer") }} renvoie un nombre entier représentant le nombre de canaux audio diiscrets décrits par les données PCM stockées dans la mémoire-tampon. -

Syntaxe

+## Syntaxe -
var tableauMemoireTampon = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
+```js
+var tableauMemoireTampon = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
 tableauMemoireTampon.numberOfChannels;
-
+``` -

Valeur

+### Valeur -

Un nombre entier.

+Un nombre entier. -

Exemple

+## Exemple -
// Stereo
+```js
+// Stereo
 var nombreCanaux = 2;
 
 // Crée une mémoire tampon vide de 2 secondes
@@ -33,10 +33,10 @@ var tableauDonnees = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteA
 bouton.onclick = function() {
   // remplit la mémoire tampon avec du bruit blanc
   // valeurs aléatoires entre -1.0 et 1.0
-  for (var canal = 0; canal < nombreCanaux; canal++) {
+  for (var canal = 0; canal < nombreCanaux; canal++) {
     // génère le tableau contenant les données
     var tampon = tableauDonnees.getChannelData(canal);
-    for (var i = 0; i < nombreFrames; i++) {
+    for (var i = 0; i < nombreFrames; i++) {
       // Math.random() donne une valeur comprise entre [0; 1.0]
       // l'audio doit être compris entre [-1.0; 1.0]
       tampon[i] = Math.random() * 2 - 1;
@@ -44,31 +44,18 @@ bouton.onclick = function() {
   }
   console.log(tableauDonnees.numberOfChannels);
 }
-
- -

Spécification

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#widl-AudioBuffer-numberOfChannels', 'numberOfChannels')}}{{Spec2('Web Audio API')}} 
- -

Compatibilité navigateurs

- -

{{Compat("api.AudioBuffer.numberOfChannels")}}

- -

Voir aussi

- - +``` + +## Spécification + +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | +| {{SpecName('Web Audio API', '#widl-AudioBuffer-numberOfChannels', 'numberOfChannels')}} | {{Spec2('Web Audio API')}} |   | + +## Compatibilité navigateurs + +{{Compat("api.AudioBuffer.numberOfChannels")}} + +## Voir aussi + +- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/audiobuffer/samplerate/index.md b/files/fr/web/api/audiobuffer/samplerate/index.md index 79e2abb6d2..7992a06828 100644 --- a/files/fr/web/api/audiobuffer/samplerate/index.md +++ b/files/fr/web/api/audiobuffer/samplerate/index.md @@ -3,25 +3,25 @@ title: AudioBuffer.sampleRate slug: Web/API/AudioBuffer/sampleRate translation_of: Web/API/AudioBuffer/sampleRate --- -

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

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

La propriété sampleRate de l'interface {{ domxref("AudioBuffer") }} renvoie un nombre à virgule flottante  représentant la taux d'échantillonage, en échantillons par seconde, des données PCM stockées dans la mémoire-tampon.

-
+La propriété `sampleRate` de l'interface {{ domxref("AudioBuffer") }} renvoie un nombre à virgule flottante  représentant la taux d'échantillonage, en échantillons par seconde, des données PCM stockées dans la mémoire-tampon. -

Syntaxe

+## Syntaxe -
var tableauMemoireTampon = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
+```js
+var tableauMemoireTampon = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteAudio.sampleRate);
 tableauMemoireTampon.sampleRate;
-
+``` -

Valeur

+### Valeur -

Un nombre à virgule flottante indiquant le taux d'échantillonnage actuelle des données du tampon, en echantillonnage par seconde.

+Un nombre à virgule flottante indiquant le taux d'échantillonnage actuelle des données du tampon, en echantillonnage par seconde. -

Exemple

+## Exemple -
// Stereo
+```js
+// Stereo
 var nombreCanaux = 2;
 
 // Crée une mémoire tampon vide de 2 secondes
@@ -33,10 +33,10 @@ var tableauDonnees = audioCtx.createBuffer(nombreCanaux, nombreFrames, contexteA
 bouton.onclick = function() {
   // remplit la mémoire tampon avec du bruit blanc
   // valeurs aléatoires entre -1.0 et 1.0
-  for (var canal = 0; canal < nombreCanaux; canal++) {
+  for (var canal = 0; canal < nombreCanaux; canal++) {
     // génère le tableau contenant les données
     var tampon = tableauDonnees.getChannelData(canal);
-    for (var i = 0; i < nombreFrames; i++) {
+    for (var i = 0; i < nombreFrames; i++) {
       // Math.random() donne une valeur comprise entre [0; 1.0]
       // l'audio doit être compris entre [-1.0; 1.0]
       tampon[i] = Math.random() * 2 - 1;
@@ -44,31 +44,18 @@ bouton.onclick = function() {
   }
   console.log(tableauDonnees.sampleRate);
 }
-
- -

Spécification

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#widl-AudioBuffer-sampleRate', 'sampleRate')}}{{Spec2('Web Audio API')}} 
- -

Compatibilité des Navigateurs

- -

{{Compat("api.AudioBuffer.sampleRate")}}

- -

Voir aussi

- - +``` + +## Spécification + +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | +| {{SpecName('Web Audio API', '#widl-AudioBuffer-sampleRate', 'sampleRate')}} | {{Spec2('Web Audio API')}} |   | + +## Compatibilité des Navigateurs + +{{Compat("api.AudioBuffer.sampleRate")}} + +## Voir aussi + +- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/audiobuffersourcenode/buffer/index.md b/files/fr/web/api/audiobuffersourcenode/buffer/index.md index 377e917158..81421a685b 100644 --- a/files/fr/web/api/audiobuffersourcenode/buffer/index.md +++ b/files/fr/web/api/audiobuffersourcenode/buffer/index.md @@ -3,36 +3,34 @@ title: AudioBufferSourceNode.buffer slug: Web/API/AudioBufferSourceNode/buffer translation_of: Web/API/AudioBufferSourceNode/buffer --- -

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

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

La propriété buffer de l'interface {{ domxref("AudioBufferSourceNode") }} donne la possibilité de lire un son en utilisant un {{domxref("AudioBuffer")}} comme ressource audio.

+La propriété **`buffer`** de l'interface {{ domxref("AudioBufferSourceNode") }} donne la possibilité de lire un son en utilisant un {{domxref("AudioBuffer")}} comme ressource audio. -

Si la propriété buffer a la valeur NULL, elle définit un canal unique silencieux (chaque échantillon vaut 0).

+Si la propriété `buffer` a la valeur NULL, elle définit un canal unique silencieux (chaque échantillon vaut 0). -

Syntaxe

+## Syntaxe -
AudioBufferSourceNode.buffer = soundBuffer;
-
+ AudioBufferSourceNode.buffer = soundBuffer; -

Valeur

+### Valeur -

Un {{domxref("AudioBuffer")}} qui contient les données représentant le son que le noeud va lire.

+Un {{domxref("AudioBuffer")}} qui contient les données représentant le son que le noeud va lire. -

Exemple

+## Exemple -
-

Note : Pour un exemple complet, voir le code interprété, ou le code source.

-
+> **Note :** Pour un exemple complet, voir [le code interprété](http://mdn.github.io/audio-buffer/), ou [le code source](https://github.com/mdn/audio-buffer). -
var myArrayBuffer = audioCtx.createBuffer(2, frameCount, audioCtx.sampleRate);
+```js
+var myArrayBuffer = audioCtx.createBuffer(2, frameCount, audioCtx.sampleRate);
 
 button.onclick = function() {
   // Remplit le buffer avec du bruit blanc;
   // valeurs aléatoires entre -1.0 et 1.0
-  for (var channel = 0; channel < channels; channel++) {
+  for (var channel = 0; channel < channels; channel++) {
    // Crée le ArrayBuffer qui contient effectivement les données
    var nowBuffering = myArrayBuffer.getChannelData(channel);
-   for (var i = 0; i < frameCount; i++) {
+   for (var i = 0; i < frameCount; i++) {
      // Math.random() is in [0; 1.0]
      // audio doit être compris entre [-1.0; 1.0]
      nowBuffering[i] = Math.random() * 2 - 1;
@@ -43,31 +41,19 @@ button.onclick = function() {
   // C'est le AudioNode à utiliser pour jouer un AudioBuffer
   var source = audioCtx.createBufferSource();
   // Définit le buffer dans l'AudioBufferSourceNode
-  source.buffer = myArrayBuffer;
- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName("Web Audio API", "#widl-AudioBufferSourceNode-buffer", "buffer")}}{{Spec2("Web Audio API")}}Définition initiale
- -

Compatibilité navigateurs

- -

{{Compat("api.AudioBufferSourceNode.buffer")}}

- -

Voir aussi

- -

{{page("/en-US/docs/Web/API/AudioBufferSourceNode","See_also")}}

+ source.buffer = myArrayBuffer; +``` + +## Spécifications + +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------------- | +| {{SpecName("Web Audio API", "#widl-AudioBufferSourceNode-buffer", "buffer")}} | {{Spec2("Web Audio API")}} | Définition initiale | + +## Compatibilité navigateurs + +{{Compat("api.AudioBufferSourceNode.buffer")}} + +## Voir aussi + +{{page("/en-US/docs/Web/API/AudioBufferSourceNode","See_also")}} diff --git a/files/fr/web/api/audiobuffersourcenode/detune/index.md b/files/fr/web/api/audiobuffersourcenode/detune/index.md index bb352ab774..457bab06ba 100644 --- a/files/fr/web/api/audiobuffersourcenode/detune/index.md +++ b/files/fr/web/api/audiobuffersourcenode/detune/index.md @@ -8,37 +8,38 @@ tags: - Web Audio API translation_of: Web/API/AudioBufferSourceNode/detune --- -

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

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

La  propriété detune de l'interface {{ domxref("AudioBufferSourceNode") }} est un {{domxref("AudioParam")}} de type k-rate représentant le désaccord des oscillations en cents.

+La  propriété `detune` de l'interface {{ domxref("AudioBufferSourceNode") }} est un {{domxref("AudioParam")}} de type [k-rate](/fr/docs/DOM/AudioParam#k-rate) représentant le désaccord des oscillations en [cents](http://en.wikipedia.org/wiki/Cent_%28music%29). -

Ses valeur sont comprises entre -1200 et 1200.

+Ses valeur sont comprises entre -1200 et 1200. -

Syntaxe

+## Syntaxe -
var source = contexteAudio.createBufferSource();
-source.detune.value = 100; // valeur en cents
+```js +var source = contexteAudio.createBufferSource(); +source.detune.value = 100; // valeur en cents +``` -
-

Note: bien que l'AudioParam renvoyé soit en lecture seule, la valeur qu'il représente ne l'est pas.

-
+> **Note :** bien que l'`AudioParam` renvoyé soit en lecture seule, la valeur qu'il représente ne l'est pas. -

Valeur

+### Valeur -

Un {{domxref("AudioParam")}} de type k-rate.

+Un {{domxref("AudioParam")}} de type [k-rate](/fr/docs/DOM/AudioParam#k-rate). -

Exemple

+## Exemple -
var audioCtx = new AudioContext();
+```js
+var audioCtx = new AudioContext();
 
 var nbChan = 2;
 var nbFrames = audioCtx.sampleRate * 2.0;
 
 var audioBuffer = audioCtx.createBuffer(nbChan, nbFrames, audioCtx.sampleRate);
 
-for (var chan = 0; chan < nbChan; chan++) {
+for (var chan = 0; chan < nbChan; chan++) {
   var chanData = audioBuffer.getChannelData(chan);
-  for (var i = 0; i < nbFrames; i++) {
+  for (var i = 0; i < nbFrames; i++) {
     chanData[i] = Math.random() * 2 - 1;
   }
 }
@@ -48,33 +49,18 @@ source.buffer = audioBuffer;
 source.connect(audioCtx.destination);
 source.detune.value = 100; // valeur en cents
 source.start();
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-detune', 'detune')}}{{Spec2('Web Audio API')}} 
+``` -

Compatibilité navigateurs

+## Spécifications +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | +| {{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-detune', 'detune')}} | {{Spec2('Web Audio API')}} |   | +## Compatibilité navigateurs -

{{Compat("api.AudioBufferSourceNode.detune")}}

+{{Compat("api.AudioBufferSourceNode.detune")}} -

Voir aussi

+## Voir aussi - +- [Utiliser la Web Audio API](/fr/docs/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/audiobuffersourcenode/index.md b/files/fr/web/api/audiobuffersourcenode/index.md index ce90a90902..0942b127dd 100644 --- a/files/fr/web/api/audiobuffersourcenode/index.md +++ b/files/fr/web/api/audiobuffersourcenode/index.md @@ -9,81 +9,75 @@ tags: - Web Audio API translation_of: Web/API/AudioBufferSourceNode --- -

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

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

L'interface AudioBufferSourceNode est un {{domxref("AudioScheduledSourceNode")}} qui représente une source audio constituée de données audio en mémoire, stockées dans un {{domxref ("AudioBuffer")}}. Elle est particulièrement utile pour lire des sons qui requierrent des conditions de lecture particulières, comme la synchronisation sur un certain rythme, et peuvent être stockés en mémoire. Si ce type de son doit être lu depuis le disque ou le réseau, il conviendra d'utiliser un {{domxref("AudioWorkletNode")}}.

+L'interface **AudioBufferSourceNode** est un {{domxref("AudioScheduledSourceNode")}} qui représente une source audio constituée de données audio en mémoire, stockées dans un {{domxref ("AudioBuffer")}}. Elle est particulièrement utile pour lire des sons qui requierrent des conditions de lecture particulières, comme la synchronisation sur un certain rythme, et peuvent être stockés en mémoire. Si ce type de son doit être lu depuis le disque ou le réseau, il conviendra d'utiliser un {{domxref("AudioWorkletNode")}}. -

{{InheritanceDiagram}}

+{{InheritanceDiagram}} -

Un AudioBufferSourceNode n'a pas d'entrée et il comporte une unique sortie, dont le nombre de canaux est spécifié par la propriété {{domxref("AudioBufferSourceNode.buffer", "buffer")}}. Si aucun buffer n'est paramétré, c'est-à-dire si la valeur de l'attribut est NULL, la sortie contient un seul canal silencieux (chaque échantillon vaut 0).

+Un AudioBufferSourceNode n'a pas d'entrée et il comporte une unique sortie, dont le nombre de canaux est spécifié par la propriété {{domxref("AudioBufferSourceNode.buffer", "buffer")}}. Si aucun buffer n'est paramétré, c'est-à-dire si la valeur de l'attribut est NULL, la sortie contient un seul canal silencieux (chaque échantillon vaut 0). -


- Un {{domxref("AudioBufferSourceNode")}} ne peut être joué qu'une seule fois; autrement dit un seul appel à la fonction AudioBufferSourceNode.start() est autorisé. Pour rejouer le son, il faut créer un nouvel AudioBufferSourceNode. Heureusement ces noeuds ne demandent pas beaucoup de ressource, et les véritables AudioBuffers peuvent être réutilisés. On dit que les AudioBufferSourceNodes doivent être utilisés en mode "one shot": une fois que la lecture est lancée, toutes les références peuvent être supprimées, et elles seront collectées par le ramasse-miette automatiquement quand la lecture des sons sera terminée.

+Un {{domxref("AudioBufferSourceNode")}} ne peut être joué qu'une seule fois; autrement dit un seul appel à la fonction `AudioBufferSourceNode.start()` est autorisé. Pour rejouer le son, il faut créer un nouvel `AudioBufferSourceNode`. Heureusement ces noeuds ne demandent pas beaucoup de ressource, et les véritables `AudioBuffer`s peuvent être réutilisés. On dit que les `AudioBufferSourceNode`s doivent être utilisés en mode "one shot": une fois que la lecture est lancée, toutes les références peuvent être supprimées, et elles seront collectées par le ramasse-miette automatiquement quand la lecture des sons sera terminée. -

Plusieurs appels à la fonction AudioBufferSourceNode.stop() sont autorisés. Le dernier appel remplace le précédent, à condition que le AudioBufferSourceNode n'ait pas déjà atteint la fin du buffer.

+Plusieurs appels à la fonction `AudioBufferSourceNode.stop()` sont autorisés. Le dernier appel remplace le précédent, à condition que le `AudioBufferSourceNode `n'ait pas déjà atteint la fin du buffer. -

L'objet AudioBufferSourceNode prend le contenu d'un AudioBuffer et le convertit en audio

+![L'objet AudioBufferSourceNode prend le contenu d'un AudioBuffer et le convertit en audio](webaudioaudiobuffersourcenode.png) - - - - - - - - - - - - - - + + + + + + + + + + + + + +
Nombre d'entrées0
Nombre de sorties1
Nombre de canauxdéfini par l'objet {{domxref("AudioBuffer")}} associé
Nombre d'entrées0
Nombre de sorties1
Nombre de canauxdéfini par l'objet {{domxref("AudioBuffer")}} associé
-

Constructeur

+## Constructeur -
-
{{domxref("AudioBufferSourceNode.AudioBufferSourceNode", "AudioBufferSourceNode()")}}
-
Crée et retourne un nouvel objet AudioBufferSourceNode. Un {{domxref("AudioBufferSourceNode")}} peut être instancié à l'aide la méthode {{domxref("AudioContext.createBufferSource()")}}.
-
+- {{domxref("AudioBufferSourceNode.AudioBufferSourceNode", "AudioBufferSourceNode()")}} + - : Crée et retourne un nouvel objet `AudioBufferSourceNode`. Un {{domxref("AudioBufferSourceNode")}} peut être instancié à l'aide la méthode {{domxref("AudioContext.createBufferSource()")}}. -

Propriétés

+## Propriétés -

Hérite des propriétés de son parent, {{domxref("AudioNode")}}.

+_Hérite des propriétés de son parent, {{domxref("AudioNode")}}._ -
-
{{domxref("AudioBufferSourceNode.buffer")}}
-
{{domxref ("AudioBuffer")}} qui définit la ressource à jouer; lorsqu'il a la valeur NULL, définit un canal unique silencieux (dans lequel chaque échantillon vaut 0.0).
-
{{domxref("AudioBufferSourceNode.detune")}}
-
{{domxref("AudioParam")}} de type k-rate représentant le désaccordage de la fréquence exprimé en cents. Cette valeur est composée à partir du playbackRate pour déterminer la vitesse à laquelle le son sera jouée. Sa valeur par défaut est 0 (qui correspond à aucun désaccordage), et son rang nominal va de -∞ à ∞.
-
{{domxref("AudioBufferSourceNode.loop")}}
-
Attribut booléen indiquant si la ressource doit être lue de nouveau lorsque la fin de l'{{domxref ("AudioBuffer")}} est atteinte. Sa valeur par défaut est false.
-
{{domxref("AudioBufferSourceNode.loopStart")}} {{optional_inline}}
-
Nombre flottant à double précision indiquant, en secondes, à quel moment de l'{{domxref ("AudioBuffer")}} la lecture doit reprendre. Sa valeur par défaut est 0.
-
{{domxref("AudioBufferSourceNode.loopEnd")}} {{optional_inline}}
-
Nombre flottant à double précision indiquant, en secondes, à quel moment de l'{{domxref ("AudioBuffer")}} la relecture doit s'arrêter (et éventuellement boucler à nouveau). Sa valeur par défaut est 0.
-
{{domxref("AudioBufferSourceNode.playbackRate")}}
-
{{domxref ("AudioParam")}} de type a-rate qui définit le facteur de vitesse à laquelle la ressource audio sera jouée. Comme aucune correction de pitch n'est appliquée sur la sortie, il peut être utilisé pour modifier le pitch de l'échantillon.
-
+- {{domxref("AudioBufferSourceNode.buffer")}} + - : {{domxref ("AudioBuffer")}} qui définit la ressource à jouer; lorsqu'il a la valeur NULL, définit un canal unique silencieux (dans lequel chaque échantillon vaut 0.0). +- {{domxref("AudioBufferSourceNode.detune")}} + - : {{domxref("AudioParam")}} de type [k-rate](/fr/docs/DOM/AudioParam#k-rate) représentant le désaccordage de la fréquence exprimé en [cents](http://en.wikipedia.org/wiki/Cent_%28music%29). Cette valeur est composée à partir du `playbackRate` pour déterminer la vitesse à laquelle le son sera jouée. Sa valeur par défaut est `0` (qui correspond à aucun désaccordage), et son rang nominal va de -∞ à ∞. +- {{domxref("AudioBufferSourceNode.loop")}} + - : Attribut booléen indiquant si la ressource doit être lue de nouveau lorsque la fin de l'{{domxref ("AudioBuffer")}} est atteinte. Sa valeur par défaut est `false`. +- {{domxref("AudioBufferSourceNode.loopStart")}} {{optional_inline}} + - : Nombre flottant à double précision indiquant, en secondes, à quel moment de l'{{domxref ("AudioBuffer")}} la lecture doit reprendre. Sa valeur par défaut est 0. +- {{domxref("AudioBufferSourceNode.loopEnd")}} {{optional_inline}} + - : Nombre flottant à double précision indiquant, en secondes, à quel moment de l'{{domxref ("AudioBuffer")}} la relecture doit s'arrêter (et éventuellement boucler à nouveau). Sa valeur par défaut est 0. +- {{domxref("AudioBufferSourceNode.playbackRate")}} + - : {{domxref ("AudioParam")}} de type [a-rate](/fr/docs/Web/API/AudioParam#a-rate) qui définit le facteur de vitesse à laquelle la ressource audio sera jouée. Comme aucune correction de pitch n'est appliquée sur la sortie, il peut être utilisé pour modifier le pitch de l'échantillon. -

Gestionnaires d'évènement

+### Gestionnaires d'évènement -

Hérite des gestionnaires d'évènement de son parent, {{domxref("AudioScheduledSourceNode")}}.

+_Hérite des gestionnaires d'évènement de son parent, {{domxref("AudioScheduledSourceNode")}}_. -

Méthodes

+## Méthodes -

Hérite des méthodes de son parent, {{domxref("AudioNode")}}.

+_Hérite des méthodes de son parent, {{domxref("AudioNode")}}._ -

Exemple

+## Exemple -

Cet exemple crée un tampon de deux secondes, le remplit avec du bruit blanc et le joue par l'intermédiaire d'un AudioBufferSourceNode.

+Cet exemple crée un tampon de deux secondes, le remplit avec du bruit blanc et le joue par l'intermédiaire d'un `AudioBufferSourceNode`. -
-

Note : Vous pouvez aussi exécuter the code, ou regarder le code source.

-
+> **Note :** Vous pouvez aussi [exécuter the code](http://mdn.github.io/audio-buffer/), ou [regarder le code source](https://github.com/mdn/audio-buffer). -
var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+```js
+var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
 var bouton = document.querySelector('button');
 var pre = document.querySelector('pre');
 var monScript = document.querySelector('script');
@@ -102,10 +96,10 @@ var myArrayBuffer = contexteAudio.createBuffer(2, compteurTrames, contexteAudio.
 bouton.onclick = function() {
   // remplit le tampon avec du bruit blanc;
   // valeurs aléatoires entre -1.0 et 1.0
-  for (var canal = 0; canal < canaux; canal++) {
+  for (var canal = 0; canal < canaux; canal++) {
    // crée le ArrayBuffer qui contient les données
    var nowBuffering = myArrayBuffer.getChannelData(canal);
-   for (var i = 0; i < compteurTrames; i++) {
+   for (var i = 0; i < compteurTrames; i++) {
      // Math.random() est compris entre [0; 1.0]
      // audio doit être compris entre [-1.0; 1.0]
      nowBuffering[i] = Math.random() * 2 - 1;
@@ -122,35 +116,21 @@ bouton.onclick = function() {
   source.connect(contexteAudio.destination);
   // lance la lecture de la source
   source.start();
-}
- -
-

Note : Pour un exemple de decodeAudioData(), voir la page {{domxref("AudioContext.decodeAudioData")}}.

-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#AudioBufferSourceNode-section', 'AudioBufferSourceNode')}}{{Spec2('Web Audio API')}}
+} +``` + +> **Note :** Pour un exemple de `decodeAudioData`(), voir la page {{domxref("AudioContext.decodeAudioData")}}. + +## Spécifications + +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | +| {{SpecName('Web Audio API', '#AudioBufferSourceNode-section', 'AudioBufferSourceNode')}} | {{Spec2('Web Audio API')}} | | -

Compatibilité navigateurs

+## Compatibilité navigateurs -
{{Compat("api.AudioBufferSourceNode")}}
+{{Compat("api.AudioBufferSourceNode")}} -

Voir aussi

+## Voir aussi - +- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/audiobuffersourcenode/loop/index.md b/files/fr/web/api/audiobuffersourcenode/loop/index.md index 739e46de9c..7238b300f4 100644 --- a/files/fr/web/api/audiobuffersourcenode/loop/index.md +++ b/files/fr/web/api/audiobuffersourcenode/loop/index.md @@ -9,35 +9,33 @@ tags: - Web Audio API translation_of: Web/API/AudioBufferSourceNode/loop --- -

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

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

La propriété loop de l'interface {{domxref("AudioBufferSourceNode") }} est un booléen indiquant si la ressource audio doit être rejouée quand à la fin de l'{{domxref("AudioBuffer")}}.

-
+La propriété `loop` de l'interface {{domxref("AudioBufferSourceNode") }} est un booléen indiquant si la ressource audio doit être rejouée quand à la fin de l'{{domxref("AudioBuffer")}}. -

La valeur par défaut de la propriété loop est false.

+La valeur par défaut de la propriété `loop `est `false`. -

Syntaxe

+## Syntaxe -
var source = audioCtx.createBufferSource();
+```js
+var source = audioCtx.createBufferSource();
 source.loop = true;
-
+``` -

Value

+### Value -

Un booléen.

+Un booléen. -

Lorsque la lecture en boucle est activée, le son commence à jouer au point spécifié lorsque {{domxref("AudioBufferSourceNode.start", "start()")}} est appelée. Quand il atteint le point spécifié par la propriété {{domxref("AudioBufferSourceNode.loopEnd", "loopEnd")}}, il recommence au point spécifié par la propriété {{domxref("AudioBufferSourceNode.loopStart", "loopStart")}}

+Lorsque la lecture en boucle est activée, le son commence à jouer au point spécifié lorsque {{domxref("AudioBufferSourceNode.start", "start()")}} est appelée. Quand il atteint le point spécifié par la propriété {{domxref("AudioBufferSourceNode.loopEnd", "loopEnd")}}, il recommence au point spécifié par la propriété {{domxref("AudioBufferSourceNode.loopStart", "loopStart")}} -

Exemple

+## Exemple -

Dans cet exemple, la fonction {{domxref("AudioContext.decodeAudioData")}} est utilisée pour décoder une piste audio et la placer dans un {{domxref("AudioBufferSourceNode")}}. Les boutons mis à disposition permettent de lire et d'arrêter la lecture audio, et un slider est utilisé pour changer la valeur de playbackRate en temps réel. Quand la lecture est terminée, elle boucle.

+Dans cet exemple, la fonction {{domxref("AudioContext.decodeAudioData")}} est utilisée pour décoder une piste audio et la placer dans un {{domxref("AudioBufferSourceNode")}}. Les boutons mis à disposition permettent de lire et d'arrêter la lecture audio, et un slider est utilisé pour changer la valeur de `playbackRate` en temps réel. Quand la lecture est terminée, elle boucle. -
-

Note : Vous pouvez essayer un exemple live (or voir la source.)

-
+> **Note :** Vous pouvez [essayer un exemple live](http://mdn.github.io/decode-audio-data/) (or [voir la source](https://github.com/mdn/decode-audio-data).) -
function getData() {
+```js
+function getData() {
   source = audioCtx.createBufferSource();
   request = new XMLHttpRequest();
 
@@ -70,31 +68,19 @@ play.onclick = function() {
   source.start(0);
   play.setAttribute('disabled', 'disabled');
   playbackControl.removeAttribute('disabled');
-}
- -

Spécification

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-loop', 'loop')}}{{Spec2('Web Audio API')}} 
- -

Compatibilité navigateurs

- -

{{Compat("api.AudioBufferSourceNode.loop")}}

- -

Voir aussi

- - +} +``` + +## Spécification + +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- | +| {{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-loop', 'loop')}} | {{Spec2('Web Audio API')}} |   | + +## Compatibilité navigateurs + +{{Compat("api.AudioBufferSourceNode.loop")}} + +## Voir aussi + +- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/audiobuffersourcenode/loopend/index.md b/files/fr/web/api/audiobuffersourcenode/loopend/index.md index c580e48ecb..b9aa87e87a 100644 --- a/files/fr/web/api/audiobuffersourcenode/loopend/index.md +++ b/files/fr/web/api/audiobuffersourcenode/loopend/index.md @@ -10,31 +10,31 @@ tags: - Web Audio API translation_of: Web/API/AudioBufferSourceNode/loopEnd --- -

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

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

La propriété loopEnd de l'interface {{ domxref("AudioBufferSourceNode") }} est un nombre flottant à double précision qui indique, en secondes, à quel moment de l'{{domxref("AudioBuffer")}} la relecture doit s'arrêter, et éventuellement boucler de nouveau en reprenant à la position indiquée par la propriété {{domxref("AudioBufferSourceNode.loopStart", "loopStart")}}. Elle n'est prise en compte que si la propriété {{domxref("AudioBufferSourceNode.loop", "loop")}} vaut true.

+La propriété **`loopEnd`** de l'interface {{ domxref("AudioBufferSourceNode") }} est un nombre flottant à double précision qui indique, en secondes, à quel moment de l'{{domxref("AudioBuffer")}} la relecture doit s'arrêter, et éventuellement boucler de nouveau en reprenant à la position indiquée par la propriété {{domxref("AudioBufferSourceNode.loopStart", "loopStart")}}. Elle n'est prise en compte que si la propriété {{domxref("AudioBufferSourceNode.loop", "loop")}} vaut `true.` -

Syntaxe

+## Syntaxe -
var source = contexteAudio.createBufferSource();
+```js
+var source = contexteAudio.createBufferSource();
 source.loopEnd = 3;
-
+``` -

Valeur

+### Valeur -

Un nombre flottant à double précision. La valeur par défaut est 0.

+Un nombre flottant à double précision. La valeur par défaut est `0`. -

Exemples

+## Exemples -

Dans cet exemple, la fonction {{domxref("AudioContext.decodeAudioData")}} est utilisée pour décoder une piste audio et la mettre dans un {{domxref("AudioBufferSourceNode")}}. L'interface fournit deux boutons pour démarrer et arrêter la lecture, et des sliders pour modifier les propriétés playbackRate, loopStart et loopEnd à la volée.

+Dans cet exemple, la fonction {{domxref("AudioContext.decodeAudioData")}} est utilisée pour décoder une piste audio et la mettre dans un {{domxref("AudioBufferSourceNode")}}. L'interface fournit deux boutons pour démarrer et arrêter la lecture, et des sliders pour modifier les propriétés `playbackRate`, `loopStart` et `loopEnd` à la volée. -

Lorsque la lecture de la source audio est terminée, elle boucle. Il est possible de contrôler la durée de la boucle en modifiant loopStart et loopEnd. Par exemple, si leurs valeurs sont fixées à 20 et 25, respectivement, le son bouclera entre la 20ème et la 25ème secondes du morceau.

+Lorsque la lecture de la source audio est terminée, elle boucle. Il est possible de contrôler la durée de la boucle en modifiant `loopStart` et `loopEnd`. Par exemple, si leurs valeurs sont fixées à 20 et 25, respectivement, le son bouclera entre la 20ème et la 25ème secondes du morceau. -
-

Note : Voir l'exemple complet et son code source.

-
+> **Note :** Voir [l'exemple complet](http://mdn.github.io/decode-audio-data/) et [son code source](https://github.com/mdn/decode-audio-data). -
function getData() {
+```js
+function getData() {
   source = contexteAudio.createBufferSource();
   requete = new XMLHttpRequest();
 
@@ -75,31 +75,19 @@ loopstartControl.oninput = function() {
 loopendControl.oninput = function() {
   source.loopEnd = loopendControl.value;
   loopendValue.innerHTML = loopendControl.value;
-}
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-loopEnd', 'loopEnd')}}{{Spec2('Web Audio API')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.AudioBufferSourceNode.loopEnd")}}

- -

Voir aussi

- - +} +``` + +## Spécifications + +| Spécification | Statut | Commentaires | +| -------------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------ | +| {{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-loopEnd', 'loopEnd')}} | {{Spec2('Web Audio API')}} |   | + +## Compatibilité des navigateurs + +{{Compat("api.AudioBufferSourceNode.loopEnd")}} + +## Voir aussi + +- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/audiobuffersourcenode/loopstart/index.md b/files/fr/web/api/audiobuffersourcenode/loopstart/index.md index 11a5b2165e..c5455f647e 100644 --- a/files/fr/web/api/audiobuffersourcenode/loopstart/index.md +++ b/files/fr/web/api/audiobuffersourcenode/loopstart/index.md @@ -3,30 +3,30 @@ title: AudioBufferSourceNode.loopStart slug: Web/API/AudioBufferSourceNode/loopStart translation_of: Web/API/AudioBufferSourceNode/loopStart --- -

{{ APIRef("Web Audio API") }}
- La propriété loopStart de l'interface {{ domxref("AudioBufferSourceNode") }} est un nombre flottant à double précision qui indique, en secondes, à quel moment de l'{{domxref("AudioBuffer")}} la lecture doit reprendre lors d'une boucle. Elle n'est prise en compte que lorque la propriété {{domxref("AudioBufferSourceNode.loop", "loop")}} est true.

+{{ APIRef("Web Audio API") }} +La propriété `loopStart` de l'interface {{ domxref("AudioBufferSourceNode") }} est un nombre flottant à double précision qui indique, en secondes, à quel moment de l'{{domxref("AudioBuffer")}} la lecture doit reprendre lors d'une boucle. Elle n'est prise en compte que lorque la propriété {{domxref("AudioBufferSourceNode.loop", "loop")}} est `true`. -

Syntaxe

+## Syntaxe -
var source = contexteAudio.createBufferSource();
+```js
+var source = contexteAudio.createBufferSource();
 source.loopStart = 3;
-
+``` -

Valeur

+### Valeur -

Un nombre flottant à double précision. La valeur par défaut est 0.

+Un nombre flottant à double précision. La valeur par défaut est `0`. -

Exemple

+## Exemple -

Dans cet exemple, la fonction {{domxref("AudioContext.decodeAudioData")}} est utilisée pour décoder une piste audio et la mettre dans un {{domxref("AudioBufferSourceNode")}}. L'interface fournit deux boutons pour démarrer et arrêter la lecture, et des sliders pour modifier les propriétés playbackRate, loopStart et loopEnd à la volée.

+Dans cet exemple, la fonction {{domxref("AudioContext.decodeAudioData")}} est utilisée pour décoder une piste audio et la mettre dans un {{domxref("AudioBufferSourceNode")}}. L'interface fournit deux boutons pour démarrer et arrêter la lecture, et des sliders pour modifier les propriétés `playbackRate`, `loopStart` et `loopEnd` à la volée. -

Lorsque la lecture de la source audio est terminée, elle boucle. Il est possible de contrôler la durée de la boucle en modifiant loopStart et loopEnd. Par exemple, si leurs valeurs sont fixées à 20 et 25, respectivement, le son bouclera entre la 20ème et la 25ème secondes du morceau.

+Lorsque la lecture de la source audio est terminée, elle boucle. Il est possible de contrôler la durée de la boucle en modifiant `loopStart` et `loopEnd`. Par exemple, si leurs valeurs sont fixées à 20 et 25, respectivement, le son bouclera entre la 20ème et la 25ème secondes du morceau. -
-

Note : Voir  l'exemple complet et son code source.

-
+> **Note :** Voir [ l'exemple complet](http://mdn.github.io/decode-audio-data/) et [son code source](https://github.com/mdn/decode-audio-data). -
function getData() {
+```js
+function getData() {
   source = contexteAudio.createBufferSource();
   requete = new XMLHttpRequest();
 
@@ -67,31 +67,19 @@ loopstartControl.oninput = function() {
 loopendControl.oninput = function() {
   source.loopEnd = loopendControl.value;
   loopendValue.innerHTML = loopendControl.value;
-}
- -

Spécification

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-loopStart', 'loopStart')}}{{Spec2('Web Audio API')}} 
- -

Compatibilité navigateurs

- -

{{Compat("api.AudioBufferSourceNode.loopStart")}}

- -

Voir aussi

- - +} +``` + +## Spécification + +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | +| {{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-loopStart', 'loopStart')}} | {{Spec2('Web Audio API')}} |   | + +## Compatibilité navigateurs + +{{Compat("api.AudioBufferSourceNode.loopStart")}} + +## Voir aussi + +- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/audiobuffersourcenode/playbackrate/index.md b/files/fr/web/api/audiobuffersourcenode/playbackrate/index.md index 5f13016165..ff1797b523 100644 --- a/files/fr/web/api/audiobuffersourcenode/playbackrate/index.md +++ b/files/fr/web/api/audiobuffersourcenode/playbackrate/index.md @@ -3,49 +3,44 @@ title: AudioBufferSourceNode.playbackRate slug: Web/API/AudioBufferSourceNode/playbackRate translation_of: Web/API/AudioBufferSourceNode/playbackRate --- -

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

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

La propriété playbackRate de l'interface {{ domxref("AudioBufferSourceNode") }} est un {{domxref("AudioParam")}} de type k-rate qui définit la vitesse à laquelle le contenu audio sera lu.

-
+La propriété `playbackRate` de l'interface {{ domxref("AudioBufferSourceNode") }} est un {{domxref("AudioParam")}} de type [k-rate](/en-US/docs/DOM/AudioParam#k-rate) qui définit la vitesse à laquelle le contenu audio sera lu. -

Une valeur de 1.0 (c'est ) indique que le son doit être lu à la vitesse de son taux d'échantillonnage, une valeur inférieure qu'il doit être lu plus lentement, et une valeur supérieure plus rapidement. la valeur par défaut est 1.0. Pour toute autre valeur l'AudioBufferSourceNode rééchantillone le son avant de l'envoyer vers la sortie.

+Une valeur de 1.0 (c'est ) indique que le son doit être lu à la vitesse de son taux d'échantillonnage, une valeur inférieure qu'il doit être lu plus lentement, et une valeur supérieure plus rapidement. la valeur par défaut est `1.0`. Pour toute autre valeur l'`AudioBufferSourceNode` rééchantillone le son avant de l'envoyer vers la sortie. -

Syntaxe

+## Syntaxe -
var source = contexteAudio.createBufferSource();
+```js
+var source = contexteAudio.createBufferSource();
 source.playbackRate.value = 1.25; // proportion : 25% plus rapide que la vitesse normale
-
+``` -
-

Note : Bien que le AudioParam renvoyé soit en lecture seule, la valeur qu'il représente ne l'est pas.

-
+> **Note :** Bien que le `AudioParam` renvoyé soit en lecture seule, la valeur qu'il représente ne l'est pas. -

Valeur

+### Valeur -

Un {{domxref("AudioParam")}} dont la {{domxref("AudioParam.value", "value")}} est un nombre flottant à double précision, qui représente la vitesse de lecture d'un son en proportion décimale du taux d'échantillonnage original.

+Un {{domxref("AudioParam")}} dont la {{domxref("AudioParam.value", "value")}} est un nombre flottant à double précision, qui représente la vitesse de lecture d'un son en proportion décimale du taux d'échantillonnage original. -

Considérons un buffer audio échantillonné à 44.1 kHz (44,100 échantillons par seconde). Observons l'effet de quelques valeurs de la propriété playbackRate :

+Considérons un buffer audio échantillonné à 44.1 kHz (44,100 échantillons par seconde). Observons l'effet de quelques valeurs de la propriété `playbackRate` : -
    -
  • un playbackRate de 1.0 entraîne une lecture à vitesse originale : 44,100 Hz.
    • -
  • un playbackRate de 0.5 entraîne une lecture à la moitié de la vitesse originale : 22,050 Hz.
    • -
  • un playbackRate de 2.0 entraîne une lecture au double de la vitesse originale : 88,200 Hz.
    • -
+- un `playbackRate` de 1.0 entraîne une lecture à vitesse originale : 44,100 Hz. +- un `playbackRate` de 0.5 entraîne une lecture à la moitié de la vitesse originale : 22,050 Hz. +- un `playbackRate` de 2.0 entraîne une lecture au double de la vitesse originale : 88,200 Hz. -

Exemple

+## Exemple -

Dans cet exemple, la fonction {{domxref("AudioContext.decodeAudioData")}} est utilisée pour décoder une piste audio et la mettre dans un {{domxref("AudioBufferSourceNode")}}. L'interface fournit deux boutons pour démarrer et arrêter la lecture, et des sliders pour modifier les propriétés playbackRate, loopStart et loopEnd à la volée.

+Dans cet exemple, la fonction {{domxref("AudioContext.decodeAudioData")}} est utilisée pour décoder une piste audio et la mettre dans un {{domxref("AudioBufferSourceNode")}}. L'interface fournit deux boutons pour démarrer et arrêter la lecture, et des sliders pour modifier les propriétés `playbackRate`, `loopStart` et `loopEnd` à la volée. -
-

Note : Voir  l'exemple complet et son code source.

-
+> **Note :** Voir [ l'exemple complet](http://mdn.github.io/decode-audio-data/) et [son code source](https://github.com/mdn/decode-audio-data). -
<input class="playback-rate-control" type="range" min="0.25" max="3" step="0.05" value="1">
-<span class="playback-rate-value">1.0</span>
-
+```html + +1.0 +``` -
function getData() {
+```js
+function getData() {
   source = contexteAudio.createBufferSource();
   requete = new XMLHttpRequest();
 
@@ -94,31 +89,19 @@ stop.onclick = function() {
 playbackControl.oninput = function() {
   source.playbackRate.value = playbackControl.value;
   playbackValue.innerHTML = playbackControl.value;
-}
- -

Spécification

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-playbackRate', 'playbackRate')}}{{Spec2('Web Audio API')}} 
- -

Compatibilité navigateurs

- -

{{Compat("api.AudioBufferSourceNode.playbackRate")}}

- -

Voir aussi

- - +} +``` + +## Spécification + +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- | +| {{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-playbackRate', 'playbackRate')}} | {{Spec2('Web Audio API')}} |   | + +## Compatibilité navigateurs + +{{Compat("api.AudioBufferSourceNode.playbackRate")}} + +## Voir aussi + +- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/audiobuffersourcenode/start/index.md b/files/fr/web/api/audiobuffersourcenode/start/index.md index b07993659d..a8d0fbeee7 100644 --- a/files/fr/web/api/audiobuffersourcenode/start/index.md +++ b/files/fr/web/api/audiobuffersourcenode/start/index.md @@ -3,83 +3,62 @@ title: AudioBufferSourceNode.start() slug: Web/API/AudioBufferSourceNode/start translation_of: Web/API/AudioBufferSourceNode/start --- -

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

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

La méthode start() de l'interface {{ domxref("AudioBufferSourceNode") }} permet de planifier la lecture du buffer audio.

-
+La méthode `start()` de l'interface {{ domxref("AudioBufferSourceNode") }} permet de planifier la lecture du buffer audio. -

Syntaxe

+## Syntaxe -
AudioBufferSourceNode.start([when][, offset][, duration]);
-
+ AudioBufferSourceNode.start([when][, offset][, duration]); -

Paramètres

+### Paramètres -
-
when {{optional_inline}}
-
Le paramètre when indique à quel moment la lecture doit commencer. Si when représente une date passée, la lecture commence immédiatement. Si la méthode est invoquée plus d'une fois, ou après un appel à AudioBufferSourceNode.stop(), une exception est levée.
- Le temps, en secondes, auquel la lecture doit commencer, spécifié dans le même systèmes de coordonnées temporalles utilisé par {{domxref("AudioContext")}}. Si when est inférieur à ({{domxref("AudioContext.currentTime")}}, ou égal à 0, la lecture commence immédiatement. La valeur par défaut est 0.
-
offset {{optional_inline}}
-
Décalage, en secondes, indiquant où la lecture doit commencer. Par example, pour lancer la lecture au milieu d'un son durant 10 secondes, l'offset doit être 5. La valeur par défaut, 0, démarre la lecture au début du buffer. Les valeurs supérieures à la fin du son sont silencieusement ajustées à la valeur maximum possible (basée sur les propriétés {{domxref("AudioBuffer.duration", "duration")}} et/ou {{domxref("AudioBufferSourceNode.loopEnd", "loopEnd")}}). Le calcul du décalage se fait en utilisant le taux d'échantillonnage original, donc même lorsqu'un son est lu au double de sa vitesse, le milieu d'un buffer de 10 secondes est toujours 5.
-
duration {{optional_inline}}
-
Le paramètre duration, dont la valeur par défaut est la longueur du contenu moins le décalage (offset) du début de lecture, indique la longueur du contenu audio qui doit être lue.
- Durée du son qui doit être lue, en secondes. Si ce paramètre n'est pas spécifié ou a pour valeur 0 (valeur par défaut), le son est lu jusqu'à la fin, s'il n'est pas arrêté par la méthode {{domxref("AudioScheduledSourceNode.stop", "stop()")}}. L'utilisation de ce paramètre est fonctionellement équivalente à l'appel de la méthode start(when, offset) suivi de la méthode stop(when+duration).
-
+- when {{optional_inline}} + - : Le paramètre `when` indique _à quel moment_ la lecture doit commencer. Si `when` représente une date passée, la lecture commence immédiatement. Si la méthode est invoquée plus d'une fois, ou après un appel à `AudioBufferSourceNode.stop()`, une exception est levée. + Le temps, en secondes, auquel la lecture doit commencer, spécifié dans le même systèmes de coordonnées temporalles utilisé par {{domxref("AudioContext")}}. Si `when` est inférieur à ({{domxref("AudioContext.currentTime")}}, ou égal à 0, la lecture commence immédiatement. **La valeur par défaut est 0.** +- offset {{optional_inline}} + - : Décalage, en secondes, indiquant où la lecture doit commencer. Par example, pour lancer la lecture au milieu d'un son durant 10 secondes, l'`offset` doit être 5. La valeur par défaut, 0, démarre la lecture au début du buffer. Les valeurs supérieures à la fin du son sont silencieusement ajustées à la valeur maximum possible (basée sur les propriétés {{domxref("AudioBuffer.duration", "duration")}} et/ou {{domxref("AudioBufferSourceNode.loopEnd", "loopEnd")}}). Le calcul du décalage se fait en utilisant le taux d'échantillonnage original, donc même lorsqu'un son est lu au double de sa vitesse, le milieu d'un buffer de 10 secondes est toujours 5. +- duration {{optional_inline}} + - : Le paramètre `duration`, dont la valeur par défaut est la longueur du contenu moins le décalage (offset) du début de lecture, indique la longueur du contenu audio qui doit être lue. + Durée du son qui doit être lue, en secondes. Si ce paramètre n'est pas spécifié ou a pour valeur 0 (valeur par défaut), le son est lu jusqu'à la fin, s'il n'est pas arrêté par la méthode {{domxref("AudioScheduledSourceNode.stop", "stop()")}}. L'utilisation de ce paramètre est fonctionellement équivalente à l'appel de la méthode `start(when, offset)` suivi de la méthode `stop(when+duration)`. -

Valeur de retour

+### Valeur de retour -

{{jsxref("undefined")}}.

+{{jsxref("undefined")}}. -

Exceptions

+### Exceptions -
-
TypeError
-
Une valeur négative a été spécifiée pour au moins l'un des trois paramètres de temps. N'essayez pas de trafiquer les lois de la physique.
-
InvalidStateError
-
start() a déjà été appelé. Cette fonction ne peut être appelée qu'une seule fois pour chaque AudioBufferSourceNode.
-
+- `TypeError` + - : Une valeur négative a été spécifiée pour au moins l'un des trois paramètres de temps. N'essayez pas de trafiquer les lois de la physique. +- `InvalidStateError` + - : `start()` a déjà été appelé. Cette fonction ne peut être appelée qu'une seule fois pour chaque `AudioBufferSourceNode`. -

Exemples

+## Exemples -

L'exemple le plus simple lance la lecture du buffer audio depuis le début - inutile de spécifier des paramètres dans ce cas:

+L'exemple le plus simple lance la lecture du buffer audio depuis le début - inutile de spécifier des paramètres dans ce cas: -
source.start();
+```js +source.start(); +``` -

L'exemple suivant, plus complexe, jouera, après une seconde de pause, un tronçon d'une durée de 10 secondes à partir de la 3ème seconde des données en mémoire.

+L'exemple suivant, plus complexe, jouera, après une seconde de pause, un tronçon d'une durée de 10 secondes à partir de la 3ème seconde des données en mémoire. -
source.start(contexteAudio.currentTime + 1,3,10);
+```js +source.start(contexteAudio.currentTime + 1,3,10); +``` -
-

Note : Pour un exemple plus complexe montrant la méthode start() en action, consulter l'exemple {{domxref("AudioContext.decodeAudioData")}}. Voir aussi  l'exemple complet et son code source.

-
+> **Note :** Pour un exemple plus complexe montrant la méthode `start()` en action, consulter l'exemple {{domxref("AudioContext.decodeAudioData")}}. Voir aussi [ l'exemple complet](http://mdn.github.io/decode-audio-data/) et [son code source](https://github.com/mdn/decode-audio-data). -
-
+## Spécification -

Spécification

+| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | +| {{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-start-void-double-when-double-offset-double-duration', 'start()')}} | {{Spec2('Web Audio API')}} |   | - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-start-void-double-when-double-offset-double-duration', 'start()')}}{{Spec2('Web Audio API')}} 
+## Compatibilité navigateurs -

Compatibilité navigateurs

+{{Compat("api.AudioBufferSourceNode.start")}} -

{{Compat("api.AudioBufferSourceNode.start")}}

+## Voir aussi -

Voir aussi

- - +- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/audiocontext/createmediaelementsource/index.md b/files/fr/web/api/audiocontext/createmediaelementsource/index.md index 3809f56dcd..298453e5e9 100644 --- a/files/fr/web/api/audiocontext/createmediaelementsource/index.md +++ b/files/fr/web/api/audiocontext/createmediaelementsource/index.md @@ -3,39 +3,36 @@ title: AudioContext.createMediaElementSource() slug: Web/API/AudioContext/createMediaElementSource translation_of: Web/API/AudioContext/createMediaElementSource --- -

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

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

La méthode createMediaElementSource() de l’interface {{ domxref("AudioContext") }} est utilisée pour créer un nouvel objet {{ domxref("MediaElementAudioSourceNode") }} d’après un élément HTML {{ htmlelement("audio") }} ou {{ htmlelement("video") }} existant, permettant ainsi de jouer et de manipuler l’audio de cet élément.

-
+La méthode `createMediaElementSource()` de l’interface {{ domxref("AudioContext") }} est utilisée pour créer un nouvel objet {{ domxref("MediaElementAudioSourceNode") }} d’après un élément HTML {{ htmlelement("audio") }} ou {{ htmlelement("video") }} existant, permettant ainsi de jouer et de manipuler l’audio de cet élément. -

Pour plus de détails à propos des nœuds source audio des éléments média, constultez la page de référence de {{ domxref("MediaElementAudioSourceNode") }}.

+Pour plus de détails à propos des nœuds source audio des éléments média, constultez la page de référence de {{ domxref("MediaElementAudioSourceNode") }}. -

Syntaxe

+## Syntaxe -
var audioCtx = new AudioContext();
-var source = audioCtx.createMediaElementSource(myMediaElement);
+```js +var audioCtx = new AudioContext(); +var source = audioCtx.createMediaElementSource(myMediaElement); +``` -

Paramètres

+### Paramètres -
-
myMediaElement
-
Un objet {{domxref("HTMLMediaElement")}} que vous voulez injecter dans un graphe de traitement audio pour le manipuler.
-
+- `myMediaElement` + - : Un objet {{domxref("HTMLMediaElement")}} que vous voulez injecter dans un graphe de traitement audio pour le manipuler. -

Valeur de retour

+### Valeur de retour -

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

+Un {{domxref("MediaElementAudioSourceNode")}}. -

Exemple

+## Exemple -

Cet exemple simple crée une source depuis un élément {{ htmlelement("audio") }} grâce à createMediaElementSource(), puis passe le signal audio à travers un {{ domxref("GainNode") }} avant de l’injecter dans le {{ domxref("AudioDestinationNode") }} pour la lecture. Quand le pointeur de la souris est déplacé, la fonction updatePage() est invoquée, et calcule le gain actuel comme rapport de la position Y de la souris divisée par la hauteur totale de la fenêtre. Vous pouvez ainsi augmenter ou diminuer le volume de la musique jouée, en déplaçant le pointeur de la souris vers le haut ou vers le bas.

+Cet exemple simple crée une source depuis un élément {{ htmlelement("audio") }} grâce à `createMediaElementSource()`, puis passe le signal audio à travers un {{ domxref("GainNode") }} avant de l’injecter dans le {{ domxref("AudioDestinationNode") }} pour la lecture. Quand le pointeur de la souris est déplacé, la fonction `updatePage()` est invoquée, et calcule le gain actuel comme rapport de la position Y de la souris divisée par la hauteur totale de la fenêtre. Vous pouvez ainsi augmenter ou diminuer le volume de la musique jouée, en déplaçant le pointeur de la souris vers le haut ou vers le bas. -
-

Note : Vous pouvez également voir cet exemple en temps réel, ou examiner le code source.

-
+> **Note :** Vous pouvez également [voir cet exemple en temps réel](http://mdn.github.io/webaudio-examples/media-source-buffer/), ou [examiner le code source](https://github.com/mdn/webaudio-examples/tree/master/media-source-buffer). -
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+```js
+var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
 var myAudio = document.querySelector('audio');
 var pre = document.querySelector('pre');
 var myScript = document.querySelector('script');
@@ -70,35 +67,21 @@ function updatePage(e) {
 // et le nœud gain à la destination, de sorte qu’on puisse jouer la
 // musique et ajuster le volume avec le curseur de la souris
 source.connect(gainNode);
-gainNode.connect(audioCtx.destination);
- -
-

Note : Du fait de l’appel à createMediaElementSource(), la lecture de l’audio du {{ domxref("HTMLMediaElement") }} est redirigée dans le graphe de traitement de l’AudioContext. Ainsi, jouer / mettre en pause le média est toujours possible via l’API des éléments média ou via les contrôles du lecteur.

-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#widl-AudioContext-createMediaElementSource-MediaElementAudioSourceNode-HTMLMediaElement-mediaElement', 'createMediaElementSource()')}}{{Spec2('Web Audio API')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.AudioContext.createMediaElementSource")}}

- -

Voir aussi

- - +gainNode.connect(audioCtx.destination); +``` + +> **Note :** Du fait de l’appel à `createMediaElementSource()`, la lecture de l’audio du {{ domxref("HTMLMediaElement") }} est redirigée dans le graphe de traitement de l’AudioContext. Ainsi, jouer / mettre en pause le média est toujours possible via l’API des éléments média ou via les contrôles du lecteur. + +## Spécifications + +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | +| {{SpecName('Web Audio API', '#widl-AudioContext-createMediaElementSource-MediaElementAudioSourceNode-HTMLMediaElement-mediaElement', 'createMediaElementSource()')}} | {{Spec2('Web Audio API')}} |   | + +## Compatibilité des navigateurs + +{{Compat("api.AudioContext.createMediaElementSource")}} + +## Voir aussi + +- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/audiocontext/index.md b/files/fr/web/api/audiocontext/index.md index 6378d52164..e855ad68ed 100644 --- a/files/fr/web/api/audiocontext/index.md +++ b/files/fr/web/api/audiocontext/index.md @@ -10,163 +10,140 @@ tags: - Web Audio API translation_of: Web/API/AudioContext --- -

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

- -

L'interface AudioContext représente un graphe de traitement audio fait de modules audio reliés entre eux, chaque module correspondant à un {{domxref ("AudioNode")}}. Un contexte audio contrôle à la fois la création des nœuds qu'il contient et l'exécution du traitement audio, ou du décodage. On commence toujours par créer un contexte audio, et tout ce qui va se passer ensuite se situera dans ce contexte.

- -

Un contexte audio peut être la cible d'événements, par conséquent il implémente l'interface {{domxref ("EventTarget")}}.

- -

{{InheritanceDiagram}}

- -

Constructeur

- -
-
{{domxref("AudioContext.AudioContext", "AudioContext()")}}
-
Crée et retourne un nouvel objet AudioContext.
-
- -

Propriétés

- -
-
{{domxref("AudioContext.currentTime")}} {{readonlyInline}}
-
Renvoie un double flottant, qui représente un temps en secondes en augmentation continue, utilisé pour situer dans le temps. Il commence à 0.
-
{{domxref("AudioContext.destination")}} {{readonlyInline}}
-
Retourne un {{domxref ("AudioDestinationNode")}} représentant la destination finale de tous les fichiers audio dans un contexte. On peut le considérer comme un dispositif de rendu audio.
-
- -
-
{{domxref("AudioContext.listener")}} {{readonlyInline}}
-
Renvoie l'objet {{domxref("AudioListener")}}, utilisé pour la spatialisation 3D.
-
- -
-
{{domxref("AudioContext.sampleRate")}} {{readonlyInline}}
-
Renvoie un nombre flottant représentant la fréquence d'échantillonnage (échantillons par seconde) utilisée par tous les nœuds dans ce contexte.La fréquence d'échantillonnage d'un contexte audio ne peut pas être modifiée.
-
{{domxref("AudioContext.state")}} {{readonlyInline}}
-
Renvoie l'état actuel du contexte audio.
-
{{domxref("AudioContext.mozAudioChannelType")}} {{ non-standard_inline() }} {{readonlyInline}}
-
Sur Firefox OS, utilisé pour renvoyer la piste audio dans laquelle sera jouée le son qui sera lancé dans le contexte audio.
-
- -

Event handlers

- -
-
{{domxref("AudioContext.onstatechange")}}
-
Un gestionnaire d'évènement déclenché par un évènement du type {{event("statechange")}}. Cela a lieu quand l'état du contexte audio change, en raison de l'appel des méthodes de changement d'état ({{domxref("AudioContext.suspend")}}, {{domxref("AudioContext.resume")}}, ou {{domxref("AudioContext.close")}}.)
-
- -

Méthodes

- -

Met également en œuvre des méthodes de l'interface {{domxref("EventTarget")}}.

- -
-
{{domxref("AudioContext.close()")}}
-
Supprime le contexte audio, et libère toutes les ressources audio système qu'il utilisait.
-
{{domxref("AudioContext.createBuffer()")}}
-
Crée un nouvel objet {{domxref ("AudioBuffer")}} vide, auquel on pourra assigner des données et que l'on pourra jouer via un {{ domxref("AudioBufferSourceNode") }}
-
{{domxref("AudioContext.createBufferSource()")}}
-
Crée un objet {{domxref ("AudioBufferSourceNode")}}, qui peut être utilisé pour jouer et manipuler des données audio contenues dans un objet {{domxref("AudioBuffer")}}. Les {{domxref("AudioBuffer")}}s sont créés avec la fonction {{domxref("AudioContext.createBuffer")}} ou retournés par la fonction {{domxref("AudioContext.decodeAudioData")}} quand elle décode une piste audio avec succès.
-
{{domxref("AudioContext.createMediaElementSource()")}}
-
Crée un objet {{domxref ("MediaElementAudioSourceNode")}} associé à {{domxref ("HTMLMediaElement")}}. Il peut être utilisé pour manipuler le son d'éléments {{HTMLElement("video")}} ou {{HTMLElement("audio")}}.
-
{{domxref("AudioContext.createMediaStreamSource()")}}
-
Crée un objet {{domxref ("MediaStreamAudioSourceNode")}} associé à un {{domxref ("MediaStream")}} correspondant à un flux audio, qui peut provenir du microphone de l'ordinateur local ou d'autres sources.
-
{{domxref("AudioContext.createMediaStreamDestination()")}}
-
Crée un objet {{domxref ("MediaStreamAudioDestinationNode")}} associé à un {{domxref ("MediaStream")}} correspondant à un flux audio, qui peut être stocké dans un fichier local ou envoyé à un autre ordinateur.
-
{{domxref("AudioContext.createScriptProcessor()")}}
-
Crée un objet {{domxref ("ScriptProcessorNode")}} qui sert à faire du traitement audio directement avec JavaScript.
-
{{domxref("AudioContext.createStereoPanner()")}}
-
Crée un objet {{domxref ("StereoPannerNode")}} qui permet d'appliquer une panoramique sonore à une source audio.
-
{{domxref("AudioContext.createAnalyser()")}}
-
Crée un objet {{domxref ("AnalyserNode")}} qui expose les données de temps et de fréquence, et peut être utilisé pour créer des visualisations de données.
-
- -
-
{{domxref("AudioContext.createBiquadFilter()")}}
-
Crée un objet {{domxref ("BiquadFilterNode")}}, qui représente un filtre de deuxième niveau, qui combine différents types de filtres de base : fréquences hautes, fréquences basses, passe-bande, etc.
-
- -
-
{{domxref("AudioContext.createChannelMerger()")}}
-
Crée un objet {{domxref ("ChannelMergerNode")}} qui permet de rassembler les canaux de différents flux audio en un seul flux.
-
{{domxref("AudioContext.createChannelSplitter()")}}
-
Crée un objet {{domxref ("ChannelSplitterNode")}} utilisé pour accéder aux différents canaux d'un même flux audio et les traiter séparément.
-
{{domxref("AudioContext.createConvolver()")}}
-
Crée un objet {{domxref ("ConvolverNode")}}, qui permet d'appliquer des effets de convolution à un graphe audio, par exemple un effet de réverb.
-
{{domxref("AudioContext.createDelay()")}}
-
Crée un objet {{domxref ("DelayNode")}}, utilisé pour retarder le signal audio entrant d'un certain temps. Il est également 
-
{{domxref("AudioContext.createDynamicsCompressor()")}}
-
Crée un objet {{domxref("DynamicsCompressorNode")}} qui permet d'appliquer une compression sur un signal audio.
-
{{domxref("AudioContext.createGain()")}}
-
Crée un objet {{domxref ("GainNode")}} qui permet de controller le niveau sonore global d'un graphe audio.
-
{{domxref("AudioContext.createIIRFilter()")}}
-
Crée un objet {{domxref("IIRFilterNode")}}, qui représente un filtre de second ordre configurable comme différents types de filtres communs.
-
{{domxref("AudioContext.createOscillator()")}}
-
Crée un objet {{domxref("OscillatorNode")}} qui représente une onde périodique. Il génère simplement un son.
-
{{domxref("AudioContext.createPanner()")}}
-
Crée un objet {{domxref("PannerNode")}} utilisé pour spatialiser une source audio entrante dans un espace 3D.
-
{{domxref("AudioContext.createPeriodicWave()")}}
-
Crée un objet {{domxref("PeriodicWave")}}, utilisé pour définir une onde périodique qui peut être utilisée pour contrôler la sortie d'un {{ domxref("OscillatorNode") }}.
-
{{domxref("AudioContext.createWaveShaper()")}}
-
Crée un objet {{domxref ("WaveShaperNode")}}, qui permet d'implémenter des effets de distorsion non linéaires.
-
{{domxref("AudioContext.createAudioWorker()")}}
-
Crée un objet {{domxref("AudioWorkerNode")}}, qui permet d'interagir avec un thread web worker afin de générer, traiter, ou analyser le son directement. Ajouté à la spec le 29 août 2014, mais encore implémenté par aucun des navigateurs à ce jour.
-
{{domxref("AudioContext.decodeAudioData()")}}
-
Décode de façon asynchrone les données d'un fichier audio contenues dans un objet {{domxref("ArrayBuffer")}}. Dans ce cas, le ArrayBuffer est en général chargé depuis un attribut de réponse {{domxref("XMLHttpRequest")}} quand l'attribut responseType est arraybuffer. Cette méthode ne fonctionne que sur des fichiers complets, pas sur des fragments de fichiers.
-
{{domxref("AudioContext.resume()")}}
-
Reprend le défilement du temps dans un contexte audio où il a précédemment été suspendu.
-
{{domxref("AudioContext.suspend()")}}
-
Suspend le défilement du temps dans un contexte audio, empêchant de façon temporaire l'accès au hardware audio, et réduisant par là l'utilisation du CPU et de la batterie.
-
- -

Méthodes obsolètes

- -
-
{{domxref("AudioContext.createJavaScriptNode()")}}
-
Crée un objet {{domxref("JavaScriptNode")}}, utilisé pour un traitement audio directement en JavaScript. Cette méthode est obsolète, et a été remplacée par {{domxref("AudioContext.createScriptProcessor()")}}.
-
{{domxref("AudioContext.createWaveTable()")}}
-
Crée un objet {{domxref("WaveTableNode")}}, utilisé pour définir une onde audio périodique. Cette méthode est obsolète, et a été remplacée par {{domxref("AudioContext.createPeriodicWave()")}}.
-
- -

Exemples

- -

Déclaration basique d'un audio context :

- -
var contexteAudio = new AudioContext;
- -

Variante avec gestion de la compatibilité navigateur:

- -
var AudioContext = window.AudioContext || window.webkitAudioContext;
-var contexteAudio = new AudioContext();
-
-var oscillatorNode = contexteAudio.createOscillator();
-var gainNode = contexteAudio.createGain();
-var finish = contexteAudio.destination;
-// etc.
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#AudioContext-section', 'AudioNode')}}{{Spec2('Web Audio API')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.AudioContext")}}

- -

Voir aussi

- - +{{APIRef("Web Audio API")}} + +L'interface AudioContext représente un graphe de traitement audio fait de modules audio reliés entre eux, chaque module correspondant à un {{domxref ("AudioNode")}}. Un contexte audio contrôle à la fois la création des nœuds qu'il contient et l'exécution du traitement audio, ou du décodage. On commence toujours par créer un contexte audio, et tout ce qui va se passer ensuite se situera dans ce contexte. + +Un contexte audio peut être la cible d'événements, par conséquent il implémente l'interface {{domxref ("EventTarget")}}. + +{{InheritanceDiagram}} + +## Constructeur + +- {{domxref("AudioContext.AudioContext", "AudioContext()")}} + - : Crée et retourne un nouvel objet `AudioContext`. + +## Propriétés + +- {{domxref("AudioContext.currentTime")}} {{readonlyInline}} + - : Renvoie un double flottant, qui représente un temps en secondes en augmentation continue, utilisé pour situer dans le temps. Il commence à `0`. +- {{domxref("AudioContext.destination")}} {{readonlyInline}} + - : Retourne un {{domxref ("AudioDestinationNode")}} représentant la destination finale de tous les fichiers audio dans un contexte. On peut le considérer comme un dispositif de rendu audio. + + + +- {{domxref("AudioContext.listener")}} {{readonlyInline}} + - : Renvoie l'objet {{domxref("AudioListener")}}, utilisé pour la spatialisation 3D. + + + +- {{domxref("AudioContext.sampleRate")}} {{readonlyInline}} + - : Renvoie un nombre flottant représentant la fréquence d'échantillonnage (échantillons par seconde) utilisée par tous les nœuds dans ce contexte.La fréquence d'échantillonnage d'un contexte audio ne peut pas être modifiée. +- {{domxref("AudioContext.state")}} {{readonlyInline}} + - : Renvoie l'état actuel du contexte audio. +- {{domxref("AudioContext.mozAudioChannelType")}} {{ non-standard_inline() }} {{readonlyInline}} + - : Sur Firefox OS, utilisé pour renvoyer la piste audio dans laquelle sera jouée le son qui sera lancé dans le contexte audio. + +### Event handlers + +- {{domxref("AudioContext.onstatechange")}} + - : Un gestionnaire d'évènement déclenché par un évènement du type {{event("statechange")}}. Cela a lieu quand l'état du contexte audio change, en raison de l'appel des méthodes de changement d'état ({{domxref("AudioContext.suspend")}}, {{domxref("AudioContext.resume")}}, ou {{domxref("AudioContext.close")}}.) + +## Méthodes + +_Met également en œuvre des méthodes de l'interface {{domxref("EventTarget")}}._ + +- {{domxref("AudioContext.close()")}} + - : Supprime le contexte audio, et libère toutes les ressources audio système qu'il utilisait. +- {{domxref("AudioContext.createBuffer()")}} + - : Crée un nouvel objet {{domxref ("AudioBuffer")}} vide, auquel on pourra assigner des données et que l'on pourra jouer via un {{ domxref("AudioBufferSourceNode") }} +- {{domxref("AudioContext.createBufferSource()")}} + - : Crée un objet {{domxref ("AudioBufferSourceNode")}}, qui peut être utilisé pour jouer et manipuler des données audio contenues dans un objet {{domxref("AudioBuffer")}}. Les {{domxref("AudioBuffer")}}s sont créés avec la fonction {{domxref("AudioContext.createBuffer")}} ou retournés par la fonction {{domxref("AudioContext.decodeAudioData")}} quand elle décode une piste audio avec succès. +- {{domxref("AudioContext.createMediaElementSource()")}} + - : Crée un objet {{domxref ("MediaElementAudioSourceNode")}} associé à {{domxref ("HTMLMediaElement")}}. Il peut être utilisé pour manipuler le son d'éléments {{HTMLElement("video")}} ou {{HTMLElement("audio")}}. +- {{domxref("AudioContext.createMediaStreamSource()")}} + - : Crée un objet {{domxref ("MediaStreamAudioSourceNode")}} associé à un {{domxref ("MediaStream")}} correspondant à un flux audio, qui peut provenir du microphone de l'ordinateur local ou d'autres sources. +- {{domxref("AudioContext.createMediaStreamDestination()")}} + - : Crée un objet {{domxref ("MediaStreamAudioDestinationNode")}} associé à un {{domxref ("MediaStream")}} correspondant à un flux audio, qui peut être stocké dans un fichier local ou envoyé à un autre ordinateur. +- {{domxref("AudioContext.createScriptProcessor()")}} + - : Crée un objet {{domxref ("ScriptProcessorNode")}} qui sert à faire du traitement audio directement avec JavaScript. +- {{domxref("AudioContext.createStereoPanner()")}} + - : Crée un objet {{domxref ("StereoPannerNode")}} qui permet d'appliquer une panoramique sonore à une source audio. +- {{domxref("AudioContext.createAnalyser()")}} + - : Crée un objet {{domxref ("AnalyserNode")}} qui expose les données de temps et de fréquence, et peut être utilisé pour créer des visualisations de données. + + + +- {{domxref("AudioContext.createBiquadFilter()")}} + - : Crée un objet {{domxref ("BiquadFilterNode")}}, qui représente un filtre de deuxième niveau, qui combine différents types de filtres de base : fréquences hautes, fréquences basses, passe-bande, etc. + + + +- {{domxref("AudioContext.createChannelMerger()")}} + - : Crée un objet {{domxref ("ChannelMergerNode")}} qui permet de rassembler les canaux de différents flux audio en un seul flux. +- {{domxref("AudioContext.createChannelSplitter()")}} + - : Crée un objet {{domxref ("ChannelSplitterNode")}} utilisé pour accéder aux différents canaux d'un même flux audio et les traiter séparément. +- {{domxref("AudioContext.createConvolver()")}} + - : Crée un objet {{domxref ("ConvolverNode")}}, qui permet d'appliquer des effets de convolution à un graphe audio, par exemple un effet de réverb. +- {{domxref("AudioContext.createDelay()")}} + - : Crée un objet {{domxref ("DelayNode")}}, utilisé pour retarder le signal audio entrant d'un certain temps. Il est également +- {{domxref("AudioContext.createDynamicsCompressor()")}} + - : Crée un objet {{domxref("DynamicsCompressorNode")}} qui permet d'appliquer une compression sur un signal audio. +- {{domxref("AudioContext.createGain()")}} + - : Crée un objet {{domxref ("GainNode")}} qui permet de controller le niveau sonore global d'un graphe audio. +- {{domxref("AudioContext.createIIRFilter()")}} + - : Crée un objet {{domxref("IIRFilterNode")}}, qui représente un filtre de second ordre configurable comme différents types de filtres communs. +- {{domxref("AudioContext.createOscillator()")}} + - : Crée un objet {{domxref("OscillatorNode")}} qui représente une onde périodique. Il génère simplement un son. +- {{domxref("AudioContext.createPanner()")}} + - : Crée un objet {{domxref("PannerNode")}} utilisé pour spatialiser une source audio entrante dans un espace 3D. +- {{domxref("AudioContext.createPeriodicWave()")}} + - : Crée un objet {{domxref("PeriodicWave")}}, utilisé pour définir une onde périodique qui peut être utilisée pour contrôler la sortie d'un {{ domxref("OscillatorNode") }}. +- {{domxref("AudioContext.createWaveShaper()")}} + - : Crée un objet {{domxref ("WaveShaperNode")}}, qui permet d'implémenter des effets de distorsion non linéaires. +- {{domxref("AudioContext.createAudioWorker()")}} + - : Crée un objet {{domxref("AudioWorkerNode")}}, qui permet d'interagir avec un thread web worker afin de générer, traiter, ou analyser le son directement. Ajouté à la spec le 29 août 2014, mais encore implémenté par aucun des navigateurs à ce jour. +- {{domxref("AudioContext.decodeAudioData()")}} + - : Décode de façon asynchrone les données d'un fichier audio contenues dans un objet {{domxref("ArrayBuffer")}}. Dans ce cas, le ArrayBuffer est en général chargé depuis un attribut de réponse {{domxref("XMLHttpRequest")}} quand l'attribut `responseType` est `arraybuffer`. Cette méthode ne fonctionne que sur des fichiers complets, pas sur des fragments de fichiers. +- {{domxref("AudioContext.resume()")}} + - : Reprend le défilement du temps dans un contexte audio où il a précédemment été suspendu. +- {{domxref("AudioContext.suspend()")}} + - : Suspend le défilement du temps dans un contexte audio, empêchant de façon temporaire l'accès au hardware audio, et réduisant par là l'utilisation du CPU et de la batterie. + +## Méthodes obsolètes + +- {{domxref("AudioContext.createJavaScriptNode()")}} + - : Crée un objet {{domxref("JavaScriptNode")}}, utilisé pour un traitement audio directement en JavaScript. Cette méthode est obsolète, et a été remplacée par {{domxref("AudioContext.createScriptProcessor()")}}. +- {{domxref("AudioContext.createWaveTable()")}} + - : Crée un objet {{domxref("WaveTableNode")}}, utilisé pour définir une onde audio périodique. Cette méthode est obsolète, et a été remplacée par {{domxref("AudioContext.createPeriodicWave()")}}. + +## Exemples + +Déclaration basique d'un audio context : + + var contexteAudio = new AudioContext; + +Variante avec gestion de la compatibilité navigateur: + + var AudioContext = window.AudioContext || window.webkitAudioContext; + var contexteAudio = new AudioContext(); + + var oscillatorNode = contexteAudio.createOscillator(); + var gainNode = contexteAudio.createGain(); + var finish = contexteAudio.destination; + // etc. + +## Spécifications + +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | +| {{SpecName('Web Audio API', '#AudioContext-section', 'AudioNode')}} | {{Spec2('Web Audio API')}} |   | + +## Compatibilité des navigateurs + +{{Compat("api.AudioContext")}} + +## Voir aussi + +- [Utiliser la Web Audio API](/fr/docs/Web_Audio_API/Using_Web_Audio_API) +- {{domxref("OfflineAudioContext")}} diff --git a/files/fr/web/api/audiolistener/index.md b/files/fr/web/api/audiolistener/index.md index b8343c1642..3b0e48616a 100644 --- a/files/fr/web/api/audiolistener/index.md +++ b/files/fr/web/api/audiolistener/index.md @@ -8,100 +8,77 @@ tags: - Web Audio API translation_of: Web/API/AudioListener --- -

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

- -

L'interface AudioListener représente la position et l'orientation de l'unique personne écoutant la scène audio; elle est utilisée dans le cadre d'une spatialisation audio. Tous les {{domxref ("PannerNode")}} sont spatialisés par rapport à l'objet AudioListener stocké dans la propriété {{domxref ("AudioContext.listener")}}.

- -

Il est important de noter qu'il n'y a qu'un seul auditeur par contexte, et qu'il ne s'agit pas d'un {{domxref("AudioNode")}}.

- -

On voit ici la position, les vecteurs haut et face d'un AudioListener, avec les vecteurs haut et face à 90° l'un de l'autre.

- -

Propriétés

- -

Hérite des propriétés de son parent, AudioNode.

- -
-

Note : Les valeurs de position, d'orientation, et du haut de la tête peuvent être définies et lues à l'aide de différentes syntaxes. Par exemple, l'accès se fait à l'aide de la propriété, AudioListener.positionX, tandis que la même propriété est définir à l'aide de AudioListener.positionX.value. C'est pourquoi ces valeurs ne sont pas marquées  en lecture seule, bien qu'elles apparaissent comme tel dans la spécification IDL.

-
- -
-
{{domxref("AudioListener.positionX")}}
-
Position de l'auditeur avec des coordonnées cartésiennes selon la règle de la main droite. La valeur par défaut est 0.
-
{{domxref("AudioListener.positionY")}}
-
Position verticale de l'auditeur avec des coordonnées cartésiennes selon la règle de la main droite. La valeur par défaut est 0.
-
{{domxref("AudioListener.positionZ")}}
-
Position longitudinale (avant et arrière) de l'auditeur avec des coordonnées cartésiennes selon la règle de la main droite. La valeur par défaut est 0.
-
{{domxref("AudioListener.forwardX")}}
-
Position horizontale de l'orientation vers l'avant de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (positionX, positionY, and positionZ). Les valeurs de direction vers l'avant et vers le haut sont indépendantes  linéairement l'une de l'autre. La valeur par défaut est 0.
-
{{domxref("AudioListener.forwardY")}}
-
Position verticale de l'orientation vers l'avant de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (positionX, positionY, and positionZ). Les valeurs de direction vers l'avant et vers le haut sont indépendantes  linéairement l'une de l'autre. La valeur par défaut est 0.
-
{{domxref("AudioListener.forwardZ")}}
-
Position longitudinale (avant et arrière) de l'orientation vers l'avant de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (positionX, positionY, and positionZ). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0.
-
{{domxref("AudioListener.upX")}}
-
Position horizontale du haut de la tête de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (positionX, positionY, and positionZ). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0.
-
{{domxref("AudioListener.upY")}}
-
Position verticale du haut de la tête de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (positionX, positionY, and positionZ). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0.
-
{{domxref("AudioListener.upZ")}}
-
Position longitudinale (avant et arrière) du haut de la tête de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (positionX, positionY, and positionZ). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0.
-
- -

Méthodes

- -

Hérite des propriétés de son parent, AudioNode.

- -
-
{{domxref("AudioListener.setOrientation()")}}
-
Définit l'orientation de l'auditeur.
-
{{domxref("AudioListener.setPosition()")}}
-
Définit la position de l'auditeur. Consulter {{anch("Deprecated features")}}  pour savoir pourquoi cette méthode est désormais obsolète.
-
- -

Fonctionnalités obsolètes

- -
-
{{domxref("AudioListener.dopplerFactor")}} {{obsolete_inline}}
-
Nombre flottant à double précision représentant la quantité de "pitch shift" à utiliser pour le rendu d'un effet doppler.
-
{{domxref("AudioListener.speedOfSound")}} {{obsolete_inline}}
-
Nombre flottant à double précision représentant la vitesse du son, en mètres par seconde.
-
- -

Dans une version précédente de la spécification, les propriétés dopplerFactor et speedOfSound et la méthode setPosition() lpouvaient être utilisés pour contrôler un effet doppler appliqué à un {{domxref("AudioBufferSourceNode")}} connecté en aval - ils pouvaient être transposés en fonction de la vitesse relative du {{domxref("PannerNode")}}, et de l'{{domxref("AudioListener")}}. Ces fonctionnalités soulevaient un certain nombre de problèmes :

- -
    -
  • Seuls les {{domxref("AudioBufferSourceNode")}} étaient transposés, pas les autres noeuds source.
    • -
  • Le comportement à adopter lorsqu'un {{domxref("AudioBufferSourceNode")}} était connecté à plusieurs {{domxref("PannerNode")}} n'était pas clair.
    • -
  • Comme la vélocité du panoramique et de l'auditeur n'étaient pas des {{domxref("AudioParam")}}, la modification du pitch ne pouvait pas être appliquée uniformément, ce qui provoquait des irrégularités dans le son.
    • -
- -

C'est la raison pour laquelle elles ont été supprimées.

- -

Exemples

- -

{{page("/en-US/docs/Web/API/AudioContext.createPanner","Example")}}

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#AudioListener-section', 'AudioListener')}}{{Spec2('Web Audio API')}} 
- -

Compatibilité navigateurs

- -

{{Compat("api.AudioListener")}}

- -

Voir aussi

- - +{{APIRef("Web Audio API")}} + +L'interface _AudioListener_ représente la position et l'orientation de l'unique personne écoutant la scène audio; elle est utilisée dans le cadre d'une [spatialisation audio](/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics). Tous les {{domxref ("PannerNode")}} sont spatialisés par rapport à l'objet _AudioListener_ stocké dans la propriété {{domxref ("AudioContext.listener")}}. + +Il est important de noter qu'il n'y a qu'un seul auditeur par contexte, et qu'il ne s'agit pas d'un {{domxref("AudioNode")}}. + +![On voit ici la position, les vecteurs haut et face d'un AudioListener, avec les vecteurs haut et face à 90° l'un de l'autre.](webaudiolistenerreduced.png) + +## Propriétés + +_Hérite des propriétés de son parent,_ `AudioNode`. + +> **Note :** Les valeurs de position, d'orientation, et du haut de la tête peuvent être définies et lues à l'aide de différentes syntaxes. Par exemple, l'accès se fait à l'aide de la propriété, `AudioListener.positionX`, tandis que la même propriété est définir à l'aide de `AudioListener.positionX.value`. C'est pourquoi ces valeurs ne sont pas marquées  en lecture seule, bien qu'elles apparaissent comme tel dans la spécification IDL. + +- {{domxref("AudioListener.positionX")}} + - : Position de l'auditeur avec des coordonnées cartésiennes selon la règle de la main droite. La valeur par défaut est 0. +- {{domxref("AudioListener.positionY")}} + - : Position verticale de l'auditeur avec des coordonnées cartésiennes selon la règle de la main droite. La valeur par défaut est 0. +- {{domxref("AudioListener.positionZ")}} + - : Position longitudinale (avant et arrière) de l'auditeur avec des coordonnées cartésiennes selon la règle de la main droite. La valeur par défaut est 0. +- {{domxref("AudioListener.forwardX")}} + - : Position horizontale de l'orientation vers l'avant de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (`positionX`, `positionY`, and `positionZ`). Les valeurs de direction vers l'avant et vers le haut sont indépendantes  linéairement l'une de l'autre. La valeur par défaut est 0. +- {{domxref("AudioListener.forwardY")}} + - : Position verticale de l'orientation vers l'avant de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (`positionX`, `positionY`, and `positionZ`). Les valeurs de direction vers l'avant et vers le haut sont indépendantes  linéairement l'une de l'autre. La valeur par défaut est 0. +- {{domxref("AudioListener.forwardZ")}} + - : Position longitudinale (avant et arrière) de l'orientation vers l'avant de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (`positionX`, `positionY`, and `positionZ`). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0. +- {{domxref("AudioListener.upX")}} + - : Position horizontale du haut de la tête de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (`positionX`, `positionY`, and `positionZ`). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0. +- {{domxref("AudioListener.upY")}} + - : Position verticale du haut de la tête de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (`positionX`, `positionY`, and `positionZ`). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0. +- {{domxref("AudioListener.upZ")}} + - : Position longitudinale (avant et arrière) du haut de la tête de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (`positionX`, `positionY`, and `positionZ`). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0. + +## Méthodes + +_Hérite des propriétés de son parent,_ `AudioNode`. + +- {{domxref("AudioListener.setOrientation()")}} + - : Définit l'orientation de l'auditeur. +- {{domxref("AudioListener.setPosition()")}} + - : Définit la position de l'auditeur. Consulter {{anch("Deprecated features")}}  pour savoir pourquoi cette méthode est désormais obsolète. + +## Fonctionnalités obsolètes + +- {{domxref("AudioListener.dopplerFactor")}} {{obsolete_inline}} + - : Nombre flottant à double précision représentant la quantité de "pitch shift" à utiliser pour le rendu d'un [effet doppler](http://en.wikipedia.org/wiki/Doppler_effect). +- {{domxref("AudioListener.speedOfSound")}} {{obsolete_inline}} + - : Nombre flottant à double précision représentant la vitesse du son, en _mètres par seconde_. + +Dans une version précédente de la spécification, les propriétés `dopplerFactor` et `speedOfSound` et la méthode `setPosition()` lpouvaient être utilisés pour contrôler un effet doppler appliqué à un {{domxref("AudioBufferSourceNode")}} connecté en aval - ils pouvaient être transposés en fonction de la vitesse relative du {{domxref("PannerNode")}}, et de l'{{domxref("AudioListener")}}. Ces fonctionnalités soulevaient un certain nombre de problèmes : + +- Seuls les {{domxref("AudioBufferSourceNode")}} étaient transposés, pas les autres noeuds source. +- Le comportement à adopter lorsqu'un {{domxref("AudioBufferSourceNode")}} était connecté à plusieurs {{domxref("PannerNode")}} n'était pas clair. +- Comme la vélocité du panoramique et de l'auditeur n'étaient pas des {{domxref("AudioParam")}}, la modification du pitch ne pouvait pas être appliquée uniformément, ce qui provoquait des irrégularités dans le son. + +C'est la raison pour laquelle elles ont été supprimées. + +## Exemples + +{{page("/en-US/docs/Web/API/AudioContext.createPanner","Example")}} + +## Spécifications + +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- | +| {{SpecName('Web Audio API', '#AudioListener-section', 'AudioListener')}} | {{Spec2('Web Audio API')}} |   | + +## Compatibilité navigateurs + +{{Compat("api.AudioListener")}} + +## Voir aussi + +- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/audionode/index.md b/files/fr/web/api/audionode/index.md index b3e51998b0..681d72b5c9 100644 --- a/files/fr/web/api/audionode/index.md +++ b/files/fr/web/api/audionode/index.md @@ -3,68 +3,62 @@ title: AudioNode slug: Web/API/AudioNode translation_of: Web/API/AudioNode --- -

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

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

L'interface AudioNode est une interface générique pour représenter un module de traitement audio tel qu'une source audio {{HTMLElement("audio")}}, un élément {{HTMLElement("video")}}, un {{domxref("OscillatorNode")}}, une sortie audio, ou un module de traitement intermédiaire  (filtres {{domxref("BiquadFilterNode")}} ou {{domxref("ConvolverNode")}}), un contrôle de volume {{domxref("GainNode")}}.

+L'interface **`AudioNode`** est une interface générique pour représenter un module de traitement audio tel qu'une source audio {{HTMLElement("audio")}}, un élément {{HTMLElement("video")}}, un {{domxref("OscillatorNode")}}, une sortie audio, ou un module de traitement intermédiaire  (filtres {{domxref("BiquadFilterNode")}} ou {{domxref("ConvolverNode")}}), un contrôle de volume {{domxref("GainNode")}}. -

{{InheritanceDiagram}}

+{{InheritanceDiagram}} -

Des objets AudioNode participant à un objet AudioContext pour créer un graphe de routage audio.

+![Des objets AudioNode participant à un objet AudioContext pour créer un graphe de routage audio.](webaudiobasics.png) +Un `AudioNode` a des entrées et sorties, chacune avec un certain nombre de _canaux_.\* *Un `AudioNode` avec zero entrée et une ou plusieurs sorties est appelée un *noeud source\*. Le traitement exact varie d'un `AudioNode` à l'autre; en général un noeud lit l'entrée, réalise un traitement, et génère de nouvelles valeurs pour la sortie, ou laisse simplement l'entrée traverser (par exemple dans le cas de l'{{domxref("AnalyserNode")}}, où le résultat du traitment du traitement est accessible à part). -

Un AudioNode a des entrées et sorties, chacune avec un certain nombre de canaux. Un AudioNode avec zero entrée et une ou plusieurs sorties est appelée un noeud source. Le traitement exact varie d'un AudioNode à l'autre; en général un noeud lit l'entrée, réalise un traitement, et génère de nouvelles valeurs pour la sortie, ou laisse simplement l'entrée traverser (par exemple dans le cas de l'{{domxref("AnalyserNode")}}, où le résultat du traitment du traitement est accessible à part).

+Plusieurs noeuds peuvent être reliés dans un _graphe de traitement_. Un tel graphe est contenu dans un {{domxref("AudioContext")}}. Chaque `AudioNode` fait partie d'exactement un contexte. Les noeuds de traitement héritent des  propriétés et méthodse d'`AudioNode`, mais définissent aussi leurs propres fonctionnalités par dessus. Pour plus de détails, voir les pages individuelles liées sur la page d'accueil [Web Audio API](/en-US/docs/Web/API/Web_Audio_API). -

Plusieurs noeuds peuvent être reliés dans un graphe de traitement. Un tel graphe est contenu dans un {{domxref("AudioContext")}}. Chaque AudioNode fait partie d'exactement un contexte. Les noeuds de traitement héritent des  propriétés et méthodse d'AudioNode, mais définissent aussi leurs propres fonctionnalités par dessus. Pour plus de détails, voir les pages individuelles liées sur la page d'accueil Web Audio API.

+> **Note :** Un `AudioNode` peut être la cible d'évènements, et implémente donc l'interface {{domxref("EventTarget")}}. -
-

Note : Un AudioNode peut être la cible d'évènements, et implémente donc l'interface {{domxref("EventTarget")}}.

-
+## Propriétés -

Propriétés

+- {{domxref("AudioNode.context")}} {{readonlyInline}} + - : Renvoie le {{domxref("AudioContext")}} associé, c'est-à-dire l'objet représentant le graphe de traitement dont le noeud fait partie. -
-
{{domxref("AudioNode.context")}} {{readonlyInline}}
-
Renvoie le {{domxref("AudioContext")}} associé, c'est-à-dire l'objet représentant le graphe de traitement dont le noeud fait partie.
-
+ -
-
{{domxref("AudioNode.numberOfInputs")}} {{readonlyInline}}
-
Renvoie le nombre d'entrées d'un noeud. Les noeuds source sont des noeuds dont la propriété numberOfInputs a la valeur 0.
-
+- {{domxref("AudioNode.numberOfInputs")}} {{readonlyInline}} + - : Renvoie le nombre d'entrées d'un noeud. Les noeuds source sont des noeuds dont la propriété `numberOfInputs` a la valeur `0`. -
-
{{domxref("AudioNode.numberOfOutputs")}} {{readonlyInline}}
-
Renvoie le nombre de sorties d'un noeud. Les noeuds de destination — comme {{ domxref("AudioDestinationNode") }} — sont des noeuds dont cette propriété a la valeur 0.
-
+ -
-
{{domxref("AudioNode.channelCount")}}
-
Représente un entier utilisé pour déterminer le nombre de canaux lors d'une conversion ascendante ou descendante. Son usage et sa définition précise dépendent de la valeur de {{domxref("AudioNode.channelCountMode")}}.
-
+- {{domxref("AudioNode.numberOfOutputs")}} {{readonlyInline}} + - : Renvoie le nombre de sorties d'un noeud. Les noeuds de destination — comme {{ domxref("AudioDestinationNode") }} — sont des noeuds dont cette propriété a la valeur `0`. -
-
{{domxref("AudioNode.channelCountMode")}}
-
Représente une liste énumérative qui décrit la façon dont les canaux doivent être connectés entre les entrées et les sorties.
-
{{domxref("AudioNode.channelInterpretation")}}
-
Représente une liste énumérative qui décrit la signification des canaux. Cette interprétation définit la façon dont la conversion ascendante ou descendante est réalisée. Les valeurs possibles sont "speakers" ou "discrete".
-
+ -

Méthodes

+- {{domxref("AudioNode.channelCount")}} + - : Représente un entier utilisé pour déterminer le nombre de canaux lors d'une [conversion ascendante ou descendante](/fr/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#Conversion_ascendante_et_descendante). Son usage et sa définition précise dépendent de la valeur de {{domxref("AudioNode.channelCountMode")}}. -

Implémente aussi les méthodes de l'interface {{domxref("EventTarget")}}.

+ -
-
{{domxref("AudioNode.connect()")}}
-
Permet de connecter une sortie du noeud à l'entrée d'un autre noeud, soit comme données audio, soir comme valeur d'un {{domxref("AudioParam")}}.
-
{{domxref("AudioNode.disconnect()")}}
-
Permet de déconnecter le noeud d'un autre noeud auquel il est déjà connecté.
-
+- {{domxref("AudioNode.channelCountMode")}} + - : Représente une liste énumérative qui décrit la façon dont les canaux doivent être connectés entre les entrées et les sorties. +- {{domxref("AudioNode.channelInterpretation")}} + - : Représente une liste énumérative qui décrit la signification des canaux. Cette interprétation définit la façon dont la [conversion ascendante ou descendante](/fr/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#Conversion_ascendante_et_descendante) est réalisée. Les valeurs possibles sont `"speakers"` ou `"discrete"`. -

Exemple

+## Méthodes -

Ce simple extrait de code illustre la creation de quelques noeuds audio, et la façon dont les propriétés et méthodes AudioNode peuvent être utilisées. Vous pouvez trouver d'autres exemples sur n'importe lequel des exemples liés sur la page Web Audio API (par exemple Violent Theremin.)

+_Implémente aussi les méthodes de l'interface_ {{domxref("EventTarget")}}. -
var AudioContext = window.AudioContext || window.webkitAudioContext;
+- {{domxref("AudioNode.connect()")}}
+  - : Permet de connecter une sortie du noeud à l'entrée d'un autre noeud, soit comme données audio, soir comme valeur d'un {{domxref("AudioParam")}}.
+- {{domxref("AudioNode.disconnect()")}}
+  - : Permet de déconnecter le noeud d'un autre noeud auquel il est déjà connecté.
+
+## Exemple
+
+Ce simple extrait de code illustre la creation de quelques noeuds audio, et la façon dont les propriétés et méthodes `AudioNode` peuvent être utilisées. Vous pouvez trouver d'autres exemples sur n'importe lequel des exemples liés sur la page [Web Audio API](/en-US/docs/Web/API/Web_Audio_API) (par exemple [Violent Theremin](https://github.com/mdn/violent-theremin).)
+
+```js
+var AudioContext = window.AudioContext || window.webkitAudioContext;
 
 var audioCtx = new AudioContext();
 
@@ -77,31 +71,19 @@ gainNode.connect(audioCtx.destination);
 oscillator.context;
 oscillator.numberOfInputs;
 oscillator.numberOfOutputs;
-oscillator.channelCount;
- -

Spécification

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#the-audionode-interface', 'AudioNode')}}{{Spec2('Web Audio API')}} 
- -

Compatibilité navigateur

- -

{{Compat("api.AudioNode")}}

- -

Voir aussi

- - +oscillator.channelCount; +``` + +## Spécification + +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | +| {{SpecName('Web Audio API', '#the-audionode-interface', 'AudioNode')}} | {{Spec2('Web Audio API')}} |   | + +## Compatibilité navigateur + +{{Compat("api.AudioNode")}} + +## Voir aussi + +- [Utiliser la Web Audio API](/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/audioparam/index.md b/files/fr/web/api/audioparam/index.md index bd0fca5e56..6075c65599 100644 --- a/files/fr/web/api/audioparam/index.md +++ b/files/fr/web/api/audioparam/index.md @@ -8,105 +8,90 @@ tags: - Web Audio API translation_of: Web/API/AudioParam --- -

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

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

L'interface AudioParam représente un paramètre audio, en général un paramètre d'un {{domxref ("AudioNode")}} tel qu'un {{ domxref("GainNode.gain") }}. On peut lui donner une valeur spécifique ou définir une variation de valeur qui intervient à un certain moment et selon un certain fonctionnement.

+L'interface **`AudioParam`** représente un paramètre audio, en général un paramètre d'un {{domxref ("AudioNode")}} tel qu'un {{ domxref("GainNode.gain") }}. On peut lui donner une valeur spécifique ou définir une variation de valeur qui intervient à un certain moment et selon un certain fonctionnement. -

Il y a deux sortes de AudioParam, a-rate et k-rate :

+Il y a deux sortes de `AudioParam`, _a-rate_ et _k-rate_ : -
    -
  • Un AudioParam a-rate réévalue la valeur du paramètre audio pour chaque trame d'échantillons du signal audio.
    • -
  • Un AudioParam k-rate utilise la même valeur de paramètre audio initial pour l'ensemble du bloc traité, c'est-à-dire 128 échantillons.
    • -
+- Un `AudioParam` _a-rate_ réévalue la valeur du paramètre audio pour chaque trame d'échantillons du signal audio. +- Un `AudioParam` _k-rate_ utilise la même valeur de paramètre audio initial pour l'ensemble du bloc traité, c'est-à-dire 128 échantillons. -

Chaque {{domxref ("AudioNode")}} définit lequel de ses paramètres sont a-rate ou k-rate.

+Chaque {{domxref ("AudioNode")}} définit lequel de ses paramètres sont _a-rate_ ou _k-rate_. -

Chaque AudioParam a une liste d'événements, initialement vide, qui définit quand et comment les valeurs changent. Si cette liste n'est pas vide, les modifications faites directement avec AudioParam.value sont ignorées. Cette liste d'événements permet de planifier les changements qui doivent se produire à des moments très précis à l'aide de courbes d'automatisation chronologiques arbitraires. Les informations de temps utilisées sont celles définies par {{domxref ("AudioContext.currentTime")}}.

+Chaque `AudioParam` a une liste d'événements, initialement vide, qui définit quand et comment les valeurs changent. Si cette liste n'est pas vide, les modifications faites directement avec `AudioParam.value` sont ignorées. Cette liste d'événements permet de planifier les changements qui doivent se produire à des moments très précis à l'aide de courbes d'automatisation chronologiques arbitraires. Les informations de temps utilisées sont celles définies par {{domxref ("AudioContext.currentTime")}}. -

Propriétés

+## Propriétés -

Hérite des propriétés de son parent, AudioNode.

+_Hérite des propriétés de son parent, `AudioNode`._ -
-
{{domxref("AudioParam.defaultValue")}} {{readonlyInline}}
-
Volume initial tel que défini par l'{{domxref ("AudioNode")}} qui crée l'AudioParam.
-
{{domxref("AudioParam.maxValue")}} {{readonlyInline}}
-
Valeur maximum de la plage nominale (effective). 
-
{{domxref("AudioParam.minValue")}} {{readonlyinline}}
-
Valeur minimum de la plage nominale (effective). 
-
+- {{domxref("AudioParam.defaultValue")}} {{readonlyInline}} + - : Volume initial tel que défini par l'{{domxref ("AudioNode")}} qui crée l'`AudioParam`. +- {{domxref("AudioParam.maxValue")}} {{readonlyInline}} + - : Valeur maximum de la plage nominale (effective). +- {{domxref("AudioParam.minValue")}} {{readonlyinline}} + - : Valeur minimum de la plage nominale (effective). -
-
{{domxref("AudioParam.value")}}
-
Volume, exprimé sous forme de nombre flottant, initialement défini par la valeur de AudioParam.defaultValue. Même s'il peut être modifié, toute modification qui a lieu alors que des événements d'automatisation sont prévus - événements programmés en utilisant les méthodes de la AudioParam - est ignorée, sans lever aucune exception
-
+ -

Méthodes

+- {{domxref("AudioParam.value")}} + - : Volume, exprimé sous forme de nombre flottant, initialement défini par la valeur de `AudioParam.defaultValue`. Même s'il peut être modifié, toute modification qui a lieu alors que des événements d'automatisation sont prévus - événements programmés en utilisant les méthodes de la `AudioParam` - est ignorée, sans lever aucune exception -

Hérite des propriétés de son parent, AudioNode.

+## Méthodes -
-
{{domxref("AudioParam.setValueAtTime()")}}
-
Planifie un changement de la valeur d' AudioParam à un moment précis, startTime, tel que mesuré par rapport à {{domxref ("AudioContext.currentTime")}}. La nouvelle valeur est passée en argument.
-
{{domxref("AudioParam.linearRampToValueAtTime()")}}
-
Planifie un changement de la valeur d'AudioParam. Le changement commence à l'heure prévue pour l'événement précédent, évolue selon une rampe linéaire jusqu'à la nouvelle valeur passée dans l'argument value, et atteint la nouvelle valeur à l'heure indiquée par le paramètre endTime.
-
{{domxref("AudioParam.exponentialRampToValueAtTime()")}}
-
Planifie un changement de la valeur d'AudioParam. Le changement commence à l'heure prévue pour l'événement précédent, suit une rampe exponentielle jusqu'à la nouvelle valeur passée dans l'argument value, et atteint la nouvelle valeur à l'heure indiquée par le paramètre endTime.
- Les rampes exponentielles sont utiles lors du changement de fréquence ou de taux de lecture en raison de la façon dont l'oreille humaine fonctionne.
-
{{domxref("AudioParam.setTargetAtTime()")}}
-
Planifie le début d'un changement de la valeur d'AudioParam. Le changement commence à l'heure spécifiée par l'argument startTime et de façon exponentielle tend vers la valeur donnée par le paramètre target. Le taux de décroissance exponentielle est définie par le paramètre timeConstant. C'est le temps nécessaire à un système continu linéaire du premier ordre invariant dans le temps pour atteindre la valeur de 1 - 1 / e (environ 63,2%) donné une réponse d'entrée de l'étape (passage de 0 à 1 en valeur), Plus il est grand, plus la transition sera facile. Ceci est utile pour la décroissance ou la libération de portions d'enveloppes.
-
{{domxref("AudioParam.setValueCurveAtTime()")}}
-
Planifie des valeurs de AudioParam selon un jeu de valeurs, défini par le paramètre  values ({{domxref ("Float32Array")}}), mis à l'échelle pour s'adapter à l'intervalle de temps donné, en commençant à startTime.
-
{{domxref("AudioParam.cancelScheduledValues()")}}
-
Annule toutes les modifications futures prévues du AudioParam.
-
{{domxref("AudioParam.cancelAndHoldAtTime()")}}
-
Annule toutes les modifications futures prévues du AudioParam mais maintient sa valeur à un certain moment, en attendant que d'autres changements soient effectués. La nouvelle valeur est passée en argument.
-
+_Hérite des propriétés de son parent, AudioNode._ -

Exemples

+- {{domxref("AudioParam.setValueAtTime()")}} + - : Planifie un changement de la valeur d' `AudioParam` à un moment précis, `startTime`, tel que mesuré par rapport à {{domxref ("AudioContext.currentTime")}}. La nouvelle valeur est passée en argument. +- {{domxref("AudioParam.linearRampToValueAtTime()")}} + - : Planifie un changement de la valeur d'`AudioParam`. Le changement commence à l'heure prévue pour l'événement précédent, évolue selon une rampe linéaire jusqu'à la nouvelle valeur passée dans l'argument `value`, et atteint la nouvelle valeur à l'heure indiquée par le paramètre `endTime`. +- {{domxref("AudioParam.exponentialRampToValueAtTime()")}} + - : Planifie un changement de la valeur d'`AudioParam`. Le changement commence à l'heure prévue pour l'événement précédent, suit une rampe exponentielle jusqu'à la nouvelle valeur passée dans l'argument `value`, et atteint la nouvelle valeur à l'heure indiquée par le paramètre `endTime`. + Les rampes exponentielles sont utiles lors du changement de fréquence ou de taux de lecture en raison de la façon dont l'oreille humaine fonctionne. +- {{domxref("AudioParam.setTargetAtTime()")}} + - : Planifie le début d'un changement de la valeur d'`AudioParam`. Le changement commence à l'heure spécifiée par l'argument `startTime` et de façon exponentielle tend vers la valeur donnée par le paramètre `target`. Le taux de décroissance exponentielle est définie par le paramètre `timeConstant`. C'est le temps nécessaire à un système continu linéaire du premier ordre invariant dans le temps pour atteindre la valeur de 1 - 1 / e (environ 63,2%) donné une réponse d'entrée de l'étape (passage de 0 à 1 en valeur), Plus il est grand, plus la transition sera facile. Ceci est utile pour la décroissance ou la libération de portions d'enveloppes. +- {{domxref("AudioParam.setValueCurveAtTime()")}} + - : Planifie des valeurs de `AudioParam` selon un jeu de valeurs, défini par le paramètre  `values `({{domxref ("Float32Array")}}), mis à l'échelle pour s'adapter à l'intervalle de temps donné, en commençant à `startTime`. +- {{domxref("AudioParam.cancelScheduledValues()")}} + - : Annule toutes les modifications futures prévues du `AudioParam`. +- {{domxref("AudioParam.cancelAndHoldAtTime()")}} + - : Annule toutes les modifications futures prévues du `AudioParam` mais maintient sa valeur à un certain moment, en attendant que d'autres changements soient effectués. La nouvelle valeur est passée en argument. -

Ce premier exemple simple montre la définition de la valeur de  gain d'un {{domxref("GainNode")}}. gain est un exemple de paramètre audio de type a-rate, car sa valeur peut potentiellement être différente pour chaque trame d'échantillon.

+## Exemples -
var AudioContext = window.AudioContext || window.webkitAudioContext;
+Ce premier exemple simple montre la définition de la valeur de  `gain `d'un` `{{domxref("GainNode")}}. `gain` est un exemple de paramètre audio de type a-rate, car sa valeur peut potentiellement être différente pour chaque trame d'échantillon.
+
+```js
+var AudioContext = window.AudioContext || window.webkitAudioContext;
 var audioCtx = new AudioContext();
 
 var gainNode = audioCtx.createGain();
-gainNode.gain.value = 0;
+gainNode.gain.value = 0; +``` -

Ce deuxième exemple montre la définition de plusieurs paramètres d'un {{ domxref("BiquadFilterNode") }}. Ce sont des exemples de paramètre audio de type k-rate AudioParam's, comme les valeurs sont définies une fois pour l'ensemble des échantillons.

+Ce deuxième exemple montre la définition de plusieurs paramètres d'un {{ domxref("BiquadFilterNode") }}. Ce sont des exemples de paramètre audio de type k-rate AudioParam's, comme les valeurs sont définies une fois pour l'ensemble des échantillons. -
var AudioContext = window.AudioContext || window.webkitAudioContext;
+```js
+var AudioContext = window.AudioContext || window.webkitAudioContext;
 var audioCtx = new AudioContext();
 
 var biquadFilter = audioCtx.createBiquadFilter();
 
 biquadFilter.type = "lowshelf";
 biquadFilter.frequency.value = 1000;
-biquadFilter.gain.value = 25;
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#AudioParam-section', 'AudioParam')}}{{Spec2('Web Audio API')}} 
- -

Compatibilité navigateurs

- -

{{Compat("api.AudioParam")}}

- -

Voir aussi

- - +biquadFilter.gain.value = 25; +``` + +## Spécifications + +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | +| {{SpecName('Web Audio API', '#AudioParam-section', 'AudioParam')}} | {{Spec2('Web Audio API')}} |   | + +## Compatibilité navigateurs + +{{Compat("api.AudioParam")}} + +## Voir aussi + +- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/audioprocessingevent/index.md b/files/fr/web/api/audioprocessingevent/index.md index a43186edb4..430bfcbc74 100644 --- a/files/fr/web/api/audioprocessingevent/index.md +++ b/files/fr/web/api/audioprocessingevent/index.md @@ -8,88 +8,36 @@ tags: - Web Audio API translation_of: Web/API/AudioProcessingEvent --- -

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

+{{APIRef("Web Audio API")}}{{deprecated_header}} -

AudioProcessingEvent représente l'évènement qui est passé lorsqu'un tampon {{domxref ("ScriptProcessorNode")}} est prêt à être traité.

+AudioProcessingEvent représente l'évènement qui est passé lorsqu'un tampon {{domxref ("ScriptProcessorNode")}} est prêt à être traité. -
-

Note : Cette fonctionnalité est dépréciée à partir de la version du 29 Août 2014 de la spécification Web Audio API, elle sera remplacée par les Audio Workers.

-
+> **Note :** Cette fonctionnalité est dépréciée à partir de la version du 29 Août 2014 de la spécification Web Audio API, elle sera remplacée par les [Audio Workers](/en-US/docs/Web/API/Web_Audio_API#Audio_Workers). -

Propriétés

+## Propriétés -

La liste ci-dessous inclut les propriétés héritées de son parent, {{domxref("Event")}}.

+_La liste ci-dessous inclut les propriétés héritées de son parent, {{domxref("Event")}}._ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropriétéTypeDescription
target {{ReadOnlyInline}}{{domxref("EventTarget")}}La cible de l'évènement (la plus haute dans le DOM).
type {{ReadOnlyInline}}{{domxref("DOMString")}}Le type d'évènement.
bubbles {{ReadOnlyInline}}booleanIndique si l'évènement se propage normalement.
cancelable {{ReadOnlyInline}}booleanIndique s'il est possible d'annuler l'évènement.
playbackTime {{ReadOnlyInline}}doubleMoment auquel le son sera joué, tel que défini par {{domxref("AudioContext.currentTime")}}
inputBuffer {{ReadOnlyInline}}{{domxref("AudioBuffer")}}Tampon contenant les données audio à traiter en entrée. Le nombre de canaux est défini comme paramètre, numberOfInputChannels, de la méthode constructeur {{domxref("AudioContext.createScriptProcessor()")}}. L'AudioBuffer renvoyé est valide uniquement dans la portée de la fonction onaudioprocess.
outputBuffer {{ReadOnlyInline}}{{domxref("AudioBuffer")}}Tampon dans lequel les données doivent être écrites en sortie. Le nombre de canaux est défini comme paramètre, numberOfOutputChannels, de la méthode constructeur {{domxref("AudioContext.createScriptProcessor()")}}. L'AudioBuffer renvoyé est valide uniquement dans la portée de la fonction onaudioprocess.
+| Propriété | Type | Description | +| --------------------------------------- | ------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `target` {{ReadOnlyInline}} | {{domxref("EventTarget")}} | La cible de l'évènement (la plus haute dans le DOM). | +| `type` {{ReadOnlyInline}} | {{domxref("DOMString")}} | Le type d'évènement. | +| `bubbles` {{ReadOnlyInline}} | `boolean` | Indique si l'évènement se propage normalement. | +| `cancelable` {{ReadOnlyInline}} | `boolean` | Indique s'il est possible d'annuler l'évènement. | +| `playbackTime` {{ReadOnlyInline}} | `double` | Moment auquel le son sera joué, tel que défini par {{domxref("AudioContext.currentTime")}} | +| `inputBuffer` {{ReadOnlyInline}} | {{domxref("AudioBuffer")}} | Tampon contenant les données audio à traiter en entrée. Le nombre de canaux est défini comme paramètre, `numberOfInputChannels`, de la méthode constructeur {{domxref("AudioContext.createScriptProcessor()")}}. L'`AudioBuffer` renvoyé est valide uniquement dans la portée de la fonction `onaudioprocess`. | +| `outputBuffer` {{ReadOnlyInline}} | {{domxref("AudioBuffer")}} | Tampon dans lequel les données doivent être écrites en sortie. Le nombre de canaux est défini comme paramètre, `numberOfOutputChannels`, de la méthode constructeur {{domxref("AudioContext.createScriptProcessor()")}}. L'`AudioBuffer` renvoyé est valide uniquement dans la portée de la fonction `onaudioprocess`. | -

Spécification

+## Spécification - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#AudioProcessingEvent-section', 'AudioProcessingEvent')}}{{Spec2('Web Audio API')}} 
+| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | +| {{SpecName('Web Audio API', '#AudioProcessingEvent-section', 'AudioProcessingEvent')}} | {{Spec2('Web Audio API')}} |   | -

Compatibilité navigateurs

+## Compatibilité navigateurs -

{{Compat("api.AudioProcessingEvent")}}

+{{Compat("api.AudioProcessingEvent")}} -

Voir aussi

+## Voir aussi - +- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/audioworklet/index.md b/files/fr/web/api/audioworklet/index.md index 7e0330b10c..4a8de6b246 100644 --- a/files/fr/web/api/audioworklet/index.md +++ b/files/fr/web/api/audioworklet/index.md @@ -17,57 +17,40 @@ tags: - sound translation_of: Web/API/AudioWorklet --- -

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

+{{APIRef("Web Audio API")}}{{securecontext_header}} -

L'interface AudioWorklet dans l'API Web Audio est utilisée pour fournir des scripts de traitement audio personnalisés qui s'exécutent dans un thread séparé afin de fournir un traitement audio à très faible latence. Le code du worklet est exécuté dans le contexte d'exécution global {{domxref("AudioWorkletGlobalScope")}}, en utilisant un thread audio web séparé qui est partagé par le worklet et les autres nœuds audio.

+L'interface **`AudioWorklet`** dans l'[API Web Audio](/fr/docs/Web/API/Web_Audio_API) est utilisée pour fournir des scripts de traitement audio personnalisés qui s'exécutent dans un thread séparé afin de fournir un traitement audio à très faible latence. Le code du worklet est exécuté dans le contexte d'exécution global {{domxref("AudioWorkletGlobalScope")}}, en utilisant un thread audio web séparé qui est partagé par le worklet et les autres nœuds audio. -

L'accès à distance d'AudioWorklet du contexte audio se fait par la propriété {{domxref("BaseAudioContext.audioWorklet")}}.

+L'accès à distance d'`AudioWorklet` du contexte audio se fait par la propriété {{domxref("BaseAudioContext.audioWorklet")}}. -

Propriétés

+## Propriétés -

L'interface AudioWorklet ne définit pas de propriétés propres, mais hérite des propriétés de {{domxref("Worklet")}}.

+*L'interface `AudioWorklet` *ne définit pas de propriétés propres, mais hérite des propriétés de _{{domxref("Worklet")}}._ -

Méthodes

+## Méthodes -

Cette interface hérite des méthodes de {{domxref('Worklet')}}. L'interface AudioWorklet ne définit aucune méthode propre.

+Cette interface hérite des méthodes de *{{domxref('Worklet')}}. L'interface `AudioWorklet`*ne définit aucune méthode propre*.* -

Evénements

+## Evénements -

L'AudioWorklet n'a pas d'événements auxquels il répond.

+L'*`AudioWorklet` *n'a pas d'événements auxquels il répond*.* -

Exemples

+## Exemples -

Voir {{domxref("AudioWorkletNode")}} pour des exemples complets de création de nœuds audio personnalisés.

+Voir {{domxref("AudioWorkletNode")}} pour des exemples complets de création de nœuds audio personnalisés. -

Spécifications

+## Spécifications - - - - - - - - - - - - - -
SpécificationStatusCommentaire
{{SpecName('Web Audio API','#audioworklet','AudioWorklet')}}{{Spec2('Web Audio API')}}Définition intiale.
+| Spécification | Status | Commentaire | +| -------------------------------------------------------------------------------- | ------------------------------------ | ------------------- | +| {{SpecName('Web Audio API','#audioworklet','AudioWorklet')}} | {{Spec2('Web Audio API')}} | Définition intiale. | -

Compatibilité du navigateur

+## Compatibilité du navigateur -
+{{Compat("api.AudioWorklet")}} +## Voir aussi -

{{Compat("api.AudioWorklet")}}

-
- -

Voir aussi

- - +- {{domxref("AudioWorkletGlobalScope")}} — le contexte global d'exécution d'un `AudioWorklet` +- [API Web Audio](/fr/docs/Web/API/Web_Audio_API) +- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/authenticatorassertionresponse/authenticatordata/index.md b/files/fr/web/api/authenticatorassertionresponse/authenticatordata/index.md index ee891dad3a..61afaee4f6 100644 --- a/files/fr/web/api/authenticatorassertionresponse/authenticatordata/index.md +++ b/files/fr/web/api/authenticatorassertionresponse/authenticatordata/index.md @@ -9,74 +9,56 @@ tags: - WebAuthn translation_of: Web/API/AuthenticatorAssertionResponse/authenticatorData --- -

{{draft}}{{securecontext_header}}{{DefaultAPISidebar("Web Authentication API")}}

- -

La propriété authenticatorData (rattachée à  l'interface {{domxref("AuthenticatorAssertionResponse")}}) fournit un {{jsxref("ArrayBuffer")}} qui contient les informations relatives à l'authenticateur tels que :

- -
    -
  • l'empreinte d'identifiant (rpIdHash pour Relying Party ID Hash)
    • -
  • un compteur de signature
    • -
  • un test quant à la présence de l'utilisateur
    • -
  • des marqueurs (flags) de vérification de l'utilisateur
    • -
  • les éventuelles extensions traitées par l'authenticateur
    • -
- -

Cette propriété est signée par l'authenticateur (c'est l'un des deux champs qui est signé).

- -

Syntaxe

- -
var authnrData = assertion.response.authnrData;
-
- -

Valeur

- -

Un objet {{jsxref("ArrayBuffer")}} dont la propriété {{jsxref("ArrayBuffer.byteLength")}} indique qu'il mesure au moins 37 octets et qui contient les champs suivants :

- -
    -
  • rpIdHash (32 octets) - Une empreinte SHA256 de l'identifiant de la partie fiable (i.e. - le domaine) tel que vu par le navigateur. Le serveur s'assurera ensuite que cette empreinte correspond à sa propre origine afin d'empêcher les tentatives de hameçonnage (phishing) ou d'autres attaques de l'homme du milieu (man-in-the-middle).
    • -
  • flags (1 octet) - Une série de bits qui indique les différents attributs validés par l'authenticateur. Les bits sont décrits comme suit (où le bit 0 correspond au bit de poids faible) (tous les bits ne sont pas mentionnés car certains sont réservés pour une utilisation future) : -
      -
    • Bit 0 : Présence de l'utilisateur (User Presence - UP) : si ce bit est actif, cela signifie que l'authenticateur a validé la présence de l'utilisateur par un test de présence (Test of User Presence - TUP). Cela peut notamment correspondre à l'appui sur un bouton de l'authenticateur.
      • -
    • Bit 2 : Vérification de l'utilisateur (User Verification - UV) : si ce bit est actif, cela signifie que l'authenticateur a vérifié l'utilisateur en question via une méthode d'authentification (biométrique, code PIN, autre).
      • -
    • Bit 6 : Présence des données d'authentification vérifiées (Attested Credential Data - AT) : si ce bit est actif, le champ attestedCredentialData suivra immédiatement après les 37 premiers octets de cet objet.
      • -
    • Bit 7 : Présence des données d'extension (Extension data - ED) : si ce bit est actif, les données d'extensions suivront le champ attestedCredentialData s'il est présent ou seront situées après les 37 premiers octets de cet objet sinon.
      • -
    -
    • -
  • signCount (4 octets) : un compteur de signature provenant de l'authenticateur. Cela permet au serveur de détecter un éventuel clonage de l'authenticateur.
    • -
  • attestedCredentialData (longueur variable) : les informations d'authentification qui ont été créées. Ce champ est uniquement présent lors d'un appel à navigator.credentials.create(). Ces informations sont représentées par une séquence d'octets au format suivant : -
      -
    • AAGUID (16 octets) - Authenticator Attestation Globally Unique Identifier, un identifiant universel unique pour l'attestation de l'authenticateur qui identifie le modèle de l'authenticateur (pas cet exemplaire en particulier) afin qu'une autre partie puisse comprendre les caractéristiques de l'authenticateur en consultant ses méta-données.
      • -
    • credentialIdLength (2 octets) - la longueur, en octets, de l'identifiant d'authentification qui suit ces octets.
      • -
    • credentialId (longueur variable) - un identifiant unique pour ces informations d'authentification et qui pourra être demandé pour de futures authentifications. Cette information mesure credentialIdLength octets.
      • -
    • credentialPublicKey (longueur variable) - une clé publique encodée au format COSE. Cette clé publique sera stockée sur le serveur et associée au compte de l'utilisateur afin d'être utilisée pour de futures authentifications.
      • -
    -
    • -
  • extensions (longueur variable) - Une carte optionnelle, encodée au format CBOR, et qui contient les extensions de l'authenticateur.
    • -
- -

Exemples

- -

TBD

- -

Specifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('WebAuthn')}}{{Spec2('WebAuthn')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.AuthenticatorAssertionResponse")}}

+{{draft}}{{securecontext_header}}{{DefaultAPISidebar("Web Authentication API")}} + +La propriété **`authenticatorData`** (rattachée à  l'interface {{domxref("AuthenticatorAssertionResponse")}}) fournit un {{jsxref("ArrayBuffer")}} qui contient les informations relatives à l'authenticateur tels que : + +- l'empreinte d'identifiant (rpIdHash pour _Relying Party ID Hash_) +- un compteur de signature +- un test quant à la présence de l'utilisateur +- des marqueurs (_flags_) de vérification de l'utilisateur +- les éventuelles extensions traitées par l'authenticateur + +Cette propriété est signée par l'authenticateur (c'est l'un des deux champs qui est signé). + +## Syntaxe + +```js +var authnrData = assertion.response.authnrData; +``` + +### Valeur + +Un objet {{jsxref("ArrayBuffer")}} dont la propriété {{jsxref("ArrayBuffer.byteLength")}} indique qu'il mesure au moins 37 octets et qui contient les champs suivants : + +- **`rpIdHash`** (32 octets) - Une empreinte SHA256 de l'identifiant de la partie fiable (i.e. - le domaine) tel que vu par le navigateur. Le serveur s'assurera ensuite que cette empreinte correspond à sa propre origine afin d'empêcher les tentatives de hameçonnage (_phishing_) ou d'autres attaques de l'homme du milieu (_man-in-the-middle_). +- **`flags`** (1 octet) - Une série de bits qui indique les différents attributs validés par l'authenticateur. Les bits sont décrits comme suit (où le bit 0 correspond au bit de poids faible) (tous les bits ne sont pas mentionnés car certains sont réservés pour une utilisation future) : + + - Bit 0 : Présence de l'utilisateur (_User Presence_ - UP) : si ce bit est actif, cela signifie que l'authenticateur a validé la présence de l'utilisateur par un test de présence (_Test of User Presence_ - TUP). Cela peut notamment correspondre à l'appui sur un bouton de l'authenticateur. + - Bit 2 : Vérification de l'utilisateur (_User Verification_ - UV) : si ce bit est actif, cela signifie que l'authenticateur a vérifié l'utilisateur en question via une méthode d'authentification (biométrique, code PIN, autre). + - Bit 6 : Présence des données d'authentification vérifiées (_Attested Credential Data_ - AT) : si ce bit est actif, le champ `attestedCredentialData` suivra immédiatement après les 37 premiers octets de cet objet. + - Bit 7 : Présence des données d'extension (_Extension data_ - ED) : si ce bit est actif, les données d'extensions suivront le champ `attestedCredentialData` s'il est présent ou seront situées après les 37 premiers octets de cet objet sinon. + +- **`signCount`** (4 octets) : un compteur de signature provenant de l'authenticateur. Cela permet au serveur de détecter un éventuel clonage de l'authenticateur. +- **`attestedCredentialData`** (longueur variable) : les informations d'authentification qui ont été créées. Ce champ est uniquement présent lors d'un appel à `navigator.credentials.create()`. Ces informations sont représentées par une séquence d'octets au format suivant : + + - **`AAGUID`** (16 octets) - _Authenticator Attestation Globally Unique Identifier_, un identifiant universel unique pour l'attestation de l'authenticateur qui identifie le modèle de l'authenticateur (pas cet exemplaire en particulier) afin qu'une autre partie puisse comprendre les caractéristiques de l'authenticateur en consultant ses méta-données. + - **`credentialIdLength`** (2 octets) - la longueur, en octets, de l'identifiant d'authentification qui suit ces octets. + - **`credentialId`** (longueur variable) - un identifiant unique pour ces informations d'authentification et qui pourra être demandé pour de futures authentifications. Cette information mesure `credentialIdLength` octets. + - **`credentialPublicKey`** (longueur variable) - une clé publique encodée au format [COSE](https://tools.ietf.org/html/rfc8152). Cette clé publique sera stockée sur le serveur et associée au compte de l'utilisateur afin d'être utilisée pour de futures authentifications. + +- **`extensions`** (longueur variable) - Une carte optionnelle, encodée au format [CBOR](https://tools.ietf.org/html/rfc7049), et qui contient les extensions de l'authenticateur. + +## Exemples + +TBD + +## Specifications + +| Spécification | État | Commentaires | +| -------------------------------- | ---------------------------- | -------------------- | +| {{SpecName('WebAuthn')}} | {{Spec2('WebAuthn')}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("api.AuthenticatorAssertionResponse")}} diff --git a/files/fr/web/api/authenticatorassertionresponse/index.md b/files/fr/web/api/authenticatorassertionresponse/index.md index 5b1ff20f39..2fd0d5ac37 100644 --- a/files/fr/web/api/authenticatorassertionresponse/index.md +++ b/files/fr/web/api/authenticatorassertionresponse/index.md @@ -10,58 +10,45 @@ tags: - WebAuthn translation_of: Web/API/AuthenticatorAssertionResponse --- -

{{APIRef("Web Authentication API")}}{{securecontext_header}}

+{{APIRef("Web Authentication API")}}{{securecontext_header}} -

L'interface AuthenticatorAssertionResponse, rattachée à l'API Web Authentication, est renvoyée par un appel à {{domxref('CredentialsContainer.get()')}} lorsqu'on a passé un objet {{domxref('PublicKeyCredential')}} en argument. Cette interface fournit une preuve à un service que l'objet possède une paire de clé et que la requête d'authentification est valide et approvée.

+L'interface **`AuthenticatorAssertionResponse`**, rattachée à l'[API Web Authentication](/fr/docs/Web/API/Web_Authentication_API), est renvoyée par un appel à {{domxref('CredentialsContainer.get()')}} lorsqu'on a passé un objet {{domxref('PublicKeyCredential')}} en argument. Cette interface fournit une preuve à un service que l'objet possède une paire de clé et que la requête d'authentification est valide et approvée. -

Propriétés

+## Propriétés -
-
AuthenticatorAssertionResponse.clientDataJSON
-
Les données du client pour l'authentification telles que l'origine et le challenge. La propriété {{domxref("AuthenticatorAttestationResponse.clientDataJSON","clientDataJSON")}} est héritée de {{domxref("AuthenticatorResponse")}}.
-
{{domxref("AuthenticatorAssertionResponse.authenticatorData")}}
-
Un objet {{jsxref("ArrayBuffer")}} contenant les informations sur l'authenticateur telles que : -
    -
  • l'empreinte d'identifiant (Relying Party ID Hash) rpidHash
    • -
  • un compteur de signature
    • -
  • un test de présence d'utilisateur
    • -
  • des marqueurs de vérification de l'utilisateur
    • -
  • les éventuelles extensions traitées par l'authentificateur
    • -
- Ce champ est l'un des deux champs qui est signé par l'authentificateur.
-
{{domxref("AuthenticatorAssertionResponse.signature")}}
-
Une signature d'assertion par rapport à {{domxref("AuthenticatorAssertionResponse.authenticatorData")}} et {{domxref("AuthenticatorResponse.clientDataJSON")}}. La signature d'assertion est créée avec la clé privée de la paire de clés (générée avec l'appel à create()) et est vérifiée avec la clé publique la même paire de clé.
-
{{domxref("AuthenticatorAssertionResponse.userHandle")}}
-
Un objet {{jsxref("ArrayBuffer")}} contenant un identifiant opaque pour l'utilisateur.
-
+- `AuthenticatorAssertionResponse.clientDataJSON` + - : Les données du client pour l'authentification telles que l'origine et le _challenge_. La propriété {{domxref("AuthenticatorAttestationResponse.clientDataJSON","clientDataJSON")}} est héritée de {{domxref("AuthenticatorResponse")}}. +- {{domxref("AuthenticatorAssertionResponse.authenticatorData")}} -

Méthodes

+ - : Un objet {{jsxref("ArrayBuffer")}} contenant les informations sur l'authenticateur telles que : -

Aucune.

+ - l'empreinte d'identifiant (_Relying Party ID Hash_) `rpidHash` + - un compteur de signature + - un test de présence d'utilisateur + - des marqueurs de vérification de l'utilisateur + - les éventuelles extensions traitées par l'authentificateur -

Exemples

+ Ce champ est l'un des deux champs qui est signé par l'authentificateur. -

TBD

+- {{domxref("AuthenticatorAssertionResponse.signature")}} + - : Une signature d'assertion par rapport à {{domxref("AuthenticatorAssertionResponse.authenticatorData")}} et {{domxref("AuthenticatorResponse.clientDataJSON")}}. La signature d'assertion est créée avec la clé privée de la paire de clés (générée avec l'appel à `create()`) et est vérifiée avec la clé publique la même paire de clé. +- {{domxref("AuthenticatorAssertionResponse.userHandle")}} + - : Un objet {{jsxref("ArrayBuffer")}} contenant un identifiant opaque pour l'utilisateur. -

Spécifications

+## Méthodes - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('WebAuthn')}}{{Spec2('WebAuthn')}}Définition initiale.
+Aucune. -

Compatibilité des navigateurs

+## Exemples -

{{Compat("api.AuthenticatorAssertionResponse")}}

+TBD + +## Spécifications + +| Spécification | État | Commentaires | +| -------------------------------- | ---------------------------- | -------------------- | +| {{SpecName('WebAuthn')}} | {{Spec2('WebAuthn')}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("api.AuthenticatorAssertionResponse")}} diff --git a/files/fr/web/api/authenticatorattestationresponse/index.md b/files/fr/web/api/authenticatorattestationresponse/index.md index 13a1741a88..b4a6dbbad3 100644 --- a/files/fr/web/api/authenticatorattestationresponse/index.md +++ b/files/fr/web/api/authenticatorattestationresponse/index.md @@ -10,46 +10,31 @@ tags: - WebAuthn translation_of: Web/API/AuthenticatorAttestationResponse --- -

{{APIRef("Web Authentication API")}}{{securecontext_header}}

+{{APIRef("Web Authentication API")}}{{securecontext_header}} -

L'interface AuthenticatorAttestationResponse, rattachée à l'API Web Authentication, est renvoyée par un appel à {{domxref('CredentialsContainer.create()')}} lorsqu'un objet {{domxref('PublicKeyCredential')}} est passé à la méthode. Elle fournit une racine cryptographique de confiance pour la nouvelle paire de clés qui a été générée.

+L'interface **`AuthenticatorAttestationResponse`**, rattachée à l'[API Web Authentication](/en-US/docs/Web/API/Web_Authentication_API), est renvoyée par un appel à {{domxref('CredentialsContainer.create()')}} lorsqu'un objet {{domxref('PublicKeyCredential')}} est passé à la méthode. Elle fournit une racine cryptographique de confiance pour la nouvelle paire de clés qui a été générée. -

Propriétés

+## Propriétés -
-
AuthenticatorAttestationResponse.clientDataJSON
-
Les données relatives aux client pour l'authentification telles que l'origine et le challenge. La propriété {{domxref("AuthenticatorAttestationResponse.clientDataJSON","clientDataJSON")}} est héritée de l'interface {{domxref("AuthenticatorResponse")}}.
-
{{domxref("AuthenticatorAttestationResponse.attestationObject")}}
-
Un objet {{domxref("ArrayBuffer")}} qui contient les données de l'authenticateur ainsi qu'une instruction d'attestation pour la nouvelle paire de clés.
-
+- `AuthenticatorAttestationResponse.clientDataJSON` + - : Les données relatives aux client pour l'authentification telles que l'origine et le _challenge_. La propriété {{domxref("AuthenticatorAttestationResponse.clientDataJSON","clientDataJSON")}} est héritée de l'interface {{domxref("AuthenticatorResponse")}}. +- {{domxref("AuthenticatorAttestationResponse.attestationObject")}} + - : Un objet {{domxref("ArrayBuffer")}} qui contient les données de l'authenticateur ainsi qu'une instruction d'attestation pour la nouvelle paire de clés. -

Méthodes

+## Méthodes -

Aucune.

+Aucune. -

Exemples

+## Exemples -

TBD

+TBD -

Spécifications

+## Spécifications - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('WebAuthn')}}{{Spec2('WebAuthn')}}Définition initiale.
+| Spécification | État | Commentaires | +| -------------------------------- | ---------------------------- | -------------------- | +| {{SpecName('WebAuthn')}} | {{Spec2('WebAuthn')}} | Définition initiale. | -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

{{Compat("api.AuthenticatorAttestationResponse")}}

+{{Compat("api.AuthenticatorAttestationResponse")}} diff --git a/files/fr/web/api/authenticatorresponse/index.md b/files/fr/web/api/authenticatorresponse/index.md index 097cbfad44..cea562c832 100644 --- a/files/fr/web/api/authenticatorresponse/index.md +++ b/files/fr/web/api/authenticatorresponse/index.md @@ -9,49 +9,32 @@ tags: - Web Authn translation_of: Web/API/AuthenticatorResponse --- -

{{APIRef("Web Authentication API")}}{{securecontext_header}}

+{{APIRef("Web Authentication API")}}{{securecontext_header}} -

L'interface AuthenticatorResponse, rattachée à l'API Web Authentication, constitue l'interface de base pour les interfaces qui fournissent une racine cryptographique de confiance pour une paire de clés. Les interfaces filles contiennent des informations relatives au navigateur telles que l'origine du challenge et qui peuvent être renvoyée par {{domxref("PublicKeyCredential.response")}}.

+L'interface **`AuthenticatorResponse`**, rattachée à l'[API Web Authentication](/en-US/docs/Web/API/Web_Authentication_API), constitue l'interface de base pour les interfaces qui fournissent une racine cryptographique de confiance pour une paire de clés. Les interfaces filles contiennent des informations relatives au navigateur telles que l'origine du _challenge_ et qui peuvent être renvoyée par {{domxref("PublicKeyCredential.response")}}. -

Interfaces basées sur AuthenticatorResponse

+## Interfaces basées sur `AuthenticatorResponse` -

Voici la liste des interfaces basées sur AuthenticatorResponse.

+Voici la liste des interfaces basées sur `AuthenticatorResponse`. -
    -
  • {{domxref("AuthenticatorAssertionResponse")}}
    • -
  • {{domxref("AuthenticatorAttestationResponse")}}
    • -
+- {{domxref("AuthenticatorAssertionResponse")}} +- {{domxref("AuthenticatorAttestationResponse")}} -

Propriétés

+## Propriétés -
-
{{domxref("AuthenticatorResponse.clientDataJSON")}}
-
Une chaîne de caractères JSON stockée dans un {{domxref("ArrayBuffer")}} et qui représente les données du client passées à {{domxref("CredentialsContainer.create()")}} ou {{domxref("CredentialsContainer.get()")}}.
-
+- {{domxref("AuthenticatorResponse.clientDataJSON")}} + - : Une chaîne de caractères [JSON](/fr/docs/Learn/JavaScript/Objects/JSON) stockée dans un {{domxref("ArrayBuffer")}} et qui représente les données du client passées à {{domxref("CredentialsContainer.create()")}} ou {{domxref("CredentialsContainer.get()")}}. -

Méthodes

+## Méthodes -

Aucune.

+Aucune. -

Spécifications

+## Spécifications - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('WebAuthn')}}{{Spec2('WebAuthn')}}Définition initiale.
+| Spécification | État | Commentaires | +| -------------------------------- | ---------------------------- | -------------------- | +| {{SpecName('WebAuthn')}} | {{Spec2('WebAuthn')}} | Définition initiale. | -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

{{Compat("api.AuthenticatorResponse")}}

+{{Compat("api.AuthenticatorResponse")}} diff --git a/files/fr/web/api/baseaudiocontext/createbiquadfilter/index.md b/files/fr/web/api/baseaudiocontext/createbiquadfilter/index.md index 3d995409bb..d33fd5eb4e 100644 --- a/files/fr/web/api/baseaudiocontext/createbiquadfilter/index.md +++ b/files/fr/web/api/baseaudiocontext/createbiquadfilter/index.md @@ -11,25 +11,24 @@ tags: - createBiquadFilter translation_of: Web/API/BaseAudioContext/createBiquadFilter --- -

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

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

La méthode createBiquadFilter() 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.

-
+La méthode `createBiquadFilter()` 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. -

Syntaxe

+## Syntaxe -
baseAudioContext.createBiquadFilter();
+ baseAudioContext.createBiquadFilter(); -

Retourne

+### Retourne -

un {{domxref("BiquadFilterNode")}}.

+un {{domxref("BiquadFilterNode")}}. -

Exemple

+## Exemple -

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 voice-change-o-matic (et lisez de même le code source).

+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 [voice-change-o-matic](https://mdn.github.io/voice-change-o-matic/) (et lisez de même le [code source](https://github.com/mdn/voice-change-o-matic)). -
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+```js
+var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
 
 //set up the different audio nodes we will use for the app
 var analyser = audioCtx.createAnalyser();
@@ -52,35 +51,19 @@ gainNode.connect(audioCtx.destination);
 
 biquadFilter.type = "lowshelf";
 biquadFilter.frequency.setValueAtTime(1000, audioCtx.currentTime);
-biquadFilter.gain.setValueAtTime(25, audioCtx.currentTime);
+biquadFilter.gain.setValueAtTime(25, audioCtx.currentTime); +``` -

Spécifications

+## Spécifications - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Web Audio API', '#dom-baseaudiocontext-createbiquadfilter', 'createBiquadFilter()')}}{{Spec2('Web Audio API')}}
+| Specification | Status | Comment | +| -------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ------- | +| {{SpecName('Web Audio API', '#dom-baseaudiocontext-createbiquadfilter', 'createBiquadFilter()')}} | {{Spec2('Web Audio API')}} | | -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -
+{{Compat("api.BaseAudioContext.createBiquadFilter")}} +## Voir aussi -

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

-
- -

Voir aussi

- - +- [Utiliser l'API Web Audio](/en-US/docs/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/baseaudiocontext/createbuffer/index.md b/files/fr/web/api/baseaudiocontext/createbuffer/index.md index 55ca8f3ea5..e87275b3eb 100644 --- a/files/fr/web/api/baseaudiocontext/createbuffer/index.md +++ b/files/fr/web/api/baseaudiocontext/createbuffer/index.md @@ -11,70 +11,67 @@ tags: - createBuffer translation_of: Web/API/BaseAudioContext/createBuffer --- -

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

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

La méthode createBuffer() de l'interface {{domxref("BaseAudioContext")}} est utilisée pour créer un nouvel objet {{domxref("AudioBuffer")}} vide, qui peut ensuite être rempli.

+La méthode `createBuffer()` de l'interface {{domxref("BaseAudioContext")}} est utilisée pour créer un nouvel objet {{domxref("AudioBuffer")}} vide, qui peut ensuite être rempli. -

Pour plus de détails sur les tampons audio, consultez la page de référence {{domxref ("AudioBuffer")}}.

+Pour plus de détails sur les tampons audio, consultez la page de référence {{domxref ("AudioBuffer")}}. -
-

Note : createBuffer() 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 createBuffer() bloquait l'exécution du reste du code. La méthode asynchrone decodeAudioData() 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, decodeAudioData() est ce que vous devriez utiliser.

-
+> **Note :** `createBuffer()` 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 `createBuffer()` bloquait l'exécution du reste du code. La méthode asynchrone `decodeAudioData()` 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, `decodeAudioData()` est ce que vous devriez utiliser. -

Syntaxe

+## Syntaxe -
var tampon = baseAudioContext.createBuffer(nbDeCanaux, longueur, frequenceDEchantillonnage);
+ var tampon = baseAudioContext.createBuffer(nbDeCanaux, longueur, frequenceDEchantillonnage); -

Paramètres

+### Paramètres -
-

Note : pour une explication en profondeur de la façon dont les tampons audio fonctionnent, ainsi que de leur signification, lire Les concepts de base de la Web Audio API de notre guide des concepts de base.

-
+> **Note :** pour une explication en profondeur de la façon dont les tampons audio fonctionnent, ainsi que de leur signification, lire [Les concepts de base de la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API) de notre guide des concepts de base. -
-
nbDeCanaux
-
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.
-
longueur
-
Un entier représentant la taille du tampon dans les trames d'échantillons.
-
frequenceDEchantillonnage
-
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.
-
+- nbDeCanaux + - : 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. +- longueur + - : Un entier représentant la taille du tampon dans les trames d'échantillons. +- frequenceDEchantillonnage + - : 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. -

Retourne

+### Retourne -

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

+Un {{domxref("AudioBuffer")}}. -

Exemples

+## Exemples -

Tout d'abord, deux exemples triviaux simples pour aider à expliquer comment les paramètres sont utilisés :

+Tout d'abord, deux exemples triviaux simples pour aider à expliquer comment les paramètres sont utilisés : -
var ctxAudio = new AudioContext();
-var tampon = ctxAudio.createBuffer(2, 22050, 44100);
+```js +var ctxAudio = new AudioContext(); +var tampon = ctxAudio.createBuffer(2, 22050, 44100); +``` -

Si vous utilisez cet appel, vous obtiendrez un tampon stéréo (deux canaux), qui, lorsque relu avec un AudioContext 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.

+Si vous utilisez cet appel, vous obtiendrez un tampon stéréo (deux canaux), qui, lorsque relu avec un `AudioContext` 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. -
var ctxAudio = new AudioContext();
-var tampon = ctxAudio.createBuffer(1, 22050, 22050);
+```js +var ctxAudio = new AudioContext(); +var tampon = ctxAudio.createBuffer(1, 22050, 22050); +``` -

Si vous utilisez cet appel, vous obtiendrez un tampon mono (un canal), qui, lorsqu'il sera relu avec un AudioContext fonctionnant à 44100Hz, sera automatiquement *rééchantillonné* à 44100Hz (et produira donc 44100 trames), et durera 1,0 seconde : 44100 images / 44100Hz = 1 seconde.

+Si vous utilisez cet appel, vous obtiendrez un tampon mono (un canal), qui, lorsqu'il sera relu avec un `AudioContext` fonctionnant à 44100Hz, sera automatiquement \*rééchantillonné\* à 44100Hz (et produira donc 44100 trames), et durera 1,0 seconde : 44100 images / 44100Hz = 1 seconde. -
-

Note : 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).

-
+> **Note :** 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). -

Examinons maintenant un exemple de createBuffer() 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.

+Examinons maintenant un exemple de `createBuffer()` 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. -
var ctxAudio = new (window.AudioContext || window.webkitAudioContext)();
+```js
+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++) {
+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++) {
+  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;
@@ -90,31 +87,19 @@ source.buffer = monArrayBuffer;
 // de sorte que nous puissions entendre le son
 source.connect(ctxAudio.destination);
 // Démarrer la lecture de la source
-source.start();
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#dom-baseaudiocontext-createbuffer', 'createBuffer()')}}{{Spec2('Web Audio API')}} 
- -

Compatibilité des navigateurs

- -

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

- -

Voir aussi

- - +source.start(); +``` + +## Spécifications + +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | +| {{SpecName('Web Audio API', '#dom-baseaudiocontext-createbuffer', 'createBuffer()')}} | {{Spec2('Web Audio API')}} |   | + +## Compatibilité des navigateurs + +{{Compat("api.BaseAudioContext.createBuffer")}} + +## Voir aussi + +- [Utilisation de l'API Web Audio](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/baseaudiocontext/createbuffersource/index.md b/files/fr/web/api/baseaudiocontext/createbuffersource/index.md index 9a9dfe08cf..b01d7c1884 100644 --- a/files/fr/web/api/baseaudiocontext/createbuffersource/index.md +++ b/files/fr/web/api/baseaudiocontext/createbuffersource/index.md @@ -3,29 +3,28 @@ title: BaseAudioContext.createBufferSource() slug: Web/API/BaseAudioContext/createBufferSource translation_of: Web/API/BaseAudioContext/createBufferSource --- -

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

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

La méthode createBufferSource() 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") }}.

+La méthode `createBufferSource()` 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") }}. -

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.

+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. -

Syntaxe

+## Syntaxe -
var source = baseAudioContext.createBufferSource();
+ var source = baseAudioContext.createBufferSource(); -

Retourne

+### Retourne -

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

+Un {{domxref("AudioBufferSourceNode")}}. -

Exemple

+## Exemple -

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.

+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. -
-

Note : Vous pouvez également exécuter le code en direct, ou voir la source.

-
+> **Note :** Vous pouvez également [exécuter le code en direct](https://mdn.github.io/webaudio-examples/audio-buffer/), ou [voir la source](https://github.com/mdn/webaudio-examples/blob/master/audio-buffer/index.html). -
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+```js
+var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
 var button = document.querySelector('button');
 var pre = document.querySelector('pre');
 var myScript = document.querySelector('script');
@@ -43,10 +42,10 @@ 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++) {
+  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++) {
+   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;
@@ -63,31 +62,19 @@ button.onclick = function() {
   source.connect(audioCtx.destination);
   // commence la lecture de la source
   source.start();
-}
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#dom-baseaudiocontext-createbuffersource', 'createBufferSource()')}}{{Spec2('Web Audio API')}}
- -

Compatibilité des navigateurs

- -

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

- -

Voir aussi

- - +} +``` + +## Spécifications + +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | +| {{SpecName('Web Audio API', '#dom-baseaudiocontext-createbuffersource', 'createBufferSource()')}} | {{Spec2('Web Audio API')}} | | + +## Compatibilité des navigateurs + +{{Compat("api.BaseAudioContext.createBufferSource")}} + +## Voir aussi + +- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/baseaudiocontext/creategain/index.md b/files/fr/web/api/baseaudiocontext/creategain/index.md index 90039ecc31..0dcba996f1 100644 --- a/files/fr/web/api/baseaudiocontext/creategain/index.md +++ b/files/fr/web/api/baseaudiocontext/creategain/index.md @@ -14,32 +14,35 @@ tags: translation_of: Web/API/BaseAudioContext/createGain original_slug: Web/API/AudioContext/createGain --- -

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

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

La méthode createGain de l'interface {{ domxref("AudioContext") }} crée un {{ domxref("GainNode") }} qui peut être utilisé pour contrôler le volume global du graphe audio.

-
+La méthode createGain de l'interface {{ domxref("AudioContext") }} crée un {{ domxref("GainNode") }} qui peut être utilisé pour contrôler le volume global du graphe audio. -

Syntaxe

+## Syntaxe -
var contexteAudio = new AudioContext();
-var gainNode = contexteAudio.createGain();
+```js +var contexteAudio = new AudioContext(); +var gainNode = contexteAudio.createGain(); +``` -

Retourne

+### Retourne -

Un {{domxref("GainNode")}} qui prend en entrée une ou plusieurs sources audio et en sortie un son dont le volume a été ajusté à un niveau indiqué par le paramètre de type a-rate {{domxref("GainNode.gain")}}.

+Un {{domxref("GainNode")}} qui prend en entrée une ou plusieurs sources audio et en sortie un son dont le volume a été ajusté à un niveau indiqué par le paramètre de type [a-rate](/en-US/docs/Web/API/AudioParam#a-rate) {{domxref("GainNode.gain")}}. -

Exemple

+## Exemple -

L'exemple suivant montre l'utilisation d'un {{domxref("AudioContext")}} pour créer un {{ domxref("GainNode") }}, qui sert à activer et désactiver le son au clic d'un bouton, en changeant la valeur de la propriété gain.
-
- L'extrait de code ci-dessous ne fonctionne pas tel quel - pour un exemple complet qui fonctionne, consulter la démo Voice-change-O-matic (et son code source.)

+L'exemple suivant montre l'utilisation d'un {{domxref("AudioContext")}} pour créer un {{ domxref("GainNode") }}, qui sert à activer et désactiver le son au clic d'un bouton, en changeant la valeur de la propriété gain. -
<div>
-  <button class="boutonson">Mute button</button>
-</div>
+L'extrait de code ci-dessous ne fonctionne pas tel quel - pour un exemple complet qui fonctionne, consulter la démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) ([et son code source](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js).) -
var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+```html
+

+  
+

+```
+
+```js
+var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
 var gainNode = contexteAudio.createGain();
 var boutonSon = document.querySelector('.boutonson'),
     source;
@@ -81,31 +84,19 @@ function couperSon () {
         boutonSon.id = "";
         boutonSon.innerHTML = "Couper le son";
     }
-}
- -

Spécification

- - - - - - - - - - - - - - -
SpécificationStatusCommentaire
{{SpecName('Web Audio API', '#widl-AudioContext-createGain-GainNode', 'createGain()')}}{{Spec2('Web Audio API')}} 
- -

Compatibilité navigateur

- -

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

- -

Voir aussi

- - +} +``` + +## Spécification + +| Spécification | Status | Commentaire | +| -------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | +| {{SpecName('Web Audio API', '#widl-AudioContext-createGain-GainNode', 'createGain()')}} | {{Spec2('Web Audio API')}} |   | + +## Compatibilité navigateur + +{{Compat("api.BaseAudioContext.createGain")}} + +## Voir aussi + +- [Utiliser la Web Audio API](/fr/docs/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/baseaudiocontext/createpanner/index.md b/files/fr/web/api/baseaudiocontext/createpanner/index.md index 2c11e2a02e..12cb80751f 100644 --- a/files/fr/web/api/baseaudiocontext/createpanner/index.md +++ b/files/fr/web/api/baseaudiocontext/createpanner/index.md @@ -12,31 +12,30 @@ tags: - createPanner translation_of: Web/API/BaseAudioContext/createPanner --- -

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

+{{ 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.

-
+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.

+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

+## Syntaxe -
baseAudioCtx.createPanner();
+ baseAudioCtx.createPanner(); -

Retourne

+### Retourne -

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

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

Exemple

+## 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().

+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 !

+Pour voir une implantation complète, visitez notre [exemple de panner-node](https://mdn.github.io/webaudio-examples/panner-node/) ([lisez le code source aussi !](https://github.com/mdn/webaudio-examples/tree/master/panner-node)) – 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.

+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
+```js
+// set up listener and panner position information
 var WIDTH = window.innerWidth;
 var HEIGHT = window.innerHeight;
 
@@ -117,41 +116,21 @@ function positionPanner() {
     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')}}
+> **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. -

Compatibilité des navigateurs

+## Spécifications -
-
+| Specification | Status | Comment | +| ---------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ------- | +| {{SpecName('Web Audio API', '#dom-baseaudiocontext-createpanner', 'createPanner()')}} | {{Spec2('Web Audio API')}} | | +## Compatibilité des navigateurs -

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

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

Voir aussi

+## Voir aussi - +- [Utiliser l'API Web Audio](/en-US/docs/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/baseaudiocontext/createperiodicwave/index.md b/files/fr/web/api/baseaudiocontext/createperiodicwave/index.md index 5678fadb26..8df75e0fb7 100644 --- a/files/fr/web/api/baseaudiocontext/createperiodicwave/index.md +++ b/files/fr/web/api/baseaudiocontext/createperiodicwave/index.md @@ -12,42 +12,38 @@ tags: - createPeriodicWave translation_of: Web/API/BaseAudioContext/createPeriodicWave --- -

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

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

La méthode createPeriodicWave() 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") }}.

+La méthode `createPeriodicWave()` 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") }}. -

Syntaxe

+## Syntaxe -
var onde = AudioContext.createPeriodicWave(réel, imag[, constraints]);
+ var onde = AudioContext.createPeriodicWave(réel, imag[, constraints]); -

Retour

+### Retour -

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

+Un {{domxref("PeriodicWave")}}. -

Paramètres

+### Paramètres -
-
réel
-
Un tableau de termes cosinus (traditionnellement les termes A).
-
imag
-
Un tableau de termes sinus (traditionnellement les termes B).
-
contraintes {{optional_inline}}
-
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é : -
    -
  • disableNormalization: si réglé à true, la normalisation est désactivée pour l'onde périodique. Sa valeur par défaut est false.
    • -
-
-
+- `réel` + - : Un tableau de termes cosinus (traditionnellement les termes A). +- `imag` + - : Un tableau de termes sinus (traditionnellement les termes B). +- `contraintes` {{optional_inline}} -
-

Note : Si normalisée, l'onde résultante aura une valeur absolue de sommet égale à 1.

-
+ - : 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é : -

Exemple

+ - `disableNormalization`: si réglé à `true`, la normalisation est désactivée pour l'onde périodique. Sa valeur par défaut est `false`. -

L'exemple suivant illustre un usage simple de createPeriodicWave(), pour créer un objet {{domxref("PeriodicWave")}} contenant une simple courbe de sinus.

+> **Note :** Si normalisée, l'onde résultante aura une valeur absolue de sommet égale à 1. -
var réel = new Float32Array(2);
+## Exemple
+
+L'exemple suivant illustre un usage simple de `createPeriodicWave()`, pour créer un objet {{domxref("PeriodicWave")}} contenant une simple courbe de sinus.
+
+```js
+var réel = new Float32Array(2);
 var imag = new Float32Array(2);
 var contexteAudio = new AudioContext();
 var oscillateur = contexteAudio.createOscillator();
@@ -64,43 +60,27 @@ oscillateur.setPeriodicWave(wave);
 oscillateur.connect(contexteAudio.destination);
 
 oscillateur.start();
-oscillateur.stop(2);
- -

Cela fonctionne car un son n'ayant qu'un unique harmonique est par définition une onde sinusoïdale.

- -

Ici, nous créons une PeriodicWave 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].

+oscillateur.stop(2); +``` -

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 createPeriodicWave(), 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.

+Cela fonctionne car un son n'ayant qu'un unique harmonique est par définition une onde sinusoïdale. -

Les coefficients de la transformation de Fourier doivent être données dans un ordre croissant (c'est-à-dire (a+bi)ei,(c+di)e2i,(f+gi)e3i\left(a+bi\right)e^{i} , \left(c+di\right)e^{2i} , \left(f+gi\right)e^{3i}     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.

+Ici, nous créons une `PeriodicWave` 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]. -

Spécifications

+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 `createPeriodicWave()`, 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. - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#dom-baseaudiocontext-createperiodicwave', 'createPeriodicWave')}}{{Spec2('Web Audio API')}}
+Les coefficients de la transformation de Fourier doivent être données dans un ordre _croissant_ (c'est-à-dire (a+bi)ei,(c+di)e2i,(f+gi)e3i\left(a+bi\right)e^{i} , \left(c+di\right)e^{2i} , \left(f+gi\right)e^{3i}     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. -

Compatibilité des navigateurs

+## Spécifications -
+| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | +| {{SpecName('Web Audio API', '#dom-baseaudiocontext-createperiodicwave', 'createPeriodicWave')}} | {{Spec2('Web Audio API')}} | | +## Compatibilité des navigateurs -

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

-
+{{Compat("api.BaseAudioContext.createPeriodicWave")}} -

Voir aussi

+## Voir aussi - +- [Utiliser l'API Web Audio](/en-US/docs/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/baseaudiocontext/index.md b/files/fr/web/api/baseaudiocontext/index.md index af570e1037..46c7e5d6af 100644 --- a/files/fr/web/api/baseaudiocontext/index.md +++ b/files/fr/web/api/baseaudiocontext/index.md @@ -11,126 +11,111 @@ tags: - Web Audio API translation_of: Web/API/BaseAudioContext --- -
{{APIRef("Web Audio API")}}
- -

L'interface BaseAudioContext 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. Vous n'utiliseriez pas BaseAudioContext directement — vous utiliseriez ses fonctionnalités via l'une de ces deux interfaces héréditaires.

- -

Un BaseAudioContext peut être une cible d'événements, il implémente donc l'interface {{domxref("EventTarget")}}.

- -

{{InheritanceDiagram}}

- -

Propriétés

- -
-
{{domxref("BaseAudioContext.audioWorklet")}} {{experimental_inline}} {{readonlyInline}}
-
Renvoie l'objet {{domxref("AudioWorklet")}}, utilisé pour créer des AudioNodes personnalisés avec traitement JavaScript.
-
{{domxref("BaseAudioContext.currentTime")}} {{readonlyInline}}
-
Renvoie un double représentant une durée matérielle toujours croissante en secondes utilisée pour la planification. Il commence à 0.
-
{{domxref("BaseAudioContext.destination")}} {{readonlyInline}}
-
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.
-
{{domxref("BaseAudioContext.listener")}} {{readonlyInline}}
-
Renvoie l'objet {{domxref("AudioListener")}}, utilisé pour la spatialisation 3D.
-
{{domxref("BaseAudioContext.sampleRate")}} {{readonlyInline}}
-
Renvoie un float représentant la fréquence d'échantillonnage (en échantillons par seconde) utilisée par tous les nœuds dans ce contexte. La fréquence d'échantillonnage d'un {{domxref("AudioContext")}} ne peut pas être modifiée.
-
{{domxref("BaseAudioContext.state")}} {{readonlyInline}}
-
Renvoie l'état actuel de l'AudioContext.
-
- -

Gestionnaires d'événements

- -
-
{{domxref("BaseAudioContext.onstatechange")}}
-
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'AudioContext 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")}}).
-
- -

Méthodes

- -

Implémente également les méthodes de l'interface {{domxref("EventTarget")}}.

- -
-
{{domxref("BaseAudioContext.createBuffer()")}}
-
Crée un nouvel objet {{ domxref("AudioBuffer") }} vide, qui peut ensuite être rempli de données et lu via un {{ domxref("AudioBufferSourceNode") }}.
-
{{domxref("BaseAudioContext.createConstantSource()")}}
-
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.
-
{{domxref("BaseAudioContext.createBufferSource()")}}
-
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.
-
{{domxref("BaseAudioContext.createScriptProcessor()")}}
-
Crée un {{domxref("ScriptProcessorNode")}}, qui peut être utilisé pour le traitement audio direct via JavaScript.
-
{{domxref("BaseAudioContext.createStereoPanner()")}}
-
Crée un {{domxref("StereoPannerNode")}}, qui peut être utilisé pour appliquer un panoramique stéréo à une source audio.
-
{{domxref("BaseAudioContext.createAnalyser()")}}
-
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.
-
{{domxref("BaseAudioContext.createBiquadFilter()")}}
-
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.
-
{{domxref("BaseAudioContext.createChannelMerger()")}}
-
Crée un {{domxref("ChannelMergerNode")}}, qui est utilisé pour combiner les canaux de plusieurs flux audio en un seul flux audio.
-
{{domxref("BaseAudioContext.createChannelSplitter()")}}
-
Crée un {{domxref("ChannelSplitterNode")}}, qui est utilisé pour accéder aux canaux individuels d'un flux audio et les traiter séparément.
-
{{domxref("BaseAudioContext.createConvolver()")}}
-
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.
-
{{domxref("BaseAudioContext.createDelay()")}}
-
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.
-
{{domxref("BaseAudioContext.createDynamicsCompressor()")}}
-
Crée un {{domxref("DynamicsCompressorNode")}}, qui peut être utilisé pour appliquer une compression acoustique à un signal audio.
-
{{domxref("BaseAudioContext.createGain()")}}
-
Crée un {{domxref("GainNode")}}, qui peut être utilisé pour contrôler le volume global du graphique audio.
-
{{domxref("BaseAudioContext.createIIRFilter()")}}
-
Crée un {{domxref("IIRFilterNode")}}, qui représente un filtre du second ordre configurable en plusieurs types de filtres communs différents.
-
{{domxref("BaseAudioContext.createOscillator()")}}
-
Crée un {{domxref("OscillatorNode")}}, une source représentant une forme d'one périodique. Cela génère essentiellement un ton.
-
{{domxref("BaseAudioContext.createPanner()")}}
-
Crée un {{domxref("PannerNode")}}, qui est utilisé pour spatialiser un flux audio entrant dans l'espace 3D.
-
{{domxref("BaseAudioContext.createPeriodicWave()")}}
-
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") }}.
-
{{domxref("BaseAudioContext.createWaveShaper()")}}
-
Crée un {{domxref("WaveShaperNode")}}, qui est utilisé pour implémenter des effets de distorsion non linéaires.
-
{{domxref("BaseAudioContext.decodeAudioData()")}}
-
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 response d'un {{domxref("XMLHttpRequest")}} après avoir défini le responseType sur arraybuffer. Cette méthode ne foncionne que sur des fichiers complets et non sur des fragments de fichiers audio.
-
{{domxref("BaseAudioContext.resume()")}}
-
Reprend la progression du temps dans un contexte audio précédemment suspendu / mis en pause.
-
- -

Exemples

- -

Déclaration de context audio de base:

- -
var audioCtx = new AudioContext();
- -

Variante de nagivateur croisé:

- -
var AudioContext = window.AudioContext || window.webkitAudioContext;
+{{APIRef("Web Audio API")}}
+
+L'interface `BaseAudioContext` 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. Vous n'utiliseriez pas `BaseAudioContext` directement — vous utiliseriez ses fonctionnalités via l'une de ces deux interfaces héréditaires.
+
+Un `BaseAudioContext` peut être une cible d'événements, il implémente donc l'interface {{domxref("EventTarget")}}.
+
+{{InheritanceDiagram}}
+
+## Propriétés
+
+- {{domxref("BaseAudioContext.audioWorklet")}} {{experimental_inline}} {{readonlyInline}}
+  - : Renvoie l'objet {{domxref("AudioWorklet")}}, utilisé pour créer des AudioNodes personnalisés avec traitement JavaScript.
+- {{domxref("BaseAudioContext.currentTime")}} {{readonlyInline}}
+  - : Renvoie un double représentant une durée matérielle toujours croissante en secondes utilisée pour la planification. Il commence à `0`.
+- {{domxref("BaseAudioContext.destination")}} {{readonlyInline}}
+  - : 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.
+- {{domxref("BaseAudioContext.listener")}} {{readonlyInline}}
+  - : Renvoie l'objet {{domxref("AudioListener")}}, utilisé pour la spatialisation 3D.
+- {{domxref("BaseAudioContext.sampleRate")}} {{readonlyInline}}
+  - : Renvoie un float représentant la fréquence d'échantillonnage (en échantillons par seconde) utilisée par tous les nœuds dans ce contexte. La fréquence d'échantillonnage d'un {{domxref("AudioContext")}} ne peut pas être modifiée.
+- {{domxref("BaseAudioContext.state")}} {{readonlyInline}}
+  - : Renvoie l'état actuel de l'`AudioContext`.
+
+### Gestionnaires d'événements
+
+- {{domxref("BaseAudioContext.onstatechange")}}
+  - : 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'`AudioContext` 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")}}).
+
+## Méthodes
+
+_Implémente également les méthodes de l'interface_ {{domxref("EventTarget")}}.
+
+- {{domxref("BaseAudioContext.createBuffer()")}}
+  - : Crée un nouvel objet {{ domxref("AudioBuffer") }} vide, qui peut ensuite être rempli de données et lu via un {{ domxref("AudioBufferSourceNode") }}.
+- {{domxref("BaseAudioContext.createConstantSource()")}}
+  - : 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.
+- {{domxref("BaseAudioContext.createBufferSource()")}}
+  - : 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.
+- {{domxref("BaseAudioContext.createScriptProcessor()")}}
+  - : Crée un {{domxref("ScriptProcessorNode")}}, qui peut être utilisé pour le traitement audio direct via JavaScript.
+- {{domxref("BaseAudioContext.createStereoPanner()")}}
+  - : Crée un {{domxref("StereoPannerNode")}}, qui peut être utilisé pour appliquer un panoramique stéréo à une source audio.
+- {{domxref("BaseAudioContext.createAnalyser()")}}
+  - : 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.
+- {{domxref("BaseAudioContext.createBiquadFilter()")}}
+  - : 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.
+- {{domxref("BaseAudioContext.createChannelMerger()")}}
+  - : Crée un {{domxref("ChannelMergerNode")}}, qui est utilisé pour combiner les canaux de plusieurs flux audio en un seul flux audio.
+- {{domxref("BaseAudioContext.createChannelSplitter()")}}
+  - : Crée un {{domxref("ChannelSplitterNode")}}, qui est utilisé pour accéder aux canaux individuels d'un flux audio et les traiter séparément.
+- {{domxref("BaseAudioContext.createConvolver()")}}
+  - : 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.
+- {{domxref("BaseAudioContext.createDelay()")}}
+  - : 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.
+- {{domxref("BaseAudioContext.createDynamicsCompressor()")}}
+  - : Crée un {{domxref("DynamicsCompressorNode")}}, qui peut être utilisé pour appliquer une compression acoustique à un signal audio.
+- {{domxref("BaseAudioContext.createGain()")}}
+  - : Crée un {{domxref("GainNode")}}, qui peut être utilisé pour contrôler le volume global du graphique audio.
+- {{domxref("BaseAudioContext.createIIRFilter()")}}
+  - : Crée un {{domxref("IIRFilterNode")}}, qui représente un filtre du second ordre configurable en plusieurs types de filtres communs différents.
+- {{domxref("BaseAudioContext.createOscillator()")}}
+  - : Crée un {{domxref("OscillatorNode")}}, une source représentant une forme d'one périodique. Cela génère essentiellement un ton.
+- {{domxref("BaseAudioContext.createPanner()")}}
+  - : Crée un {{domxref("PannerNode")}}, qui est utilisé pour spatialiser un flux audio entrant dans l'espace 3D.
+- {{domxref("BaseAudioContext.createPeriodicWave()")}}
+  - : 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") }}.
+- {{domxref("BaseAudioContext.createWaveShaper()")}}
+  - : Crée un {{domxref("WaveShaperNode")}}, qui est utilisé pour implémenter des effets de distorsion non linéaires.
+- {{domxref("BaseAudioContext.decodeAudioData()")}}
+  - : 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 `response` d'un {{domxref("XMLHttpRequest")}} après avoir défini le `responseType` sur `arraybuffer`. Cette méthode ne foncionne que sur des fichiers complets et non sur des fragments de fichiers audio.
+- {{domxref("BaseAudioContext.resume()")}}
+  - : Reprend la progression du temps dans un contexte audio précédemment suspendu / mis en pause.
+
+## Exemples
+
+Déclaration de context audio de base:
+
+```js
+var audioCtx = new AudioContext();
+```
+
+Variante de nagivateur croisé:
+
+```js
+var AudioContext = window.AudioContext || window.webkitAudioContext;
 var audioCtx = new AudioContext();
 
 var oscillatorNode = audioCtx.createOscillator();
 var gainNode = audioCtx.createGain();
 var finish = audioCtx.destination;
-// etc.
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#BaseAudioContext', 'BaseAudioContext')}}{{Spec2('Web Audio API')}}
- -

Compatibilité des navigateurs

- -

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

- -

Voir aussi

- - +// etc. +``` + +## Spécifications + +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | +| {{SpecName('Web Audio API', '#BaseAudioContext', 'BaseAudioContext')}} | {{Spec2('Web Audio API')}} | | + +## Compatibilité des navigateurs + +{{Compat("api.BaseAudioContext")}} + +## Voir aussi + +- [Utilisation de l'API Web Audio](/en-US/docs/Web_Audio_API/Using_Web_Audio_API) +- {{domxref("AudioContext")}} +- {{domxref("OfflineAudioContext")}} diff --git a/files/fr/web/api/battery_status_api/index.md b/files/fr/web/api/battery_status_api/index.md index ee8ceeb9b6..b7b75dd63d 100644 --- a/files/fr/web/api/battery_status_api/index.md +++ b/files/fr/web/api/battery_status_api/index.md @@ -8,26 +8,25 @@ tags: - Obsolete translation_of: Web/API/Battery_Status_API --- -

{{DefaultAPISidebar("Battery API")}}{{Obsolete_Header}}

+{{DefaultAPISidebar("Battery API")}}{{Obsolete_Header}} -

L'API Battery Status, souvent mentionnée sous le nom Battery API, fournit des informations sur le niveau de charge du système et permet d'envoyer des événements pour prévenir d'un changement du niveau de charge de la batterie. Cela peut être utilisé pour ajuster la consommation d'une application et la réduire pour réduire l'utilisation de la batterie lorsque son niveau de charge est bas ou encore de sauvegarder les données quand la batterie est bientôt vide.

+L'**API _Battery Status_**, souvent mentionnée sous le nom **Battery API**, fournit des informations sur le niveau de charge du système et permet d'envoyer des événements pour prévenir d'un changement du niveau de charge de la batterie. Cela peut être utilisé pour ajuster la consommation d'une application et la réduire pour réduire l'utilisation de la batterie lorsque son niveau de charge est bas ou encore de sauvegarder les données quand la batterie est bientôt vide. -

L'API Battery Status API étend l'interface {{domxref("window.navigator")}} avec la propriété {{domxref("window.navigator.battery")}}, méthode qui renvoie une promesse, résolue par l'objet {{domxref("BatteryManager")}}. Cet objet permet d'ajouter des nouveaux événements pour superviser l'état de la batterie.

+L'API Battery Status API étend l'interface {{domxref("window.navigator")}} avec la propriété {{domxref("window.navigator.battery")}}, méthode qui renvoie une promesse, résolue par l'objet {{domxref("BatteryManager")}}. Cet objet permet d'ajouter des nouveaux événements pour superviser l'état de la batterie. -

Exemples

+## Exemples -

Dans cet exemple, on cherche à surveiller les changements, à la fois du statut de la charge (est-ce que l'équipement est branché et se recharge ou est ce que l'équipement est alimenté par sa batterie) et des changements du niveau de charge dans le temps.

+Dans cet exemple, on cherche à surveiller les changements, à la fois du statut de la charge (est-ce que l'équipement est branché et se recharge ou est ce que l'équipement est alimenté par sa batterie) et des changements du niveau de charge dans le temps. -

Cela se fait en surveillant les événements : 

+Cela se fait en surveillant les événements : -
    -
  • {{event("chargingchange")}}: changement de l'êtat de charge
    • -
  • {{event("levelchange")}}: changement du niveau de batterie
    • -
  • {{event("chargingtimechange")}}: évolution de l'estimation du temps de recharge
    • -
  • {{event("dischargingtimechange")}}: évolution de l'estimation d'autonomie sur batterie
    • -
+- {{event("chargingchange")}}: changement de l'êtat de charge +- {{event("levelchange")}}: changement du niveau de batterie +- {{event("chargingtimechange")}}: évolution de l'estimation du temps de recharge +- {{event("dischargingtimechange")}}: évolution de l'estimation d'autonomie sur batterie -
navigator.getBattery().then(function(battery) {
+```js
+navigator.getBattery().then(function(battery) {
   function updateAllBatteryInfo(){
     updateChargeInfo();
     updateLevelInfo();
@@ -69,36 +68,21 @@ translation_of: Web/API/Battery_Status_API
   }
 
 });
-
- -

Voir aussi l'exemple de la spécification.

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName("Battery API")}}{{Spec2("Battery API")}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.BatteryManager")}}

- -

Voir aussi

- - +``` + +Voir aussi [l'exemple de la spécification](http://www.w3.org/TR/battery-status/#examples). + +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------ | -------------------------------- | -------------------- | +| {{SpecName("Battery API")}} | {{Spec2("Battery API")}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("api.BatteryManager")}} + +## Voir aussi + +- [Récupérer les informations relatives à la batterie - article et démonstration](/en-US/Apps/Build/gather_and_modify_data/retrieving_battery_status_information) +- [Billet de blog sur Hacks - Utiliser l'API Battery (en anglais)](http://hacks.mozilla.org/2012/02/using-the-battery-api-part-of-webapi/) diff --git a/files/fr/web/api/batterymanager/charging/index.md b/files/fr/web/api/batterymanager/charging/index.md index 7eaad0d9f8..e1521666a4 100644 --- a/files/fr/web/api/batterymanager/charging/index.md +++ b/files/fr/web/api/batterymanager/charging/index.md @@ -3,61 +3,48 @@ title: BatteryManager.charging slug: Web/API/BatteryManager/charging translation_of: Web/API/BatteryManager/charging --- -
{{obsolete_header}}
+{{obsolete_header}}{{APIRef("Battery API")}} -
{{APIRef("Battery API")}}
+Une valeur booléenne indiquant si la batterie de l'équipement est en train d'être chargée. -

Une valeur booléenne indiquant si la batterie de l'équipement est en train d'être chargée.

+## Syntax -

Syntax

+ var charging = battery.charging -
var charging = battery.charging
+`charging` indique si `battery`, qui est un objet du type {{domxref("BatteryManager")}}, est en charge; si la batterie est en charge, la variable a la valeur `true`. Sinon, dans le cas de la décharge, la variable a la valeurvaux `false`. -

charging indique si battery, qui est un objet du type {{domxref("BatteryManager")}}, est en charge; si la batterie est en charge, la variable a la valeur true. Sinon, dans le cas de la décharge, la variable a la valeurvaux false.

+## Exemple -

Exemple

+### Code HTML -

Code HTML

+```html +
(êtat de charge inconnu)
+``` -
<div id="charging">(&ecirc;tat de charge inconnu)</div>
+### Code JavaScript -

Code JavaScript

- -
navigator.getBattery().then(function(battery) {
+```js
+navigator.getBattery().then(function(battery) {
 
     var charging = battery.charging;
 
     document.querySelector('#charging').textContent = charging ;
-});
- -

{{ EmbedLiveSample('Example', '100%', 30) }}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("Battery API")}}{{Spec2("Battery API")}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.BatteryManager.charging")}}

- -

Voir aussi

- -
    -
  • {{domxref("BatteryManager")}}
    • -
  • {{domxref("Navigator.getBattery")}}
    • -
+}); +``` + +{{ EmbedLiveSample('Example', '100%', 30) }} + +## Spécifications + +| Specification | Status | Comment | +| ------------------------------------ | -------------------------------- | ------------------- | +| {{SpecName("Battery API")}} | {{Spec2("Battery API")}} | Définition initiale | + +## Compatibilité des navigateurs + +{{Compat("api.BatteryManager.charging")}} + +## Voir aussi + +- {{domxref("BatteryManager")}} +- {{domxref("Navigator.getBattery")}} diff --git a/files/fr/web/api/batterymanager/chargingtime/index.md b/files/fr/web/api/batterymanager/chargingtime/index.md index 7456fdb8fd..d469bded62 100644 --- a/files/fr/web/api/batterymanager/chargingtime/index.md +++ b/files/fr/web/api/batterymanager/chargingtime/index.md @@ -3,67 +3,52 @@ title: BatteryManager.chargingTime slug: Web/API/BatteryManager/chargingTime translation_of: Web/API/BatteryManager/chargingTime --- -
{{obsolete_header}}
+{{obsolete_header}} -

{{APIRef("Battery API")}}

+{{APIRef("Battery API")}} -

Indique le temps, en secondes, qu'il reste jusqu'à que la batterie soit rechargée.

+Indique le temps, en secondes, qu'il reste jusqu'à que la batterie soit rechargée. -
-

Note : Même si le temps retourné devrait être précis à la seconde, les navigateurs arrondissent cette valeur (typiquement à 15 minutes près) afin de limiter l'identification et le suivi des utilisateurs.

-
+> **Note :** Même si le temps retourné devrait être précis à la seconde, les navigateurs arrondissent cette valeur (typiquement à 15 minutes près) afin de limiter l'identification et le suivi des utilisateurs. -

Syntaxe

+## Syntaxe -
var time = battery.chargingTime
+ var time = battery.chargingTime -

time est le temps restant en secondes jusqu'à que battery, qui est un objet de type {{domxref("BatteryManager")}}, soit rechargée, ou vaut 0 si la batterie est déjà rechargée. Si la batterie est en décharge, la variable vaut Infinity.

+`time` est le temps restant en secondes jusqu'à que `battery`, qui est un objet de type {{domxref("BatteryManager")}}, soit rechargée, ou vaut 0 si la batterie est déjà rechargée. Si la batterie est en décharge, la variable vaut [`Infinity`](/en-US/docs/JavaScript/Reference/Global_Objects/Infinity). -

Exemple

+## Exemple -

Code HTML

+### Code HTML -
<div id="chargingTime">(temps de charge inconnu)</div>
-
+```html +
(temps de charge inconnu)
+``` -

Code JavaScript

+### Code JavaScript -
navigator.getBattery().then(function(battery) {
+```js
+navigator.getBattery().then(function(battery) {
 
    var time = battery.chargingTime;
 
    document.querySelector('#chargingTime').textContent = battery.chargingTime;
 });
-
- -

{{ EmbedLiveSample('Example', '100%', 30) }}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("Battery API")}}{{Spec2("Battery API")}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.BatteryManager.chargingTime")}}

- -

Voir aussi

- -
    -
  • {{domxref("BatteryManager")}}
    • -
  • {{domxref("Navigator.getBattery")}}
    • -
+``` + +{{ EmbedLiveSample('Example', '100%', 30) }} + +## Spécifications + +| Specification | Status | Comment | +| ------------------------------------ | -------------------------------- | ------------------- | +| {{SpecName("Battery API")}} | {{Spec2("Battery API")}} | Définition initiale | + +## Compatibilité des navigateurs + +{{Compat("api.BatteryManager.chargingTime")}} + +## Voir aussi + +- {{domxref("BatteryManager")}} +- {{domxref("Navigator.getBattery")}} diff --git a/files/fr/web/api/batterymanager/dischargingtime/index.md b/files/fr/web/api/batterymanager/dischargingtime/index.md index 8ad8ea8602..4cfac1fdde 100644 --- a/files/fr/web/api/batterymanager/dischargingtime/index.md +++ b/files/fr/web/api/batterymanager/dischargingtime/index.md @@ -3,67 +3,50 @@ title: BatteryManager.dischargingTime slug: Web/API/BatteryManager/dischargingTime translation_of: Web/API/BatteryManager/dischargingTime --- -
{{obsolete_header}}
+{{obsolete_header}}{{APIRef("Battery API")}} -
{{APIRef("Battery API")}}
+Indique le temps, en secondes, qu'il reste jusqu'à que la batterie soit déchargée. -

Indique le temps, en secondes, qu'il reste jusqu'à que la batterie soit déchargée.

+> **Note :** Même si le temps retourné devrait être précis à la seconde, les navigateurs arrondissent cette valeur (typiquement à 15 minutes près) afin de limiter l'identification et le suivi des utilisateurs. -
-

Note : Même si le temps retourné devrait être précis à la seconde, les navigateurs arrondissent cette valeur (typiquement à 15 minutes près) afin de limiter l'identification et le suivi des utilisateurs.

-
+## Syntax -

Syntax

+ var time = battery.dischargingTime -
var time = battery.dischargingTime
+`time` est le temps restant en secondes jusqu'à que `battery`, qui est un objet de type {{domxref("BatteryManager")}}, soit complètement déchargée. La variable vaut [`Infinity`](/en-US/docs/JavaScript/Reference/Global_Objects/Infinity) si la batterie est en train d'être chargée ou si le système ne parvient pas à calculer un temps restant. -

time est le temps restant en secondes jusqu'à que battery, qui est un objet de type {{domxref("BatteryManager")}}, soit complètement déchargée. La variable vaut Infinity si la batterie est en train d'être chargée ou si le système ne parvient pas à calculer un temps restant.

+## Exemple -

Exemple

+### Code HTML -

Code HTML

+```html +
(temps de décharge inconnu)
+``` -
<div id="dischargingTime">(temps de d&eacute;charge inconnu)</div>
-
+### Code JavaScript -

Code JavaScript

- -
navigator.getBattery().then(function(battery) {
+```js
+navigator.getBattery().then(function(battery) {
 
     var time = battery.dischargingTime;
 
     document.querySelector('#dischargingTime').textContent = battery.dischargingTime;
 });
-
- -

{{ EmbedLiveSample('Example', '100%', 30) }}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("Battery API")}}{{Spec2("Battery API")}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.BatteryManager.dischargingTime")}}

- -

Voir aussi

- -
    -
  • {{domxref("BatteryManager")}}
    • -
  • {{domxref("Navigator.getBattery")}}
    • -
+``` + +{{ EmbedLiveSample('Example', '100%', 30) }} + +## Spécifications + +| Specification | Status | Comment | +| ------------------------------------ | -------------------------------- | ------------------- | +| {{SpecName("Battery API")}} | {{Spec2("Battery API")}} | Définition initiale | + +## Compatibilité des navigateurs + +{{Compat("api.BatteryManager.dischargingTime")}} + +## Voir aussi + +- {{domxref("BatteryManager")}} +- {{domxref("Navigator.getBattery")}} diff --git a/files/fr/web/api/batterymanager/index.md b/files/fr/web/api/batterymanager/index.md index 644c04acab..eec64cfc48 100644 --- a/files/fr/web/api/batterymanager/index.md +++ b/files/fr/web/api/batterymanager/index.md @@ -8,72 +8,53 @@ tags: - niveau translation_of: Web/API/BatteryManager --- -

{{ApiRef()}}

- -

Sommaire

- -

L'interface BatteryManager fournit des moyens pour obtenir des informations sur le niveau de charge de la batterie du système.

- -

La propriété {{domxref ("window.navigator.battery", "navigator.battery")}} retourne une instance de l'interface BatteryManager que vous pouvez utiliser pour interagir avec l'API d'état de la batterie.

- -

Propriétés

- -
-
{{domxref("BatteryManager.charging")}} {{ReadOnlyInline}}
-
Un Boolean indiquant si oui ou non la batterie est actuellement en cours de charge.
-
{{domxref("BatteryManager.chargingTime")}} {{ReadOnlyInline}}
-
Un nombre qui représente le temps restant en secondes jusqu'à ce que la batterie soit complètement chargée, ou 0 si la batterie est complètement chargée.
-
{{domxref("BatteryManager.dischargingTime")}} {{ReadOnlyInline}}
-
Un nombre qui représente le temps restant en secondes jusqu'à ce que la batterie soit complètement déchargée et le système suspendu.
-
{{domxref("BatteryManager.level")}} {{ReadOnlyInline}}
-
Un nombre qui représente le niveau de charge de la batterie du système adapté à une valeur comprise entre 0.0 et 1.0.
-
- -

Gestionnaires d'Evenements

- -
-
{{domxref("BatteryManager.onchargingchange")}}
-
Un gestionnaire pour le changement de la présence ou non du chargeur.
-
{{domxref("BatteryManager.onchargingtimechange")}}
-
Un gestionnaire pour la mise à jour du temps de charge
-
{{domxref("BatteryManager.ondischargingtimechange")}}
-
Un gestionnaire pour la mise à jour du temps de décharge
-
{{domxref("BatteryManager.onlevelchange")}}
-
Un gestionnaire pour la mise à jour pour les changement du niveau de batterie
-
- -

Méthodes

- -

Hérite de {{domxref("EventTarget")}}:

- -

{{page("/en-US/docs/Web/API/EventTarget","Methods")}}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Battery API')}}{{Spec2('Battery API')}}Spécification initale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.BatteryManager")}}

- -

Voir aussi

- - +{{ApiRef()}} + +## Sommaire + +L'interface `BatteryManager `fournit des moyens pour obtenir des informations sur le niveau de charge de la batterie du système. + +La propriété {{domxref ("window.navigator.battery", "navigator.battery")}} retourne une instance de l'interface `BatteryManager `que vous pouvez utiliser pour interagir avec l'API d'état de la batterie. + +## Propriétés + +- {{domxref("BatteryManager.charging")}} {{ReadOnlyInline}} + - : Un Boolean indiquant si oui ou non la batterie est actuellement en cours de charge. +- {{domxref("BatteryManager.chargingTime")}} {{ReadOnlyInline}} + - : Un nombre qui représente le temps restant en secondes jusqu'à ce que la batterie soit complètement chargée, ou 0 si la batterie est complètement chargée. +- {{domxref("BatteryManager.dischargingTime")}} {{ReadOnlyInline}} + - : Un nombre qui représente le temps restant en secondes jusqu'à ce que la batterie soit complètement déchargée et le système suspendu. +- {{domxref("BatteryManager.level")}} {{ReadOnlyInline}} + - : Un nombre qui représente le niveau de charge de la batterie du système adapté à une valeur comprise entre 0.0 et 1.0. + +### Gestionnaires d'Evenements + +- {{domxref("BatteryManager.onchargingchange")}} + - : Un gestionnaire pour le changement de la présence ou non du chargeur. +- {{domxref("BatteryManager.onchargingtimechange")}} + - : Un gestionnaire pour la mise à jour du temps de charge +- {{domxref("BatteryManager.ondischargingtimechange")}} + - : Un gestionnaire pour la mise à jour du temps de décharge +- {{domxref("BatteryManager.onlevelchange")}} + - : Un gestionnaire pour la mise à jour pour les changement du niveau de batterie + +## Méthodes + +Hérite de {{domxref("EventTarget")}}: + +{{page("/en-US/docs/Web/API/EventTarget","Methods")}} + +## Spécifications + +| Spécification | Statut | Commentaire | +| ------------------------------------ | -------------------------------- | ---------------------- | +| {{SpecName('Battery API')}} | {{Spec2('Battery API')}} | Spécification initale. | + +## Compatibilité des navigateurs + +{{Compat("api.BatteryManager")}} + +## Voir aussi + +- {{ domxref("navigator.getBattery","navigator.getBattery") }} +- La [Battery Status API](/en-US/docs/WebAPI/Battery_Status) diff --git a/files/fr/web/api/batterymanager/level/index.md b/files/fr/web/api/batterymanager/level/index.md index 30fb39da87..dbaa9d3eca 100644 --- a/files/fr/web/api/batterymanager/level/index.md +++ b/files/fr/web/api/batterymanager/level/index.md @@ -3,65 +3,50 @@ title: BatteryManager.level slug: Web/API/BatteryManager/level translation_of: Web/API/BatteryManager/level --- -
{{obsolete_header}}
+{{obsolete_header}}{{APIRef("Battery API")}} -
{{APIRef("Battery API")}}
+Indique le niveau de charge de la batterie en tant que valeur comprise entre `0.0` (déchargée) et `1.0` (rechargée). -

Indique le niveau de charge de la batterie en tant que valeur comprise entre 0.0 (déchargée) et 1.0 (rechargée).

+## Syntaxe -

Syntaxe

+ var level = battery.level -
var level = battery.level
+`level` est un nombre représentant le niveau de charge de la batterie en tant que valeur comprise entre `0.0` et `1.0`. Une veleur de `0.0` signifie que `battery`, qui est un objet de type {{domxref("BatteryManager")}}, est vide, et que le système est sur le point d'être désactivé. Une valeur de `1.0` signifie que la batterie est pleine. -

level est un nombre représentant le niveau de charge de la batterie en tant que valeur comprise entre 0.0 et 1.0. Une veleur de 0.0 signifie que battery, qui est un objet de type {{domxref("BatteryManager")}}, est vide, et que le système est sur le point d'être désactivé. Une valeur de 1.0 signifie que la batterie est pleine.

+La valeur `1.0` est aussi retournée si le système n'est pas capable de déterminer son niveau de charge ou si le système n'est pas alimenté par une batterie. -

La valeur 1.0 est aussi retournée si le système n'est pas capable de déterminer son niveau de charge ou si le système n'est pas alimenté par une batterie.

+## Exemple -

Exemple

+### Code HTML -

Code HTML

+```html +
(niveau de batterie inconnu)
+``` -
<div id="level">(niveau de batterie inconnu)</div>
-
+### Code JavaScript -

Code JavaScript

- -
navigator.getBattery().then(function(battery) {
+```js
+navigator.getBattery().then(function(battery) {
 
     var level = battery.level;
 
     document.querySelector('#level').textContent = level;
 });
-
- -

{{ EmbedLiveSample('Example', '100%', 30, '', 'Web/API/BatteryManager/level') }}

- -

Spécifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("Battery API")}}{{Spec2("Battery API")}}Définition initiale
- -

Compatibilité des navigateurs

- -

{{Compat("api.BatteryManager.level")}}

- -

Voir aussi

- -
    -
  • {{domxref("BatteryManager")}}
    • -
  • {{domxref("Navigator.getBattery")}}
    • -
+``` + +{{ EmbedLiveSample('Example', '100%', 30, '', 'Web/API/BatteryManager/level') }} + +## Spécifications + +| Specification | Status | Comment | +| ------------------------------------ | -------------------------------- | ------------------- | +| {{SpecName("Battery API")}} | {{Spec2("Battery API")}} | Définition initiale | + +## Compatibilité des navigateurs + +{{Compat("api.BatteryManager.level")}} + +## Voir aussi + +- {{domxref("BatteryManager")}} +- {{domxref("Navigator.getBattery")}} diff --git a/files/fr/web/api/beforeunloadevent/index.md b/files/fr/web/api/beforeunloadevent/index.md index 4a74d1689d..36cdf6e011 100644 --- a/files/fr/web/api/beforeunloadevent/index.md +++ b/files/fr/web/api/beforeunloadevent/index.md @@ -6,88 +6,75 @@ tags: - Reference translation_of: Web/API/BeforeUnloadEvent --- -

{{APIRef}}

+{{APIRef}} -

L'évènement beforeunload est déclenché quand la fenêtre, le document et ses ressources sont sur le point d'être déchargées.

+L'évènement **`beforeunload`** est déclenché quand la fenêtre, le document et ses ressources sont sur le point d'être déchargées. -

Si une chaine non vide est assignée à la propriété returnValue de l'évènement, une boite de confirmation apparait pour demander à l'utilisateur de valider le changement d'adresse (voir les exemples ci-dessous). Si aucune valeur n'est fournise, l'évènement est traité silencieusement. Certaines implantations ne demandent confirmation que si le cadre ou tout cadre embarqué reçoit une action utilisateur. Voir {{anch("Browser compatibility")}} pour plus d'informations.

+Si une chaine non vide est assignée à la propriété `returnValue` de l'évènement, une boite de confirmation apparait pour demander à l'utilisateur de valider le changement d'adresse (voir les exemples ci-dessous). Si aucune valeur n'est fournise, l'évènement est traité silencieusement. Certaines implantations ne demandent confirmation que si le cadre ou tout cadre embarqué reçoit une action utilisateur. Voir {{anch("Browser compatibility")}} pour plus d'informations. -

{{InheritanceDiagram(600, 120)}}

+{{InheritanceDiagram(600, 120)}} - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + +
BouillonneNo
AnnulableYes
CiblesdefaultView
Interface{{domxref("Event")}}
BouillonneNo
AnnulableYes
CiblesdefaultView
Interface{{domxref("Event")}}
-

Exemples

+## Exemples -
window.addEventListener("beforeunload", function(event) {
+```js
+window.addEventListener("beforeunload", function(event) {
   event.returnValue = "\o/";
 });
 
 // est équivalent à
 window.addEventListener("beforeunload", function(event) {
   event.preventDefault();
-});
+}); +``` -

Les navigateurs basés sur WebKit ne suivent pas la spécification concernant la demande de confirmation. Un exemple similaire fonctionnant sur presque tous les navigateurs serait plutôt comme :

+Les navigateurs basés sur WebKit ne suivent pas la spécification concernant la demande de confirmation. Un exemple similaire fonctionnant sur presque tous les navigateurs serait plutôt comme : -
window.addEventListener("beforeunload", function (e) {
+```js
+window.addEventListener("beforeunload", function (e) {
   var confirmationMessage = "\o/";
 
   (e || window.event).returnValue = confirmationMessage;     // Gecko + IE
   return confirmationMessage;                                /* Safari, Chrome, and other
                                                               * WebKit-derived browsers */
-});
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaire
{{SpecName("HTML WHATWG", "browsing-the-web.html#the-beforeunloadevent-interface", "BeforeUnloadEvent")}}{{Spec2("HTML WHATWG")}}Définition initiale
+}); +``` -

Compatibilité des navigateurs

+## Spécifications -
+| Spécification | État | Commentaire | +| -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | +| {{SpecName("HTML WHATWG", "browsing-the-web.html#the-beforeunloadevent-interface", "BeforeUnloadEvent")}} | {{Spec2("HTML WHATWG")}} | Définition initiale | +## Compatibilité des navigateurs -

{{Compat("api.BeforeUnloadEvent")}}

-
+{{Compat("api.BeforeUnloadEvent")}} -

Voir aussi

+## Voir aussi - +- {{Event("DOMContentLoaded")}} +- {{Event("readystatechange")}} +- {{Event("load")}} +- {{Event("beforeunload")}} +- {{Event("unload")}} +- [Unloading Documents — Prompt to unload a document](http://www.whatwg.org/specs/web-apps/current-work/#prompt-to-unload-a-document) diff --git a/files/fr/web/api/biquadfilternode/frequency/index.md b/files/fr/web/api/biquadfilternode/frequency/index.md index 508cf54cf8..550a287720 100644 --- a/files/fr/web/api/biquadfilternode/frequency/index.md +++ b/files/fr/web/api/biquadfilternode/frequency/index.md @@ -3,33 +3,32 @@ title: BiquadFilterNode.frequency slug: Web/API/BiquadFilterNode/frequency translation_of: Web/API/BiquadFilterNode/frequency --- -

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

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

La propriété frequency de l'interface {{ domxref("BiquadFilterNode") }} est un  {{domxref("AudioParam")}} de type k-rate : un nombre flottant à double précision représentant une fréquence de l'algorithme de filtrage courant, exprimée en hertz (Hz).

+La propriété `frequency` de l'interface {{ domxref("BiquadFilterNode") }} est un  {{domxref("AudioParam")}} de type [k-rate](/fr/docs/DOM/AudioParam#k-rate) : un nombre flottant à double précision représentant une fréquence de l'algorithme de filtrage courant, exprimée en hertz (Hz). -

Sa valeur par défaut est de 350 avec une portée nominale de 10 à la fréquence de Nyquist, qui est la moitié de la fréquence d'échantillonnage.

-
+Sa valeur par défaut est de `350` avec une portée nominale de `10` à la [fréquence de Nyquist](http://en.wikipedia.org/wiki/Nyquist_frequency), qui est la moitié de la fréquence d'échantillonnage. -

Syntax

+## Syntax -
var contexteAudio = new AudioContext();
+```js
+var contexteAudio = new AudioContext();
 var filtreBiquad = contexteAudio.createBiquadFilter();
-filtreBiquad.frequency.value = 3000;
+filtreBiquad.frequency.value = 3000; +``` -
-

Note : Bien que le AudioParam renvoyé soit en lecture seule, la valeur qu'il représente ne l'est pas.

-
+> **Note :** Bien que le `AudioParam` renvoyé soit en lecture seule, la valeur qu'il représente ne l'est pas. -

Valeur

+### Valeur -

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

+Un {{domxref("AudioParam")}}. -

Exemple

+## Exemple -

L'exemple suivant montre l'utilisation basique d'un AudioContext pour créer un filtre Biquad. Pour un exemple complet, consultez notre démo voice-change-o-matic (et son code source).

+L'exemple suivant montre l'utilisation basique d'un AudioContext pour créer un filtre Biquad. Pour un exemple complet, consultez notre démo [voice-change-o-matic](http://mdn.github.io/voice-change-o-matic/) (et son [code source](https://github.com/mdn/voice-change-o-matic)). -
var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
+```js
+var contexteAudio = new (window.AudioContext || window.webkitAudioContext)();
 
 // mise en place des différents noeuds audio que nous utiliserons par la suite
 var analyseur = contexteAudio.createAnalyser();
@@ -53,31 +52,18 @@ noeudGain.connect(contexteAudio.destination);
 filtreBiquad.type = "lowshelf";
 filtreBiquad.frequency.value = 1000;
 filtreBiquad.gain.value = 25;
-
- -

Spécification

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Web Audio API', '#widl-BiquadFilterNode-frequency', 'frequency')}}{{Spec2('Web Audio API')}} 
- -

Compatibilité navigateurs

- -
{{Compat("api.BiquadFilterNode.frequency")}}
- -

Voir aussi

- - +``` + +## Spécification + +| Specification | Status | Comment | +| -------------------------------------------------------------------------------------------------------- | ------------------------------------ | ------- | +| {{SpecName('Web Audio API', '#widl-BiquadFilterNode-frequency', 'frequency')}} | {{Spec2('Web Audio API')}} |   | + +## Compatibilité navigateurs + +{{Compat("api.BiquadFilterNode.frequency")}} + +## Voir aussi + +- [Utiliser la Web Audio API](/fr/docs/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/biquadfilternode/index.md b/files/fr/web/api/biquadfilternode/index.md index f5215ba3a6..33a45b9a1f 100644 --- a/files/fr/web/api/biquadfilternode/index.md +++ b/files/fr/web/api/biquadfilternode/index.md @@ -8,166 +8,219 @@ tags: - Web Audio API translation_of: Web/API/BiquadFilterNode --- -

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

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

L'interface BiquadFilterNode représente un simple filtre de bas niveau, créé avec la méthode {{ domxref("AudioContext.createBiquadFilter()") }}. Il s'agit d'un {{domxref("AudioNode")}} qui peut représenter différents types de filtres, dispositifs de réglage de tonalité ou égaliseurs graphiques. Un BiquadFilterNode a toujours exactement une entrée et une sortie.

+L'interface **`BiquadFilterNode`** représente un simple filtre de bas niveau, créé avec la méthode {{ domxref("AudioContext.createBiquadFilter()") }}. Il s'agit d'un {{domxref("AudioNode")}} qui peut représenter différents types de filtres, dispositifs de réglage de tonalité ou égaliseurs graphiques. Un `BiquadFilterNode` a toujours exactement une entrée et une sortie. - - - - - - - - - - - - - - - - - - - - - - -
Nombre d'entrées1
Nombre de sorties1
Mode de comptage des canaux"max"
Nombre de canaux2 (pas utilisés dans le mode de comptage par défaut)
Interprétation du canal"speakers"
- -

Constructeur

- -
-
{{domxref("BiquadFilterNode.BiquadFilterNode", "BiquadFilterNode()")}}
-
Crée une nouvelle instance d'un objet  BiquadFilterNode.
-
- -

Propriétés

- -

Hérite des propriétés de son parent, {{domxref("AudioNode")}}.

- -
-
{{domxref("BiquadFilterNode.frequency")}}
-
Est un {{domxref ("AudioParam")}} de type a-rate : un nombre flottant à double précision représentant une fréquence de l'algorithme de filtrage, exprimée en Hertz.
-
{{domxref("BiquadFilterNode.detune")}}
-
Est un {{domxref ("AudioParam")}} de type a-rate : un nombre flottant à double précision représentant le désaccordage de la fréquence exprimé en cents.
-
{{domxref("BiquadFilterNode.Q")}}
-
Est un {{domxref ("AudioParam")}} de type a-rate : un nombre flottant à double précision représentant un facteur Q, ou facteur de qualité.
-
{{domxref("BiquadFilterNode.gain")}} {{readonlyInline}}
-
Est un {{domxref ("AudioParam")}} de type a-rate : un nombre flottant à double précision représentant le gain utilisé dans l'algorithme de filtrage.
-
{{domxref("BiquadFilterNode.type")}}
-

Une chaîne définissant le type d'algorithme de filtrage que le noeud implémente: La signification des paramètres diffère en fonction du type du filtre (sauf detune qui a la même signification dans tous les cas, et n'est donc pas listé ci-dessous)

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + -
typeDescriptionfrequencyQgain
lowpassFiltre standard passe-bas résonnant de second ordre avec atténuation de 12dB/octave. Les fréquences inférieures au seuil sont inchangées; les fréquences supérieures sont atténuées.La fréquence de coupureIndique comment la fréquence a culminé autour de la coupure. Plus la valeur est élevée, plus le point culminant est hautNon utilisé
highpassFiltre standard passe-haut résonnant de second ordre avec atténuation de 12dB/octave. Les fréquences inférieures à la fréquence de coupure sont atténuées, les fréquences supérieures sont inchangées.La fréquence de coupureIndique comment la fréquence a culminé autour de la coupure. Plus la valeur est élevée, plus le point culminant est hautNon utilisé
bandpassFiltre standard passe-bande de second ordre. Les fréquences en dehors de la plage donnée de fréquences sont atténués, et les fréquences à l'intérieur sont inchangées.Le centre de la gamme de fréquences.Contrôle la largeur de la bande de fréquences. Plus Q est grande, plus la bande de fréquences est grande.Non utilisé
lowshelfFiltre standard de dégradé de basses fréquences de second ordre. Les fréquences inférieures à la fréquence obtiennent une impulsion ou une atténuation; Les fréquences supérieurs sont inchangées.La limite supérieure des fréquences obtenant une impulsion ou une atténuationNon utiliséL'impulsion, en dB, à appliquer; s'il est négatif, ce sera une atténuation.
highshelfFiltre standard de dégradé de hautes fréquences de second ordre. Les fréquences supérieures à la fréquence obtiennent une impulsion, ou une atténuation; Les fréquences inférieurs restent inchangéesLa limite inférieure des fréquences obtenant une impulsion ou une atténuationNon utiliséL'impulsion, en dB, à appliquer; s'il est négatif, ce sera une atténuation.
peakingLes fréquences à l'intérieur de la gamme obtiennent une impulsion ou une atténuation; les fréquences en dehors de celle-ci sont inchangées.Le milieu de la gamme de fréquences obtiennent une impulsion, ou un attenuationContrôle la largeur de la bande de fréquences. Plus grande est Q, plus grande est la bande de fréquences.L'impulsion, en dB, à appliquer; s'il est négatif, ce sera une atténuation.
notchFiltre coupe standard, appelé aussi coupe-bande. C'est l'inverse d'un filtre passe-bande: les fréquences en dehors de la gamme de fréquences donnée sont inchangées; les fréquences à l'intérieur de celle-ci sont atténuées.Le centre de la gamme de fréquences.Contrôle la largeur de la bande de fréquences. Plus grande est Q, plus grande est la bande de fréquences.Non utilisé
allpassFiltre standard passe-tout du second ordre. Laisse toutes les fréquences inchangées, mais modifie le rapport de phase entre les différentes fréquences.La fréquence du retard de groupe maximal, qui est la fréquence à laquelle le centre de la transition de phase se produit.Contrôle finement la transition à la fréquence moyenne. Plus ce paramètre est grand, plus la transition est fine et large.Non utilisé
Nombre d'entrées1
Nombre de sorties1
Mode de comptage des canaux"max"
Nombre de canaux2 (pas utilisés dans le mode de comptage par défaut)
Interprétation du canal"speakers"
-
-
- -

Méthodes

- -

Hérite des propriétés de son parent, {{domxref("AudioNode")}}.

- -
-
{{domxref("BiquadFilterNode.getFrequencyResponse()")}}
-
A partir des valeurs courantes des paramètres de filtre, calcule la fréquence de réponse pour des fréquences spécifiées dans le tableau de fréquences frequencyHz passé en paramètre.
-
- -

Exemples

- -

{{page("/fr/docs/Web/API/AudioContext.createBiquadFilter","Example")}}

- -

Spécification

- - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Web Audio API', '#BiquadFilterNode-section', 'BiquadFilterNode')}}{{Spec2('Web Audio API')}}
-

Compatibilité navigateurs

- -

{{Compat("api.BiquadFilterNode")}}

- -

Voir aussi

- - +## Constructeur + +- {{domxref("BiquadFilterNode.BiquadFilterNode", "BiquadFilterNode()")}} + - : Crée une nouvelle instance d'un objet  `BiquadFilterNode`. + +## Propriétés + +_Hérite des propriétés de son parent,_ _{{domxref("AudioNode")}}_. + +- {{domxref("BiquadFilterNode.frequency")}} + - : Est un {{domxref ("AudioParam")}} de type [a-rate](/fr/docs/Web/API/AudioParam#a-rate) : un nombre flottant à double précision représentant une fréquence de l'algorithme de filtrage, exprimée en Hertz. +- {{domxref("BiquadFilterNode.detune")}} + - : Est un {{domxref ("AudioParam")}} de type [a-rate](/fr/docs/Web/API/AudioParam#a-rate) : un nombre flottant à double précision représentant le désaccordage de la fréquence exprimé en [cents](https://fr.wikipedia.org/wiki/Cent_et_savart). +- {{domxref("BiquadFilterNode.Q")}} + - : Est un {{domxref ("AudioParam")}} de type [a-rate](/fr/docs/Web/API/AudioParam#a-rate) : un nombre flottant à double précision représentant un [facteur](http://en.wikipedia.org/wiki/Q_factor)[ Q](http://en.wikipedia.org/wiki/Q_factor), ou facteur de qualité. +- {{domxref("BiquadFilterNode.gain")}} {{readonlyInline}} + - : Est un {{domxref ("AudioParam")}} de type [a-rate](/fr/docs/Web/API/AudioParam#a-rate) : un nombre flottant à double précision représentant le [gain](http://en.wikipedia.org/wiki/Gain)[ ](http://en.wikipedia.org/wiki/Gain)utilisé dans l'algorithme de filtrage. +- {{domxref("BiquadFilterNode.type")}} + + - : Une chaîne définissant le type d'algorithme de filtrage que le noeud implémente: La signification des paramètres diffère en fonction du type du filtre (sauf detune qui a la même signification dans tous les cas, et n'est donc pas listé ci-dessous) + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
typeDescriptionfrequencyQgain
lowpass + Filtre standard passe-bas résonnant de second ordre avec atténuation de + 12dB/octave. Les fréquences inférieures au seuil sont inchangées; les + fréquences supérieures sont atténuées. + La fréquence de coupure + Indique comment la fréquence a culminé autour de la coupure. Plus la + valeur est élevée, plus le point culminant est haut + Non utilisé
highpass + Filtre standard passe-haut résonnant de second ordre avec atténuation de + 12dB/octave. Les fréquences inférieures à la fréquence de coupure sont + atténuées, les fréquences supérieures sont inchangées. + La fréquence de coupure + Indique comment la fréquence a culminé autour de la coupure. Plus la + valeur est élevée, plus le point culminant est haut + Non utilisé
bandpass + Filtre standard passe-bande de second ordre. Les fréquences en dehors de + la plage donnée de fréquences sont atténués, et les fréquences à + l'intérieur sont inchangées. + Le centre de la gamme de fréquences. + Contrôle la largeur de la bande de fréquences. Plus Q est grande, plus + la bande de fréquences est grande. + Non utilisé
lowshelf + Filtre standard de dégradé de basses fréquences de second ordre. Les + fréquences inférieures à la fréquence obtiennent une impulsion ou une + atténuation; Les fréquences supérieurs sont inchangées. + + La limite supérieure des fréquences obtenant une impulsion ou une + atténuation + Non utilisé + L'impulsion, en dB, à appliquer; s'il est négatif, ce sera une + atténuation. +
highshelf + Filtre standard de dégradé de hautes fréquences de second ordre. Les + fréquences supérieures à la fréquence obtiennent une impulsion, ou une + atténuation; Les fréquences inférieurs restent inchangées + + La limite inférieure des fréquences obtenant une impulsion ou une + atténuation + Non utilisé + L'impulsion, en dB, à appliquer; s'il est négatif, ce sera une + atténuation. +
peaking + Les fréquences à l'intérieur de la gamme obtiennent une impulsion ou une + atténuation; les fréquences en dehors de celle-ci sont inchangées. + + Le milieu de la gamme de fréquences obtiennent une impulsion, ou un + attenuation + + Contrôle la largeur de la bande de fréquences. Plus grande est Q, plus + grande est la bande de fréquences. + + L'impulsion, en dB, à appliquer; s'il est négatif, ce sera une + atténuation. +
notch + Filtre coupe standard, appelé aussi coupe-bande. C'est l'inverse d'un + filtre passe-bande: les fréquences en dehors de la gamme de fréquences + donnée sont inchangées; les fréquences à l'intérieur de celle-ci sont + atténuées. + Le centre de la gamme de fréquences. + Contrôle la largeur de la bande de fréquences. Plus grande est Q, plus + grande est la bande de fréquences. + Non utilisé
allpass + Filtre standard passe-tout du second ordre. Laisse toutes les fréquences + inchangées, mais modifie le rapport de phase entre les différentes + fréquences. + + La fréquence du retard de groupe maximal, qui est la fréquence à + laquelle le centre de la transition de phase se produit. + + Contrôle finement la transition à la fréquence moyenne. Plus ce + paramètre est grand, plus la transition est fine et large. + Non utilisé
+ +## Méthodes + +_Hérite des propriétés de son parent,_ _{{domxref("AudioNode")}}_. + +- {{domxref("BiquadFilterNode.getFrequencyResponse()")}} + - : A partir des valeurs courantes des paramètres de filtre, calcule la fréquence de réponse pour des fréquences spécifiées dans le tableau de fréquences _frequencyHz_ passé en paramètre. + +## Exemples + +{{page("/fr/docs/Web/API/AudioContext.createBiquadFilter","Example")}} + +## Spécification + +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | +| {{SpecName('Web Audio API', '#BiquadFilterNode-section', 'BiquadFilterNode')}} | {{Spec2('Web Audio API')}} | | + +## Compatibilité navigateurs + +{{Compat("api.BiquadFilterNode")}} + +## Voir aussi + +- [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) diff --git a/files/fr/web/api/blob/blob/index.md b/files/fr/web/api/blob/blob/index.md index eb08cd3667..94d84cdac1 100644 --- a/files/fr/web/api/blob/blob/index.md +++ b/files/fr/web/api/blob/blob/index.md @@ -10,68 +10,51 @@ tags: - Reference translation_of: Web/API/Blob/Blob --- -
{{APIRef("File API")}}
+{{APIRef("File API")}} -

Le constructeur Blob() retourne un nouvel objet {{domxref("Blob")}}. Le contenu d'un blob consiste en une concaténation de valeurs données dans le tableau passé en paramètre.

+Le constructeur **`Blob()`** retourne un nouvel objet {{domxref("Blob")}}. Le contenu d'un blob consiste en une concaténation de valeurs données dans le tableau passé en paramètre. -

Syntaxe

+## Syntaxe -
var aBlob = new Blob( array)
-var aBlob = new Blob( array, options );
-
+ var aBlob = new Blob( array) + var aBlob = new Blob( array, options ); -

Paramètres

+### Paramètres -
-
array
-
Un tableau ({{jsxref("Array")}}) d'objets de type {{jsxref("ArrayBuffer")}}, {{domxref("ArrayBufferView")}}, {{domxref("Blob")}}, {{domxref("DOMString")}}, ou un mélange de tels objets qui seront insérés dans le {{domxref("Blob")}}. Les chaînes DOMString seront encodées en UTF-8.
-
options {{optional_inline}}
-
Un paramètre optionnel qui est un dictionnaire BlobPropertyBag et qui peut être utilisé pour définir les deux attributs suivants : -
    -
  • type : cet attribut représente le type MIME du contenu du tableau qui sera inséré dans le blob. La valeur par défaut pour cette propriété est la chaîne vide "".
    • -
  • endings : cet attribut spécifie la façon dont les chaînes qui contiennent des sauts de lignes (\n) doivent être retranscrites. Il peut prendre l'une de ces valeurs : -
      -
    • "native" indiquera que les caractères de fin doivent être adaptés pour correspondre à ceux utilisés par le système d'exploitation
      • -
    • "transparent" indiquera que les fin de lignes sont stockées telles quelles dans le blob (aucune modification).
      • -
    - La valeur par défaut pour cet attribut est "transparent". {{non-standard_inline}}
    • -
-
-
+- `array` + - : Un tableau ({{jsxref("Array")}}) d'objets de type {{jsxref("ArrayBuffer")}}, {{domxref("ArrayBufferView")}}, {{domxref("Blob")}}, {{domxref("DOMString")}}, ou un mélange de tels objets qui seront insérés dans le {{domxref("Blob")}}. Les chaînes `DOMString` seront encodées en UTF-8. +- `options` {{optional_inline}} -

Exemples

+ - : Un paramètre optionnel qui est un dictionnaire `BlobPropertyBag` et qui peut être utilisé pour définir les deux attributs suivants : -
// Un tableau qui contient une seule DOMString
-var aFileParts = ['<a id="a"><b id="b">Coucou :) !</b></a>'];
+    - `type` : cet attribut représente le type MIME du contenu du tableau qui sera inséré dans le blob. La valeur par défaut pour cette propriété est la chaîne vide `""`.
+    - `endings` : cet attribut spécifie la façon dont les chaînes qui contiennent des sauts de lignes (`\n`) doivent être retranscrites. Il peut prendre l'une de ces valeurs :
 
-// Le blob
-var oMyBlob = new Blob(aFileParts, {type : 'text/html'});
+ - `"native"` indiquera que les caractères de fin doivent être adaptés pour correspondre à ceux utilisés par le système d'exploitation + - `"transparent"` indiquera que les fin de lignes sont stockées telles quelles dans le blob (aucune modification). + + La valeur par défaut pour cet attribut est `"transparent"`. {{non-standard_inline}} -

Spécifications

+## Exemples - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('File API', '#constructorBlob', 'Blob()')}}{{Spec2('File API')}}Définition initiale.
+```js +// Un tableau qui contient une seule DOMString +var aFileParts = ['Coucou :) !']; + +// Le blob +var oMyBlob = new Blob(aFileParts, {type : 'text/html'}); +``` -

Compatibilité des navigateurs

+## Spécifications +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------ | ---------------------------- | -------------------- | +| {{SpecName('File API', '#constructorBlob', 'Blob()')}} | {{Spec2('File API')}} | Définition initiale. | +## Compatibilité des navigateurs -

{{Compat("api.Blob.Blob")}}

+{{Compat("api.Blob.Blob")}} -

Voir aussi

+## Voir aussi -
    -
  • Le déprécié {{domxref("BlobBuilder")}} qui a été remplacé par ce constructeur.
    • -
+- Le déprécié {{domxref("BlobBuilder")}} qui a été remplacé par ce constructeur. diff --git a/files/fr/web/api/blob/index.md b/files/fr/web/api/blob/index.md index 6cf6467846..3e79c90f0f 100644 --- a/files/fr/web/api/blob/index.md +++ b/files/fr/web/api/blob/index.md @@ -7,61 +7,52 @@ tags: - WebAPI translation_of: Web/API/Blob --- -
{{APIRef("File API")}}
+{{APIRef("File API")}} -

Un objet Blob représente un objet, semblable à un fichier, qui est immuable et qui contient des données brutes. Les blobs (pour Binary Large Objects) représentent des données qui ne sont pas dans un format JavaScript natif. L'interface {{domxref("File")}} est basée sur l'interface Blob et hérite des fonctionnalités de cette dernière tout en ajoutant des fonctionnalités pour gérer les fichiers sur le système de l'utilisateur.

+Un objet **`Blob`** représente un objet, semblable à un fichier, qui est immuable et qui contient des données brutes. Les _blobs_ (pour **\*B**inary **L**arge **Ob**jects\*) représentent des données qui ne sont pas dans un format JavaScript natif. L'interface {{domxref("File")}} est basée sur l'interface `Blob` et hérite des fonctionnalités de cette dernière tout en ajoutant des fonctionnalités pour gérer les fichiers sur le système de l'utilisateur. -

Pour construire un Blob à partir d'objets qui ne sont pas des blobs ou à partir d'autres données, on pourra utiliser le constructeur {{domxref("Blob.Blob", "Blob()")}}. Pour créer un blob qui contient un sous-ensemble d'un autre blob, on pourra employer la méthode {{domxref("Blob.slice()", "slice()")}}. Pour obtenir un Blob à partir d'un fichier du système de l'utilisateur, consulter la documentation {{domxref("File")}}.

+Pour construire un `Blob` à partir d'objets qui ne sont pas des blobs ou à partir d'autres données, on pourra utiliser le constructeur {{domxref("Blob.Blob", "Blob()")}}. Pour créer un blob qui contient un sous-ensemble d'un autre blob, on pourra employer la méthode {{domxref("Blob.slice()", "slice()")}}. Pour obtenir un `Blob` à partir d'un fichier du système de l'utilisateur, consulter la documentation {{domxref("File")}}. -

Les API qui acceptent des objets Blob sont également listées sur la documentation de {{domxref("File")}}.

+Les API qui acceptent des objets `Blob` sont également listées sur la documentation de {{domxref("File")}}. -
-

Note : La méthode slice() utilisait auparavant un deuxième argument qui indiquait le nombre d'octets à copier dans le nouveau blob. Si on utilisait un couple de valeur début + longueur qui dépassait la taille du blob source, le blob qui était renvoyé contenait les données à partir de l'indice de début et jusuq'à la fin du blob.

-
+> **Note :** La méthode `slice()` utilisait auparavant un deuxième argument qui indiquait le nombre d'octets à copier dans le nouveau blob. Si on utilisait un couple de valeur `début + longueur` qui dépassait la taille du blob source, le blob qui était renvoyé contenait les données à partir de l'indice de début et jusuq'à la fin du blob. -
-

Note : La méthode slice() doit être utilisée avec certains préfixes sur certaines versions de navigateurs : blob.mozSlice() pour Firefox 12 et antérieur, blob.webkitSlice() dans Safari. Un ancienne version de slice() sans préfixes avait une sémantique différente et est désormais obsolète. La prise en charge de blob.mozSlice() a été abandonnée avec Firefox 30.

-
+> **Note :** La méthode `slice()` doit être utilisée avec certains préfixes sur certaines versions de navigateurs : `blob.mozSlice()` pour Firefox 12 et antérieur, `blob.webkitSlice()` dans Safari. Un ancienne version de `slice()` sans préfixes avait une sémantique différente et est désormais obsolète. La prise en charge de `blob.mozSlice()` a été abandonnée avec Firefox 30. -

Constructeur

+## Constructeur -
-
{{domxref("Blob.Blob", "Blob(blobParts[, options])")}}
-
Ce constructeur renvoie un nouvel objet Blob qui contient la concaténation des valeurs du tableau passé en paramètre.
-
+- {{domxref("Blob.Blob", "Blob(blobParts[, options])")}} + - : Ce constructeur renvoie un nouvel objet `Blob` qui contient la concaténation des valeurs du tableau passé en paramètre. -

Propriétés

+## Propriétés -
-
{{domxref("Blob.isClosed")}} {{readonlyinline}} {{experimental_inline}}
-
Un booléen qui indique si la méthode {{domxref("Blob.close()")}} a été appelée sur le blob. Les blobs qui ont été fermés ne peuvent pas être lus.
-
{{domxref("Blob.size")}} {{readonlyinline}}
-
La taille des données contenues dans l'objet Blob, exprimée en octets.
-
{{domxref("Blob.type")}} {{readonlyinline}}
-
Une chaîne de caractères qui indique le type MIME des données contenues dans le Blob. Si le type est inconnu, la chaîne de caractères est vide.
-
+- {{domxref("Blob.isClosed")}} {{readonlyinline}} {{experimental_inline}} + - : Un booléen qui indique si la méthode {{domxref("Blob.close()")}} a été appelée sur le blob. Les blobs qui ont été fermés ne peuvent pas être lus. +- {{domxref("Blob.size")}} {{readonlyinline}} + - : La taille des données contenues dans l'objet `Blob`, exprimée en octets. +- {{domxref("Blob.type")}} {{readonlyinline}} + - : Une chaîne de caractères qui indique le type MIME des données contenues dans le `Blob`. Si le type est inconnu, la chaîne de caractères est vide. -

Méthodes

+## Méthodes -
-
{{domxref("Blob.close()")}} {{experimental_inline}}
-
Cette méthode clotûre le blob et libère éventuellement les ressources sous-jacentes.
-
{{domxref("Blob.slice()", "Blob.slice([début[, fin[, contentType]]])")}}
-
Cette méthode renvoie un nouvel objet Blob qui contient les données dans le fragment du Blob source entre début et fin.
-
+- {{domxref("Blob.close()")}} {{experimental_inline}} + - : Cette méthode clotûre le blob et libère éventuellement les ressources sous-jacentes. +- {{domxref("Blob.slice()", "Blob.slice([début[, fin[, contentType]]])")}} + - : Cette méthode renvoie un nouvel objet `Blob` qui contient les données dans le fragment du `Blob` source entre `début` et `fin`. -

Exemples

+## Exemples -

Utilisation du constructeur Blob

+### Utilisation du constructeur `Blob` -

Le constructeur {{domxref("Blob.Blob", "Blob()")}} permet de créer des blobs à partir d'autres objets. Par exemple, on peut construire un blob à partir d'une chaîne de caractères :

+Le constructeur {{domxref("Blob.Blob", "Blob()")}} permet de créer des blobs à partir d'autres objets. Par exemple, on peut construire un blob à partir d'une chaîne de caractères : -
var debug = {coucou: "monde"};
-var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'});
+ var debug = {coucou: "monde"}; + var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'}); -

Créer une URL de données vers un tableau typé

+### Créer une URL de données vers un tableau typé -
var typedArray = GetTheTypedArraySomehow();
+```js
+var typedArray = GetTheTypedArraySomehow();
 
 // On ajoute un type MIME pertinent
 var blob = new Blob([typedArray], {type: 'application/octet-binary'});
@@ -73,47 +64,36 @@ var url = URL.createObjectURL(blob);
 // désormais on peut utiliser l'URL dans tout
 // contexte qui utilise des URL (img.src par
 // exemple)
-
+``` -

Extraire des données à partir d'un blob

+### Extraire des données à partir d'un blob -

La seule façon de lire le contenu d'un blob est d'utiliser un objet {{domxref("FileReader")}}. Dans le code qui suit, on lit le contenu d'un blob sous la forme d'un tableau typé.

+La seule façon de lire le contenu d'un blob est d'utiliser un objet {{domxref("FileReader")}}. Dans le code qui suit, on lit le contenu d'un blob sous la forme d'un tableau typé. -
var reader = new FileReader();
+```js
+var reader = new FileReader();
 reader.addEventListener("loadend", function() {
    // reader.result contient le contenu du
    // blob sous la forme d'un tableau typé
 });
-reader.readAsArrayBuffer(blob);
- -

En utilisant d'autres méthodes de {{domxref("FileReader")}}, on peut lire le contenu du blob si c'est une chaîne ou une URL de données.

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('File API','#blob','Blob')}}{{Spec2('File API')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Blob")}}

- -

Voir aussi

- - +reader.readAsArrayBuffer(blob); +``` + +En utilisant d'autres méthodes de {{domxref("FileReader")}}, on peut lire le contenu du blob si c'est une chaîne ou une URL de données. + +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------------------- | ---------------------------- | -------------------- | +| {{SpecName('File API','#blob','Blob')}} | {{Spec2('File API')}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("api.Blob")}} + +## Voir aussi + +- {{domxref("BlobBuilder")}} +- {{domxref("File")}} +- {{domxref("URL.createObjectURL")}} +- [Components.utils.importGlobalProperties](/fr/docs/Mozilla/Tech/XPCOM/Language_Bindings/Components.utils.importGlobalProperties) diff --git a/files/fr/web/api/blob/size/index.md b/files/fr/web/api/blob/size/index.md index b82751abd0..495747778f 100644 --- a/files/fr/web/api/blob/size/index.md +++ b/files/fr/web/api/blob/size/index.md @@ -9,32 +9,28 @@ tags: translation_of: Web/API/File/fileSize original_slug: Web/API/File/fileSize --- -

{{APIRef("File API") }}{{non-standard_header}}

+{{APIRef("File API") }}{{non-standard_header}} -

{{obsolete_header(7.0)}}

+{{obsolete_header(7.0)}} -

Résumé

+## Résumé -

Renvoie la taille du fichier en octets.

+Renvoie la taille du fichier en octets. -
-

Note : Cette propriété est dépréciée. Utilisez {{domxref("Blob.size")}} à la place.

-
+> **Note :** Cette propriété est dépréciée. Utilisez {{domxref("Blob.size")}} à la place. -

Syntaxe

+## Syntaxe -
var size = instanceOfFile.fileSize
+ var size = instanceOfFile.fileSize -

Valeur

+## Valeur -

Un nombre.

+Un nombre. -

Spécification

+## Spécification -

Ne fait partie d'aucune spécification.

+Ne fait partie d'aucune spécification. -

Voir aussi

+## Voir aussi -
    -
  • {{domxref("Blob.size")}}
    • -
+- {{domxref("Blob.size")}} diff --git a/files/fr/web/api/blob/type/index.md b/files/fr/web/api/blob/type/index.md index 8823dd1bb9..166428cb4a 100644 --- a/files/fr/web/api/blob/type/index.md +++ b/files/fr/web/api/blob/type/index.md @@ -8,23 +8,24 @@ tags: - Propriété translation_of: Web/API/Blob/type --- -
{{APIRef("File API")}}
+{{APIRef("File API")}} -

La propriété type de l'objet Blob fourni le type MIME (Internet media type) d'un fichier. Celle-ci retourne une chaîne de caractère vide si le type n'a pas pu être déterminé.

+La propriété **`type`** de l'objet [`Blob`](fr/docs/Web/API/Blob) fourni le type MIME (Internet media type) d'un fichier. Celle-ci retourne une chaîne de caractère vide si le type n'a pas pu être déterminé. -

Syntaxe

+## Syntaxe -
var mimetype = instanceOfFile.type
+ var mimetype = instanceOfFile.type -

Valeur

+## Valeur -

Une chaîne de caractères (par exemple : "image/png").

+Une chaîne de caractères (par exemple : "image/png"). -

Exemple

+## Exemple -
var i, fileInput, files, allowedFileTypes;
+```js
+var i, fileInput, files, allowedFileTypes;
 
-// fileInput est un HTMLInputElement: <input type="file" multiple id="myfileinput">
+// fileInput est un HTMLInputElement: 
 fileInput = document.getElementById("myfileinput");
 
 // files est un objet FileList (similaire à NodeList)
@@ -33,43 +34,24 @@ files = fileInput.files;
 // notre application accepte seulement les images de type *.png, *.jpeg et *.gif
 allowedFileTypes = ["image/png", "image/jpeg", "image/gif"];
 
-for (i = 0; i < files.length; i++) {
+for (i = 0; i < files.length; i++) {
   // Vérifie si file.type est un type autorisé.
-  if (allowedFileTypes.indexOf(files[i].type) > -1) {
+  if (allowedFileTypes.indexOf(files[i].type) > -1) {
     // le type du fichier (file) correspond à l'un des types autorisés. Faites quelque chose ici.
   }
 });
-
+``` -

Spécifications

+## Spécifications - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('File API', '#dfn-type', 'type')}}{{Spec2('File API')}}Définition initiale.
+| Spécification | Statut | Commentaire | +| ------------------------------------------------------------ | ---------------------------- | -------------------- | +| {{SpecName('File API', '#dfn-type', 'type')}} | {{Spec2('File API')}} | Définition initiale. | -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -
-
+{{Compat("api.Blob.type")}} +## Voir aussi -

{{Compat("api.Blob.type")}}

-
- -

Voir aussi

-
- -
    -
  • {{domxref("Blob")}}
    • -
+- {{domxref("Blob")}} diff --git a/files/fr/web/api/blobbuilder/index.md b/files/fr/web/api/blobbuilder/index.md index 7098c3d185..bad885b603 100644 --- a/files/fr/web/api/blobbuilder/index.md +++ b/files/fr/web/api/blobbuilder/index.md @@ -8,119 +8,131 @@ tags: - Obsolete translation_of: Web/API/BlobBuilder --- -

{{APIRef("File API")}}{{ obsolete_header}}

+{{APIRef("File API")}}{{ obsolete_header}} -

L'interface BlobBuilder fournit une manière simple de construire des objets {{domxref("Blob")}}. Il suffit de créer un BlobBuilder et de lui ajouter des données  en appellant la méthode {{manch("append")}}. Une fois finalisé, l'appel à la méthode {{manch("getBlob")}} permet de récupérer un {{domxref("Blob")}} contenant les données envoyées au constructeur dudit Blob.

+L'interface `BlobBuilder` fournit une manière simple de construire des objets {{domxref("Blob")}}. Il suffit de créer un `BlobBuilder` et de lui ajouter des données  en appellant la méthode {{manch("append")}}. Une fois finalisé, l'appel à la méthode {{manch("getBlob")}} permet de récupérer un {{domxref("Blob")}} contenant les données envoyées au constructeur dudit Blob. -
-

Note: L'interface BlobBuilder est désormais déconseillé (deprecated) au profit du nouveau constructeur {{domxref('Blob')}}.

-
+> **Note :** L'interface `BlobBuilder` est désormais déconseillé (deprecated) au profit du nouveau constructeur {{domxref('Blob')}}. -

Aperçu des méthodes

+## Aperçu des méthodes - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + +
void append(in ArrayBuffer data);
void append(in Blob data);
void append(in String data, [optional] in String endings);
Blob getBlob([optional] in DOMString contentType);
File getFile(in DOMString name, [optional] in DOMString contentType);
+ void append(in + ArrayBuffer data); +
+ void append(in + Blob data); +
+ void append(in + String data, [optional] in String endings); +
+ Blob + getBlob([optional] in DOMString contentType); +
+ File + getFile(in + DOMString name, [optional] in DOMString contentType); +
-

Méthodes

+## Méthodes -

append()

+### append() -

Ajoute le contenu de l'objet JavaScript spécifié au {{domxref("Blob")}} en construction. Si la valeur spécifiée n'est pas un {{domxref("Blob")}}, un ArrayBuffer, ou une String, la valeur est forcée (coerced) à string avant d'être ajoutée au blob.

+Ajoute le contenu de l'objet JavaScript spécifié au {{domxref("Blob")}} en construction. Si la valeur spécifiée n'est pas un {{domxref("Blob")}}, un [`ArrayBuffer`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer), ou une [`String`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/String), la valeur est forcée (coerced) à string avant d'être ajoutée au blob. -
void append(
-  in ArrayBuffer data
-);
+    void append(
+      in ArrayBuffer data
+    );
 
-void append(
-  in Blob data
-);
+    void append(
+      in Blob data
+    );
 
 
-void append(
-  in String data,
-  [optional] in String endings
-);
-
+ void append( +   in String data, + [optional] in String endings + ); -

Paramètres

+#### Paramètres -
-
data
-
Les données à ajouter au {{domxref("Blob")}} en construction.
-
endings
-
Spécifie comment les chaînes (strings) contenant des \n doivent être rendues. Cela peut être "transparent" (endings inchangés) ou "native" (les endings sont changés pour respecter la convention du système de fichier de l'OS de l'hôte). Par défault, la valeur est "transparent".
-
+- `data` + - : Les données à ajouter au {{domxref("Blob")}} en construction. +- `endings` + - : Spécifie comment les chaînes (strings) contenant des `\n` doivent être rendues. Cela peut être `"transparent"` (endings inchangés) ou `"native"` (les endings sont changés pour respecter la convention du système de fichier de l'OS de l'hôte). Par défault, la valeur est `"transparent"`. -

getBlob()

+### getBlob() -

Retourne l'objet {{domxref("Blob")}} qui a été construit en utilisant les données passées en argument des différents appels à {{manch("append")}}.

+Retourne l'objet {{domxref("Blob")}} qui a été construit en utilisant les données passées en argument des différents appels à {{manch("append")}}. -
Blob getBlob(
-  in DOMString contentType {{optional_inline}}
-);
-
+ Blob getBlob( +   in DOMString contentType {{optional_inline}} + ); -

Paramètres

+#### Paramètres -
-
contentType {{optional_inline}}
-
Le type MIME des données  retournées par le {{domxref("Blob")}}. Ce sera la valeur de la propriété 'type' de l'objet Blob.
-
+- contentType {{optional_inline}} + - : Le type MIME des données  retournées par le {{domxref("Blob")}}. Ce sera la valeur de la propriété 'type' de l'objet `Blob`. -

Valeur de retour

+#### Valeur de retour -

Un objet {{domxref("Blob")}} contenant toutes les données passées en argument de chaque appel à  {{manch("append")}} depuis la création du BlobBuilder. Cela remet aussi à zéro (reset) le BlobBuilder de tel sorte que le prochain appel à {{manch("append")}} démarrera la création d'un nouveau blob vierge.

+Un objet {{domxref("Blob")}} contenant toutes les données passées en argument de chaque appel à  {{manch("append")}} depuis la création du `BlobBuilder`. Cela remet aussi à zéro (reset) le `BlobBuilder` de tel sorte que le prochain appel à {{manch("append")}} démarrera la création d'un nouveau blob vierge. -

getFile() {{non-standard_inline}}

+### getFile() {{non-standard_inline}} -

Retourne un objet {{domxref("File")}}.

+Retourne un objet {{domxref("File")}}. -
File getFile(
-  in DOMString name,
-  [optional] in DOMString contentType
-);
-
+ File getFile( + in DOMString name, + [optional] in DOMString contentType + ); -

Paramètres

+#### Paramètres -
-
name
-
Le nom du fichier.
-
contentType {{optional_inline}}
-
Le type MIME des données  retournées par le {{domxref("File")}}. Ce sera la valeur de la propriété 'type' de l'objet File.
-
+- name + - : Le nom du fichier. +- contentType {{optional_inline}} + - : Le type MIME des données  retournées par le {{domxref("File")}}. Ce sera la valeur de la propriété 'type' de l'objet `File`. -

Valeur deretour

+#### Valeur deretour -

Un objet {{domxref("File")}}.

+Un objet {{domxref("File")}}. -

Browser compatibility

+## Browser compatibility +{{Compat("api.BlobBuilder")}} +## Voir aussi -

{{Compat("api.BlobBuilder")}}

- -

Voir aussi

- -
    -
  • {{spec("http://dev.w3.org/2009/dap/file-system/file-writer.html#idl-def-BlobBuilder", "File API Specification: BlobBuilder", "ED")}}
    • -
  • {{domxref("Blob")}}
    • -
  • {{domxref("File")}}
    • -
+- {{spec("http://dev.w3.org/2009/dap/file-system/file-writer.html#idl-def-BlobBuilder", "File API Specification: BlobBuilder", "ED")}} +- {{domxref("Blob")}} +- {{domxref("File")}} diff --git a/files/fr/web/api/blobevent/blobevent/index.md b/files/fr/web/api/blobevent/blobevent/index.md index 742af43a44..c976b80341 100644 --- a/files/fr/web/api/blobevent/blobevent/index.md +++ b/files/fr/web/api/blobevent/blobevent/index.md @@ -9,53 +9,33 @@ tags: - Evènement translation_of: Web/API/BlobEvent/BlobEvent --- -

{{APIRef("Media Capture and Streams")}}{{seeCompatTable}}

+{{APIRef("Media Capture and Streams")}}{{seeCompatTable}} -

Le constructeur BlobEvent() renvoie un nouvel objet {{domxref("BlobEvent")}} créé avec un {{domxref("Blob")}} associé.

+Le constructeur **`BlobEvent()`** renvoie un nouvel objet {{domxref("BlobEvent")}} créé avec un {{domxref("Blob")}} associé. -

Syntaxe

+## Syntaxe -
blobEvent = new BlobEvent({data: aSpecificBlob}[, timecode]);
-
+ blobEvent = new BlobEvent({data: aSpecificBlob}[, timecode]); -

Arguments

+### Arguments -

Le constructeur BlobEvent() hérite des arguments de {{domxref("Event.Event", "Event()")}}.

+_Le constructeur `BlobEvent()`_ _hérite des arguments de {{domxref("Event.Event", "Event()")}}._ -
-
data
-
est un {{domxref("Blob")}} associé à l'évènement.
-
timecode {{optional_inline}}
-
un {{domxref("DOMHighResTimeStamp")}} à utiliser pour initialiser l'événement blob.
-
+- `data` + - : est un {{domxref("Blob")}} associé à l'évènement. +- `timecode` {{optional_inline}} + - : un {{domxref("DOMHighResTimeStamp")}} à utiliser pour initialiser l'événement blob. -

Spécifications

+## Spécifications - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('MediaStream Recording', '#blob-event', 'BlobEvent')}}{{Spec2('MediaStream Recording')}}Définition initiale.
+| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- | +| {{SpecName('MediaStream Recording', '#blob-event', 'BlobEvent')}} | {{Spec2('MediaStream Recording')}} | Définition initiale. | -

Compatibilité des navigateurs

+## Compatibilité des navigateurs +{{Compat("api.BlobEvent.BlobEvent")}} +## Voir aussi -

{{Compat("api.BlobEvent.BlobEvent")}}

- -

Voir aussi

- -
    -
  • L'interface {{domxref("BlobEvent")}} à laquelle il appartient.
    • -
- -

 

+- L'interface {{domxref("BlobEvent")}} à laquelle il appartient. diff --git a/files/fr/web/api/blobevent/data/index.md b/files/fr/web/api/blobevent/data/index.md index ea9939f3bd..b360895880 100644 --- a/files/fr/web/api/blobevent/data/index.md +++ b/files/fr/web/api/blobevent/data/index.md @@ -10,41 +10,26 @@ tags: - données translation_of: Web/API/BlobEvent/data --- -

{{ apiref("Media Capture and Streams") }}

+{{ apiref("Media Capture and Streams") }} -

{{ SeeCompatTable() }}

+{{ SeeCompatTable() }} -

La propriété en lecture seule BlobEvent.data représente un {{domxref("Blob")}} associé à l'évènement.

+La propriété en lecture seule **`BlobEvent.data`** représente un {{domxref("Blob")}} associé à l'évènement. -

Syntaxe

+## Syntaxe -
associatedBlob = BlobEvent.data
+ associatedBlob = BlobEvent.data -

Spécifications

+## Spécifications - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('MediaStream Recording', '#widl-BlobEvent-data', 'BlobEvent.data')}}{{Spec2('MediaStream Recording')}}Définition initiale.
+| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -------------------- | +| {{SpecName('MediaStream Recording', '#widl-BlobEvent-data', 'BlobEvent.data')}} | {{Spec2('MediaStream Recording')}} | Définition initiale. | -

Compatibilité des navigateurs

+## Compatibilité des navigateurs +{{Compat("api.BlobEvent.data")}} +## Voir aussi -

{{Compat("api.BlobEvent.data")}}

- -

Voir aussi

- -
    -
  • L'interface {{domxref("BlobEvent")}} à laquelle elle appartient.
    • -
+- L'interface {{domxref("BlobEvent")}} à laquelle elle appartient. diff --git a/files/fr/web/api/blobevent/index.md b/files/fr/web/api/blobevent/index.md index c0b1079569..415a251788 100644 --- a/files/fr/web/api/blobevent/index.md +++ b/files/fr/web/api/blobevent/index.md @@ -14,57 +14,40 @@ tags: - events translation_of: Web/API/BlobEvent --- -
{{APIRef ("Media Capture and Streams")}}
+{{APIRef ("Media Capture and Streams")}} -

L'interface BlobEvent représente les événements associés à un {{domxref ("Blob")}}. Ces blobs sont généralement, mais pas nécessairement, associés au contenu multimédia.

+L'interface `BlobEvent` représente les événements associés à un {{domxref ("Blob")}}. Ces blobs sont généralement, mais pas nécessairement, associés au contenu multimédia. -

Constructeur

+## Constructeur -
-
{{domxref("BlobEvent.BlobEvent", "BlobEvent()")}}
-
Crée un événement BlobEvent avec les paramètres donnés.
-
+- {{domxref("BlobEvent.BlobEvent", "BlobEvent()")}} + - : Crée un événement `BlobEvent` avec les paramètres donnés. -

Propriétés

+## Propriétés -

Hérite des propriétés de son parent, {{domxref("Event")}}.

+_Hérite des propriétés de son parent, {{domxref("Event")}}_. -
-
{{domxref("BlobEvent.data")}} {{readonlyInline}}
-
Un objet {{domxref("Blob")}} qui représente les données associées à l'évènement. L'évènement a été déclenché sur le {{domxref("EventTarget")}} en raison de quelque chose survenu spécifiquement sur ce {{domxref("Blob")}}.
-
{{domxref("BlobEvent.timecode")}} {{readonlyinline}}
-
{{domxref("DOMHighResTimeStamp")}} indique la différence entre l'horodatage du premier bloc de données et l'horadatage du premier bloc BlobEvent produit par cet enregistreur. On notera que le timecode du premier BlobEvent produit , n'a pas besoin d'être nul.
-
+- {{domxref("BlobEvent.data")}} {{readonlyInline}} + - : Un objet {{domxref("Blob")}} qui représente les données associées à l'évènement. L'évènement a été déclenché sur le {{domxref("EventTarget")}} en raison de quelque chose survenu spécifiquement sur ce {{domxref("Blob")}}. +- {{domxref("BlobEvent.timecode")}} {{readonlyinline}} + - : {{domxref("DOMHighResTimeStamp")}} indique la différence entre l'horodatage du premier bloc de données et l'horadatage du premier bloc `BlobEvent` produit par cet enregistreur. On notera que le _timecode_ du premier `BlobEvent` produit , n'a pas besoin d'être nul. -

Méthodes

+## Méthodes -

Pas de méthode spécifique ; hérite des méthodes de son parent {{domxref("Event")}}.

+_Pas de méthode spécifique ; hérite des méthodes de son parent _{{domxref("Event")}}.\*\* -

Spécifications

+## Spécifications - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('MediaStream Recording', '#blob-event', 'BlobEvent')}}{{Spec2('MediaStream Recording')}}Définition initiale
+| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------- | -------------------------------------------- | ------------------- | +| {{SpecName('MediaStream Recording', '#blob-event', 'BlobEvent')}} | {{Spec2('MediaStream Recording')}} | Définition initiale | -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

{{Compat("api.BlobEvent")}}

+{{Compat("api.BlobEvent")}} -

Voir aussi

+## Voir aussi - +- L'interface de base {{domxref("Event")}} . +- [L'API MediaStream Recording ](/fr/docs/Web/API/MediaStream_Recording_API): envoie des objets `BlobEvent` chaque fois qu'un fragment de media est prêt. +- [Utiliser l'API MediaStream Recording](/fr/docs/Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API) diff --git a/files/fr/web/api/btoa/index.md b/files/fr/web/api/btoa/index.md index 3d4bad306e..4a808ec8e8 100644 --- a/files/fr/web/api/btoa/index.md +++ b/files/fr/web/api/btoa/index.md @@ -14,110 +14,77 @@ tags: translation_of: Web/API/WindowOrWorkerGlobalScope/btoa original_slug: Web/API/WindowOrWorkerGlobalScope/btoa --- -
{{APIRef("HTML DOM")}}
+{{APIRef("HTML DOM")}} -

La méthode WindowOrWorkerGlobalScope.btoa() crée une chaîne ASCII codée en base 64 à partir d'un objet {{jsxref ("String")}} dans lequel chaque caractère de la chaîne est traité comme un octet de données binaires.

+La méthode `WindowOrWorkerGlobalScope.btoa()` crée une chaîne ASCII codée en base 64 à partir d'un objet {{jsxref ("String")}} dans lequel chaque caractère de la chaîne est traité comme un octet de données binaires. -
-

Note : étant donné que cette fonction traite chaque caractère comme un octet de données binaires, quel que soit le nombre d'octets composant le caractère, une exception InvalidCharacterError est déclenchée si le {{Glossary("code point")}} d'un caractère quelconque est en dehors de la plage 0x00 à 0xFF. Voir {{anch("Chaînes Unicode")}} pour un exemple montrant comment encoder des chaînes avec des caractères en dehors de la plage 0x00 à 0xFF.

-
+> **Note :** étant donné que cette fonction traite chaque caractère comme un octet de données binaires, quel que soit le nombre d'octets composant le caractère, une exception `InvalidCharacterError` est déclenchée si le {{Glossary("code point")}} d'un caractère quelconque est en dehors de la plage 0x00 à 0xFF. Voir {{anch("Chaînes Unicode")}} pour un exemple montrant comment encoder des chaînes avec des caractères en dehors de la plage 0x00 à 0xFF. -

Syntaxe

+## Syntaxe -
var donneesEncodees = scope.btoa(chaineAEncoder);
-
+ var donneesEncodees = scope.btoa(chaineAEncoder); -

Paramètres

+### Paramètres -
-
chaineAEncoder
-
Une chaîne dont les caractères représentent chacun un octet unique de données binaires à encoder en ASCII.
-
+- `chaineAEncoder` + - : Une chaîne dont les caractères représentent chacun un octet unique de données binaires à encoder en ASCII. -

Valeur retournée

+### Valeur retournée -

Une chaîne contenant la représentation Base64 de la chaineAEncoder.

+Une chaîne contenant la représentation Base64 de la `chaineAEncoder`. -

Exceptions

+### Exceptions -

Exemple

+## Exemple -
var donneesEncodees = window.btoa('Salut, monde'); // encode une chaîne
-var donneesDecodees = window.atob(donneesEncodees); // décode la chaîne
-
+ var donneesEncodees = window.btoa('Salut, monde'); // encode une chaîne + var donneesDecodees = window.atob(donneesEncodees); // décode la chaîne -

Notes

+## Notes -

Vous pouvez utiliser cette méthode pour encoder des données qui, autrement, pourraient engendrer des problèmes de communication, les transmettre et utiliser alors la méthode {{domxref("WindowOrWorkerGlobalScope.atob","atob()")}} pour décoder les données à nouveau. Par exemple, vous pouvez encoder des caractères de contrôle tels que les valeurs ASCII de 0 à 31.

+Vous pouvez utiliser cette méthode pour encoder des données qui, autrement, pourraient engendrer des problèmes de communication, les transmettre et utiliser alors la méthode {{domxref("WindowOrWorkerGlobalScope.atob","atob()")}} pour décoder les données à nouveau. Par exemple, vous pouvez encoder des caractères de contrôle tels que les valeurs ASCII de 0 à 31. -

btoa() est également disponible pour les composants XPCOM implémentés en JavaScript, même si {domxref("Window")}} n'est pas l'objet global dans les composants.

+`btoa()` est également disponible pour les composants XPCOM implémentés en JavaScript, même si {domxref("Window")}} n'est pas l'objet global dans les composants. -

Chaînes Unicode

+## Chaînes Unicode -

Dans la plupart des navigateurs, l'appel de btoa() sur une chaîne Unicode engendrera une exception InvalidCharacterError.

+Dans la plupart des navigateurs, l'appel de `btoa()` sur une chaîne Unicode engendrera une exception `InvalidCharacterError`. -

Une option est d'échapper tous les caractères étendus, de telle sorte que la chaîne que vous voulez en fait encoder soit une représentation ASCII de l'original. Voyez cet exemple, noté par Johan Sundström :

+Une option est d'échapper tous les caractères étendus, de telle sorte que la chaîne que vous voulez en fait encoder soit une représentation ASCII de l'original. Voyez cet exemple, noté par [Johan Sundström](http://ecmanaut.blogspot.com/2006/07/encoding-decoding-utf8-in-javascript.html) : -
// Chaîne ucs-2 en ascii encodé en base64
-function uena(chn) {
-    return window.btoa(unescape(encodeURIComponent(chn)));
-}
-// Ascii encodé en base64 en chaîne ucs-2
-function aenu(chn) {
-    return decodeURIComponent(escape(window.atob(chn)));
-}
-// Usage :
-uena('✓ à la mode'); // 4pyTIMOgIGxhIG1vZGU=
-aenu('4pyTIMOgIGxhIG1vZGU='); // "✓ à la mode"
+    // Chaîne ucs-2 en ascii encodé en base64
+    function uena(chn) {
+        return window.btoa(unescape(encodeURIComponent(chn)));
+    }
+    // Ascii encodé en base64 en chaîne ucs-2
+    function aenu(chn) {
+        return decodeURIComponent(escape(window.atob(chn)));
+    }
+    // Usage :
+    uena('✓ à la mode'); // 4pyTIMOgIGxhIG1vZGU=
+    aenu('4pyTIMOgIGxhIG1vZGU='); // "✓ à la mode"
 
-uena('I \u2661 Unicode!'); // SSDimaEgVW5pY29kZSE=
-aenu('SSDimaEgVW5pY29kZSE='); // "I ♡ Unicode!"
+ uena('I \u2661 Unicode!'); // SSDimaEgVW5pY29kZSE= + aenu('SSDimaEgVW5pY29kZSE='); // "I ♡ Unicode!" -

Une solution meilleure, plus fiable et moins coûteuse consiste à utiliser des tableaux typés pour faire la conversion.

+Une solution meilleure, plus fiable et moins coûteuse consiste à [utiliser des tableaux typés pour faire la conversion](/fr/docs/D%C3%A9coder_encoder_en_base64). -

Spécifications

+## Spécifications - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', 'webappapis.html#dom-btoa', 'WindowOrWorkerGlobalScope.btoa()')}}{{Spec2('HTML WHATWG')}}Méthode déplacée dans le mixin WindowOrWorkerGlobalScope dans la spéc la plus récente.
{{SpecName('HTML WHATWG', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}}{{Spec2('HTML WHATWG')}}Pas de changement depuis le dernier instantané, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}}{{Spec2('HTML5.1')}}Instantané de {{SpecName("HTML WHATWG")}}. Pas de changement.
{{SpecName("HTML5 W3C", "#dom-windowbase64-btoa", "WindowBase64.btoa()")}}{{Spec2('HTML5 W3C')}}Instantané de {{SpecName("HTML WHATWG")}}. Création de WindowBase64 (les propriétés se trouvaient sur la cible avant cela).
+| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | +| {{SpecName('HTML WHATWG', 'webappapis.html#dom-btoa', 'WindowOrWorkerGlobalScope.btoa()')}} | {{Spec2('HTML WHATWG')}} | Méthode déplacée dans le mixin `WindowOrWorkerGlobalScope` dans la spéc la plus récente. | +| {{SpecName('HTML WHATWG', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}} | {{Spec2('HTML WHATWG')}} | Pas de changement depuis le dernier instantané, {{SpecName("HTML5.1")}}. | +| {{SpecName('HTML5.1', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}} | {{Spec2('HTML5.1')}} | Instantané de {{SpecName("HTML WHATWG")}}. Pas de changement. | +| {{SpecName("HTML5 W3C", "#dom-windowbase64-btoa", "WindowBase64.btoa()")}} | {{Spec2('HTML5 W3C')}} | Instantané de {{SpecName("HTML WHATWG")}}. Création de `WindowBase64` (les propriétés se trouvaient sur la cible avant cela). | -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

{{Compat("api.WindowOrWorkerGlobalScope.btoa")}}

+{{Compat("api.WindowOrWorkerGlobalScope.btoa")}} -

Voir aussi

+## Voir aussi - +- [Base64 encoding and decoding](/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding) +- [Les URL de `données`](/fr/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) +- {{domxref("WindowOrWorkerGlobalScope.atob","atob()")}} +- [Components.utils.importGlobalProperties](/en-US/docs/Components.utils.importGlobalProperties) diff --git a/files/fr/web/api/cache/add/index.md b/files/fr/web/api/cache/add/index.md index 83fd3085ba..bb85f96fbb 100644 --- a/files/fr/web/api/cache/add/index.md +++ b/files/fr/web/api/cache/add/index.md @@ -13,100 +13,93 @@ tags: - ServiceWorker translation_of: Web/API/Cache/add --- -

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

+{{APIRef("Service Workers API")}}{{SeeCompatTable}} -

La méthode add() de l'interface {{domxref("Cache")}} accepte une URL, la récupère, et ajoute l'objet réponse qui en résulte dans le cache. La méthode add() est équivalent au code suivant :

+La méthode **`add()`** de l'interface {{domxref("Cache")}} accepte une URL, la récupère, et ajoute l'objet réponse qui en résulte dans le cache. La méthode `add()` est équivalent au code suivant : -
fetch(url).then(function(response) {
+```js
+fetch(url).then(function(response) {
   if (!response.ok) {
     throw new TypeError('bad response status');
   }
   return cache.put(url, response);
-})
+}) +``` -

Pour des opérations plus complexes, il faut utiliser {{domxref("Cache.put","Cache.put()")}} directement.

+Pour des opérations plus complexes, il faut utiliser {{domxref("Cache.put","Cache.put()")}} directement. -
-

Note : add() écrasera toute paire clé/valeur précedemment stockée en cache et qui correspond à la requête.

-
+> **Note :** `add()` écrasera toute paire clé/valeur précedemment stockée en cache et qui correspond à la requête. -

Syntaxe

+## Syntaxe -
cache.add(request).then(function() {
+```js
+cache.add(request).then(function() {
   //request a été ajoutée au cache
 });
-
+``` -

Paramètres

+### Paramètres -
-
request
-
La requête à mettre en cache. Ce paramètre peut être un objet {{domxref("Request", "Requête")}} ou une URL.
-
+- request + - : La requête à mettre en cache. Ce paramètre peut être un objet {{domxref("Request", "Requête")}} ou une URL. -

Retour

+### Retour -

Une {{jsxref("Promise", "Promesse")}} qui est résolue en void.

+Une {{jsxref("Promise", "Promesse")}} qui est résolue en void. -

Exceptions

+### Exceptions - - - - - - - - - - - - + + + + + + + + + + + +
ExceptionArrive quand
TypeError -

Le schéma d'URL n'est pas http ou https.

- -

Le statut de la réponse n'est pas dans les 200 (i.e., une requête qui a échoué.) Cela peut arriver si la requête échoue, mais également si la requête est une cross-origin no-cors (auquel cas le statut retourné est systématiquement 0.)

-
ExceptionArrive quand
TypeError +

+ Le schéma d'URL n'est pas http ou https. +

+

+ Le statut de la réponse n'est pas dans les 200 (i.e., une requête qui + a échoué.) Cela peut arriver si la requête échoue, mais également si + la requête est une cross-origin no-cors (auquel cas le statut + retourné est systématiquement 0.) +

+
-

Exemples

+## Exemples -

Ce bloc de code attends le déclenchement d'un {{domxref("InstallEvent")}}, puis lance {{domxref("ExtendableEvent.waitUntil","waitUntil")}} qui gère la phase d'installation de l'application. Cela consite à appeler {{domxref("CacheStorage.open")}} afin de créer un nouveau cache, puis à utiliser {{domxref("Cache.add")}} pour y ajouter des ressources.

+Ce bloc de code attends le déclenchement d'un {{domxref("InstallEvent")}}, puis lance {{domxref("ExtendableEvent.waitUntil","waitUntil")}} qui gère la phase d'installation de l'application. Cela consite à appeler {{domxref("CacheStorage.open")}} afin de créer un nouveau cache, puis à utiliser {{domxref("Cache.add")}} pour y ajouter des ressources. -
this.addEventListener('install', function(event) {
+```js
+this.addEventListener('install', function(event) {
   event.waitUntil(
     caches.open('v1').then(function(cache) {
       return cache.add('/sw-test/index.html');
     })
   );
 });
-
+``` -

Spécifications

+## Spécifications - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#dom-cache-add', 'Cache: add')}}{{Spec2('Service Workers')}}Définition initiale.
+| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- | +| {{SpecName('Service Workers', '#dom-cache-add', 'Cache: add')}} | {{Spec2('Service Workers')}} | Définition initiale. | -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

{{Compat("api.Cache.add")}}

+{{Compat("api.Cache.add")}} -

Voir aussi

+## Voir aussi - +- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers) +- {{domxref("Cache")}} +- {{domxref("WorkerGlobalScope.caches")}} diff --git a/files/fr/web/api/cache/addall/index.md b/files/fr/web/api/cache/addall/index.md index 98f5111d78..5e78e53925 100644 --- a/files/fr/web/api/cache/addall/index.md +++ b/files/fr/web/api/cache/addall/index.md @@ -13,58 +13,62 @@ tags: - addAll translation_of: Web/API/Cache/addAll --- -

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

+{{APIRef("Service Workers API")}}{{SeeCompatTable}} -

La méthode addAll() de l'interface {{domxref("Cache")}} accepte un tableau d'URLS, les récupères, et ajoute les objets réponse qui en résultent au cache en question. Les objets requêtes crées pendant la phase de récupération deviennent des clés vers les opérations de réponse stockées. 

+La méthode **`addAll()`** de l'interface {{domxref("Cache")}} accepte un tableau d'URLS, les récupères, et ajoute les objets réponse qui en résultent au cache en question. Les objets requêtes crées pendant la phase de récupération deviennent des clés vers les opérations de réponse stockées. -
-

Note : addAll() écrasera toute paire clé/valeur précedemment stockée en cache et qui correspond à une requête, mais échouera si l'opération put() ainsi créée devrait engendrer l'éffacement d'une entrée cache créée par la même méthode addAll().

-
+> **Note :** `addAll()` écrasera toute paire clé/valeur précedemment stockée en cache et qui correspond à une requête, mais échouera si l'opération `put() `ainsi créée devrait engendrer l'éffacement d'une entrée cache créée par la même méthode `addAll()`. -

Syntaxe

+## Syntaxe -
cache.addAll(requests[]).then(function() {
+```js
+cache.addAll(requests[]).then(function() {
   //requests have been added to the cache
 });
-
+``` -

Paramètres

+### Paramètres -
-
requests
-
Un tableau d'objets {{domxref("Request", "Requête")}} à ajouter au cache.
-
+- requests + - : Un tableau d'objets {{domxref("Request", "Requête")}} à ajouter au cache. -

Retour

+### Retour -

Une {{jsxref("Promise", "Promesse")}} qui est résolue en void.

+Une {{jsxref("Promise", "Promesse")}} qui est résolue en void. -

Exceptions

+### Exceptions - - - - - - - - - - - - + + + + + + + + + + + +
ExceptionArrive quand
TypeError -

Le schéma d'URL n'est pas http ou https.

- -

Le statut de la réponse n'est pas dans les 200 (i.e., une requête qui a échoué.) Cela peut arriver si la requête échoue, mais également si la requête est une cross-origin no-cors (auquel cas le statut retourné est systématiquement 0.)

-
ExceptionArrive quand
TypeError +

+ Le schéma d'URL n'est pas http ou https. +

+

+ Le statut de la réponse n'est pas dans les 200 (i.e., une requête qui + a échoué.) Cela peut arriver si la requête échoue, mais également si + la requête est une cross-origin no-cors (auquel cas le statut + retourné est systématiquement 0.) +

+
-

Exemples

+## **Exemples** -

Ce bloc de code attends le déclenchement d'un {{domxref("InstallEvent")}}, puis lance {{domxref("ExtendableEvent.waitUntil","waitUntil")}} qui gère la phase d'installation de l'application. Cela consite à appeler {{domxref("CacheStorage.open")}} afin de créer un nouveau cache, puis à utiliser addAll() pour y ajouter une série de ressources.

+Ce bloc de code attends le déclenchement d'un {{domxref("InstallEvent")}}, puis lance {{domxref("ExtendableEvent.waitUntil","waitUntil")}} qui gère la phase d'installation de l'application. Cela consite à appeler {{domxref("CacheStorage.open")}} afin de créer un nouveau cache, puis à utiliser `addAll()` pour y ajouter une série de ressources. -
this.addEventListener('install', function(event) {
+```js
+this.addEventListener('install', function(event) {
   event.waitUntil(
     caches.open('v1').then(function(cache) {
       return cache.addAll([
@@ -82,33 +86,20 @@ translation_of: Web/API/Cache/addAll
     })
   );
 });
-
+``` -

Spécifications

+## Spécifications - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#dom-cache-addall', 'Cache: addAll')}}{{Spec2('Service Workers')}}Définition initiale.
+| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- | +| {{SpecName('Service Workers', '#dom-cache-addall', 'Cache: addAll')}} | {{Spec2('Service Workers')}} | Définition initiale. | -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

{{Compat("api.Cache.addAll")}}

+{{Compat("api.Cache.addAll")}} -

Voir aussi

+## Voir aussi - +- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers) +- {{domxref("Cache")}} +- {{domxref("WorkerGlobalScope.caches")}} diff --git a/files/fr/web/api/cache/delete/index.md b/files/fr/web/api/cache/delete/index.md index 5100ece8c8..1409dbfa4b 100644 --- a/files/fr/web/api/cache/delete/index.md +++ b/files/fr/web/api/cache/delete/index.md @@ -12,70 +12,57 @@ tags: - delete translation_of: Web/API/Cache/delete --- -

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

+{{APIRef("Service Workers API")}}{{SeeCompatTable}} -

La méthode delete() de l'interface {{domxref("Cache")}} cherche l'entrée {{domxref("Cache")}} dont la clé est la requête passée en argument, et retourne une {{jsxref("Promise", "Promesse")}}. Si une entrée {{domxref("Cache")}} est trouvée, elle est supprimée, et la promesse est résolue à true. Dans le cas contraire, la promesse est résolue à false.

+La méthode **`delete()`** de l'interface {{domxref("Cache")}} cherche l'entrée {{domxref("Cache")}} dont la clé est la requête passée en argument, et retourne une {{jsxref("Promise", "Promesse")}}. Si une entrée {{domxref("Cache")}} est trouvée, elle est supprimée, et la promesse est résolue à `true`. Dans le cas contraire, la promesse est résolue à `false`. -

Syntaxe

+## Syntaxe -
cache.delete(request,{options}).then(function(true) {
+```js
+cache.delete(request,{options}).then(function(true) {
   //your cache entry has been deleted
 });
-
+``` -

Paramètres

+### Paramètres -
-
request
-
La {{domxref("Request", "Requête")}} à supprimer.
-
options {{optional_inline}}
-
Un objet dont les paramètres contrôlent comment le matching est effectué lors de l'opération de delete. Les options disponibles sont : -
    -
  • ignoreSearch: Un {{domxref("Boolean")}} qui spécifie si le matching doit ignorer ou non la query string dans l'url.  Si mis à true, la partie ?value=bar de l'url http://foo.com/?value=bar sera ignorée lors du matching. Est à false par défaut.
    • -
  • ignoreMethod: Un {{domxref("Boolean")}} qui, quand mis à true, empêche les opérations de matching de valider la méthode HTTP de la {{domxref("Request", "Requête")}} (en temps normal, seules GET et HEAD sont autorisées.) Est à  false par défaut.
    • -
  • ignoreVary: Un {{domxref("Boolean")}} qui, quand mis à true, indique à l'opération de matching de ne pas effectuer le matching VARY des header.  En d'autres termes, si l'URL correspond, un match sera obtenu peu importe que la {{domxref("Response", "Réponse")}} ait un header VARY ou non. Est à false par défaut.
    • -
  • cacheName: Une {{domxref("DOMString")}} qui représente un cache spécifique où effectuer la recherche. A noter que cette option est ignorée par Cache.delete().
    • -
-
-
+- request + - : La {{domxref("Request", "Requête")}} à supprimer. +- options {{optional_inline}} -

Retour

+ - : Un objet dont les paramètres contrôlent comment le matching est effectué lors de l'opération de `delete`. Les options disponibles sont : -

Une {{jsxref("Promise", "Promesse")}} qui est résolue à true si l'entrée de cache est supprimée, ou à false dans le cas contraire.

+ - `ignoreSearch`: Un {{domxref("Boolean")}} qui spécifie si le matching doit ignorer ou non la query string dans l'url.  Si mis à `true`, la partie `?value=bar` de l'url `http://foo.com/?value=bar` sera ignorée lors du matching. Est à `false` par défaut. + - `ignoreMethod`: Un {{domxref("Boolean")}} qui, quand mis à `true`, empêche les opérations de matching de valider la méthode `HTTP` de la {{domxref("Request", "Requête")}} (en temps normal, seules `GET` et `HEAD` sont autorisées.) Est à  `false` par défaut. + - `ignoreVary`: Un {{domxref("Boolean")}} qui, quand mis à `true,` indique à l'opération de matching de ne pas effectuer le matching `VARY` des header.  En d'autres termes, si l'URL correspond, un match sera obtenu peu importe que la {{domxref("Response", "Réponse")}} ait un header `VARY` ou non. Est à `false` par défaut. + - `cacheName`: Une {{domxref("DOMString")}} qui représente un cache spécifique où effectuer la recherche. A noter que cette option est ignorée par `Cache.delete()`. -

Exemples

+### Retour -
caches.open('v1').then(function(cache) {
+Une {{jsxref("Promise", "Promesse")}} qui est résolue à `true` si l'entrée de cache est supprimée, ou à `false` dans le cas contraire.
+
+## Exemples
+
+```js
+caches.open('v1').then(function(cache) {
   cache.delete('/images/image.png').then(function(response) {
     someUIUpdateFunction();
   });
-})
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaires
{{SpecName('Service Workers', '#dom-cache-delete', 'Cache: delete')}}{{Spec2('Service Workers')}}Définition initiale.
- -

Compatibilités des navigateurs

- -

{{Compat("api.Cache.delete")}}

- -

Voir aussi

- - +}) +``` + +## Spécifications + +| Spécification | Statut | Commentaires | +| -------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- | +| {{SpecName('Service Workers', '#dom-cache-delete', 'Cache: delete')}} | {{Spec2('Service Workers')}} | Définition initiale. | + +## Compatibilités des navigateurs + +{{Compat("api.Cache.delete")}} + +## Voir aussi + +- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers) +- {{domxref("Cache")}} +- {{domxref("WorkerGlobalScope.caches")}} diff --git a/files/fr/web/api/cache/index.md b/files/fr/web/api/cache/index.md index 384689d3fa..b53c794c91 100644 --- a/files/fr/web/api/cache/index.md +++ b/files/fr/web/api/cache/index.md @@ -13,60 +13,51 @@ tags: - hors ligne translation_of: Web/API/Cache --- -

{{APIRef("Service Workers API")}} {{SeeCompatTable}}

+{{APIRef("Service Workers API")}} {{SeeCompatTable}} -

L'interface Cache fournit un mécanisme de stockage pour les paires d'objets Request/Response qui sont mises en cache, par exemple dans le cadre du cycle de vie {{domxref("ServiceWorker")}}. Il est à noter que l'interface Cache est exposée à des portées fenêtrées ainsi qu'à des service workers. Vous n'êtes pas obligé de l'utiliser avec des services workers, même si elle est définie dans la spécification relative aux services workers.

+L'interface `Cache` fournit un mécanisme de stockage pour les paires d'objets [`Request`](http://fetch.spec.whatwg.org/#request)/[`Response`](http://fetch.spec.whatwg.org/#response) qui sont mises en cache, par exemple dans le cadre du cycle de vie {{domxref("ServiceWorker")}}. Il est à noter que l'interface `Cache` est exposée à des portées fenêtrées ainsi qu'à des service workers. Vous n'êtes pas obligé de l'utiliser avec des services workers, même si elle est définie dans la spécification relative aux services workers. -

Une origine peut avoir plusieurs objets nommés Cache. Vous êtes responsable de l'implémentation de la manière dont votre script (par exemple dans un {{domxref("ServiceWorker")}}) gère les mises à jour du cache. Les éléments d'un cache ne sont pas mis à jour, sauf demande explicite ; ils n'expirent pas, sauf s'ils sont supprimés. Utilisez {{domxref("CacheStorage.open", "CacheStorage.open()")}} pour ouvrir un objet Cache spécifique et appelez ensuite l'une des méthodes Cache pour maintenir le Cache.

+Une origine peut avoir plusieurs objets nommés `Cache`. Vous êtes responsable de l'implémentation de la manière dont votre script (par exemple dans un {{domxref("ServiceWorker")}}) gère les mises à jour du cache. Les éléments d'un cache ne sont pas mis à jour, sauf demande explicite ; ils n'expirent pas, sauf s'ils sont supprimés. Utilisez {{domxref("CacheStorage.open", "CacheStorage.open()")}} pour ouvrir un objet `Cache` spécifique et appelez ensuite l'une des méthodes `Cache` pour maintenir le `Cache`. -

Vous êtes également responsable de la purge périodique des entrées du cache. Chaque navigateur a une limite stricte sur la quantité de mémoire cache qu'une origine donnée peut utiliser. Les estimations de l'utilisation du quota de cache sont disponibles via le lien {{domxref("StorageEstimate")}} API. Le navigateur fait de son mieux pour gérer l'espace disque, mais il peut supprimer le stockage en cache d'une origine. Le navigateur supprime généralement toutes les données d'une origine ou aucune des données d'une origine. Veillez à nommer les caches et à n'utiliser les caches qu'à partir de la version du script sur laquelle ils peuvent fonctionner en toute sécurité. Pour plus d'informations, voir Suppression des anciens caches.

+Vous êtes également responsable de la purge périodique des entrées du cache. Chaque navigateur a une limite stricte sur la quantité de mémoire cache qu'une origine donnée peut utiliser. Les estimations de l'utilisation du quota de cache sont disponibles via le lien {{domxref("StorageEstimate")}} API. Le navigateur fait de son mieux pour gérer l'espace disque, mais il peut supprimer le stockage en cache d'une origine. Le navigateur supprime généralement toutes les données d'une origine ou aucune des données d'une origine. Veillez à nommer les caches et à n'utiliser les caches qu'à partir de la version du script sur laquelle ils peuvent fonctionner en toute sécurité. Pour plus d'informations, voir [Suppression des anciens caches](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers#Supprimer_les_anciens_caches). -
-

Note : Les implémentations initiales du cache (dans Blink et Gecko) résolvent les engagements {{domxref("Cache.add()")}}, {{domxref("Cache.addAll()")}}, et {{domxref("Cache.put()")}} lorsque le corps de la réponse est entièrement écrit sur le stockage. Des versions plus récentes de la spécification précisent que le navigateur peut résoudre la promesse dès que l'entrée est enregistrée dans la base de données, même si le corps de réponse est encore en cours d'écriture.

-
+> **Note :** Les implémentations initiales du cache (dans Blink et Gecko) résolvent les engagements {{domxref("Cache.add()")}}, {{domxref("Cache.addAll()")}}, et {{domxref("Cache.put()")}} lorsque le corps de la réponse est entièrement écrit sur le stockage. Des versions plus récentes de la spécification précisent que le navigateur peut résoudre la promesse dès que l'entrée est enregistrée dans la base de données, même si le corps de réponse est encore en cours d'écriture. -
-

Note : L'algorithme des correspondances de clés est dépendant de la valeur de l'en-tête VARY. Ainsi, pour faire correspondre une nouvelle clé, il faut examiner à la fois la clé et la valeur des entrées dans le Cache.

-
+> **Note :** L'algorithme des correspondances de clés est dépendant de la valeur de l'[en-tête VARY](https://www.fastly.com/blog/best-practices-using-vary-header). Ainsi, pour faire correspondre une nouvelle clé, il faut examiner à la fois la clé et la valeur des entrées dans le Cache. -
-

Note : L'API de mise en cache n'honore pas les en-têtes de mise en cache HTTP.

-
+> **Note :** L'API de mise en cache n'honore pas les en-têtes de mise en cache HTTP. -

Méthodes

+## Méthodes -
-
{{domxref("Cache.match", "Cache.match(request, options)")}} {{experimental_inline}}
-
Retourne une {{jsxref("Promise" , "Promesse" )}} qui se résout en une réponse associée à la première requête correspondante dans l'objet {{domxref("Cache")}}.
-
{{domxref("Cache.matchAll", "Cache.matchAll(request, options)")}} {{experimental_inline}}
-
Retourne une {{jsxref("Promise" , "Promesse" )}} qui se résout en un tableau de toutes les requêtes correspondantes dans l'objet {{domxref("Cache")}}.
-
{{domxref("Cache.add", "Cache.add(request)")}} {{experimental_inline}}
-
Prend une URL, la récupère et ajoute l'objet réponse associé au cache donné. C'est une fonctionnalité équivalente à l'appel de fetch(), puis à l'utilisation de Cache.put() pour ajouter les résultats  au cache.
-
{{domxref("Cache.addAll", "Cache.addAll(requests)")}} {{experimental_inline}}
-
Prend un tableau d'URLs, les récupère, et ajoute les objets réponses associés au cache donné.
-
{{domxref("Cache.put", "Cache.put(request, response)")}} {{experimental_inline}}
-
Prend à la fois une requête et sa réponse et l'ajoute au cache donné.
-
{{domxref("Cache.delete", "Cache.delete(request, options)")}} {{experimental_inline}}
-
Trouve l'entrée {{domxref("Cache")}} dont la clé est la requête, et le cas échéant, supprime l'entrée {{domxref("Cache")}} et retourne une {{jsxref("Promise" , "Promesse" )}} qui se résout à true. Si aucune entrée {{domxref("Cache")}} n'est trouvée, elle retourne false.
-
{{domxref("Cache.keys", "Cache.keys(request, options)")}} {{experimental_inline}}
-
Retourne une {{jsxref("Promise" , "Promesse" )}} qui se résout en un tableau clés {{domxref("Cache")}}.
-
+- {{domxref("Cache.match", "Cache.match(request, options)")}} {{experimental_inline}} + - : Retourne une {{jsxref("Promise" , "Promesse" )}} qui se résout en une réponse associée à la première requête correspondante dans l'objet {{domxref("Cache")}}. +- {{domxref("Cache.matchAll", "Cache.matchAll(request, options)")}} {{experimental_inline}} + - : Retourne une {{jsxref("Promise" , "Promesse" )}} qui se résout en un tableau de toutes les requêtes correspondantes dans l'objet {{domxref("Cache")}}. +- {{domxref("Cache.add", "Cache.add(request)")}} {{experimental_inline}} + - : Prend une URL, la récupère et ajoute l'objet réponse associé au cache donné. C'est une fonctionnalité équivalente à l'appel de fetch(), puis à l'utilisation de Cache.put() pour ajouter les résultats  au cache. +- {{domxref("Cache.addAll", "Cache.addAll(requests)")}} {{experimental_inline}} + - : Prend un tableau d'URLs, les récupère, et ajoute les objets réponses associés au cache donné. +- {{domxref("Cache.put", "Cache.put(request, response)")}} {{experimental_inline}} + - : Prend à la fois une requête et sa réponse et l'ajoute au cache donné. +- {{domxref("Cache.delete", "Cache.delete(request, options)")}} {{experimental_inline}} + - : Trouve l'entrée {{domxref("Cache")}} dont la clé est la requête, et le cas échéant, supprime l'entrée {{domxref("Cache")}} et retourne une {{jsxref("Promise" , "Promesse" )}} qui se résout à `true`. Si aucune entrée {{domxref("Cache")}} n'est trouvée, elle retourne `false`. +- {{domxref("Cache.keys", "Cache.keys(request, options)")}} {{experimental_inline}} + - : Retourne une {{jsxref("Promise" , "Promesse" )}} qui se résout en un tableau clés {{domxref("Cache")}}. -

Exemples

+## Exemples -

Cet extrait de code provient de l'exemple de mise en cache sélective. (voir selective caching live) Le code utilise {{domxref("CacheStorage.open", "CacheStorage.open(cacheName)")}} pour ouvrir tous les objets {{domxref("Cache")}} avec un en-tête Content-Type qui débute par font/.

+Cet extrait de code provient de [l'exemple de mise en cache sélective](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/selective-caching/service-worker.js). (voir [selective caching live](https://googlechrome.github.io/samples/service-worker/selective-caching/)) Le code utilise {{domxref("CacheStorage.open", "CacheStorage.open(cacheName)")}} pour ouvrir tous les objets {{domxref("Cache")}} avec un en-tête Content-Type qui débute par `font/`. -

Le code utilise alors {{domxref("Cache.match", "Cache.match(request, options)")}} pour voir s'il y a déjà une fonte correspondante dans le cache, et le cas échéant, la retourne. S'il n'y a pas de correspondance, le code récupère la fonte à partir du réseau et utilise {{domxref("Cache.put","Cache.put(request, response)")}} pour mettre en cache la ressource récupérée.

+Le code utilise alors {{domxref("Cache.match", "Cache.match(request, options)")}} pour voir s'il y a déjà une fonte correspondante dans le cache, et le cas échéant, la retourne. S'il n'y a pas de correspondance, le code récupère la fonte à partir du réseau et utilise {{domxref("Cache.put","Cache.put(request, response)")}} pour mettre en cache la ressource récupérée. -

Le code gère les exceptions déclenchées par l'opération de {{domxref("Globalfetch.fetch","fetch()")}}. A noter qu'une réponse HTTP en erreur (e.g., 404) ne déclenchera pas une exception. Elle retournera un objet de réponse normal qui dispose du code d'erreur approprié.

+Le code gère les exceptions déclenchées par l'opération de {{domxref("Globalfetch.fetch","fetch()")}}. A noter qu'une réponse HTTP en erreur (e.g., 404) ne déclenchera pas une exception. Elle retournera un objet de réponse normal qui dispose du code d'erreur approprié. -

Cet extrait de code illustre également une bonne pratique pour versionner les caches utilisés par le service worker. Bien qu'il y ait seulement un cache dans cet exemple, la même approche peut être utilisée pour des caches multiples. Il associe un identifiant  court avec un nom de cache versionné et spécifique. Le code supprime aussi tous les caches qui ne sont pas nommés dans CURRENT_CACHES.

+Cet extrait de code illustre également une bonne pratique pour versionner les caches utilisés par le service worker. Bien qu'il y ait seulement un cache dans cet exemple, la même approche peut être utilisée pour des caches multiples. Il associe un identifiant  court avec un nom de cache versionné et spécifique. Le code supprime aussi tous les caches qui ne sont pas nommés dans `CURRENT_CACHES`. -
-

Note: In Chrome, visit chrome://inspect/#service-workers and click on the "inspect" link below the registered service worker to view logging statements for the various actions the service-worker.js script is performing.

-
+> **Note :** In Chrome, visit chrome://inspect/#service-workers and click on the "inspect" link below the registered service worker to view logging statements for the various actions the [service-worker.js](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/selective-caching/service-worker.js) script is performing. -
var CACHE_VERSION = 1;
+```js
+var CACHE_VERSION = 1;
 
 // Shorthand identifier mapped to specific versioned cache.
 var CURRENT_CACHES = {
@@ -116,39 +107,27 @@ self.addEventListener('fetch', function(event) {
       });
     })
   );
-});
- -

Storing cookies in Caches

- -

L'API Fetch exige que les en-têtes {{httpheader("Set-Cookie")}} soient supprimés avant de renvoyer un objet {{domxref("Response")}} à partir de {{domxref("WindowOrWorkerGlobalScope", "fetch()")}}. Ainsi, une réponse stockée dans un cache ne contiendra pas d'en-têtes.

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#cache', 'Cache')}}{{Spec2('Service Workers')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Cache")}}

- -

Voir aussi

- - +}); +``` + +### Storing cookies in Caches + +L'[API Fetch](/fr/docs/Web/API/Fetch_API) exige que les en-têtes {{httpheader("Set-Cookie")}} soient supprimés avant de renvoyer un objet {{domxref("Response")}} à partir de {{domxref("WindowOrWorkerGlobalScope", "fetch()")}}. Ainsi, une réponse stockée dans un cache ne contiendra pas d'en-têtes. + +## Spécifications + +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------- | ------------------------------------ | -------------------- | +| {{SpecName('Service Workers', '#cache', 'Cache')}} | {{Spec2('Service Workers')}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("api.Cache")}} + +## Voir aussi + +- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers) +- [Code d'exemple basique de Service workers](https://github.com/mdn/sw-test) +- [Le ServiceWorker est prêt ?](https://jakearchibald.github.io/isserviceworkerready/) +- {{jsxref("Promise" , "Promesse" )}} +- [Utilisation des Web Workers](/fr/docs/Web/API/Web_Workers_API/Utilisation_des_web_workers) diff --git a/files/fr/web/api/cache/keys/index.md b/files/fr/web/api/cache/keys/index.md index faabe1581d..617e1aa4e7 100644 --- a/files/fr/web/api/cache/keys/index.md +++ b/files/fr/web/api/cache/keys/index.md @@ -12,78 +12,63 @@ tags: - keys translation_of: Web/API/Cache/keys --- -

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

+{{APIRef("Service Workers API")}}{{SeeCompatTable}} -

La méthode keys() de l'interface {{domxref("Cache")}} retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de clé de {{domxref("Cache")}}.

+La méthode **`keys()`** de l'interface {{domxref("Cache")}} retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de clé de {{domxref("Cache")}}. -

Les requêtes sont retournées dans le même ordre que l'ordre d'insertion.

+Les requêtes sont retournées dans le même ordre que l'ordre d'insertion. -
-

Note : Les requêtes avec des URLs déjà présentes mais des headers différents peuvent être retournées si leurs réponses comportent le header VARY.

-
+> **Note :** Les requêtes avec des URLs déjà présentes mais des headers différents peuvent être retournées si leurs réponses comportent le header `VARY`. -

Syntaxe

+## Syntaxe -
cache.keys(request,{options}).then(function(response) {
+```js
+cache.keys(request,{options}).then(function(response) {
   // fait quelque chose avec votre tableau de réponses
 });
-
+``` -

Paramètres

+### Paramètres -
-
request {{optional_inline}}
-
La {{domxref("Request", "Requête")}} à retourner, si une clé en particulier est désirée.
-
options {{optional_inline}}
-

Un objet dont les paramètres contrôlent comment le matching est effectué lors de l'opération keys. Les options disponibles sont :

-
    -
  • ignoreSearch: Un {{domxref("Boolean")}} qui spécifie si le matching doit ignorer ou non la query string dans l'url.  Si mis à true, la partie ?value=bar de l'url http://foo.com/?value=bar sera ignorée lors du matching. Est à false par défaut.
    • -
  • ignoreMethod: Un {{domxref("Boolean")}} qui, quand mis à true, empêche les opérations de matching de valider la méthode HTTP de la {{domxref("Request", "Requête")}} (en temps normal, seules GET et HEAD sont autorisées). Est à  false par défaut.
    • -
  • ignoreVary: Un {{domxref("Boolean")}} qui, quand mis à true, indique à l'opération de matching de ne pas effectuer le matching VARY des header.  En d'autres termes, si l'URL correspond, un match sera obtenu peu importe que la {{domxref("Response", "Réponse")}} ait un header VARY ou non. Est à false par défaut.
    • -
  • cacheName: Une {{domxref("DOMString")}} qui représente un cache spécifique où effectuer la recherche. A noter que cette option est ignorée par Cache.keys().
    • -
-
-
+- request {{optional_inline}} + - : La {{domxref("Request", "Requête")}} à retourner, si une clé en particulier est désirée. +- options {{optional_inline}} -

Retour

+ - : Un objet dont les paramètres contrôlent comment le matching est effectué lors de l'opération `keys`. Les options disponibles sont : -

Une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de clé de {{domxref("Cache")}}.

+ - `ignoreSearch`: Un {{domxref("Boolean")}} qui spécifie si le matching doit ignorer ou non la query string dans l'url.  Si mis à `true`, la partie `?value=bar` de l'url `http://foo.com/?value=bar` sera ignorée lors du matching. Est à `false` par défaut. + - `ignoreMethod`: Un {{domxref("Boolean")}} qui, quand mis à `true`, empêche les opérations de matching de valider la méthode `HTTP` de la {{domxref("Request", "Requête")}} (en temps normal, seules `GET` et `HEAD` sont autorisées). Est à  `false` par défaut. + - `ignoreVary`: Un {{domxref("Boolean")}} qui, quand mis à `true,` indique à l'opération de matching de ne pas effectuer le matching `VARY` des header.  En d'autres termes, si l'URL correspond, un match sera obtenu peu importe que la {{domxref("Response", "Réponse")}} ait un header `VARY` ou non. Est à `false` par défaut. + - `cacheName`: Une {{domxref("DOMString")}} qui représente un cache spécifique où effectuer la recherche. A noter que cette option est ignorée par `Cache.keys()`. -

Exemples

+### Retour -
caches.open('v1').then(function(cache) {
+Une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de clé de {{domxref("Cache")}}.
+
+## Exemples
+
+```js
+caches.open('v1').then(function(cache) {
   cache.keys().then(function(keys) {
     keys.forEach(function(request, index, array) {
       cache.delete(request);
     });
   });
-})
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#dom-cache-keys', 'Cache: keys')}}{{Spec2('Service Workers')}}Définition initiale.
- -

Compatibilités des navigateurs

- -

{{Compat("api.Cache.keys")}}

- -

Voir aussi

- - +}) +``` + +## Spécifications + +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- | +| {{SpecName('Service Workers', '#dom-cache-keys', 'Cache: keys')}} | {{Spec2('Service Workers')}} | Définition initiale. | + +## Compatibilités des navigateurs + +{{Compat("api.Cache.keys")}} + +## Voir aussi + +- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers) +- {{domxref("Cache")}} +- {{domxref("WorkerGlobalScope.caches")}} diff --git a/files/fr/web/api/cache/match/index.md b/files/fr/web/api/cache/match/index.md index 7867ba79a6..592ec9f804 100644 --- a/files/fr/web/api/cache/match/index.md +++ b/files/fr/web/api/cache/match/index.md @@ -13,51 +13,48 @@ tags: - match translation_of: Web/API/Cache/match --- -

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

+{{APIRef("Service Workers API")}}{{SeeCompatTable}} -

La méthode match() de l'interface {{domxref("Cache")}} retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en une {{domxref("Response", "Réponse")}} associée à la première requête qui match dans l'objet {{domxref("Cache")}}. Si aucune requête n'est trouvée, la {{jsxref("Promise", "Promesse")}} est résolue en {{jsxref("undefined")}}.

+La méthode **`match()`** de l'interface {{domxref("Cache")}} retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en une {{domxref("Response", "Réponse")}} associée à la première requête qui match dans l'objet {{domxref("Cache")}}. Si aucune requête n'est trouvée, la {{jsxref("Promise", "Promesse")}} est résolue en {{jsxref("undefined")}}. -

Syntaxe

+## Syntaxe -
cache.match(request,{options}).then(function(response) {
+```js
+cache.match(request,{options}).then(function(response) {
   // faire quelque chose avec la réponse
 });
-
+``` -

Paramètres

+### Paramètres -
-
request
-
La {{domxref("Request")}} à trouver dans le {{domxref("Cache")}}.
-
options {{optional_inline}}
-
Un objet qui définit des options pour l'opération de match. Les options disponibles sont les suivantes : -
    -
  • ignoreSearch: Un {{domxref("Boolean")}} qui spécifie si le matching doit ignorer ou non la query string dans l'url.  Si mis à true, la partie ?value=bar de l'url http://foo.com/?value=bar sera ignorée lors du matching. Est à false par défaut.
    • -
  • ignoreMethod: Un {{domxref("Boolean")}} qui, quand mis à true, empêche les opérations de matching de valider la méthode HTTP de la {{domxref("Request", "Requête")}} (en temps normal, seules GET et HEAD sont autorisées.) Est à  false par défaut.
    • -
  • ignoreVary: Un {{domxref("Boolean")}} qui, quand mis à true, indique à l'opération de matching de ne pas effectuer le matching VARY des header.  En d'autres termes, si l'URL correspond, un match sera obtenu peu importe que la {{domxref("Response", "Réponse")}} ait un header VARY ou non. Est à false par défaut.
    • -
-
-
+- request + - : La {{domxref("Request")}} à trouver dans le {{domxref("Cache")}}. +- options {{optional_inline}} -

Retour

+ - : Un objet qui définit des options pour l'opération de `match`. Les options disponibles sont les suivantes : -

Une {{jsxref("Promise", "Promesse")}} qui est résolue en la première {{domxref("Response", "Réponse")}} qui match la requête, ou en {{jsxref("undefined")}} si aucune requête n'est trouvée.

+ - `ignoreSearch`: Un {{domxref("Boolean")}} qui spécifie si le matching doit ignorer ou non la query string dans l'url.  Si mis à `true`, la partie `?value=bar` de l'url `http://foo.com/?value=bar` sera ignorée lors du matching. Est à `false` par défaut. + - `ignoreMethod`: Un {{domxref("Boolean")}} qui, quand mis à `true`, empêche les opérations de matching de valider la méthode `HTTP` de la {{domxref("Request", "Requête")}} (en temps normal, seules `GET` et `HEAD` sont autorisées.) Est à  `false` par défaut. + - `ignoreVary`: Un {{domxref("Boolean")}} qui, quand mis à `true,` indique à l'opération de matching de ne pas effectuer le matching `VARY` des header.  En d'autres termes, si l'URL correspond, un match sera obtenu peu importe que la {{domxref("Response", "Réponse")}} ait un header `VARY` ou non. Est à `false` par défaut. -
-

Note : Cache.match() est quasiment identique à {{domxref("Cache.matchAll()")}}, si ce n'est qu'elle est résolue en response[0] (la première réponse qui matche) plutôt que response[] (un tableau de toutes les réponses qui matchent).

-
+### Retour -

Exemples

+Une {{jsxref("Promise", "Promesse")}} qui est résolue en la première {{domxref("Response", "Réponse")}} qui match la requête, ou en {{jsxref("undefined")}} si aucune requête n'est trouvée. -

Cet exemple est extrait de l'exemple Page hors ligne custom (demo).

+> **Note :** `Cache.match()` est quasiment identique à {{domxref("Cache.matchAll()")}}, si ce n'est qu'elle est résolue en `response[0]` (la première réponse qui matche) plutôt que `response[]` (un tableau de toutes les réponses qui matchent). -

L'exemple suivant se sert d'un cache pour fournir les données demandées même quand une requête échoue. Une clause catch() est déclenchée quand l'appel à fetch() lève une exception. A l'intérieur de la clause catch(), match() est utilisée to pour retourner la réponse appropriée.

+## Exemples -

Dans cet exemple, nous avons décidé que seul les documents HTML récupérés via le verbe HTTP GET seront mis en cache. Si notre condition if() est false, le gestionnaire fetch n'intercepte pas la requête. Si d'autres gestionnaires fetch sont enregistrés, ils ont une occasion d'appeler event.respondWith(). Si aucun gestionnaire fetch ne décide d'appeler event.respondWith(), la requête sera gérée par le navigateur comme si les service workers n'avaient pas existé. Si fetch() retourne une réponse HTTP valide avec un code réponse dans les 4xx ou 5xx, la clause catch() ne sera PAS appelée. 

+Cet exemple est extrait de l'exemple [Page hors ligne custom](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/custom-offline-page/service-worker.js) ([demo](https://googlechrome.github.io/samples/service-worker/custom-offline-page/index.html)). -
self.addEventListener('fetch', function(event) {
+L'exemple suivant se sert d'un cache pour fournir les données demandées même quand une requête échoue. Une clause `catch()` est déclenchée quand l'appel à `fetch()` lève une exception. A l'intérieur de la clause `catch()`, `match()` est utilisée to pour retourner la réponse appropriée.
+
+Dans cet exemple, nous avons décidé que seul les documents HTML récupérés via le verbe HTTP GET seront mis en cache. Si notre condition `if()` est false, le gestionnaire fetch n'intercepte pas la requête. Si d'autres gestionnaires fetch sont enregistrés, ils ont une occasion d'appeler `event.respondWith()`. Si aucun gestionnaire fetch ne décide d'appeler `event.respondWith()`, la requête sera gérée par le navigateur comme si les service workers n'avaient pas existé. Si `fetch()` retourne une réponse HTTP valide avec un code réponse dans les 4xx ou 5xx, la clause `catch()` ne sera PAS appelée.
+
+```js
+self.addEventListener('fetch', function(event) {
   // We only want to call event.respondWith() if this is a GET request for an HTML document.
-  if (event.request.method === 'GET' &&
+  if (event.request.method === 'GET' &&
       event.request.headers.get('accept').indexOf('text/html') !== -1) {
     console.log('Handling fetch event for', event.request.url);
     event.respondWith(
@@ -69,33 +66,21 @@ translation_of: Web/API/Cache/match
       })
     );
   }
-});
- -

Spécifications

- - - - - - - - - - - - - - -
SpecificationStatutCommentaire
{{SpecName('Service Workers', '#dom-cache-match', 'Cache match')}}{{Spec2('Service Workers')}}Définition initiale.
- -

Compatibilités des navigateurs

- -

{{Compat("api.Cache.match")}}

- -

Voir aussi

- - +}); +``` + +## Spécifications + +| Specification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- | +| {{SpecName('Service Workers', '#dom-cache-match', 'Cache match')}} | {{Spec2('Service Workers')}} | Définition initiale. | + +## Compatibilités des navigateurs + +{{Compat("api.Cache.match")}} + +## Voir aussi + +- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers) +- {{domxref("Cache")}} +- {{domxref("WorkerGlobalScope.caches")}} diff --git a/files/fr/web/api/cache/matchall/index.md b/files/fr/web/api/cache/matchall/index.md index 86d1dad2bf..94f271b928 100644 --- a/files/fr/web/api/cache/matchall/index.md +++ b/files/fr/web/api/cache/matchall/index.md @@ -13,75 +13,60 @@ tags: - matchAll translation_of: Web/API/Cache/matchAll --- -

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

+{{APIRef("Service Workers API")}}{{SeeCompatTable}} -

La méthode matchAll() de l'interface {{domxref("Cache")}} retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de toutes les requêtes qui matchent dans l'objet {{domxref("Cache")}}.

+La méthode **`matchAll()`** de l'interface {{domxref("Cache")}} retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de toutes les requêtes qui matchent dans l'objet {{domxref("Cache")}}. -

Syntaxe

+## Syntaxe -
cache.matchAll(request,{options}).then(function(response) {
+```js
+cache.matchAll(request,{options}).then(function(response) {
   // faire quelque chose avec le tableau des réponses
 });
-
+``` -

Paramètres

+### Paramètres -
-
request
-
La {{domxref("Request", "Requête")}} à trouver dans le {{domxref("Cache")}}.
-
options {{optional_inline}}
-

Un objet d'options vous permettant de définir des options de contrôle spécifiques pour la correspondance effectuée. Les options disponibles sont les suivantes :

-
    -
  • ignoreSearch: Un {{domxref("Boolean")}} qui spécifie si le matching doit ignorer ou non la query string dans l'url.  Si mis à true, la partie ?value=bar de l'url http://foo.com/?value=bar sera ignorée lors du matching. Est à false par défaut.
    • -
  • ignoreMethod: Un {{domxref("Boolean")}} qui, quand mis à true, empêche les opérations de matching de valider la méthode HTTP de la {{domxref("Request", "Requête")}} (en temps normal, seules GET et HEAD sont autorisées.) Est à  false par défaut.
    • -
  • ignoreVary: Un {{domxref("Boolean")}} qui, quand mis à true, indique à l'opération de matching de ne pas effectuer le matching VARY des header.  En d'autres termes, si l'URL correspond, un match sera obtenu peu importe que la {{domxref("Response", "Réponse")}} ait un header VARY ou non. Est à false par défaut.
    • -
-
-
+- request + - : La {{domxref("Request", "Requête")}} à trouver dans le {{domxref("Cache")}}. +- options {{optional_inline}} -

Retour

+ - : Un objet d'options vous permettant de définir des options de contrôle spécifiques pour la correspondance effectuée. Les options disponibles sont les suivantes : -

Une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de toutes les requêtes qui matchent dans l'objet {{domxref("Cache")}}.

+ - `ignoreSearch`: Un {{domxref("Boolean")}} qui spécifie si le matching doit ignorer ou non la query string dans l'url.  Si mis à `true`, la partie `?value=bar` de l'url `http://foo.com/?value=bar` sera ignorée lors du matching. Est à `false` par défaut. + - `ignoreMethod`: Un {{domxref("Boolean")}} qui, quand mis à `true`, empêche les opérations de matching de valider la méthode `HTTP` de la {{domxref("Request", "Requête")}} (en temps normal, seules `GET` et `HEAD` sont autorisées.) Est à  `false` par défaut. + - `ignoreVary`: Un {{domxref("Boolean")}} qui, quand mis à `true,` indique à l'opération de matching de ne pas effectuer le matching `VARY` des header.  En d'autres termes, si l'URL correspond, un match sera obtenu peu importe que la {{domxref("Response", "Réponse")}} ait un header `VARY` ou non. Est à `false` par défaut. -
-

Note : {{domxref("Cache.match()")}} est quasiment identique à Cache.matchAll(), si ce n'est qu'elle est résolue en response[0] (la première réponse qui matche) plutôt que response[] (un tableau de toutes les réponses qui matchent).

-
+### Retour -

Exemples

+Une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de toutes les requêtes qui matchent dans l'objet {{domxref("Cache")}}. -
caches.open('v1').then(function(cache) {
+> **Note :** {{domxref("Cache.match()")}} est quasiment identique à [`Cache.matchAll()`](/fr/docs/Web/API/Cache/matchAll), si ce n'est qu'elle est résolue en `response[0]` (la première réponse qui matche) plutôt que `response[]` (un tableau de toutes les réponses qui matchent).
+
+## Exemples
+
+```js
+caches.open('v1').then(function(cache) {
   cache.matchAll('/images/').then(function(response) {
     response.forEach(function(element, index, array) {
       cache.delete(element);
     });
   });
-})
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#dom-cache-matchall', 'Cache: matchAll')}}{{Spec2('Service Workers')}}Définition initiale.
- -

Compatibilités des navigateurs

- -

{{Compat("api.Cache.matchAll")}}

- -

Voir aussi

- - +}) +``` + +## Spécifications + +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- | +| {{SpecName('Service Workers', '#dom-cache-matchall', 'Cache: matchAll')}} | {{Spec2('Service Workers')}} | Définition initiale. | + +## Compatibilités des navigateurs + +{{Compat("api.Cache.matchAll")}} + +## Voir aussi + +- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers) +- {{domxref("Cache")}} +- {{domxref("WindowOrWorkerGlobalScope.caches")}} diff --git a/files/fr/web/api/cache/put/index.md b/files/fr/web/api/cache/put/index.md index b8a7f9f5cd..d99f8d8bb7 100644 --- a/files/fr/web/api/cache/put/index.md +++ b/files/fr/web/api/cache/put/index.md @@ -13,66 +13,58 @@ tags: - put translation_of: Web/API/Cache/put --- -

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

+{{APIRef("Service Workers API")}}{{SeeCompatTable}} -

La méthode put() de l'interface {{domxref("Cache")}} permet d'ajouter des paires clé/valeur à l'objet {{domxref("Cache")}} en cours.

+La méthode **`put()`** de l'interface {{domxref("Cache")}} permet d'ajouter des paires clé/valeur à l'objet {{domxref("Cache")}} en cours. -

Souvent, le comportement voulu est juste de {{domxref("WindowOrWorkerGlobalScope.fetch","fetch()")}} une ou plusieurs requête, et d'ajouter les résultats directement dans le cache. Dans ce type de cas, il est plus judicieux d'utiliser  {{domxref("Cache.add","Cache.add()")}}/{{domxref("Cache.addAll","Cache.addAll()")}} , étant donné que ces méthodes sont des raccourcis pour une ou plusieurs de ces opérations :

+Souvent, le comportement voulu est juste de {{domxref("WindowOrWorkerGlobalScope.fetch","fetch()")}} une ou plusieurs requête, et d'ajouter les résultats directement dans le cache. Dans ce type de cas, il est plus judicieux d'utiliser  {{domxref("Cache.add","Cache.add()")}}/{{domxref("Cache.addAll","Cache.addAll()")}} , étant donné que ces méthodes sont des raccourcis pour une ou plusieurs de ces opérations : -
fetch(url).then(function(response) {
+```js
+fetch(url).then(function(response) {
   if (!response.ok) {
     throw new TypeError('Bad response status');
   }
   return cache.put(url, response);
-})
+}) +``` -
-

Note : put() écrasera toute paire clé/valeur précedemment stockée en cache et qui correspond à la requête.

-
+> **Note :** `put()` écrasera toute paire clé/valeur précedemment stockée en cache et qui correspond à la requête. -
-

Note : Les implémentations initiales de Cache (à la fois dans Blink et Gecko) résolvent les promesses   {{domxref("Cache.add")}}, {{domxref("Cache.addAll")}}, et {{domxref("Cache.put")}} quand le corps de la réponse est entièrement écrit en stockage.  Les versions plus récentes des spécifications sont plus précises en déclarant que le navigateur peut résoudre ces promesses dès que l'entrée est enregistrée en base de donnée, même si le reste de la requête est encore en train d'arriver.

-
+> **Note :** Les implémentations initiales de Cache (à la fois dans Blink et Gecko) résolvent les promesses   {{domxref("Cache.add")}}, {{domxref("Cache.addAll")}}, et {{domxref("Cache.put")}} quand le corps de la réponse est entièrement écrit en stockage.  Les versions plus récentes des spécifications sont plus précises en déclarant que le navigateur peut résoudre ces promesses dès que l'entrée est enregistrée en base de donnée, même si le reste de la requête est encore en train d'arriver. -
-

Note : Depuis Chrome 46, l'API Cache ne stocke que les requêtes depuis des origines sécurisées, à savoir celles servies en HTTPS.

-
+> **Note :** Depuis Chrome 46, l'API Cache ne stocke que les requêtes depuis des origines sécurisées, à savoir celles servies en HTTPS. -

Syntaxe

+## Syntaxe -
cache.put(request, response).then(function() {
+```js
+cache.put(request, response).then(function() {
   // la paire requête/réponse a été ajoutée au cache
 });
-
+``` -

Paramètres

+### Paramètres -
-
request
-
La {{domxref("Request", "Requête")}} à ajouter au cache.
-
response
-
La {{domxref("Response", "Réponse")}} à associer à la requête.
-
+- request + - : La {{domxref("Request", "Requête")}} à ajouter au cache. +- response + - : La {{domxref("Response", "Réponse")}} à associer à la requête. -

Retour

+### Retour -

Une {{jsxref("Promise", "Promesse")}} est retournée avec void.

+Une {{jsxref("Promise", "Promesse")}} est retournée avec void. -
-

Note : La promesse sera rompue avec un TypeError si le schéma d'URL n'est pas http ou https.

-
+> **Note :** La promesse sera rompue avec un `TypeError` si le schéma d'URL n'est pas `http` ou `https`. -

Exemples

+## Exemples -

Cet extrait de code est tiré du MDN sw-test example (lancez sw-test dans votre navigateur). On attend le déclenchement d'un {{domxref("FetchEvent")}}, puis l'on va retourner une réponse spéciale d'après la procédure suivante :

+Cet extrait de code est tiré du MDN [sw-test example](https://github.com/mdn/sw-test/) (lancez [sw-test dans votre navigateur](https://mdn.github.io/sw-test/)). On attend le déclenchement d'un {{domxref("FetchEvent")}}, puis l'on va retourner une réponse spéciale d'après la procédure suivante : -
    -
  1. Vérifier si un match pour la requête a été trouvé dans le {{domxref("CacheStorage")}} grâce à  {{domxref("CacheStorage.match","CacheStorage.match()")}} . Si oui, servir cette réponse.
    2. -
  2. Sinon, ouvrir le cache v1 avec open(), insérer la requête réseau par défaut dans le cache via {{domxref("Cache.put","Cache.put()")}} , et retourner un clone de cette requête avec return response.clone() — nécessaire car put() détruit le corps de la réponse.
    3. -
  3. En cas d'échec (e.g., car le réseau est inaccessible), retourner une réponse de secours.
    4. -
+1. Vérifier si un match pour la requête a été trouvé dans le {{domxref("CacheStorage")}} grâce à  {{domxref("CacheStorage.match","CacheStorage.match()")}} . Si oui, servir cette réponse. +2. Sinon, ouvrir le cache `v1` avec `open()`, insérer la requête réseau par défaut dans le cache via {{domxref("Cache.put","Cache.put()")}} , et retourner un clone de cette requête avec `return response.clone()` — nécessaire car `put()` détruit le corps de la réponse. +3. En cas d'échec (e.g., car le réseau est inaccessible), retourner une réponse de secours. -
var response;
+```js
+var response;
 var cachedResponse = caches.match(event.request).catch(function() {
   return fetch(event.request);
 }).then(function(r) {
@@ -83,33 +75,21 @@ var cachedResponse = caches.match(event.request).catch(function() {
   return response.clone();
 }).catch(function() {
   return caches.match('/sw-test/gallery/myLittleVader.jpg');
-});
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#dom-cache-put', 'Cache: put')}}{{Spec2('Service Workers')}}Définition initiale.
- -

Compatibilité des navigateurs

- -

{{Compat("api.Cache.put")}}

- -

Voir aussi

- - +}); +``` + +## Spécifications + +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- | +| {{SpecName('Service Workers', '#dom-cache-put', 'Cache: put')}} | {{Spec2('Service Workers')}} | Définition initiale. | + +## Compatibilité des navigateurs + +{{Compat("api.Cache.put")}} + +## Voir aussi + +- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers) +- {{domxref("Cache")}} +- {{domxref("WindowOrWorkerGlobalScope.caches")}} diff --git a/files/fr/web/api/caches/index.md b/files/fr/web/api/caches/index.md index b5b57df7ee..abfb9936b2 100644 --- a/files/fr/web/api/caches/index.md +++ b/files/fr/web/api/caches/index.md @@ -4,24 +4,24 @@ slug: Web/API/caches translation_of: Web/API/WindowOrWorkerGlobalScope/caches original_slug: Web/API/WindowOrWorkerGlobalScope/caches --- -

{{APIRef()}}{{SeeCompatTable}}

+{{APIRef()}}{{SeeCompatTable}} -

La propriété en lecture seule  caches de l'interface {{domxref("WindowOrWorkerGlobalScope")}} retourne l'objet {{domxref("CacheStorage")}} associé au contexte actuel. Cet objet permet de stocker des ressources pour une utilisation hors-ligne et de générer des réponses personnalisées à des requêtes.

+La propriété en lecture seule  **`caches`** de l'interface {{domxref("WindowOrWorkerGlobalScope")}} retourne l'objet {{domxref("CacheStorage")}} associé au contexte actuel. Cet objet permet de stocker des ressources pour une utilisation hors-ligne et de générer des réponses personnalisées à des requêtes. -

Syntaxe

+## Syntaxe -
var myCacheStorage = self.caches; // ou simplement caches
-
+ var myCacheStorage = self.caches; // ou simplement caches -

Value

+### Value -

Un objet de type {{domxref("CacheStorage")}}.

+Un objet de type {{domxref("CacheStorage")}}. -

Exemple

+## Exemple -

L'exemple suivant montre comment mettre en cache un contexte de service worker pour stocker des ressources et les utiliser hors-ligne.

+L'exemple suivant montre comment mettre en cache un contexte de [service worker](/en-US/docs/Web/API/Service_Worker_API) pour stocker des ressources et les utiliser hors-ligne. -
this.addEventListener('install', function(event) {
+```js
+this.addEventListener('install', function(event) {
   event.waitUntil(
     caches.open('v1').then(function(cache) {
       return cache.addAll([
@@ -38,43 +38,45 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/caches
       ]);
     })
   );
-});
+}); +``` -

Spécifications

+## Spécifications - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + +
SpécificationStatusComment
{{SpecName('Service Workers', '#self-caches', 'caches')}}{{Spec2('Service Workers')}} -

Défini dans un WindowOrWorkerGlobalScope partiel dans la nouvelle spec.

-
{{SpecName('Service Workers')}}{{Spec2('Service Workers')}}Définition initiale.
SpécificationStatusComment
+ {{SpecName('Service Workers', '#self-caches', 'caches')}} + {{Spec2('Service Workers')}} +

+ Défini dans un WindowOrWorkerGlobalScope partiel dans la + nouvelle spec. +

+
{{SpecName('Service Workers')}}{{Spec2('Service Workers')}}Définition initiale.
-

Compatibilité des navigateurs

+## Compatibilité des navigateurs +{{Compat("api.WindowOrWorkerGlobalScope.caches")}} +## Voir aussi -

{{Compat("api.WindowOrWorkerGlobalScope.caches")}}

- -

Voir aussi

- - +- [Service Workers](/en-US/docs/Web/API/ServiceWorker_API) +- [Web Workers](/en-US/docs/Web/API/Web_Workers_API) +- {{domxref("CacheStorage")}} +- {{domxref("Cache")}} diff --git a/files/fr/web/api/cachestorage/delete/index.md b/files/fr/web/api/cachestorage/delete/index.md index 6d088f5d7f..38318b5921 100644 --- a/files/fr/web/api/cachestorage/delete/index.md +++ b/files/fr/web/api/cachestorage/delete/index.md @@ -11,35 +11,33 @@ tags: - delete translation_of: Web/API/CacheStorage/delete --- -

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

+{{APIRef("Service Workers API")}}{{SeeCompatTable}} -

La fonction delete() de l'interface {{domxref("CacheStorage")}} trouve l'objet {{domxref("Cache")}} correspondant à un cacheName, et si trouvé, supprime l'objet {{domxref("Cache")}} et retourne une {{jsxref("Promise", "Promesse")}} qui renvoie true. Si aucun objet {{domxref("Cache")}} n'est trouvé, elle retourne false.

+La fonction **`delete`\*\***`()`\*\* de l'interface {{domxref("CacheStorage")}} trouve l'objet {{domxref("Cache")}} correspondant à un `cacheName`, et si trouvé, supprime l'objet {{domxref("Cache")}} et retourne une {{jsxref("Promise", "Promesse")}} qui renvoie `true`. Si aucun objet {{domxref("Cache")}} n'est trouvé, elle retourne `false`. -

Vous pouvez accéder à CacheStorage via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}.

+Vous pouvez accéder à `CacheStorage` via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}. -

Syntaxe

+## Syntaxe -
caches.delete(cacheName).then(function(true) {
-  // le cache est maintenant supprimé
-});
-
+ caches.delete(cacheName).then(function(true) { + // le cache est maintenant supprimé + }); -

Paramètres

+### Paramètres -
-
cacheName
-
Le nom du cache que vous souhaitez supprimer.
-
+- cacheName + - : Le nom du cache que vous souhaitez supprimer. -

Retour

+### Retour -

Une {{jsxref("Promise", "Promesse")}} qui renvoie true si l'objet {{domxref("Cache")}} est trouvé et supprimé, false sinon.

+Une {{jsxref("Promise", "Promesse")}} qui renvoie `true` si l'objet {{domxref("Cache")}} est trouvé et supprimé, `false` sinon. -

Exemples

+## Exemples -

Dans ce fragment de code, nous attendons un évènement, et bloquons avec un {{domxref("ExtendableEvent.waitUntil","waitUntil()")}}, qui nettoie les anciens, inutilisés, caches avant que le nouveau service worker soit activé. Nous avons ici une liste blanche contenant le nom du cache que nous voulons garder. Nous retournons les clés des caches dans l'objet {{domxref("CacheStorage")}} utilisant {{domxref("CacheStorage.keys")}}, pour ensuite vérifier que chaque clé est dans la liste blance. Sinon, nous la supprimons avec delete().

+Dans ce fragment de code, nous attendons un évènement, et bloquons avec un {{domxref("ExtendableEvent.waitUntil","waitUntil()")}}, qui nettoie les anciens, inutilisés, caches avant que le nouveau service worker soit activé. Nous avons ici une liste blanche contenant le nom du cache que nous voulons garder. Nous retournons les clés des caches dans l'objet {{domxref("CacheStorage")}} utilisant {{domxref("CacheStorage.keys")}}, pour ensuite vérifier que chaque clé est dans la liste blance. Sinon, nous la supprimons avec `delete().` -
this.addEventListener('activate', function(event) {
+```js
+this.addEventListener('activate', function(event) {
   var cacheWhitelist = ['v2'];
 
   event.waitUntil(
@@ -51,35 +49,21 @@ translation_of: Web/API/CacheStorage/delete
       }));
     })
   );
-});
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#cache-storage-delete', 'CacheStorage: delete')}}{{Spec2('Service Workers')}}Définition initiale.
+}); +``` -

Compatibilités des navigateurs

+## Spécifications +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- | +| {{SpecName('Service Workers', '#cache-storage-delete', 'CacheStorage: delete')}} | {{Spec2('Service Workers')}} | Définition initiale. | +## Compatibilités des navigateurs -

{{Compat("api.CacheStorage.delete")}}

+{{Compat("api.CacheStorage.delete")}} -

Voir aussi

+## Voir aussi - +- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers) +- {{domxref("Cache")}} +- {{domxref("WindowOrWorkerGlobalScope.caches")}} diff --git a/files/fr/web/api/cachestorage/has/index.md b/files/fr/web/api/cachestorage/has/index.md index 5b1b6a6ae0..ae799a0f03 100644 --- a/files/fr/web/api/cachestorage/has/index.md +++ b/files/fr/web/api/cachestorage/has/index.md @@ -12,69 +12,53 @@ tags: - has translation_of: Web/API/CacheStorage/has --- -

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

+{{APIRef("Service Workers API")}}{{SeeCompatTable}} -

La méthode has() de l'interface {{domxref("CacheStorage")}} retourne une {{jsxref("Promise", "Promesse")}} qui renvoie true si un objet {{domxref("Cache")}} est égal au cacheName.

+La méthode **`has()`** de l'interface {{domxref("CacheStorage")}} retourne une {{jsxref("Promise", "Promesse")}} qui renvoie `true` si un objet {{domxref("Cache")}} est égal au `cacheName`. -

Vous pouvez accéder à CacheStorage via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}.

+Vous pouvez accéder à `CacheStorage` via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}. -

Syntaxe

+## Syntaxe -
caches.has(cacheName).then(function(true) {
-  // le cache existe!
-});
-
+ caches.has(cacheName).then(function(true) { + // le cache existe! + }); -

Paramètres

+### Paramètres -
-
cacheName
-
Un  {{domxref("DOMString")}} représentant le nom de l'objet {{domxref("Cache")}} que vous cherchez dans le {{domxref("CacheStorage")}}.
-
+- cacheName + - : Un  {{domxref("DOMString")}} représentant le nom de l'objet {{domxref("Cache")}} que vous cherchez dans le {{domxref("CacheStorage")}}. -

Retour

+### Retour -

Une {{jsxref("Promise", "Promesse")}} qui renvoie true si le cache existe.

+Une {{jsxref("Promise", "Promesse")}} qui renvoie `true` si le cache existe. -

Exemples

+## Exemples -

L'exemple suivant vérifie qu'un cache nommé 'v1' exists. Si c'est le cas, nous lui ajoutons une liste d'assets. Si non (la promesse has() est rejetée) alors nous exécutons une sorte d'initialisation du cache.

+L'exemple suivant vérifie qu'un cache nommé 'v1' exists. Si c'est le cas, nous lui ajoutons une liste d'assets. Si non (la promesse `has()` est rejetée) alors nous exécutons une sorte d'initialisation du cache. -
caches.has('v1').then(function() {
+```js
+caches.has('v1').then(function() {
   caches.open('v1').then(function(cache) {
       return cache.addAll(myAssets);
   });
 }).catch(function() {
   someCacheSetupfunction();
-});;
+});; +``` -

Spécifications

+## Spécifications - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#cache-storage-has', 'CacheStorage: has')}}{{Spec2('Service Workers')}}Définition initiale.
+| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- | +| {{SpecName('Service Workers', '#cache-storage-has', 'CacheStorage: has')}} | {{Spec2('Service Workers')}} | Définition initiale. | -

Compatibilités des navigateurs

+## Compatibilités des navigateurs +{{Compat("api.CacheStorage.has")}} +## Voir aussi -

{{Compat("api.CacheStorage.has")}}

- -

Voir aussi

- - +- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers) +- {{domxref("Cache")}} +- {{domxref("WorkerGlobalScope.caches")}} diff --git a/files/fr/web/api/cachestorage/index.md b/files/fr/web/api/cachestorage/index.md index 276393aa31..f91758952d 100644 --- a/files/fr/web/api/cachestorage/index.md +++ b/files/fr/web/api/cachestorage/index.md @@ -11,64 +11,55 @@ tags: - ServiceWorker translation_of: Web/API/CacheStorage --- -

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

+{{APIRef("Service Workers API")}}{{SeeCompatTable}} -

L'interface CacheStorage représente le stockage des objets {{domxref("Cache")}}.

+L'interface `CacheStorage` représente le stockage des objets {{domxref("Cache")}}. -

L'interface :

+L'interface : -
    -
  • Fournit un répertoire principal de tous les caches nommés qui peut être accessible par un {{domxref("ServiceWorker")}} ou un autre type de travailleur ou portée de {{domxref("window")}} (vous n'êtes pas limité à l'utiliser uniquement avec des Service Workers, même si la spécification {{SpecName("Service Workers")}} le définit). -
    -

    Note : Chrome et Safari n'exposent que "CacheStorage" au contexte fenêtré sur HTTPS. {{domxref("window.caches")}} sera indéfinie, à moins qu'un certificat SSL ne soit configuré.

    -
    • -
  • Maintient une correspondance entre les noms des chaînes de caractères et les objets {{domxref("Cache")}} correspondants.
    • -
+- Fournit un répertoire principal de tous les caches nommés qui peut être accessible par un {{domxref("ServiceWorker")}} ou un autre type de travailleur ou portée de {{domxref("window")}} (vous n'êtes pas limité à l'utiliser uniquement avec des Service Workers, même si la spécification {{SpecName("Service Workers")}} le définit). -

Utilisez {{domxref("CacheStorage.open()")}} pour obtenir une instance {{domxref("Cache")}}.

+ > **Note :** [Chrome et Safari n'exposent que "CacheStorage" au contexte fenêtré sur HTTPS](https://bugs.chromium.org/p/chromium/issues/detail?id=1026063). {{domxref("window.caches")}} sera indéfinie, à moins qu'un certificat SSL ne soit configuré. -

Utilisez {{domxref("CacheStorage.match()")}} pour vérifier si une {{domxref("Request", "Requête")}} donnée est une clé dans l'un des objets {{domxref("Cache")}} que l'objet CacheStorage surveille.

+- Maintient une correspondance entre les noms des chaînes de caractères et les objets {{domxref("Cache")}} correspondants. -

Vous pouvez accéder à CacheStorage via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}.

+Utilisez {{domxref("CacheStorage.open()")}} pour obtenir une instance {{domxref("Cache")}}. -
-

Note : CacheStorage échouera systématiquement avec une SecurityError sur les domaines non certifiés (i.e. ceux qui n'utilisent pas HTTPS, bien que cette définition risque de devenir plus complexe dans le future). Pendant vos tests vous pouvez contourner ce comportement en cochant l'option "Enable Service Workers over HTTP (when toolbox is open)" dans les options Firefox Devtools / le menu gear.

-
+Utilisez {{domxref("CacheStorage.match()")}} pour vérifier si une {{domxref("Request", "Requête")}} donnée est une clé dans l'un des objets {{domxref("Cache")}} que l'objet `CacheStorage` surveille. -
-

Note : {{domxref("CacheStorage.match()")}} est une méthode de convenance. Il est possible d'implémenter une fonctionnalité équivalente pour matcher une entrée de cache en appelant {{domxref("CacheStorage.open()")}}, puis en retournant {{domxref("CacheStorage.keys()")}}, et en matchant les entrées voulues avec {{domxref("CacheStorage.match()")}}.

-
+Vous pouvez accéder à `CacheStorage` via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}. -

Méthodes

+> **Note :** CacheStorage échouera systématiquement avec une `SecurityError` sur les domaines non certifiés (i.e. ceux qui n'utilisent pas HTTPS, bien que cette définition risque de devenir plus complexe dans le future). Pendant vos tests vous pouvez contourner ce comportement en cochant l'option "Enable Service Workers over HTTP (when toolbox is open)" dans les options Firefox Devtools / le menu gear. -
-
{{domxref("CacheStorage.match()")}} {{experimental_inline}}
-
Cherche si une {{domxref("Request")}} donnée est la clé de n'importe lequel des objets {{domxref("Cache")}} maintenus par le {{domxref("CacheStorage")}}, et retourne une {{jsxref("Promise", "Promesse")}} résolue en cet objet {{domxref("Cache")}}.
-
{{domxref("CacheStorage.has()")}} {{experimental_inline}}
-
Retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en true si un objet {{domxref("Cache")}} qui correspond au cacheName existe.
-
{{domxref("CacheStorage.open()")}} {{experimental_inline}}
-
Retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en l'objet {{domxref("Cache")}} qui correspond au cacheName (si il n'existe pas, un nouveau cache est créé).
-
{{domxref("CacheStorage.delete()")}} {{experimental_inline}}
-
Trouve l'objet {{domxref("Cache")}} correspondant au cacheName, et si il est trouvé, supprime l'objet {{domxref("Cache")}} et retourne une {{jsxref("Promise", "Promesse")}} résolue à true. Si aucun objet {{domxref("Cache")}} n'est trouvé, la {{jsxref("Promise", "Promesse")}} est résolue à false.
-
{{domxref("CacheStorage.keys()")}} {{experimental_inline}}
-
Retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau qui contient toutes les chaînes correspondantes aux objets {{domxref("Cache")}} maintenus par le {{domxref("CacheStorage")}}. Cette méthode peut s'utiliser pour itérer sur une liste de tous les objets {{domxref("Cache")}}.
-
+> **Note :** {{domxref("CacheStorage.match()")}} est une méthode de convenance. Il est possible d'implémenter une fonctionnalité équivalente pour matcher une entrée de cache en appelant {{domxref("CacheStorage.open()")}}, puis en retournant {{domxref("CacheStorage.keys()")}}, et en matchant les entrées voulues avec {{domxref("CacheStorage.match()")}}. -

Exemples

+## Méthodes -

Cet extrait de code est tiré de l'exemple MDN sw-test (lancer sw-test dans votre navigateur). Ce service worker script attends le déclenchement d'un {{domxref("InstallEvent")}}, puis lance {{domxref("ExtendableEvent.waitUntil","waitUntil")}} pour gérer la phase d'installation de l'app. Cela consiste à appeler {{domxref("CacheStorage.open")}} pour créer un nouveau cache, puis {{domxref("Cache.addAll")}} pour y ajouter une série d'assets.

+- {{domxref("CacheStorage.match()")}} {{experimental_inline}} + - : Cherche si une {{domxref("Request")}} donnée est la clé de n'importe lequel des objets {{domxref("Cache")}} maintenus par le {{domxref("CacheStorage")}}, et retourne une {{jsxref("Promise", "Promesse")}} résolue en cet objet {{domxref("Cache")}}. +- {{domxref("CacheStorage.has()")}} {{experimental_inline}} + - : Retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en `true` si un objet {{domxref("Cache")}} qui correspond au `cacheName` existe. +- {{domxref("CacheStorage.open()")}} {{experimental_inline}} + - : Retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en l'objet {{domxref("Cache")}} qui correspond au `cacheName` (si il n'existe pas, un nouveau cache est créé). +- {{domxref("CacheStorage.delete()")}} {{experimental_inline}} + - : Trouve l'objet {{domxref("Cache")}} correspondant au `cacheName`, et si il est trouvé, supprime l'objet {{domxref("Cache")}} et retourne une {{jsxref("Promise", "Promesse")}} résolue à `true`. Si aucun objet {{domxref("Cache")}} n'est trouvé, la {{jsxref("Promise", "Promesse")}} est résolue à `false`. +- {{domxref("CacheStorage.keys()")}} {{experimental_inline}} + - : Retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau qui contient toutes les chaînes correspondantes aux objets {{domxref("Cache")}} maintenus par le {{domxref("CacheStorage")}}. Cette méthode peut s'utiliser pour itérer sur une liste de tous les objets {{domxref("Cache")}}. -

Dans le second bloc de code, on attends le déclenchement d'un {{domxref("FetchEvent")}}. On construit ensuite une réponse spéciale comme suit :

+## Exemples -
    -
  1. Vérifier si il y a un match pour la requête dans le CacheStorage. Le cas échéant, servir ça.
    2. -
  2. Sinon, récupérer la requête sur le réseau, puis ouvrir le cache du premier bloc et y ajouter un clone de la requête grâce à {{domxref("Cache.put")}} (cache.put(event.request, response.clone()).)
    3. -
  3. En cas d'échec (e.g. car le réseau est inaccessible), retourner une réponse par défaut.
    4. -
+Cet extrait de code est tiré de l'[exemple MDN sw-test](https://github.com/mdn/sw-test/) (lancer [sw-test dans votre navigateur](https://mdn.github.io/sw-test/)). Ce service worker script attends le déclenchement d'un {{domxref("InstallEvent")}}, puis lance {{domxref("ExtendableEvent.waitUntil","waitUntil")}} pour gérer la phase d'installation de l'app. Cela consiste à appeler {{domxref("CacheStorage.open")}} pour créer un nouveau cache, puis {{domxref("Cache.addAll")}} pour y ajouter une série d'assets. -

Enfin, on retourne cette réponse en utilisant {{domxref("FetchEvent.respondWith")}}.

+Dans le second bloc de code, on attends le déclenchement d'un {{domxref("FetchEvent")}}. On construit ensuite une réponse spéciale comme suit : -
this.addEventListener('install', function(event) {
+1.  Vérifier si il y a un match pour la requête dans le CacheStorage. Le cas échéant, servir ça.
+2.  Sinon, récupérer la requête sur le réseau, puis ouvrir le cache du premier bloc et y ajouter un clone de la requête grâce à {{domxref("Cache.put")}} (`cache.put(event.request, response.clone())`.)
+3.  En cas d'échec (e.g. car le réseau est inaccessible), retourner une réponse par défaut.
+
+Enfin, on retourne cette réponse en utilisant {{domxref("FetchEvent.respondWith")}}.
+
+```js
+this.addEventListener('install', function(event) {
   event.waitUntil(
     caches.open('v1').then(function(cache) {
       return cache.addAll([
@@ -109,11 +100,13 @@ self.addEventListener('fetch', function(event) {
       });
     }
   }));
-});
+}); +``` -

Cet extrait montre comment l'API peut être utilisée en dehors du contexte d'un Service Worker, et utilise l'opérateur "await" pour un code beaucoup plus lisible.

+Cet extrait montre comment l'API peut être utilisée en dehors du contexte d'un Service Worker, et utilise l'opérateur "await" pour un code beaucoup plus lisible. -
// Essayer d'obtenir des données du cache, mais se rabattre sur la récupération en direct.
+```js
+// Essayer d'obtenir des données du cache, mais se rabattre sur la récupération en direct.
 async function getData() {
    const cacheVersion = 1;
    const cacheName    = `myapp-${ cacheVersion }`;
@@ -167,35 +160,21 @@ try {
    console.log( { data } );
 } catch ( error ) {
    console.error( { error } );
-}
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#cache-storage', 'CacheStorage')}}{{Spec2('Service Workers')}}Définition initiale.
+} +``` -

Compatibilités des navigateurs

+## Spécifications +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- | +| {{SpecName('Service Workers', '#cache-storage', 'CacheStorage')}} | {{Spec2('Service Workers')}} | Définition initiale. | +## Compatibilités des navigateurs -

{{Compat("api.CacheStorage")}}

+{{Compat("api.CacheStorage")}} -

Voir aussi

+## Voir aussi - +- [Utilisation des Service Workers](/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers) +- {{domxref("Cache")}} +- {{domxref("WindowOrWorkerGlobalScope.caches")}} diff --git a/files/fr/web/api/cachestorage/keys/index.md b/files/fr/web/api/cachestorage/keys/index.md index ed61c3716c..3f08fd71b7 100644 --- a/files/fr/web/api/cachestorage/keys/index.md +++ b/files/fr/web/api/cachestorage/keys/index.md @@ -12,32 +12,32 @@ tags: - keys translation_of: Web/API/CacheStorage/keys --- -

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

+{{APIRef("Service Workers API")}}{{SeeCompatTable}} -

La méthode keys() de l'interface {{domxref("CacheStorage")}} retourne une {{jsxref("Promise", "Promesse")}} qui renvoie une liste content les chaines de caractères correspondant à tous les noms des {{domxref("Cache")}} suivient par l'objet {{domxref("CacheStorage")}}. Utilisez cette méthode pour itérer sur une liste de tous les objets {{domxref("Cache")}}.

+La méthode **`keys`\*\***`()`\*\* de l'interface {{domxref("CacheStorage")}} retourne une {{jsxref("Promise", "Promesse")}} qui renvoie une liste content les chaines de caractères correspondant à tous les noms des {{domxref("Cache")}} suivient par l'objet {{domxref("CacheStorage")}}. Utilisez cette méthode pour itérer sur une liste de tous les objets {{domxref("Cache")}}. -

Vous pouvez accéder à CacheStorage via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}.

+Vous pouvez accéder à `CacheStorage` via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}. -

Syntaxe

+## Syntaxe -
caches.keys().then(function(keyList) {
-  // faire quelque-chose avec votre keylist
-});
-
+ caches.keys().then(function(keyList) { + // faire quelque-chose avec votre keylist + }); -

Paramètres

+### Paramètres -

Aucun.

+Aucun. -

Retour

+### Retour -

Une {{jsxref("Promise", "Promesse")}} qui retourne une liste de noms de {{domxref("Cache")}} contenus dans un objet {{domxref("CacheStorage")}}.

+Une {{jsxref("Promise", "Promesse")}} qui retourne une liste de noms de {{domxref("Cache")}} contenus dans un objet {{domxref("CacheStorage")}}. -

Exemples

+## Exemples -

Dans ce fragment de code, nous attendons un évènement, et bloquons avec un {{domxref("ExtendableEvent.waitUntil","waitUntil()")}}, qui nettoie les anciens caches, inutilisés, avant que le nouveau service worker soit activé. Nous avons ici une liste blanche contenant le nom du cache que nous voulons garder. Nous retournons les clés des caches dans l'objet {{domxref("CacheStorage")}} utilisant {{domxref("CacheStorage.keys")}}, pour ensuite vérifier que chaque clé est dans la liste blance. Sinon, nous la supprimons avec delete().

+Dans ce fragment de code, nous attendons un évènement, et bloquons avec un {{domxref("ExtendableEvent.waitUntil","waitUntil()")}}, qui nettoie les anciens caches, inutilisés, avant que le nouveau service worker soit activé. Nous avons ici une liste blanche contenant le nom du cache que nous voulons garder. Nous retournons les clés des caches dans l'objet {{domxref("CacheStorage")}} utilisant {{domxref("CacheStorage.keys")}}, pour ensuite vérifier que chaque clé est dans la liste blance. Sinon, nous la supprimons avec `delete().` -
this.addEventListener('activate', function(event) {
+```js
+this.addEventListener('activate', function(event) {
   var cacheWhitelist = ['v2'];
 
   event.waitUntil(
@@ -49,35 +49,21 @@ translation_of: Web/API/CacheStorage/keys
       });
     })
   );
-});
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#dom-cachestorage-keys', 'CacheStorage: keys')}}{{Spec2('Service Workers')}}Définition initiale.
+}); +``` -

Compatibilités des navigateurs

+## Spécifications +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- | +| {{SpecName('Service Workers', '#dom-cachestorage-keys', 'CacheStorage: keys')}} | {{Spec2('Service Workers')}} | Définition initiale. | +## Compatibilités des navigateurs -

{{Compat("api.CacheStorage.keys")}}

+{{Compat("api.CacheStorage.keys")}} -

Voir aussi

+## Voir aussi - +- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers) +- {{domxref("Cache")}} +- {{domxref("WorkerGlobalScope.caches")}} diff --git a/files/fr/web/api/cachestorage/match/index.md b/files/fr/web/api/cachestorage/match/index.md index 704f299794..c548c86759 100644 --- a/files/fr/web/api/cachestorage/match/index.md +++ b/files/fr/web/api/cachestorage/match/index.md @@ -12,56 +12,49 @@ tags: - match translation_of: Web/API/CacheStorage/match --- -

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

+{{APIRef("Service Workers API")}}{{SeeCompatTable}} -

La fonction match() de l'interface {{domxref("CacheStorage")}} qu'une {{domxref("Request", "Requête")}} est la clé d'un objet {{domxref("Cache")}} object suivie par un objet {{domxref("CacheStorage")}} et retourne une {{jsxref("Promise", "Promesse")}} qui renvoie la {{domxref("Response", "Réponse")}} correspondante.

+La fonction **`match()`** de l'interface {{domxref("CacheStorage")}} qu'une {{domxref("Request", "Requête")}} est la clé d'un objet {{domxref("Cache")}} object suivie par un objet {{domxref("CacheStorage")}} et retourne une {{jsxref("Promise", "Promesse")}} qui renvoie la {{domxref("Response", "Réponse")}} correspondante. -

Vous pouvez accéder à CacheStorage via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}.

+Vous pouvez accéder à `CacheStorage` via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}. -

Les objets Cache sont cherchés par ordre de création.

+Les objets `Cache` sont cherchés par ordre de création. -
-

Note : {{domxref("CacheStorage.match()", "caches.match()")}} est une méthode de commodité. Une fonctionnalité équivalente consiste à appeler {{domxref("cache.match()")}} sur chaque cache (dans l'ordre renvoyé par {{domxref("CacheStorage.keys()", "caches.keys()")}}) jusqu'à ce qu'une {{domxref("Response", "Réponse")}} soit renvoyée.

-
+> **Note :** {{domxref("CacheStorage.match()", "caches.match()")}} est une méthode de commodité. Une fonctionnalité équivalente consiste à appeler {{domxref("cache.match()")}} sur chaque cache (dans l'ordre renvoyé par {{domxref("CacheStorage.keys()", "caches.keys()")}}) jusqu'à ce qu'une {{domxref("Response", "Réponse")}} soit renvoyée. -

Syntaxe

+## Syntaxe -
caches.match(request,{options}).then(function(response) {
-  // faire quelque-chose avec la requête et la réponse
-});
-
+ caches.match(request,{options}).then(function(response) { + // faire quelque-chose avec la requête et la réponse + }); + +### Paramètres + +- request + - : La {{domxref("Request", "Requête")}} recherchée. +- options {{optional_inline}} -

Paramètres

+ - : Un objet dont les propriétés contrôlent comment la correspondance est fait avec l'opération `match`. Les options disponible sont: -
-
request
-
La {{domxref("Request", "Requête")}} recherchée.
-
options {{optional_inline}}
-
Un objet dont les propriétés contrôlent comment la correspondance est fait avec l'opération match. Les options disponible sont: -
    -
  • ignoreSearch: Un {{domxref("Boolean")}} qui détermine si le preocessus de rapprochement doit ignorer la chaîne de requête dans l'url. Défini à true, la partie ?value=bar de http://foo.com/?value=bar sera ignoré lors d'un rapporchement. La valeur par défaut est false.
    • -
  • ignoreMethod: Un {{domxref("Boolean")}} qui, quand défini à true, empêche l'opération de rapprochement de valider le verbe http de la {{domxref("Request", "Requête")}} http (normalement, seulement GET et HEAD sont authorisés) La valeur par défaut est false.
    • -
  • ignoreVary: Un {{domxref("Boolean")}} qui, quand défini à true, dit à l'opération de rapprochement de ne pas faire le rapprochement avec le header VARY. En d'autres termes, si une URL est sélectionnée elle sera conservée indépemment de la présence du header VARY. La valeur par défaut est false.
    • -
  • cacheName: Un {{domxref("DOMString")}} qui représente le cache dans lequel on recherche.
    • -
-
-
+ - `ignoreSearch`: Un {{domxref("Boolean")}} qui détermine si le preocessus de rapprochement doit ignorer la chaîne de requête dans l'url. Défini à `true`, la partie `?value=bar` de `http://foo.com/?value=bar` sera ignoré lors d'un rapporchement. La valeur par défaut est `false`. + - `ignoreMethod`: Un {{domxref("Boolean")}} qui, quand défini à `true`, empêche l'opération de rapprochement de valider le verbe http de la {{domxref("Request", "Requête")}} `http` (normalement, seulement `GET` et `HEAD` sont authorisés) La valeur par défaut est `false`. + - `ignoreVary`: Un {{domxref("Boolean")}} qui, quand défini à `true`, dit à l'opération de rapprochement de ne pas faire le rapprochement avec le header `VARY`. En d'autres termes, si une URL est sélectionnée elle sera conservée indépemment de la présence du header `VARY`. La valeur par défaut est `false`. + - `cacheName`: Un {{domxref("DOMString")}} qui représente le cache dans lequel on recherche. -

Valeur retournée

+### Valeur retournée -

Une {{jsxref("Promise", "Promesse")}} qui renvoie les {{domxref("Response", "Réponses")}} correspondante.

+Une {{jsxref("Promise", "Promesse")}} qui renvoie les {{domxref("Response", "Réponses")}} correspondante. -

Exemples

+## Exemples -

Cet exemple est tiré du MDN sw-test example (voir sw-test running live). Nous attendons pour un évènement {{domxref("FetchEvent")}} et nous construisons une réponse comme suit:

+Cet exemple est tiré du MDN [sw-test example](https://github.com/mdn/sw-test/) (voir [sw-test running live](https://mdn.github.io/sw-test/)). Nous attendons pour un évènement {{domxref("FetchEvent")}} et nous construisons une réponse comme suit: -
    -
  1. Vérifier si une correspondance pour la requète est trouvée dans le {{domxref("CacheStorage")}} en utilisant {{domxref("CacheStorage.match")}}. Si oui, la servir.
    2. -
  2. Si non, ouvrire le cache v1 avec open(), mettre le réseau par défaut dans le cache avec {{domxref("Cache.put")}} et retourner un clone du réseau par défaut en utilisant return response.clone() — obligatoire car put() détruit le corps de la réponse.
    3. -
  3. Si ceci échoue (e.g., parce que le réseau est inactif), retourner une réponse de secours.
    4. -
+1. Vérifier si une correspondance pour la requète est trouvée dans le {{domxref("CacheStorage")}} en utilisant {{domxref("CacheStorage.match")}}. Si oui, la servir. +2. Si non, ouvrire le cache `v1` avec `open()`, mettre le réseau par défaut dans le cache avec {{domxref("Cache.put")}} et retourner un clone du réseau par défaut en utilisant `return response.clone()` — obligatoire car `put()` détruit le corps de la réponse. +3. Si ceci échoue (e.g., parce que le réseau est inactif), retourner une réponse de secours. -
self.addEventListener('fetch', function(event) {
+```js
+self.addEventListener('fetch', function(event) {
   event.respondWith(caches.match(event.request).then(function(response) {
     // caches.match() always resolves
     // but in case of success response will have value
@@ -83,35 +76,21 @@ translation_of: Web/API/CacheStorage/match
       });
     }
   }));
-});
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#dom-cachestorage-match', 'CacheStorage: match')}}{{Spec2('Service Workers')}}Définition initiale.
+}); +``` -

Compatibilités des navigateurs

+## Spécifications +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- | +| {{SpecName('Service Workers', '#dom-cachestorage-match', 'CacheStorage: match')}} | {{Spec2('Service Workers')}} | Définition initiale. | +## Compatibilités des navigateurs -

{{Compat("api.CacheStorage.match")}}

+{{Compat("api.CacheStorage.match")}} -

Voir aussi

+## Voir aussi - +- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers) +- {{domxref("Cache")}} +- {{domxref("WindowOrWorkerGlobalScope.caches")}} diff --git a/files/fr/web/api/cachestorage/open/index.md b/files/fr/web/api/cachestorage/open/index.md index 87d45d11b3..009c6e1e94 100644 --- a/files/fr/web/api/cachestorage/open/index.md +++ b/files/fr/web/api/cachestorage/open/index.md @@ -12,39 +12,35 @@ tags: - open translation_of: Web/API/CacheStorage/open --- -

{{APIRef("Service Workers API")}}{{SeeCompatTable}}

+{{APIRef("Service Workers API")}}{{SeeCompatTable}} -

La fonction open()de l'interface {{domxref("CacheStorage")}} retourne une {{jsxref("Promise", "Promesse")}} qui renvoie l'objet {{domxref("Cache")}} correspondant a un cacheName.

+La fonction **`open()`**de l'interface {{domxref("CacheStorage")}} retourne une {{jsxref("Promise", "Promesse")}} qui renvoie l'objet {{domxref("Cache")}} correspondant a un `cacheName`. -

Vous pouvez accéder à CacheStorage via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}.

+Vous pouvez accéder à `CacheStorage` via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}. -
-

Note : Si le {{domxref("Cache")}} spécifié n'existe pas, un nouveau cache sera crée avec cacheName et retournera une {{jsxref("Promise", "Promesse")}} renvoyant le nouvel objet {{domxref("Cache")}}.

-
+> **Note :** Si le {{domxref("Cache")}} spécifié n'existe pas, un nouveau cache sera crée avec `cacheName` et retournera une {{jsxref("Promise", "Promesse")}} renvoyant le nouvel objet {{domxref("Cache")}}. -

Syntaxe

+## Syntaxe -
caches.open(cacheName).then(function(cache) {
-  // faire quelque-chose avec le cache
-});
-
+ caches.open(cacheName).then(function(cache) { + // faire quelque-chose avec le cache + }); -

Paramètres

+### Paramètres -
-
cacheName
-
Le nom du cache que vous voulez ouvrir.
-
+- cacheName + - : Le nom du cache que vous voulez ouvrir. -

Retour

+### Retour -

Une {{jsxref("Promise", "Promesse")}} qui renvoie l'objet {{domxref("Cache")}} demandé.

+Une {{jsxref("Promise", "Promesse")}} qui renvoie l'objet {{domxref("Cache")}} demandé. -

Exemples

+## Exemples -

Cet exemple est tiré de l'exemple MDN sw-test (voir sw-test en direct). Ici, nous attendons qu'un {{domxref("InstallEvent")}} se déclenche, puis nous lançons {{domxref("ExtendableEvent.waitUntil", "waitUntil()")}} pour gérer le processus d'installation de l'application. Cela consiste à appeler CacheStorage.open() pour créer un nouveau cache, puis à utiliser {{domxref("Cache.addAll()")}} pour y ajouter une série d'éléments.

+Cet exemple est tiré de l'[exemple MDN sw-test](https://github.com/mdn/sw-test/) (voir [sw-test en direct](https://mdn.github.io/sw-test/)). Ici, nous attendons qu'un {{domxref("InstallEvent")}} se déclenche, puis nous lançons {{domxref("ExtendableEvent.waitUntil", "waitUntil()")}} pour gérer le processus d'installation de l'application. Cela consiste à appeler `CacheStorage.open()` pour créer un nouveau cache, puis à utiliser {{domxref("Cache.addAll()")}} pour y ajouter une série d'éléments. -
self.addEventListener('install', function(event) {
+```js
+self.addEventListener('install', function(event) {
   event.waitUntil(
     caches.open('v1').then(function(cache) {
       return cache.addAll([
@@ -59,35 +55,21 @@ translation_of: Web/API/CacheStorage/open
         '/sw-test/gallery/snowTroopers.jpg'
       ]);
     })
-  );
+ ); +``` -

Spécifications

+## Spécifications - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('Service Workers', '#dom-cachestorage-open', 'CacheStorage: open')}}{{Spec2('Service Workers')}}Définition initiale.
+| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- | +| {{SpecName('Service Workers', '#dom-cachestorage-open', 'CacheStorage: open')}} | {{Spec2('Service Workers')}} | Définition initiale. | -

Compatibilités des navigateurs

+## Compatibilités des navigateurs +{{Compat("api.CacheStorage.open")}} +## Voir aussi -

{{Compat("api.CacheStorage.open")}}

- -

Voir aussi

- - +- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers) +- {{domxref("Cache")}} +- {{domxref("WorkerGlobalScope.caches")}} diff --git a/files/fr/web/api/canvas_api/a_basic_ray-caster/index.md b/files/fr/web/api/canvas_api/a_basic_ray-caster/index.md index b3520fecbd..acd6af42aa 100644 --- a/files/fr/web/api/canvas_api/a_basic_ray-caster/index.md +++ b/files/fr/web/api/canvas_api/a_basic_ray-caster/index.md @@ -10,44 +10,42 @@ tags: translation_of: Web/API/Canvas_API/A_basic_ray-caster original_slug: Un_raycaster_basique_avec_canvas --- -

{{CanvasSidebar}}

+{{CanvasSidebar}} -

Cet article fournit un exemple intéressant concret d'utilisation de l'élément {{HTMLElement("canvas")}} pour faire un logiciel rendant un environnement 3D à l'aide de la projection de rayons.

+Cet article fournit un exemple intéressant concret d'utilisation de l'élément {{HTMLElement("canvas")}} pour faire un logiciel rendant un environnement 3D à l'aide de la projection de rayons. -

{{EmbedGHLiveSample("canvas-raycaster/index.html", 900, 300)}}

+{{EmbedGHLiveSample("canvas-raycaster/index.html", 900, 300)}} -

Ouvrir une nouvelle fenêtre

+**[Ouvrir une nouvelle fenêtre](http://mdn.github.io/canvas-raycaster/)** -

Pourquoi ?

+## Pourquoi ? -

Après avoir réalisé, à mon plus grand plaisir, que le sympathique élément <canvas> dont j'avais entendu parler (en), non seulement allait être supporté par Firefox, mais était déjà supporté dans la version actuelle de Safari, je me devais de tenter une petite expérience.

+Après avoir réalisé, à mon plus grand plaisir, que le sympathique élément `` dont j'avais [entendu parler (en)](http://www.whatwg.org/specs/web-apps/current-work/#dynamic), non seulement allait être supporté par Firefox, mais était\* **\*déjà** supporté dans la version actuelle de Safari, je me devais de tenter une petite expérience. -

La présentation et le tutoriel canvas que j'ai trouvé ici sur MDC sont excellents, mais personne n'a encore rien écrit sur l'animation, j'ai donc pensé porter un "raycaster" basique sur lequel j'avais travaillé il y a quelque temps, et voir quelle sorte de performance nous pouvions attendre d'un tampon de pixel écrit en JavaScript.

+La [présentation](/fr/docs/Web/HTML/Canvas) et le [tutoriel ](/fr/docs/Tutoriel_canvas)[](/fr/docs/Tutoriel_canvas)canvas que j'ai trouvé ici sur MDC sont excellents, mais personne n'a encore rien écrit sur l'animation, j'ai donc pensé porter un "raycaster" basique sur lequel j'avais travaillé il y a quelque temps, et voir quelle sorte de performance nous pouvions attendre d'un tampon de pixel écrit en JavaScript. -

Comment ?

+## Comment ? -

L'idée de base est d'employer {{domxref("window.setInterval","setInterval()")}} à intervalle régulier, correspondant au taux de trame désiré. Après chaque intervalle, une fonction de mise à jour redessine le canvas, affichant la vue actuelle. Je sais que j'aurais pu commencer avec un exemple plus simple, mais je suis sûr que le tutoriel canvas va y conduire, et je voulais voir si je pouvais y arriver.

+L'idée de base est d'employer {{domxref("window.setInterval","setInterval()")}} à intervalle régulier, correspondant au taux de trame désiré. Après chaque intervalle, une fonction de mise à jour redessine le canvas, affichant la vue actuelle. Je sais que j'aurais pu commencer avec un exemple plus simple, mais je suis sûr que le tutoriel canvas va [y conduire](/fr/docs/Tutoriel_canvas/Animations_basiques), et je voulais voir si je pouvais y arriver. -

Donc, à chaque mise à jour, le projeteur de rayons vérifie si vous avez pressé une touche récemment, pour s'éviter des calculs si vous êtes immobile. S'il y a eu un mouvement, le canvas est effacé, le ciel et le sol sont dessinés, la position et l'orientation de la caméra corrigées et les rayons projetés. Lorsque les rayons rencontrent un mur, ils créent une bandelette verticale de canvas de la couleur du mur qu'ils ont touché, mélangée à une nuance plus sombre de cette couleur en fonction de la distance au mur. La hauteur de la bandelette est modulée par la distance entre le mur et la caméra, et la bandelette est dessinée centrée sur la ligne d'horizon.

+Donc, à chaque mise à jour, le projeteur de rayons vérifie si vous avez pressé une touche récemment, pour s'éviter des calculs si vous êtes immobile. S'il y a eu un mouvement, le canvas est effacé, le ciel et le sol sont dessinés, la position et l'orientation de la caméra corrigées et les rayons projetés. Lorsque les rayons rencontrent un mur, ils créent une bandelette verticale de canvas de la couleur du mur qu'ils ont touché, mélangée à une nuance plus sombre de cette couleur en fonction de la distance au mur. La hauteur de la bandelette est modulée par la distance entre le mur et la caméra, et la bandelette est dessinée centrée sur la ligne d'horizon. -

Le code que j'ai obtenu est l'amalgame des chapitres "raycaster" d'un vieux livre d'André Lamothe Tricks of the Game Programming Gurus (ISBN: 0672305070), et d'un Projeteur de rayons Java que j'ai trouvé en ligne, modifié par mon besoin compulsif de tout renommer pour que cela ait un sens pour moi, et pour tout le bricolage nécessaire pour que l'ensemble fonctionne bien.

+Le code que j'ai obtenu est l'amalgame des chapitres "raycaster" d'un vieux livre d'André Lamothe _Tricks of the Game Programming Gurus_ (ISBN: 0672305070), et d'un [Projeteur de rayons Java](http://www.shinelife.co.uk/java-maze/) que j'ai trouvé en ligne, modifié par mon besoin compulsif de tout renommer pour que cela ait un sens pour moi, et pour tout le bricolage nécessaire pour que l'ensemble fonctionne bien. -

Résultats

+## Résultats -

Le canvas dans Safari 2.0.1 a étonnement bien marché. Avec le facteur de bloc-itude poussé pour rendre des bandelettes de 8 pixels de largeur, j'arrive à faire tourner une fenêtre en 320 x 240 à 24 images/seconde sur mon Apple mini. Firefox 1.5 Beta 1 est encore plus rapide, j'obtiens 24 images/seconde sur la fenêtre de 320 x 240 avec des bandelettes de 4 pixels. Pas vraiment un nouveau membre de la famille "ID software", mais plutôt décent si l'on considère qu'il s'agit d'un environnement entièrement interprété, et que je n'ai eu à m'inquiéter ni de l'allocation mémoire, ni des modes vidéos, ni de coder les routines centrales en assembleur, ni de quoi que soit d'autre. Le code cherche à être très efficace, consultant un tableau de valeurs précalculées, mais je ne suis pas un dieu de l'optimisation, donc les choses pourraient probablement être écrites plus rapidement.

+Le canvas dans Safari 2.0.1 a étonnement bien marché. Avec le facteur de bloc-itude poussé pour rendre des bandelettes de 8 pixels de largeur, j'arrive à faire tourner une fenêtre en 320 x 240 à 24 images/seconde sur mon Apple mini. Firefox 1.5 Beta 1 est encore plus rapide, j'obtiens 24 images/seconde sur la fenêtre de 320 x 240 avec des bandelettes de 4 pixels. Pas vraiment un nouveau membre de la famille "ID software", mais plutôt décent si l'on considère qu'il s'agit d'un environnement entièrement interprété, et que je n'ai eu à m'inquiéter ni de l'allocation mémoire, ni des modes vidéos, ni de coder les routines centrales en assembleur, ni de quoi que soit d'autre. Le code cherche à être très efficace, consultant un tableau de valeurs précalculées, mais je ne suis pas un dieu de l'optimisation, donc les choses pourraient probablement être écrites plus rapidement. -

De plus, il laisse beaucoup à désirer en tant que tentative d'une espèce de moteur de jeu— il n'y a pas de textures sur les murs, pas de sprites, pas de portes, même pas de téléporteurs pour passer à un autre niveau. Je suis cependant presque certain que toutes ces choses peuvent être intégrées pourvu qu'on en prenne le temps. L' API de canvas supporte la copie d'images par pixel, donc les textures semblent possibles. Je laisse ça pour un autre article, probablement d'une autre personne. =)

+De plus, il laisse beaucoup à désirer en tant que tentative d'une espèce de moteur de jeu— il n'y a pas de textures sur les murs, pas de sprites, pas de portes, même pas de téléporteurs pour passer à un autre niveau. Je suis cependant presque certain que toutes ces choses peuvent être intégrées pourvu qu'on en prenne le temps. L' API de canvas supporte la copie d'images par pixel, donc les textures semblent possibles. Je laisse ça pour un autre article, probablement d'une autre personne. =) -

Le projeteur de rayons (ray-caster)

+## Le projeteur de rayons _(ray-caster)_ -

De sympathiques personnes ici ont copié mes fichiers manuellement pour que vous puissiez y jeter un coup d'oeil, et pour votre plaisir, j'ai posté le contenu de chacun des fichiers sous la forme de listings de code (voir plus bas).

+De sympathiques personnes ici ont copié mes fichiers manuellement pour que vous puissiez y jeter un [coup d'oeil](https://mdn.github.io/canvas-raycaster/), et pour votre plaisir, j'ai posté le contenu de chacun des fichiers sous la forme de listings de code (voir plus bas). -

Vous y voici donc, lancez Safari 1.3+, Firefox 1.5+ ou un autre navigateur supportant l'élément <canvas> et amusez-vous!
-
- input.js | Level.js | Player.js | RayCaster.html | RayCaster.js | trace.css | trace.js

+Vous y voici donc, lancez Safari 1.3+, Firefox 1.5+ ou un autre navigateur supportant l'élément `` et amusez-vous! -

Voir aussi

+[input.js](fr/Un_raycaster_basique_avec_canvas/input.js) | [Level.js](fr/Un_raycaster_basique_avec_canvas/Level.js) | [Player.js](fr/Un_raycaster_basique_avec_canvas/Player.js) | [RayCaster.html](fr/Un_raycaster_basique_avec_canvas/RayCaster.html) | [RayCaster.js](fr/Un_raycaster_basique_avec_canvas/RayCaster.js) | [trace.css](fr/Un_raycaster_basique_avec_canvas/trace.css) | [trace.js](fr/Un_raycaster_basique_avec_canvas/trace.js) - +### Voir aussi + +- [Canvas tutorial](/fr/docs/Tutoriel_canvas) diff --git a/files/fr/web/api/canvas_api/index.md b/files/fr/web/api/canvas_api/index.md index 9c3ea0f0ef..3b26e6ff1f 100644 --- a/files/fr/web/api/canvas_api/index.md +++ b/files/fr/web/api/canvas_api/index.md @@ -7,47 +7,51 @@ tags: - Reference translation_of: Web/API/Canvas_API --- -
{{IncludeSubnav("/fr/docs/Jeux")}} {{CanvasSidebar}}
+{{IncludeSubnav("/fr/docs/Jeux")}} {{CanvasSidebar}} -

Ajouté en HTML5, l'élément {{HTMLElement("canvas")}} est un nouvel élément qui peut être utilisé pour dessiner des graphismes via des scripts JavaScript. Par exemple, Il peut être utilisé pour dessiner des graphes, faire des compositions de photos, des animations, ou même faire du traitement ou de l'affichage de vidéos en temps réel.

+Ajouté en [HTML5](/fr/docs/Web/Guide/HTML/HTML5), l'élément {{HTMLElement("canvas")}} est un nouvel élément qui peut être utilisé pour dessiner des graphismes via des scripts [JavaScript](/fr/docs/JavaScript). Par exemple, Il peut être utilisé pour dessiner des graphes, faire des compositions de photos, des animations, ou même faire du traitement ou de l'affichage de vidéos en temps réel. -

Les applications Mozilla ont commencé à supporter <canvas> à partir de Gecko 1.8 (c'est-à-dire Firefox 1.5). L'élément a été introduit à l'origine par Apple pour le Dashboard d'OS X et pour Safari. Internet Explorer supporte <canvas> depuis la version 9 et ultérieures, pour les versions précédentes d'IE, une page peut effectuer ce support de <canvas> en incluant un script depuis le projet Explorer Canvas  de Google.

+Les applications Mozilla ont commencé à supporter \ à partir de Gecko 1.8 (c'est-à-dire [Firefox 1.5](/fr/docs/Firefox_1.5_pour_les_développeurs)). L'élément a été introduit à l'origine par Apple pour le [Dashboard d'OS X](http://www.apple.com/macosx/features/dashboard/) et pour Safari. Internet Explorer supporte \ depuis la version 9 et ultérieures, pour les versions précédentes d'IE, une page peut effectuer ce support de \ en incluant un script depuis le projet [Explorer Canvas  ](http://excanvas.sourceforge.net/)de Google. -

L'élément <canvas> est aussi utilisé par WebGL pour afficher des graphismes 3D avec accélération matérielle sur des pages web.

+L'élément \ est aussi utilisé par [WebGL](/fr/docs/Web/API/WebGL_API) pour afficher des graphismes 3D avec accélération matérielle sur des pages web. -

Exemple

+## Exemple -

Voilà un simple extrait de code qui utilise la méthode {{domxref("CanvasRenderingContext2D.fillRect()")}}.

+Voilà un simple extrait de code qui utilise la méthode {{domxref("CanvasRenderingContext2D.fillRect()")}}. -

HTML

+### HTML -
<canvas id="canvas"></canvas>
-
+```html + +``` -

JavaScript

+### JavaScript -
var canvas = document.getElementById('canvas');
+```js
+var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 
 ctx.fillStyle = 'green';
 ctx.fillRect(10, 10, 100, 100);
-
+``` -

Éditez le code ci-dessous pour voir les changements avoir lieu directement dans le canvas:

+Éditez le code ci-dessous pour voir les changements avoir lieu directement dans le canvas: -

Code jouable

+#### Code jouable - - - - + } +``` - +```html hidden + +``` +```js hidden +draw(); +``` -

Le résultat ressemble à ceci :

+Le résultat ressemble à ceci : -

{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "canvas_strokestyle.png")}}

+{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "canvas_strokestyle.png")}} -

Transparence

+## Transparence -

En plus de dessiner des formes opaques sur la toile, nous pouvons également dessiner des formes semi-transparentes (ou translucides). Cela se fait soit par le réglage de globalAlpha ou en attribuant une couleur semi-transparente à strokeStyle et/ou fillStyle.

+En plus de dessiner des formes opaques sur la toile, nous pouvons également dessiner des formes semi-transparentes (ou translucides). Cela se fait soit par le réglage de `globalAlpha` ou en attribuant une couleur semi-transparente à `strokeStyle` et/ou `fillStyle`. -
-
{{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha = transparencyValue")}}
-
Applique la valeur de transparence spécifiée à toutes les formes futures tracées sur le Canvas. La valeur doit être comprise entre 0.0 (complètement transparent) à 1.0 (complètement opaque). Cette valeur est de 1,0 (complètement opaque) par défaut.
-
+- {{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha = transparencyValue")}} + - : Applique la valeur de transparence spécifiée à toutes les formes futures tracées sur le Canvas. La valeur doit être comprise entre 0.0 (complètement transparent) à 1.0 (complètement opaque). Cette valeur est de 1,0 (complètement opaque) par défaut. -

La propriété globalAlpha peut être utile si vous voulez dessiner un grand nombre de formes sur la toile avec la même transparence, mais sinon, il est généralement plus utile de définir la transparence sur les formes individuelles lors de la définition de leurs couleurs.

+La propriété` globalAlpha` peut être utile si vous voulez dessiner un grand nombre de formes sur la toile avec la même transparence, mais sinon, il est généralement plus utile de définir la transparence sur les formes individuelles lors de la définition de leurs couleurs. -

Parce que strokeStyle et fillStyle acceptent les valeurs de couleur rvba CSS, nous pouvons utiliser la notation suivante pour attribuer une couleur transparente.

+Parce que `strokeStyle` et `fillStyle` acceptent les valeurs de couleur rvba CSS, nous pouvons utiliser la notation suivante pour attribuer une couleur transparente. -
//Affecter des couleurs transparentes pour dessiner et remplir le style
+```js
+//Affecter des couleurs transparentes pour dessiner et remplir le style
 
 ctx.strokeStyle = "rgba(255, 0, 0, .5)";
 ctx.fillStyle = "rgba(255, 0, 0, .5)";
-
+``` -

La fonction rgba() (rvba) est similaire à la fonction rgb() (rvb) mais il a un paramètre supplémentaire. Le dernier paramètre définit la valeur de la transparence de cette couleur particulière. La plage valide est entre 0,0 (totalement transparent) et 1,0 (totalement opaque).

+La fonction `rgba()` _(rvba)_ est similaire à la fonction `rgb()` _(rvb)_ mais il a un paramètre supplémentaire. Le dernier paramètre définit la valeur de la transparence de cette couleur particulière. La plage valide est entre 0,0 (totalement transparent) et 1,0 (totalement opaque). -

Un exemple globalAlpha

+### Un exemple `globalAlpha` -

Dans cet exemple, nous allons dessiner un fond de quatre carrés de couleurs différentes. En plus de ceux-ci, nous allons dessiner un ensemble de cercles semi-transparents. globalAlpha est réglé à 0.2 et sera utilisé pour toutes les formes. Chaque étape de boucle for dessine un ensemble de cercles avec un rayon croissant. Le résultat final est un gradient radial. En superposant toujours plus de cercles, les uns au-dessus des autres, nous réduisons efficacement la transparence des cercles qui ont déjà été établis. En augmentant le pas et le nombre de cercles, l'arrière-plan devrait complètement disparaître du centre de l'image.

+Dans cet exemple, nous allons dessiner un fond de quatre carrés de couleurs différentes. En plus de ceux-ci, nous allons dessiner un ensemble de cercles semi-transparents. `globalAlpha` est réglé à `0.2` et sera utilisé pour toutes les formes. Chaque étape de boucle `for` dessine un ensemble de cercles avec un rayon croissant. Le résultat final est un gradient radial. En superposant toujours plus de cercles, les uns au-dessus des autres, nous réduisons efficacement la transparence des cercles qui ont déjà été établis. En augmentant le pas et le nombre de cercles, l'arrière-plan devrait complètement disparaître du centre de l'image. -
function draw() {
+```js
+function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
   // draw background
   ctx.fillStyle = '#FD0';
@@ -133,25 +140,30 @@ ctx.fillStyle = "rgba(255, 0, 0, .5)";
   ctx.globalAlpha = 0.2;
 
   // Dessine des cercles semi-transparents
-  for (i = 0; i < 7; i++) {
+  for (i = 0; i < 7; i++) {
     ctx.beginPath();
     ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true);
     ctx.fill();
   }
-}
- +} +``` - +```html hidden + +``` - +```js hidden +draw(); +``` -

{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "canvas_globalalpha.png")}}

+{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "canvas_globalalpha.png")}} -

Un exemple en utilisant rgba()

+### Un exemple en utilisant `rgba()` -

Dans ce deuxième exemple, nous faisons quelque chose de similaire, mais au lieu de dessiner des cercles, nous dessinons de petits rectangles à l'opacité croissante. L'utilisation de rgba() nous donne un peu plus de contrôle et de flexibilité.

+Dans ce deuxième exemple, nous faisons quelque chose de similaire, mais au lieu de dessiner des cercles, nous dessinons de petits rectangles à l'opacité croissante. L'utilisation de `rgba()` nous donne un peu plus de contrôle et de flexibilité. -
function draw() {
+```js
+function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
 
   // Dessine le fond
@@ -165,104 +177,110 @@ ctx.fillStyle = "rgba(255, 0, 0, .5)";
   ctx.fillRect(0, 112.5, 150, 37.5);
 
   // Dessine des rectangles semi-transparents
-  for (var i = 0; i < 10; i++) {
+  for (var i = 0; i < 10; i++) {
     ctx.fillStyle = 'rgba(255, 255, 255, ' + (i + 1) / 10 + ')';
-    for (var j = 0; j < 4; j++) {
+    for (var j = 0; j < 4; j++) {
       ctx.fillRect(5 + i * 14, 5 + j * 37.5, 14, 27.5);
     }
   }
-}
+} +``` - +```html hidden + +``` - +```js hidden +draw(); +``` -

{{EmbedLiveSample("An_example_using_rgba()", "180", "180", "canvas_rgba.png")}}

+{{EmbedLiveSample("An_example_using_rgba()", "180", "180", "canvas_rgba.png")}} -

Le style des lignes

+## Le style des lignes -

Il y a plusieurs propriétés qui nous permettent de modifier le style des lignes.

+Il y a plusieurs propriétés qui nous permettent de modifier le style des lignes. -
-
{{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth = value")}}
-
Définit la largeur des lignes qui serons tracées.
-
{{domxref("CanvasRenderingContext2D.lineCap", "lineCap = type")}}
-
Définit l'apparence des extrémités des lignes.
-
{{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin = type")}}
-
Définit l'apparence des «coins» où les lignes se rencontrent.
-
{{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit = value")}}
-
Établit une limite lorsque deux lignes se rejoignent en un angle aigu, pour permettre de contrôler l'épaisseur de la jonction.
-
{{domxref("CanvasRenderingContext2D.getLineDash", "getLineDash()")}}
-
Retourne le tableau du modele courant de ligne contenant un nombre pair de nombres positifs.
-
{{domxref("CanvasRenderingContext2D.setLineDash", "setLineDash(segments)")}}
-
Définit le modele de ligne.
-
{{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset = value")}}
-
Indique où commencer un modele sur une ligne.
-
+- {{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth = value")}} + - : Définit la largeur des lignes qui serons tracées. +- {{domxref("CanvasRenderingContext2D.lineCap", "lineCap = type")}} + - : Définit l'apparence des extrémités des lignes. +- {{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin = type")}} + - : Définit l'apparence des «coins» où les lignes se rencontrent. +- {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit = value")}} + - : Établit une limite lorsque deux lignes se rejoignent en un angle aigu, pour permettre de contrôler l'épaisseur de la jonction. +- {{domxref("CanvasRenderingContext2D.getLineDash", "getLineDash()")}} + - : Retourne le tableau du modele courant de ligne contenant un nombre pair de nombres positifs. +- {{domxref("CanvasRenderingContext2D.setLineDash", "setLineDash(segments)")}} + - : Définit le modele de ligne. +- {{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset = value")}} + - : Indique où commencer un modele sur une ligne. -

Vous aurez une meilleure compréhension de ce qu'ils font en regardant les exemples ci-dessous.

+Vous aurez une meilleure compréhension de ce qu'ils font en regardant les exemples ci-dessous. -

Un exemple lineWidth

+### Un exemple `lineWidth` -

Cette propriété définit l'épaisseur de la ligne actuelle. Les valeurs doivent être des nombres positifs. Par défaut, cette valeur est définie à 1,0.

+Cette propriété définit l'épaisseur de la ligne actuelle. Les valeurs doivent être des nombres positifs. Par défaut, cette valeur est définie à 1,0. -

La largeur de ligne est l'épaisseur centrée sur le tracé. En d'autres termes, la zone qui est dessinée s'étend de part et d'autre du tracé. Parce que les coordonnées ne font pas référence directement aux pixels, une attention particulière doit être prise pour obtenir des lignes horizontales et verticales nettes.

+La largeur de ligne est l'épaisseur centrée sur le tracé. En d'autres termes, la zone qui est dessinée s'étend de part et d'autre du tracé. Parce que les coordonnées ne font pas référence directement aux pixels, une attention particulière doit être prise pour obtenir des lignes horizontales et verticales nettes. -

Dans l'exemple ci-dessous, 10 lignes droites sont dessinées avec des largeurs croissantes. La ligne à l'extrême gauche a 1,0 unités de large. Cependant, celle ci et toutes les lignes d'épaisseur impair ne semblent pas nettes, en raison du positionnement du tracé.

+Dans l'exemple ci-dessous, 10 lignes droites sont dessinées avec des largeurs croissantes. La ligne à l'extrême gauche a 1,0 unités de large. Cependant, celle ci et toutes les lignes d'épaisseur impair ne semblent pas nettes, en raison du positionnement du tracé. -
function draw() {
+```js
+function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
-  for (var i = 0; i < 10; i++) {
+  for (var i = 0; i < 10; i++) {
     ctx.lineWidth = 1 + i;
     ctx.beginPath();
     ctx.moveTo(5 + i * 14, 5);
     ctx.lineTo(5 + i * 14, 140);
     ctx.stroke();
   }
-}
- - +} +``` - +```html hidden + +``` -

{{EmbedLiveSample("A_lineWidth_example", "180", "180", "canvas_linewidth.png")}}

+```js hidden +draw(); +``` -

Pour l'obtention de lignes nettes, il faut comprendre comment les lignes sont tracées. Ci-dessous, la grille représente la grille de coordonnées. Les carrés sont des pixels réels de l'écran. Dans la première grille, un rectangle (2,1) à (5,5) est rempli. La zone entière couverte par les lignes (rouge clair) tombe sur les limites des pixels, de sorte que le rectangle rempli résultant aura des bords nets.

+{{EmbedLiveSample("A_lineWidth_example", "180", "180", "canvas_linewidth.png")}} -

+Pour l'obtention de lignes nettes, il faut comprendre comment les lignes sont tracées. Ci-dessous, la grille représente la grille de coordonnées. Les carrés sont des pixels réels de l'écran. Dans la première grille, un rectangle (2,1) à (5,5) est rempli. La zone entière couverte par les lignes (rouge clair) tombe sur les limites des pixels, de sorte que le rectangle rempli résultant aura des bords nets. -

Si vous considérez un tracé de (3,1) à (3,5) avec une épaisseur de ligne de 1.0, vous vous retrouvez dans la situation de la deuxième grille. La surface réelle à remplir (bleu foncé) se prolonge seulement à moitié sur les pixels de part et d'autre du chemin. Une approximation de ceci doit être rendue, ce qui signifie que ces pixels sont partiellement ombrés, et le résultat est que toute la zone (le bleu clair et bleu foncé) est remplie avec une couleur moitié moins sombre que la couleur du tracé attendu. C'est ce qui arrive avec la largeur de 1.0 dans l'exemple précédent.

+![](canvas-grid.png) -

Pour résoudre ce problème, vous devez être très précis dans la création de votre tracé. Sachant qu'une largeur de 1.0 s'étendra d'une demi-unité de chaque côté du tracé, créer le tracé de (3.5,1) à (3.5,5) aboutit à l'exemple trois pour une largeur de 1.0 et au remplissage d'un seul pixel de ligne verticale.

+Si vous considérez un tracé de (3,1) à (3,5) avec une épaisseur de ligne de `1.0`, vous vous retrouvez dans la situation de la deuxième grille. La surface réelle à remplir (bleu foncé) se prolonge seulement à moitié sur les pixels de part et d'autre du chemin. Une approximation de ceci doit être rendue, ce qui signifie que ces pixels sont partiellement ombrés, et le résultat est que toute la zone (le bleu clair et bleu foncé) est remplie avec une couleur moitié moins sombre que la couleur du tracé attendu. C'est ce qui arrive avec la largeur de `1.0` dans l'exemple précédent. -
-

Note: Sachez que dans notre exemple de ligne verticale, la position Y fait toujours référence à une position de grille entière — sinon, vous verrez des pixels à moitié colorés à gauche et à droite (mais notez aussi que ce comportement dépend de l'actuel style lineCap, dont la valeur par défaut est butt. Vous pouvez essayer de tracer des traits consistants avec des coordonnées non-entières pour les lignes et avec une largeur particulière, en définissant le style lineCap à square, pour que le bord extérieur du trait autour du point final soit automatiquement étendu pour couvrir le pixel entier).

+Pour résoudre ce problème, vous devez être très précis dans la création de votre tracé. Sachant qu'une largeur de `1.0` s'étendra d'une demi-unité de chaque côté du tracé, créer le tracé de (3.5,1) à (3.5,5) aboutit à l'exemple trois pour une largeur de `1.0` et au remplissage d'un seul pixel de ligne verticale. -

Notez également que seuls les points de début et de fin d'un chemin sont affectés : si un chemin est fermé avec closePath (), il n'y a pas de point de départ ni de point final ; à la place, tous les points d'extrémité du chemin sont connectés à leurs segments joints précédent et suivant, en utilisant le paramètre courant du style lineJoin, dont la valeur par défaut est miter, avec pour effet d'étendre automatiquement les bordures extérieures des segments connectés à leur point d'intersection. Ainsi, le trait de rendu couvrira exactement les pixels pleins centrés à chaque extrémité si ces segments connectés sont horizontaux et / ou verticaux. Voir les deux sections suivantes pour les démonstrations de ces styles de lignes supplémentaires.

-
+> **Note :** Sachez que dans notre exemple de ligne verticale, la position Y fait toujours référence à une position de grille entière — sinon, vous verrez des pixels à moitié colorés à gauche et à droite (mais notez aussi que ce comportement dépend de l'actuel style `lineCap`, dont la valeur par défaut est `butt`. Vous pouvez essayer de tracer des traits consistants avec des coordonnées non-entières pour les lignes et avec une largeur particulière, en définissant le style `lineCap` à `square`, pour que le bord extérieur du trait autour du point final soit automatiquement étendu pour couvrir le pixel entier). +> +> Notez également que seuls les points de début et de fin d'un chemin sont affectés : si un chemin est fermé avec `closePath ()`, il n'y a pas de point de départ ni de point final ; à la place, tous les points d'extrémité du chemin sont connectés à leurs segments joints précédent et suivant, en utilisant le paramètre courant du style `lineJoin`, dont la valeur par défaut est `miter`, avec pour effet d'étendre automatiquement les bordures extérieures des segments connectés à leur point d'intersection. Ainsi, le trait de rendu couvrira exactement les pixels pleins centrés à chaque extrémité si ces segments connectés sont horizontaux et / ou verticaux. Voir les deux sections suivantes pour les démonstrations de ces styles de lignes supplémentaires. -

Pour les lignes de largeur paire, chaque moitié finit par être un nombre entier de pixels, vous voulez donc un chemin entre les pixels (c'est-à-dire (3,1) à (3,5)), au lieu de descendre au milieu des pixels .

+Pour les lignes de largeur paire, chaque moitié finit par être un nombre entier de pixels, vous voulez donc un chemin entre les pixels (c'est-à-dire (3,1) à (3,5)), au lieu de descendre au milieu des pixels . -

Bien que légèrement ennuyeux quand on travaille avec des graphismes 2D évolutifs, en accordant une attention à la grille de pixels et à la position des tracés, vous vous assurez du comportement correct de vos dessins, et ce, indépendamment de la mise à l'échelle ou d'autres transformations. Une ligne verticale de largeur 1,0 à la bonne position deviendra une ligne de 2 pixels nette à l'échelle 2.

+Bien que légèrement ennuyeux quand on travaille avec des graphismes 2D évolutifs, en accordant une attention à la grille de pixels et à la position des tracés, vous vous assurez du comportement correct de vos dessins, et ce, indépendamment de la mise à l'échelle ou d'autres transformations. Une ligne verticale de largeur 1,0 à la bonne position deviendra une ligne de 2 pixels nette à l'échelle 2. -

Un exemple de lineCap

+### Un exemple de `lineCap` -

La propriété lineCap détermine comment les extrêmités de chaque ligne sont dessinées. Il y a trois valeurs possibles pour la propriété : butt, round et square. Par défaut, la propriété est définie à butt.

+La propriété `lineCap` détermine comment les extrêmités de chaque ligne sont dessinées. Il y a trois valeurs possibles pour la propriété : `butt`, `round` et `square`. Par défaut, la propriété est définie à `butt`. -
-
butt (bout)
-
L'extrémité des lignes est en angle droit.
-
round (rond)
-
Les extrémités sont arrondies.
-
square (carré)
-
Les extrémités sont en angle droit en ajoutant une extension d'une largeur égale à la ligne et une hauteur égale à la moitié de la largeur de la ligne.
-
+- `butt `_(bout)_ + - : L'extrémité des lignes est en angle droit. +- `round `_(rond)_ + - : Les extrémités sont arrondies. +- `square `_(carré)_ + - : Les extrémités sont en angle droit en ajoutant une extension d'une largeur égale à la ligne et une hauteur égale à la moitié de la largeur de la ligne. -

Dans cet exemple, nous avons tracé trois lignes, chacune avec une valeur différente pour la propriété lineCap. Nous avons par ailleurs ajouté deux guides pour voir exactement les différences entre les trois lignes. Chacune de ces trois lignes est identique entre les deux traits bleus.

+Dans cet exemple, nous avons tracé trois lignes, chacune avec une valeur différente pour la propriété `lineCap`. Nous avons par ailleurs ajouté deux guides pour voir exactement les différences entre les trois lignes. Chacune de ces trois lignes est identique entre les deux traits bleus. -

La ligne de gauche utilise l'option par défaut butt. Vous pourrez noter qu'elle est entièrement dessinée entre les deux guides. La deuxième utilise l'option round. Elle ajoute un demi-cercle à chaque extrémité d'un rayon valant la moitié de la largeur de la ligne. La ligne de droite utilise l'option square. Elle ajoute une extension avec une largeur égale à la ligne et une hauteur équivalante à la moitié de la largeur de la ligne.

+La ligne de gauche utilise l'option par défaut `butt`. Vous pourrez noter qu'elle est entièrement dessinée entre les deux guides. La deuxième utilise l'option `round`. Elle ajoute un demi-cercle à chaque extrémité d'un rayon valant la moitié de la largeur de la ligne. La ligne de droite utilise l'option `square`. Elle ajoute une extension avec une largeur égale à la ligne et une hauteur équivalante à la moitié de la largeur de la ligne. -
function draw() {
+```js
+function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
   var lineCap = ['butt', 'round', 'square'];
 
@@ -277,7 +295,7 @@ ctx.fillStyle = "rgba(255, 0, 0, .5)";
 
   // Dessiner des lignes
   ctx.strokeStyle = 'black';
-  for (var i = 0; i < lineCap.length; i++) {
+  for (var i = 0; i < lineCap.length; i++) {
     ctx.lineWidth = 15;
     ctx.lineCap = lineCap[i];
     ctx.beginPath();
@@ -285,36 +303,40 @@ ctx.fillStyle = "rgba(255, 0, 0, .5)";
     ctx.lineTo(25 + i * 50, 140);
     ctx.stroke();
   }
-}
+} +``` - +```html hidden + +``` - +```js hidden +draw(); +``` -

{{EmbedLiveSample("A_lineCap_example", "180", "180", "canvas_linecap.png")}}

+{{EmbedLiveSample("A_lineCap_example", "180", "180", "canvas_linecap.png")}} -

Un exemple de lineJoin

+### Un exemple de `lineJoin` -

La propriété lineJoin détermine comment deux segments (lignes, arcs ou courbes), de largeur non nulle se connectant dans une forme, sont joints ensemble (les segments de longueur nulle, dont les coordonnées de départ et de fin sont exactement les mêmes, sont ignorés).

+La propriété `lineJoin` détermine comment deux segments (lignes, arcs ou courbes), de largeur non nulle se connectant dans une forme, sont joints ensemble (les segments de longueur nulle, dont les coordonnées de départ et de fin sont exactement les mêmes, sont ignorés). -

Il existe trois valeurs possibles pour cette propriété : round, bevel et miter. Par défaut, cette propriété est définie à miter. Notez que le paramètre lineJoin n'a pas d'effet si les deux segments connectés ont la même direction, parce qu'aucune zone de jointure ne sera ajoutée dans ce cas.

+Il existe trois valeurs possibles pour cette propriété : `round`, `bevel` et `miter`. Par défaut, cette propriété est définie à `miter`. Notez que le paramètre `lineJoin` n'a pas d'effet si les deux segments connectés ont la même direction, parce qu'aucune zone de jointure ne sera ajoutée dans ce cas. -
-
round (rond)
-
Arrondit les angles des segments en ajoutant un arc de cercle centré à l'extrémité commune des segments connectés. Le rayon de ces angles arrondis est égal à la moitié de la largeur du trait.
-
bevel (biseau)
-
Ajoute un triangle à l'extrémité commune des segments connectés.
-
miter (onglet)
-
Les segments connectés sont reliés en prolongeant leurs bords extérieurs pour se connecter en un seul point, avec pour effet de remplir une zone supplémentaire en forme de losange. Ce paramètre est effectué par la propriété miterLimit qui est expliquée ci-dessous.
-
+- `round `_(rond)_ + - : Arrondit les angles des segments en ajoutant un arc de cercle centré à l'extrémité commune des segments connectés. Le rayon de ces angles arrondis est égal à la moitié de la largeur du trait. +- `bevel `_(biseau)_ + - : Ajoute un triangle à l'extrémité commune des segments connectés. +- `miter `_(onglet)_ + - : Les segments connectés sont reliés en prolongeant leurs bords extérieurs pour se connecter en un seul point, avec pour effet de remplir une zone supplémentaire en forme de losange. Ce paramètre est effectué par la propriété miterLimit qui est expliquée ci-dessous. -

L'exemple ci-dessous dessine trois chemins différents, démontrant chacun de ces trois paramètres de propriété lineJoin ; la sortie est montrée ci-dessus.

+L'exemple ci-dessous dessine trois chemins différents, démontrant chacun de ces trois paramètres de propriété` lineJoin` ; la sortie est montrée ci-dessus. -
function draw() {
+```js
+function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
   var lineJoin = ['round', 'bevel', 'miter'];
   ctx.lineWidth = 10;
-  for (var i = 0; i < lineJoin.length; i++) {
+  for (var i = 0; i < lineJoin.length; i++) {
     ctx.lineJoin = lineJoin[i];
     ctx.beginPath();
     ctx.moveTo(-5, 5 + i * 40);
@@ -324,36 +346,39 @@ ctx.fillStyle = "rgba(255, 0, 0, .5)";
     ctx.lineTo(155, 5 + i * 40);
     ctx.stroke();
   }
-}
+} +``` - +```html hidden + +``` - -
+```js hidden +draw(); +``` -

{{EmbedLiveSample("A_lineJoin_example", "180", "180", "canvas_linejoin.png")}}

+{{EmbedLiveSample("A_lineJoin_example", "180", "180", "canvas_linejoin.png")}} -

Une démonstration de la propriété miterLimit

+### Une démonstration de la propriété `miterLimit` -

Comme vous l'avez vu dans l'exemple précédent, lorsque vous joignez deux lignes avec l'option d'onglet, les bords extérieurs des deux lignes d'assemblage sont étendus jusqu'au point où ils se rencontrent. Pour les lignes qui sont à grands angles les unes avec les autres, ce point n'est pas loin du point de connexion interne. Cependant, lorsque les angles entre chaque ligne diminuent, la distance entre ces points augmente exponentiellement.

+Comme vous l'avez vu dans l'exemple précédent, lorsque vous joignez deux lignes avec l'option d'onglet, les bords extérieurs des deux lignes d'assemblage sont étendus jusqu'au point où ils se rencontrent. Pour les lignes qui sont à grands angles les unes avec les autres, ce point n'est pas loin du point de connexion interne. Cependant, lorsque les angles entre chaque ligne diminuent, la distance entre ces points augmente exponentiellement. -

La propriété miterLimit détermine dans quelle mesure le point de connexion externe peut être placé à partir du point de connexion interne. Si deux lignes dépassent cette valeur, une jointure biseau est dessinée à la place. Notez que la longueur ajoutée maximale est le produit de la largeur de ligne mesurée dans le système de coordonnées actuel, par la valeur de cette propriété miterLimit (dont la valeur par défaut est 10.0 dans le HTML {{HTMLElement("canvas")}}). miterLimit peut être défini indépendamment de l'échelle d'affichage actuelle ou de toutes les transformations affinées de chemins : il n'influence que la forme des bords de lignes effectivement rendues.

+La propriété `miterLimit` détermine dans quelle mesure le point de connexion externe peut être placé à partir du point de connexion interne. Si deux lignes dépassent cette valeur, une jointure biseau est dessinée à la place. Notez que la longueur ajoutée maximale est le produit de la largeur de ligne mesurée dans le système de coordonnées actuel, par la valeur de cette propriété `miterLimit` (dont la valeur par défaut est 10.0 dans le HTML {{HTMLElement("canvas")}}). ```miterLimit` peut être défini indépendamment de l'échelle d'affichage actuelle ou de toutes les transformations affinées de chemins : il n'influence que la forme des bords de lignes effectivement rendues. -

Plus précisément, la limite d'onglet est le rapport maximal autorisé de la longueur d'extension (dans le canvas HTML, il est mesuré entre le coin extérieur des bords joints de la ligne et le point d'extrémité commun des segments de connexion spécifiés dans le chemin) à la moitié de la largeur de la ligne. Il peut être défini, de manière équivalente, comme le rapport maximum autorisé de la distance entre les points de jonction intérieur et extérieur des bords et la largeur totale de la ligne. Il est alors égal à la cosécante de la moitié de l'angle interne minimum des segments de connexion, en-dessous de laquelle aucune jointure d'onglet ne sera rendue, mais seulement une jointure en biseau :

+Plus précisément, la limite d'onglet est le rapport maximal autorisé de la longueur d'extension (dans le canvas HTML, il est mesuré entre le coin extérieur des bords joints de la ligne et le point d'extrémité commun des segments de connexion spécifiés dans le chemin) à la moitié de la largeur de la ligne. Il peut être défini, de manière équivalente, comme le rapport maximum autorisé de la distance entre les points de jonction intérieur et extérieur des bords et la largeur totale de la ligne. Il est alors égal à la cosécante de la moitié de l'angle interne minimum des segments de connexion, en-dessous de laquelle aucune jointure d'onglet ne sera rendue, mais seulement une jointure en biseau : -
    -
  • miterLimit = max miterLength / lineWidth = 1 / sin ( min θ / 2 )
    • -
  • La limite d'onglet par défaut de 10.0 supprimera tous les onglets pour les angles vifs inférieurs à environ 11 degrés.
    • -
  • Une limite d'onglet égale à √2 ≈ 1.4142136 (arrondie au-dessus) enlèvera les onglets pour tous les angles aigus, en conservant les joints d'onglet seulement pour les angles obtus ou droits.
    • -
  • Une limite d'onglet égale à 1.0 est valide mais désactivera tous les onglets.
    • -
  • Les valeurs inférieures à 1.0 sont invalides pour la limite d'onglet.
    • -
+- `miterLimit` = **max** `miterLength` / `lineWidth` = 1 / **sin** ( **min** _θ_ / 2 ) +- La limite d'onglet par défaut de 10.0 supprimera tous les onglets pour les angles vifs inférieurs à environ 11 degrés. +- Une limite d'onglet égale à √2 ≈ 1.4142136 (arrondie au-dessus) enlèvera les onglets pour tous les angles aigus, en conservant les joints d'onglet seulement pour les angles obtus ou droits. +- Une limite d'onglet égale à 1.0 est valide mais désactivera tous les onglets. +- Les valeurs inférieures à 1.0 sont invalides pour la limite d'onglet. -

Voici une petite démo dans laquelle vous pouvez définir dynamiquement miterLimit et voir comment cela affecte les formes sur le canevas. Les lignes bleues indiquent où se trouvent les points de départ et d'arrivée de chacune des lignes du motif en zig-zag.

+Voici une petite démo dans laquelle vous pouvez définir dynamiquement `miterLimit` et voir comment cela affecte les formes sur le canevas. Les lignes bleues indiquent où se trouvent les points de départ et d'arrivée de chacune des lignes du motif en zig-zag. -

Si vous spécifiez une valeur miterLimit inférieure à 4.2 dans cette démo, aucun des coins visibles ne se joindra avec une extension onglet, mais seulement avec un petit biseau près des lignes bleues ; avec une limite à onglets au-dessus de 10, la plupart des coins de cette démo devraient se combiner avec un onglet loin des lignes bleues et dont la hauteur diminue entre les coins de gauche à droite, car ils se connectent avec des angles croissants ; avec des valeurs intermédiaires, les coins du côté gauche ne rejoignent qu'un biseau près des lignes bleues et les coins du côté droit avec une extension à onglets (également avec une hauteur décroissante).

+Si vous spécifiez une valeur `miterLimit` inférieure à 4.2 dans cette démo, aucun des coins visibles ne se joindra avec une extension onglet, mais seulement avec un petit biseau près des lignes bleues ; avec une limite à onglets au-dessus de 10, la plupart des coins de cette démo devraient se combiner avec un onglet loin des lignes bleues et dont la hauteur diminue entre les coins de gauche à droite, car ils se connectent avec des angles croissants ; avec des valeurs intermédiaires, les coins du côté gauche ne rejoignent qu'un biseau près des lignes bleues et les coins du côté droit avec une extension à onglets (également avec une hauteur décroissante). -
function draw() {
+```js
+function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
 
   // Éffacer canvas
@@ -378,41 +403,49 @@ ctx.fillStyle = "rgba(255, 0, 0, .5)";
   // Dessiner des lignes
   ctx.beginPath();
   ctx.moveTo(0, 100);
-  for (i = 0; i < 24 ; i++) {
+  for (i = 0; i < 24 ; i++) {
     var dy = i % 2 == 0 ? 25 : -25;
     ctx.lineTo(Math.pow(i, 1.5) * 2, 75 + dy);
   }
   ctx.stroke();
   return false;
-}
- - - - - -

{{EmbedLiveSample("A_demo_of_the_miterLimit_property", "400", "180", "canvas_miterlimit.png")}}

- -

Utilisation de lignes pointillées

- -

setLineDash et lineDashOffset précisent le modèle de lignes. setLineDash accepte une liste de nombres qui spécifie les distances pour dessiner alternativement une ligne et un espace et lineDashOffset définit un décalage pour commencer le motif.

- -

Dans cet exemple, nous créons un effet de fourmis en marche. C'est une technique d'animation souvent employée dans les sélections d'outils des programmes graphiques. Cet effet permet à l'utilisateur de distinguer la frontière de l'image de fond de la sélection en animant la frontière. Dans une partie de ce tutoriel, vous pouvez apprendre comment faire cela et d'autres animations de base animation basiques..

- - - -
var ctx = document.getElementById('canvas').getContext('2d');
+}
+```
+
+```html hidden
+
+  
+    
+    
+  
+
Change the miterLimit by entering a new value below and clicking the redraw button.


+      

+        
+        
+        
+      

+    

+```
+
+```js hidden
+document.getElementById('miterLimit').value = document.getElementById('canvas').getContext('2d').miterLimit;
+draw();
+```
+
+{{EmbedLiveSample("A_demo_of_the_miterLimit_property", "400", "180", "canvas_miterlimit.png")}}
+
+### Utilisation de lignes pointillées
+
+`setLineDash` et `lineDashOffset` précisent le modèle de lignes. `setLineDash` accepte une liste de nombres qui spécifie les distances pour dessiner alternativement une ligne et un espace et `lineDashOffset` définit un décalage pour commencer le motif.
+
+Dans cet exemple, nous créons un effet de fourmis en marche. C'est une technique d'animation souvent employée dans les sélections d'outils des programmes graphiques. Cet effet permet à l'utilisateur de distinguer la frontière de l'image de fond de la sélection en animant la frontière. Dans une partie de ce tutoriel, vous pouvez apprendre comment faire cela et d'autres animations de base [animation basiques.](/fr/docs/Web/API/Canvas_API/Tutorial/Basic_animations)[.](/fr/docs/Tutoriel_canvas/Animations_basiques)
+
+```html hidden
+
+```
+
+```js
+var ctx = document.getElementById('canvas').getContext('2d');
 var offset = 0;
 
 function draw() {
@@ -424,51 +457,53 @@ function draw() {
 
 function march() {
   offset++;
-  if (offset > 16) {
+  if (offset > 16) {
     offset = 0;
   }
   draw();
   setTimeout(march, 20);
 }
 
-march();
+march(); +``` -

{{EmbedLiveSample("Using_line_dashes", "120", "120", "marching-ants.png")}}

+{{EmbedLiveSample("Using_line_dashes", "120", "120", "marching-ants.png")}} -

Dégradés

+## Dégradés -

Comme n'importe quel programme de dessin normal, nous pouvons remplir et découper des formes à l'aide de dégradés linéaires et radiaux. Nous créons un objet {{domxref ("CanvasGradient")}} en utilisant l'une des méthodes suivantes. Nous pouvons ensuite affecter cet objet aux propriétés fillStyle ou strokeStyle.

+Comme n'importe quel programme de dessin normal, nous pouvons remplir et découper des formes à l'aide de dégradés linéaires et radiaux. Nous créons un objet {{domxref ("CanvasGradient")}} en utilisant l'une des méthodes suivantes. Nous pouvons ensuite affecter cet objet aux propriétés `fillStyle` ou `strokeStyle`. -
-
{{domxref("CanvasRenderingContext2D.createLinearGradient", "createLinearGradient(x1, y1, x2, y2)")}}
-
Crée un objet dégradé linéaire avec un point de départ (x1, y1) et un point final (x2, y2).
-
{{domxref("CanvasRenderingContext2D.createRadialGradient", "createRadialGradient(x1, y1, r1, x2, y2, r2)")}}
-
Crée un dégradé radial. Les paramètres représentent deux cercles, l'un avec son centre à (x1, y1) et un rayon r1, l'autre avec son centre à (x2, y2) avec un rayon r2.
-
+- {{domxref("CanvasRenderingContext2D.createLinearGradient", "createLinearGradient(x1, y1, x2, y2)")}} + - : Crée un objet dégradé linéaire avec un point de départ (`x1`, `y1`) et un point final (`x2`, `y2`). +- {{domxref("CanvasRenderingContext2D.createRadialGradient", "createRadialGradient(x1, y1, r1, x2, y2, r2)")}} + - : Crée un dégradé radial. Les paramètres représentent deux cercles, l'un avec son centre à (`x1`, `y1`) et un rayon `r1`, l'autre avec son centre à (`x2`, `y2`) avec un rayon `r2`. -

Par exemple:

+Par exemple: -
var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
-var radialgradient = ctx.createRadialGradient(75, 75, 0, 75, 75, 100);
+```js +var lineargradient = ctx.createLinearGradient(0, 0, 150, 150); +var radialgradient = ctx.createRadialGradient(75, 75, 0, 75, 75, 100); +``` -

Une fois que nous avons créé un objet CanvasGradient, nous pouvons lui assigner des couleurs en utilisant la méthode addColorStop ().

+Une fois que nous avons créé un objet `CanvasGradient`, nous pouvons lui assigner des couleurs en utilisant la méthode `addColorStop ()`. -
-
{{domxref("CanvasGradient.addColorStop", "gradient.addColorStop(position, color)")}}
-
Crée un nouvel arrêt de couleur sur l'objet gradient (dégradé). La position est un nombre entre 0.0 et 1.0 et définit la position relative de la couleur dans le dégradé ; et l'argument color doit être une chaîne représentant une CSS {{cssxref ("<color>")}}, indiquant la couleur que le dégradé devrait atteindre.
-
+- {{domxref("CanvasGradient.addColorStop", "gradient.addColorStop(position, color)")}} + - : Crée un nouvel arrêt de couleur sur l'objet `gradient` _(dégradé)_. La position est un nombre entre 0.0 et 1.0 et définit la position relative de la couleur dans le dégradé ; et l'argument `color` doit être une chaîne représentant une CSS {{cssxref ("<color>")}}, indiquant la couleur que le dégradé devrait atteindre. -

Vous pouvez ajouter autant d'arrêts de couleur à un dégradé que vous le souhaitez. Ci-dessous figure un dégradé linéaire très simple du blanc au noir.

+Vous pouvez ajouter autant d'arrêts de couleur à un dégradé que vous le souhaitez. Ci-dessous figure un dégradé linéaire très simple du blanc au noir. -
var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
+```js
+var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
 lineargradient.addColorStop(0, 'white');
-lineargradient.addColorStop(1, 'black');
+lineargradient.addColorStop(1, 'black'); +``` -

Un exemple de createLinearGradient

+### Un exemple de `createLinearGradient` -

Dans cet exemple, nous allons créer deux dégradés différents. Comme vous pouvez le voir ici, les propriétés strokeStyle et fillStyle peuvent accepter un objet canvasGradient comme entrée valide.

+Dans cet exemple, nous allons créer deux dégradés différents. Comme vous pouvez le voir ici, les propriétés `strokeStyle` et `fillStyle` peuvent accepter un objet `canvasGradient` comme entrée valide. -
function draw() {
+```js
+function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
 
   // Créer un dégradé
@@ -490,24 +525,29 @@ lineargradient.addColorStop(1, 'black');
ctx.fillRect(10, 10, 130, 130); ctx.strokeRect(50, 50, 50, 50); -} +} +``` - +```html hidden + +``` - - +```js hidden +draw(); +``` -

Le premier est un dégradé d'arrière-plan. Comme vous pouvez le voir, nous avons assigné deux couleurs à la même position. Vous faites cela pour faire des transitions de couleurs très nettes - dans ce cas du blanc au vert. Normalement, peu importe dans quel ordre vous définissez l'arrêt de la couleur, mais dans ce cas particulier, la différence peut être significative. Si vous conservez les affectations dans l'ordre où vous voulez qu'elles apparaissent, cela ne posera aucun problème.

+Le premier est un dégradé d'arrière-plan. Comme vous pouvez le voir, nous avons assigné deux couleurs à la même position. Vous faites cela pour faire des transitions de couleurs très nettes - dans ce cas du blanc au vert. Normalement, peu importe dans quel ordre vous définissez l'arrêt de la couleur, mais dans ce cas particulier, la différence peut être significative. Si vous conservez les affectations dans l'ordre où vous voulez qu'elles apparaissent, cela ne posera aucun problème. -

Dans le second gradient, nous n'avons pas assigné la couleur de départ (à la position 0.0) puisqu'il n'était pas strictement nécessaire car il prendra automatiquement la valeur de la prochaine couleur. Par conséquent, l'attribution de la couleur noire à la position 0,5 fait automatiquement passer le dégradé, du début à l'arrêt, en noir.

+Dans le second gradient, nous n'avons pas assigné la couleur de départ (à la position 0.0) puisqu'il n'était pas strictement nécessaire car il prendra automatiquement la valeur de la prochaine couleur. Par conséquent, l'attribution de la couleur noire à la position 0,5 fait automatiquement passer le dégradé, du début à l'arrêt, en noir. -

{{EmbedLiveSample("A_createLinearGradient_example", "180", "180", "canvas_lineargradient.png")}}

+{{EmbedLiveSample("A_createLinearGradient_example", "180", "180", "canvas_lineargradient.png")}} -

Un exemple de createRadialGradient

+### Un exemple de `createRadialGradient` -

Dans cet exemple, nous définirons quatre dégradés radiaux différents. Parce que nous avons le contrôle sur les points de départ et de fermeture du dégradé, nous pouvons obtenir des effets plus complexes que nous aurions normalement dans les dégradés radiaux "classiques" (c'est-à-dire un dégradé avec un seul point central où le dégradé se développe vers l'extérieur dans une forme circulaire).

+Dans cet exemple, nous définirons quatre dégradés radiaux différents. Parce que nous avons le contrôle sur les points de départ et de fermeture du dégradé, nous pouvons obtenir des effets plus complexes que nous aurions normalement dans les dégradés radiaux "classiques" (c'est-à-dire un dégradé avec un seul point central où le dégradé se développe vers l'extérieur dans une forme circulaire). -
function draw() {
+```js
+function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
 
   // Créer un dégradé
@@ -540,55 +580,57 @@ lineargradient.addColorStop(1, 'black');
ctx.fillRect(0, 0, 150, 150); ctx.fillStyle = radgrad; ctx.fillRect(0, 0, 150, 150); -} +} +``` - +```html hidden + +``` - +```js hidden +draw(); +``` -

Dans ce cas, nous avons légèrement décalé le point de départ du point final pour obtenir un effet 3D sphérique. Il est préférable d'éviter de laisser les cercles intérieurs et extérieurs se chevaucher car cela entraîne des effets étranges, difficiles à prédire.

+Dans ce cas, nous avons légèrement décalé le point de départ du point final pour obtenir un effet 3D sphérique. Il est préférable d'éviter de laisser les cercles intérieurs et extérieurs se chevaucher car cela entraîne des effets étranges, difficiles à prédire. -

Le dernier arrêt de couleur dans chacun des quatre dégradés utilise une couleur entièrement transparente. Si vous voulez une transition agréable de cette étape à la couleur précédente, les deux couleurs doivent être égales. Ce n'est pas très évident dans le code, car il utilise deux méthodes CSS différentes en démonstration, mais dans le premier dégradé # 019F62 = rgba (1,159,98,1).

+Le dernier arrêt de couleur dans chacun des quatre dégradés utilise une couleur entièrement transparente. Si vous voulez une transition agréable de cette étape à la couleur précédente, les deux couleurs doivent être égales. Ce n'est pas très évident dans le code, car il utilise deux méthodes CSS différentes en démonstration, mais dans le premier dégradé `# 019F62 = rgba (1,159,98,1)`. -

{{EmbedLiveSample("A_createRadialGradient_example", "180", "180", "canvas_radialgradient.png")}}

+{{EmbedLiveSample("A_createRadialGradient_example", "180", "180", "canvas_radialgradient.png")}} -

Modèles

+## Modèles -

Dans l'un des exemples de la page précédente, nous avons utilisé une série de boucles pour créer un motif d'images. Il existe cependant une méthode beaucoup plus simple : la méthode createPattern ().

+Dans l'un des exemples de la page précédente, nous avons utilisé une série de boucles pour créer un motif d'images. Il existe cependant une méthode beaucoup plus simple : la méthode `createPattern ()`. -
-
{{domxref("CanvasRenderingContext2D.createPattern", "createPattern(image, type)")}}
-
Crée et renvoie un nouvel objet de canvas. image est un {{domxref ("CanvasImageSource")}} (c'est-à-dire un {{domxref ("HTMLImageElement")}} ; un autre élément canvas,  type est une chaîne indiquant comment utiliser l'image.
-
+- {{domxref("CanvasRenderingContext2D.createPattern", "createPattern(image, type)")}} + - : Crée et renvoie un nouvel objet de canvas. `image` est un {{domxref ("CanvasImageSource")}} (c'est-à-dire un {{domxref ("HTMLImageElement")}} ; un autre élément canvas,  `type` est une chaîne indiquant comment utiliser l'image. -

Le type spécifie comment utiliser l'image pour créer le motif et doit avoir l'une des valeurs de chaîne suivantes :

+Le type spécifie comment utiliser l'image pour créer le motif et doit avoir l'une des valeurs de chaîne suivantes : -
-
repeat
-
Tapisse la zone en répètant l'image dans les deux sens vertical et horizontal.
-
repeat-x
-
Tapisse la zone en répètant l'image horizontalement mais pas verticalement.
-
repeat-y
-
Tapisse la zone en répètant l'image verticalement mais pas horizontalement.
-
no-repeat
-
Ne tapisse pas la zone avec l'image, elle est utilisée une seule fois.
-
+- `repeat` + - : Tapisse la zone en répètant l'image dans les deux sens vertical et horizontal. +- `repeat-x` + - : Tapisse la zone en répètant l'image horizontalement mais pas verticalement. +- `repeat-y` + - : Tapisse la zone en répètant l'image verticalement mais pas horizontalement. +- `no-repeat` + - : Ne tapisse pas la zone avec l'image, elle est utilisée une seule fois. -

Nous utilisons cette méthode pour créer un objet {{domxref ("CanvasPattern")}} qui est très similaire aux méthodes de dégradé que nous avons vu ci-dessus. Une fois que nous avons créé un modèle, nous pouvons l'affecter aux propriétés fillStyle ou strokeStyle. Par exemple :

+Nous utilisons cette méthode pour créer un objet {{domxref ("CanvasPattern")}} qui est très similaire aux méthodes de dégradé que nous avons vu ci-dessus. Une fois que nous avons créé un modèle, nous pouvons l'affecter aux propriétés fillStyle ou strokeStyle. Par exemple : -
var img = new Image();
+```js
+var img = new Image();
 img.src = 'someimage.png';
-var ptrn = ctx.createPattern(img, 'repeat');
+var ptrn = ctx.createPattern(img, 'repeat'); +``` -
-

Note: Comme avec la méthode drawImage (), vous devez vous assurer que l'image que vous utilisez est chargée avant d'appeler cette méthode, ou le motif pourrait être mal dessiné.

-
+> **Note :** Comme avec la méthode `drawImage ()`, vous devez vous assurer que l'image que vous utilisez est chargée avant d'appeler cette méthode, ou le motif pourrait être mal dessiné. -

Un exemple de createPattern

+### Un exemple de `createPattern` -

Dans ce dernier exemple, nous allons créer un modèle à affecter à la propriété fillStyle. La seule chose à noter, est l'utilisation du gestionnaire onload de l'image. Cela permet de s'assurer que l'image est chargée avant d'être affectée au motif.

+Dans ce dernier exemple, nous allons créer un modèle à affecter à la propriété `fillStyle`. La seule chose à noter, est l'utilisation du gestionnaire `onload` de l'image. Cela permet de s'assurer que l'image est chargée avant d'être affectée au motif. -
function draw() {
+```js
+function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
 
   // créer un nouvel objet image à utiliser comme modèle
@@ -602,46 +644,48 @@ var ptrn = ctx.createPattern(img, 'repeat');
ctx.fillRect(0, 0, 150, 150); } -} +} +``` - +```html hidden + +``` - +```js hidden +draw(); +``` -

Le résultat ressemble à ceci :

+Le résultat ressemble à ceci : -

{{EmbedLiveSample("A_createPattern_example", "180", "180", "canvas_createpattern.png")}}

+{{EmbedLiveSample("A_createPattern_example", "180", "180", "canvas_createpattern.png")}} -

Ombres

+## Ombres -

L'utilisation des ombres ne comporte que quatre propriétés :

+L'utilisation des ombres ne comporte que quatre propriétés : -
-
{{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX = float")}}
-
Indique la distance horizontale sur laquelle l'ombre doit s'étendre à partir de l'objet. Cette valeur n'est pas affectée par la matrice de transformation. La valeur par défaut est 0.
-
{{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY = float")}}
-
Indique la distance verticale sur laquelle l'ombre doit s'étendre à partir de l'objet. Cette valeur n'est pas affectée par la matrice de transformation. La valeur par défaut est 0.
-
{{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur = float")}}
-
Indique la taille de l'effet de floutage ; cette valeur ne correspond pas à un nombre de pixels et n'est pas affectée par la matrice de transformation actuelle. La valeur par défaut est 0.
-
{{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor = color")}}
-
Une valeur de couleur CSS standard indiquant la couleur de l'effet d'ombre ; par défaut, il est entièrement noir transparent.
-
+- {{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX = float")}} + - : Indique la distance horizontale sur laquelle l'ombre doit s'étendre à partir de l'objet. Cette valeur n'est pas affectée par la matrice de transformation. La valeur par défaut est 0. +- {{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY = float")}} + - : Indique la distance verticale sur laquelle l'ombre doit s'étendre à partir de l'objet. Cette valeur n'est pas affectée par la matrice de transformation. La valeur par défaut est 0. +- {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur = float")}} + - : Indique la taille de l'effet de floutage ; cette valeur ne correspond pas à un nombre de pixels et n'est pas affectée par la matrice de transformation actuelle. La valeur par défaut est 0. +- {{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor = color")}} + - : Une valeur de couleur CSS standard indiquant la couleur de l'effet d'ombre ; par défaut, il est entièrement noir transparent. -

Les propriétés shadowOffsetX et shadowOffsetY indiquent sur quelle distance l'ombre doit s'étendre à partir de l'objet dans les directions X et Y; ces valeurs ne sont pas affectées par la matrice de transformation actuelle. Utilisez des valeurs négatives pour faire en sorte que l'ombre s'étende vers le haut ou vers la gauche et des valeurs positives pour que l'ombre s'étende vers le bas ou vers la droite. La valeur par défaut est 0 pour les 2 propriétés.

+Les propriétés `shadowOffsetX` et `shadowOffsetY` indiquent sur quelle distance l'ombre doit s'étendre à partir de l'objet dans les directions X et Y; ces valeurs ne sont pas affectées par la matrice de transformation actuelle. Utilisez des valeurs négatives pour faire en sorte que l'ombre s'étende vers le haut ou vers la gauche et des valeurs positives pour que l'ombre s'étende vers le bas ou vers la droite. La valeur par défaut est 0 pour les 2 propriétés. -

La propriété shadowBlur indique la taille de l'effet de flou ; cette valeur ne correspond pas à un nombre de pixels et n'est pas affectée par la matrice de transformation actuelle. La valeur par défaut est 0.

+La propriété `shadowBlur` indique la taille de l'effet de flou ; cette valeur ne correspond pas à un nombre de pixels et n'est pas affectée par la matrice de transformation actuelle. La valeur par défaut est 0. -

La propriété shadowColor est une valeur de couleur CSS standard indiquant la couleur de l'effet d'ombre ; par défaut, il est entièrement en noir transparent.

+La propriété `shadowColor` est une valeur de couleur CSS standard indiquant la couleur de l'effet d'ombre ; par défaut, il est entièrement en noir transparent. -
-

Note : Les ombres ne sont dessinées que pour les opérations de composition source-over.

-
+> **Note :** Les ombres ne sont dessinées que pour les [opérations de composition](/fr/docs/Web/API/Canvas_API/Tutorial/Compositing) `source-over`. -

Un exemple de texte ombré

+### Un exemple de texte ombré -

Cet exemple dessine une chaîne de texte avec un effet d'ombrage.

+Cet exemple dessine une chaîne de texte avec un effet d'ombrage. -
function draw() {
+```js
+function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
 
   ctx.shadowOffsetX = 2;
@@ -652,42 +696,50 @@ var ptrn = ctx.createPattern(img, 'repeat');
ctx.font = '20px Times New Roman'; ctx.fillStyle = 'Black'; ctx.fillText('Sample String', 5, 30); -} +} +``` + +```html hidden + +``` - +```js hidden +draw(); +``` - +{{EmbedLiveSample("A_shadowed_text_example", "180", "100", "shadowed-string.png")}} -

{{EmbedLiveSample("A_shadowed_text_example", "180", "100", "shadowed-string.png")}}

+Nous allons regarder la propriété de la `font` _(police de caratères)_ et la méthode `fillText` dans le chapitre suivant sur le [dessin de texte](/fr/docs/Dessin_de_texte_avec_canvas). -

Nous allons regarder la propriété de la font (police de caratères) et la méthode fillText dans le chapitre suivant sur le dessin de texte.

+## Règles de remplissage Canvas -

Règles de remplissage Canvas

+Lors de l'utilisation de `fill` (ou {{domxref ("CanvasRenderingContext2D.clip", "clip")}} et {{domxref("CanvasRenderingContext2D.isPointInPath", "isPointinPath")}}) , déterminez si un point est à l'intérieur ou à l'extérieur d'un chemin et ainsi, s'il est rempli ou non. Ceci est utile lorsqu'un chemin en croise  un autre ou est imbriqué. -

Lors de l'utilisation de fill (ou {{domxref ("CanvasRenderingContext2D.clip", "clip")}} et {{domxref("CanvasRenderingContext2D.isPointInPath", "isPointinPath")}}) , déterminez si un point est à l'intérieur ou à l'extérieur d'un chemin et ainsi, s'il est rempli ou non. Ceci est utile lorsqu'un chemin en croise  un autre ou est imbriqué.
-
- Deux valeurs sont possibles :

+Deux valeurs sont possibles : - +- **`"nonzero`**": la [règle non-zero](http://en.wikipedia.org/wiki/Nonzero-rule), qui est la règle par défaut. +- **`"evenodd"`**: La [règle even-odd](http://en.wikipedia.org/wiki/Even%E2%80%93odd_rule). -

Dans cet exemple, nous utilisons la règle evenodd .

+Dans cet exemple, nous utilisons la règle `evenodd` . -
function draw() {
+```js
+function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
   ctx.beginPath();
   ctx.arc(50, 50, 30, 0, Math.PI * 2, true);
   ctx.arc(50, 50, 15, 0, Math.PI * 2, true);
   ctx.fill('evenodd');
-}
+} +``` - +```html hidden + +``` - - +```js hidden +draw(); +``` -

{{EmbedLiveSample("Canvas_fill_rules", "110", "110", "fill-rule.png")}}

+{{EmbedLiveSample("Canvas_fill_rules", "110", "110", "fill-rule.png")}} -

{{PreviousNext("Tutoriel_canvas/Formes_géométriques", "Dessin_de_texte_avec_canvas")}}

+{{PreviousNext("Tutoriel_canvas/Formes_géométriques", "Dessin_de_texte_avec_canvas")}} diff --git a/files/fr/web/api/canvas_api/tutorial/basic_animations/index.md b/files/fr/web/api/canvas_api/tutorial/basic_animations/index.md index e37d15eba9..fecfd63ca6 100644 --- a/files/fr/web/api/canvas_api/tutorial/basic_animations/index.md +++ b/files/fr/web/api/canvas_api/tutorial/basic_animations/index.md @@ -11,61 +11,56 @@ tags: translation_of: Web/API/Canvas_API/Tutorial/Basic_animations original_slug: Web/API/Canvas_API/Tutoriel_canvas/Animations_basiques --- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Tutoriel_canvas/Advanced_animations")}}
+{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Tutoriel_canvas/Advanced_animations")}} -

Avec l'utilisation en Javascript du composant {{HTMLElement("canvas")}}, il est très simple de créer des animations (interactives). Ce chapitre décrit comment créer quelques animations basiques.

+Avec l'utilisation en Javascript du composant {{HTMLElement("canvas")}}, il est très simple de créer des animations (interactives). Ce chapitre décrit comment créer quelques animations basiques. -

La plus grosse limitation est sans doute qu'une fois qu'une forme est dessinée, elle reste telle quelle. Si on a besoin de la déplacer, il faut la redessiner avec ce qui était dessiné avant. Cela peut prendre beaucoup de temps de redessiner des images complexes et les performances dépendront beaucoup de la vitesse de l'ordinateur qui exécute cet affichage.

+La plus grosse limitation est sans doute qu'une fois qu'une forme est dessinée, elle reste telle quelle. Si on a besoin de la déplacer, il faut la redessiner avec ce qui était dessiné avant. Cela peut prendre beaucoup de temps de redessiner des images complexes et les performances dépendront beaucoup de la vitesse de l'ordinateur qui exécute cet affichage. -

Les étapes d'une animation basique

+## Les étapes d'une animation basique -

Voici les étapes à suivre à chaque image dessinée (frame) :

+Voici les étapes à suivre à chaque image dessinée (frame) : -
    -
  1. Effacer le canevas
    - À moins que les formes que vous voulez dessiner remplissent complètement le canevas (par exemple une image en arrière-plan), vous devrez effacer toutes les formes qui ont été dessinées précédemment. La manière la plus simple de le faire est d'utiliser la méthode {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}.
    2. -
  2. Enregistrer l'état du canevas
    - Si vous changez des configurations qui affectent l'état du canevas (comme le style, les transformations, etc.), et vous voulez vous assurer que c'est l'état original qui est utilisé chaque fois que le canevas est redessiné, alors vous devez enregistrer l'état original.
    3. -
  3. Dessiner les formes animées
    - Vous effectuez toutes les opérations pour afficher l'image.
    4. -
  4. Restaurer l'état du canevas
    - Si l'état du canevas a été sauvegardé, vous  restaurez cet état avant le prochain rendu.
    5. -
+1. **Effacer le canevas** + À moins que les formes que vous voulez dessiner remplissent complètement le canevas (par exemple une image en arrière-plan), vous devrez effacer toutes les formes qui ont été dessinées précédemment. La manière la plus simple de le faire est d'utiliser la méthode {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}. +2. **Enregistrer l'état du canevas** + Si vous changez des configurations qui affectent l'état du canevas (comme le style, les transformations, etc.), et vous voulez vous assurer que c'est l'état original qui est utilisé chaque fois que le canevas est redessiné, alors vous devez enregistrer l'état original. +3. **Dessiner les formes animées** + Vous effectuez toutes les opérations pour afficher l'image. +4. **Restaurer l'état du canevas** + Si l'état du canevas a été sauvegardé, vous  restaurez cet état avant le prochain rendu. -

Contrôle d'une animation

+## Contrôle d'une animation -

Les formes sont dessinées en utilisant soit les méthodes du canevas directement soit en appelant des fonctions personnalisées. Dans des conditions normales, on ne voit le résultat des opérations sur le canevas que quand le script a terminé son exécution. Cela signifie qu'il n'est pas possible de créer une animation avec une boucle for.

+Les formes sont dessinées en utilisant soit les méthodes du canevas directement soit en appelant des fonctions personnalisées. Dans des conditions normales, on ne voit le résultat des opérations sur le canevas que quand le script a terminé son exécution. Cela signifie qu'il n'est pas possible de créer une animation avec une boucle `for`. -

Il nous faut donc un moyen d'exécuter nos fonctions de dessin sur une période de temps. Il existe à ce jour trois manières de le faire.

+Il nous faut donc un moyen d'exécuter nos fonctions de dessin sur une période de temps. Il existe à ce jour trois manières de le faire. -

Mises à jour planifiées

+### Mises à jour planifiées -

Les fonctions {{domxref("window.setInterval()")}}, {{domxref("window.setTimeout()")}}, et {{domxref("window.requestAnimationFrame()")}} peuvent être utilisées :

+Les fonctions {{domxref("window.setInterval()")}}, {{domxref("window.setTimeout()")}}, et {{domxref("window.requestAnimationFrame()")}} peuvent être utilisées : -
-
{{domxref("WindowTimers.setInterval", "setInterval(function, delay)")}}
-
Lance la fonction définie par function chaque delay (délai) millisecondes.
-
{{domxref("WindowTimers.setTimeout", "setTimeout(function, delay)")}}
-
Exécute la fonction définie par function dans delay millisecondes.
-
{{domxref("Window.requestAnimationFrame()", "requestAnimationFrame(callback)")}}
-
Dit au navigateur qu'on veut afficher une animation et lui demande d'appeler la fonction callback pour mettre à jour cette animation avant de dessiner la prochaine image.
-
+- {{domxref("WindowTimers.setInterval", "setInterval(function, delay)")}} + - : Lance la fonction définie par `function` chaque `delay` _(délai)_ millisecondes. +- {{domxref("WindowTimers.setTimeout", "setTimeout(function, delay)")}} + - : Exécute la fonction définie par `function` dans `delay` millisecondes. +- {{domxref("Window.requestAnimationFrame()", "requestAnimationFrame(callback)")}} + - : Dit au navigateur qu'on veut afficher une animation et lui demande d'appeler la fonction `callback` pour mettre à jour cette animation avant de dessiner la prochaine image. -

Si vous n'avez pas besoin d'interaction utilisateur, vous pouvez utiliser la fonction setInterval(), elle va exécuter périodiquement votre code.

+Si vous n'avez pas besoin d'interaction utilisateur, vous pouvez utiliser la fonction `setInterval()`, elle va exécuter périodiquement votre code. -

Si vous voulez faire un jeu, et utiliser les événements du clavier et de la souris pour contrôler l'animation, vous pouvez utiliser setTimeout(). En utilisant des {{domxref("EventListener")}}, on peut récupèrer chaque interaction et d'exécuter nos fonctions d'animation.

+Si vous voulez faire un jeu, et utiliser les événements du clavier et de la souris pour contrôler l'animation, vous pouvez utiliser `setTimeout()`. En utilisant des {{domxref("EventListener")}}, on peut récupèrer chaque interaction et d'exécuter nos fonctions d'animation. -

Dans les exemples suivants, nous utiliserons {{domxref("window.requestAnimationFrame()")}} pour contrôler les animations. Cette technique est plus fluide et plus efficace, elle appelle les opérations de rendu quand le système est prêt à dessiner l'image. Dans des conditions idéales, la fonction est alors lancée 60 fois par seconde, mais la fréquence sera réduite si l'animation se passe dans un onglet non visible.

+Dans les exemples suivants, nous utiliserons {{domxref("window.requestAnimationFrame()")}} pour contrôler les animations. Cette technique est plus fluide et plus efficace, elle appelle les opérations de rendu quand le système est prêt à dessiner l'image. Dans des conditions idéales, la fonction est alors lancée 60 fois par seconde, mais la fréquence sera réduite si l'animation se passe dans un onglet non visible. -
-

Note : Pour plus d'informations sur la boucle d'animation, plus spécialement pour les jeux, rendez-vous sur l'article L'anatomie d'un jeu vidéo dans notre section Développement de jeux vidéo.

-
+> **Note :** Pour plus d'informations sur la boucle d'animation, plus spécialement pour les jeux, rendez-vous sur l'article [L'anatomie d'un jeu vidéo](/fr/docs/Jeux/Anatomie) dans notre section [Développement de jeux vidéo](/fr/docs/Jeux). -

Un système terrestre animé

+## Un système terrestre animé -

Cette exemple anime un petit modèle de notre système terrestre.

+Cette exemple anime un petit modèle de notre système terrestre. -
var sun = new Image();
+```js
+var sun = new Image();
 var moon = new Image();
 var earth = new Image();
 function init(){
@@ -112,17 +107,20 @@ function draw() {
 }
 
 init();
-
+``` - +```html hidden + +``` -

{{EmbedLiveSample("Un_système_terrestre_animé", "310", "310", "canvas_animation1.png")}}

+{{EmbedLiveSample("Un_système_terrestre_animé", "310", "310", "canvas_animation1.png")}} -

Une horloge animée

+## Une horloge animée -

Cette exemple dessine une horloge animée qui affiche l'heure actuelle.

+Cette exemple dessine une horloge animée qui affiche l'heure actuelle. -
function clock(){
+```js
+function clock(){
   var now = new Date();
   var ctx = document.getElementById('canvas').getContext('2d');
   ctx.save();
@@ -137,7 +135,7 @@ init();
 
   // Marquage des heures
   ctx.save();
-  for (var i=0;i<12;i++){
+  for (var i=0;i<12;i++){
     ctx.beginPath();
     ctx.rotate(Math.PI/6);
     ctx.moveTo(100,0);
@@ -149,7 +147,7 @@ init();
   // Marquage des minutes
   ctx.save();
   ctx.lineWidth = 5;
-  for (i=0;i<60;i++){
+  for (i=0;i<60;i++){
     if (i%5!=0) {
       ctx.beginPath();
       ctx.moveTo(117,0);
@@ -163,7 +161,7 @@ init();
   var sec = now.getSeconds();
   var min = now.getMinutes();
   var hr  = now.getHours();
-  hr = hr>=12 ? hr-12 : hr;
+  hr = hr>=12 ? hr-12 : hr;
 
   ctx.fillStyle = "black";
 
@@ -219,17 +217,21 @@ init();
   window.requestAnimationFrame(clock);
 }
 
-window.requestAnimationFrame(clock);
+window.requestAnimationFrame(clock); +``` - +```html hidden + +``` -

{{EmbedLiveSample("Une_horloge_animée", "180", "180", "canvas_animation2.png")}}

+{{EmbedLiveSample("Une_horloge_animée", "180", "180", "canvas_animation2.png")}} -

Un panorama défilant en boucle

+## Un panorama défilant en boucle -

Dans cet exemple, un panorama défile de la gauche vers la droite et recommence. Nous utilisons une image du parc Yosemite National récupérée sur Wikimedia, vous pouvez utiliser une autre image de votre choix qui est plus grande que le canevas.

+Dans cet exemple, un panorama défile de la gauche vers la droite et recommence. Nous utilisons une [image du parc Yosemite National](http://commons.wikimedia.org/wiki/File:Capitan_Meadows,_Yosemite_National_Park.jpg) récupérée sur Wikimedia, vous pouvez utiliser une autre image de votre choix qui est plus grande que le canevas. -
var img = new Image();
+```js
+var img = new Image();
 
 // Variables utilisateur - les personnaliser pour changer l'image qui défile, ses
 // directions, et la vitesse.
@@ -255,17 +257,17 @@ img.onload = function() {
     imgW = img.width * scale;
     imgH = img.height * scale;
 
-    if (imgW > CanvasXSize) {
+    if (imgW > CanvasXSize) {
         // image plus grande que le canvas
         x = CanvasXSize - imgW;
     }
-    if (imgW > CanvasXSize) {
+    if (imgW > CanvasXSize) {
         // largeur de l'image plus grande que le canvas
         clearX = imgW;
     } else {
         clearX = CanvasXSize;
     }
-    if (imgH > CanvasYSize) {
+    if (imgH > CanvasYSize) {
         // hauteur de l'image plus grande que le canvas
         clearY = imgH;
     } else {
@@ -282,30 +284,30 @@ img.onload = function() {
 function draw() {
     ctx.clearRect(0, 0, clearX, clearY); // clear the canvas
 
-    // si image est <= taille du canvas
-    if (imgW <= CanvasXSize) {
+    // si image est <= taille du canvas
+    if (imgW <= CanvasXSize) {
         // réinitialise, repart du début
-        if (x > CanvasXSize) {
+        if (x > CanvasXSize) {
             x = -imgW + x;
         }
         // dessine image1 supplémentaire
-        if (x > 0) {
+        if (x > 0) {
             ctx.drawImage(img, -imgW + x, y, imgW, imgH);
         }
         // dessine image2 supplémentaire
-        if (x - imgW > 0) {
+        if (x - imgW > 0) {
             ctx.drawImage(img, -imgW * 2 + x, y, imgW, imgH);
         }
     }
 
-    // image est > taille du canvas
+    // image est > taille du canvas
     else {
         // réinitialise, repeart du début
-        if (x > (CanvasXSize)) {
+        if (x > (CanvasXSize)) {
             x = CanvasXSize - imgW;
         }
         // dessine image supplémentaire
-        if (x > (CanvasXSize-imgW)) {
+        if (x > (CanvasXSize-imgW)) {
             ctx.drawImage(img, x - imgW + 1, y, imgW, imgH);
         }
     }
@@ -314,21 +316,21 @@ function draw() {
     // quantité à déplacer
     x += dx;
 }
-
+``` -

En dessous, vous trouvez l'élément {{HTMLElement("canvas")}} avec l'image qui défile. Notez que les dimensions de largeur et de hauteur spécifiées doivent correspondre aux valeurs des variables CanvasXZSize et CanvasYSize dans le code JavaScript.

+En dessous, vous trouvez l'élément {{HTMLElement("canvas")}} avec l'image qui défile. Notez que les dimensions de largeur et de hauteur spécifiées doivent correspondre aux valeurs des variables `CanvasXZSize` et `CanvasYSize` dans le code JavaScript. -
<canvas id="canvas" width="800" height="200"></canvas>
+```html + +``` -

{{EmbedLiveSample("Un_panorama_défilant_en_boucle", "830", "230")}}

+{{EmbedLiveSample("Un_panorama_défilant_en_boucle", "830", "230")}} -

Autres exemples

+## Autres exemples -
-
Un raycaster basique avec canvas
-
Un bon exemple d'animation contrôlée par le clavier.
-
Animations avancées
-
Nous nous attarderons sur quelques techniques d'animation et de gestion de physique avancées dans le prochain châpitre.
-
+- [Un raycaster basique avec canvas](/fr/docs/Un_raycaster_basique_avec_canvas) + - : Un bon exemple d'animation contrôlée par le clavier. +- [Animations avancées](/fr/docs/Tutoriel_canvas/Advanced_animations) + - : Nous nous attarderons sur quelques techniques d'animation et de gestion de physique avancées dans le prochain châpitre. -

{{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Tutoriel_canvas/Advanced_animations")}}

+{{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Tutoriel_canvas/Advanced_animations")}} diff --git a/files/fr/web/api/canvas_api/tutorial/basic_usage/index.md b/files/fr/web/api/canvas_api/tutorial/basic_usage/index.md index 0faa7a82ec..ca47946655 100644 --- a/files/fr/web/api/canvas_api/tutorial/basic_usage/index.md +++ b/files/fr/web/api/canvas_api/tutorial/basic_usage/index.md @@ -10,117 +10,122 @@ tags: translation_of: Web/API/Canvas_API/Tutorial/Basic_usage original_slug: Web/API/Canvas_API/Tutoriel_canvas/Utilisation_de_base --- -

{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas", "Tutoriel_canvas/Formes_géométriques")}}

+{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas", "Tutoriel_canvas/Formes_géométriques")}} -

L'élément <canvas>

+## L'élément `` -

Commençons par regarder l'élément {{HTMLElement("canvas")}} lui-même.

+Commençons par regarder l'élément {{HTMLElement("canvas")}} lui-même. -
<canvas id="tutoriel" width="150" height="150"></canvas>
-
+```html + +``` -

Ceci ressemble beaucoup à l'élément <img>. La seule différence est qu'il n'y a pas les attributs src et alt. L'élément <canvas> a seulement deux attributs : {{htmlattrxref ("width", "canvas")}} et {{htmlattrxref ("height", "canvas")}} (« largeur » et « hauteur »). Ces deux attributs sont optionnels et peuvent aussi être fixés à travers le DOM. Quand les attributs width et height ne sont pas spécifiés, le canvas sera initialement large de 300 pixels et haut de 150 pixels. Les dimensions du canvas peuvent être modifiés par du CSS, mais l'image sera dessinée selon les valeurs width et height du canvas et ensuite étirée pour afficher dans l'espace donné par le CSS.

+Ceci ressemble beaucoup à l'élément \. La seule différence est qu'il n'y a pas les attributs `src` et `alt`. L'élément `` a seulement deux attributs : {{htmlattrxref ("width", "canvas")}} et {{htmlattrxref ("height", "canvas")}} (« largeur » et « hauteur »). Ces deux attributs sont optionnels et peuvent aussi être fixés à travers le [DOM](/fr/docs/R%C3%A9f%C3%A9rence_du_DOM_Gecko). Quand les attributs **width** et **height** ne sont pas spécifiés, le canvas sera initialement large de **300 pixels** et haut de **150 pixels**. Les dimensions du canvas peuvent être modifiés par du [CSS](/fr/docs/Web/CSS), mais l'image sera dessinée selon les valeurs **width** et **height** du canvas et ensuite étirée pour afficher dans l'espace donné par le CSS. -
-

Note : Si l'image semble déformée, essayez de spécifier de manière explicite vos attributs width et height dans l'élément <canvas>, et de ne pas utiliser de CSS.

-
+> **Note :** Si l'image semble déformée, essayez de spécifier de manière explicite vos attributs `width` et `height` dans l'élément ``, et de ne pas utiliser de CSS. -

L'attribut id n'est pas spécifique à l'élément <canvas>. C'est en fait un des attributs HTML de base qui peut être utilisé par presque tous les éléments HTML. C'est toujours mieux d'assigner une id car ça facilite beaucoup l'identification du canvas dans le code javascript.

+L'attribut `id` n'est pas spécifique à l'élément ``. C'est en fait un des attributs HTML de base qui peut être utilisé par presque tous les éléments HTML. C'est toujours mieux d'assigner une `id` car ça facilite beaucoup l'identification du `canvas` dans le code `javascript`. -

L'élément <canvas> peut être stylisé comme n'importe quelle image normale (marges, contours, arrière-plan, etc). Si aucun style n'est donné, le canvas sera par défaut complètement transparent. Il faut noter que peu importe quels styles sont utilisés, le style n'affectera pas l'acte de dessiner sur le canvas. Nous verrons en détail la stylisation des canvas plus tard dans ce tutoriel.

+L'élément `` peut être stylisé comme n'importe quelle image normale (marges, contours, arrière-plan, etc). Si aucun style n'est donné, le canvas sera par défaut complètement transparent. Il faut noter que peu importe quels styles sont utilisés, le style n'affectera pas l'acte de dessiner sur le canvas. Nous verrons en détail la stylisation des canvas plus tard dans ce tutoriel. -

Contenu de repli

+### Contenu de repli -

Puisque certains plus anciens navigateurs ne supportent pas l'élément {{HTMLElement("canvas")}} (les plus communs étant les versions d'Internet Explorer avant la version 9), il est mieux d'avoir du contenu de repli pour afficher.

+Puisque certains plus anciens navigateurs ne supportent pas l'élément {{HTMLElement("canvas")}} (les plus communs étant les versions d'Internet Explorer avant la version 9), il est mieux d'avoir du contenu de repli pour afficher. -

Heureusement, c'est très facile : il faut tout simplement mettre le contenu dans l'élément <canvas> lui-même. Les navigateurs qui ne supportent pas <canvas> vont afficher ce contenu de repli, et ceux qui supportent <canvas> vont l'ignorer et dessiner le canvas.

+Heureusement, c'est très facile : il faut tout simplement mettre le contenu dans l'élément `` lui-même. Les navigateurs qui ne supportent pas `` vont afficher ce contenu de repli, et ceux qui supportent `` vont l'ignorer et dessiner le canvas. -

Le contenu de repli pourrait, par exemple, donner une description texte du canvas, ou afficher une image fixe comme aperçu de ce que le canvas dessinerait de façon dynamique.

+Le contenu de repli pourrait, par exemple, donner une description texte du canvas, ou afficher une image fixe comme aperçu de ce que le canvas dessinerait de façon dynamique. -
<canvas id="stockGraph" width="150" height="150">
+```html
+
   current stock price: $3.15 + 0.15
-</canvas>
+
 
-<canvas id="clock" width="150" height="150">
-  <img src="images/clock.png" width="150" height="150" alt=""/>
-</canvas>
+ + + +``` -

La nécessité de la balise </canvas>

+## La nécessité de la balise `` -

Au contraire de l'élément {{HTMLElement("img")}}, l'élément {{HTMLElement("canvas")}} requiert la balise fermante (</canvas>).

+Au contraire de l'élément {{HTMLElement("img")}}, l'élément {{HTMLElement("canvas")}} **requiert** la balise fermante (``). -
-

Note : Bien que quelques unes des premières versions du navigateur Safari ne requièrent pas la balise fermante, la spécification HTML indique qu'elle est nécessaire, alors il est mieux de l'inclure pour avoir le plus de compatibilité possible. Ces anciennes versions de Safari (avant la version 2.0) affichent le contenu de repli en plus que le canvas lui-même, sauf si vous utilisez des trucs CSS pour le masquer. Heureusement, il y a très peu d'utilisateurs de ces vieilles versions de Safari de nos jours.

-
+> **Note :** Bien que quelques unes des premières versions du navigateur Safari ne requièrent pas la balise fermante, la spécification HTML indique qu'elle est nécessaire, alors il est mieux de l'inclure pour avoir le plus de compatibilité possible. Ces anciennes versions de Safari (avant la version 2.0) affichent le contenu de repli en plus que le canvas lui-même, sauf si vous utilisez des trucs CSS pour le masquer. Heureusement, il y a très peu d'utilisateurs de ces vieilles versions de Safari de nos jours. -

Si vous n'avez pas besoin de contenu de repli, un simple <canvas id="foo" ...></canvas> est totalement compatible avec tous les navigateurs qui ont pris en charge la fonctionnalité canvas.

+Si vous n'avez pas besoin de contenu de repli, un simple `` est totalement compatible avec tous les navigateurs qui ont pris en charge la fonctionnalité canvas. -

Le contexte de rendu

+## Le contexte de rendu -

L'élément {{HTMLElement("canvas")}} crée une surface pour dessiner à grandeur fixe. Cette surface expose un ou plusieurs contextes de rendu, qui sont utilisés pour créer et manipuler le contenu affiché. Ce tutoriel se concentrera sur le contexte de rendu 2D. D'autres contextes permettent d'autres types de rendu, tel que le contexte WebGL, qui utilise un contexte 3D ("experimental-webgl") inspiré de OpenGL ES.

+L'élément {{HTMLElement("canvas")}} crée une surface pour dessiner à grandeur fixe. Cette surface expose un ou plusieurs **contextes de rendu**, qui sont utilisés pour créer et manipuler le contenu affiché. Ce tutoriel se concentrera sur le contexte de rendu 2D. D'autres contextes permettent d'autres types de rendu, tel que le contexte [WebGL](/fr/docs/Web/WebGL), qui utilise un contexte 3D ("experimental-webgl") inspiré de [OpenGL ES](http://www.khronos.org/opengles/). -

Initialement, le canvas est vide. Pour afficher quelque chose,  un script doit commencer par accéder au contexte de rendu pour pouvoir dessiner dessus. L'élément {{HTMLElement("canvas")}} a une méthode nommée getContext(), qui peut être utilisée pour obtenir le contexte de rendu et ses fonctions de dessin. getContext() a comme seul paramètre le type de contexte. Pour des graphiques 2D, comme ceux utilisés dans ce tutoriel, il faut spécifier "2d".

+Initialement, le canvas est vide. Pour afficher quelque chose,  un script doit commencer par accéder au contexte de rendu pour pouvoir dessiner dessus. L'élément {{HTMLElement("canvas")}} a une [méthode](/fr/docs/Web/API/HTMLCanvasElement#M.C3.A9thodes) nommée `getContext()`, qui peut être utilisée pour obtenir le contexte de rendu et ses fonctions de dessin. `getContext()` a comme seul paramètre le type de contexte. Pour des graphiques 2D, comme ceux utilisés dans ce tutoriel, il faut spécifier "2d". -
var canvas = document.getElementById('tutorial');
-var ctx = canvas.getContext('2d');
+```js +var canvas = document.getElementById('tutorial'); +var ctx = canvas.getContext('2d'); +``` -

La première ligne obtient le {{HTMLElement("canvas")}} dans le DOM en appelant {{domxref("document.getElementById()")}}. Lorsque nous avons l'élément canvas, nous pouvons accéder au contexte de rendu en utilisant sa méthode getContext().

+La première ligne obtient le {{HTMLElement("canvas")}} dans le DOM en appelant {{domxref("document.getElementById()")}}. Lorsque nous avons l'élément canvas, nous pouvons accéder au contexte de rendu en utilisant sa méthode `getContext()`. -

Vérification de la prise en charge

+## Vérification de la prise en charge -

Le contenu de repli est affiché dans les navigateurs qui ne prennent pas en charge l'élément {{HTMLElement("canvas")}}. Les scripts peuvent aussi vérifier la prise en charge de manière programmatique en vérifiant la présence de la méthode getContext(). Notre extrait de code ci-dessus se transforme donc en ceci :

+Le contenu de repli est affiché dans les navigateurs qui ne prennent pas en charge l'élément {{HTMLElement("canvas")}}. Les scripts peuvent aussi vérifier la prise en charge de manière programmatique en vérifiant la présence de la méthode `getContext()`. Notre extrait de code ci-dessus se transforme donc en ceci : -
var canvas = document.getElementById('tutorial');
+```js
+var canvas = document.getElementById('tutorial');
 
 if (canvas.getContext) {
   var ctx = canvas.getContext('2d');
   // code de dessin dans le canvas
 } else {
   // code pour le cas où canvas ne serait pas supporté
-}
+} +``` +## Un modèle basique -

Un modèle basique

+Voici un modèle minimaliste, que nous allons utiliser comme point de départ dans des futurs exemples. -

Voici un modèle minimaliste, que nous allons utiliser comme point de départ dans des futurs exemples.

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8"/>
-    <title>Canvas tutorial</title>
-    <script type="text/javascript">
+```html
+
+
+  
+    
+    Canvas tutorial
+    
+    
+  
+  
+    
+  
+
+```
 
-
Ce script contient une fonction draw(), qui est exécutée lorsque la page a fini de charger. Ce résultat est obtenu en utilisant l'événement de chargement du document. Cette fonction, ou une fonction similaire, pourrait aussi être appelé en utilisant {{domxref("window.setTimeout()")}}, {{domxref("window.setInterval()")}}, ou n'importe quel autre gestionnaire d'événement, tant que la page est chargée en premier.

+Ce script contient une fonction `draw()`, qui est exécutée lorsque la page a fini de charger. Ce résultat est obtenu en utilisant l'événement de chargement du document. Cette fonction, ou une fonction similaire, pourrait aussi être appelé en utilisant {{domxref("window.setTimeout()")}}, {{domxref("window.setInterval()")}}, ou n'importe quel autre gestionnaire d'événement, tant que la page est chargée en premier.
 
-
Voici à quoi le modèle ressemble :

+Voici à quoi le modèle ressemble :
 
-
{{EmbedLiveSample("Un_modèle_basique", 160, 160)}}

+{{EmbedLiveSample("Un_modèle_basique", 160, 160)}}
 
-
Un exemple simple

+## Un exemple simple
 
-
Pour commencer, observons un exemple simple qui dessine deux rectangles qui s'intersectent, un d'entre eux ayant de la transparence alpha. Nous verrons plus en détail comment ça marche dans les exemples suivants.

+Pour commencer, observons un exemple simple qui dessine deux rectangles qui s'intersectent, un d'entre eux ayant de la transparence alpha. Nous verrons plus en détail comment ça marche dans les exemples suivants.
 
-
<!DOCTYPE html>
-<html>
- <head>
-  <meta charset="utf-8"/>
-  <script type="application/javascript">
+```html
+
+
+ 
+  
+  
+ 
+ 
+   
+ 
+
+```
 
-
Cet exemple ressemble a ceci :

+Cet exemple ressemble a ceci :
 
-
{{EmbedLiveSample("Un_exemple_simple", 160, 160, "canvas_ex1.png")}}

+{{EmbedLiveSample("Un_exemple_simple", 160, 160, "canvas_ex1.png")}}
 
-
{{PreviousNext("Tutoriel_canvas", "Tutoriel_canvas/Formes_géométriques")}}

+{{PreviousNext("Tutoriel_canvas", "Tutoriel_canvas/Formes_géométriques")}}
diff --git a/files/fr/web/api/canvas_api/tutorial/compositing/example/index.md b/files/fr/web/api/canvas_api/tutorial/compositing/example/index.md
index f2992ea69d..e3343ba8a3 100644
--- a/files/fr/web/api/canvas_api/tutorial/compositing/example/index.md
+++ b/files/fr/web/api/canvas_api/tutorial/compositing/example/index.md
@@ -11,17 +11,18 @@ tags:
 translation_of: Web/API/Canvas_API/Tutorial/Compositing/Example
 original_slug: Web/API/Canvas_API/Tutoriel_canvas/Composition/Example
 ---
-
{{CanvasSidebar}}

+{{CanvasSidebar}}
 
-
Cet exemple illustre un certain nombre d'opérations de composition. Le résultat donne ceci:

+Cet exemple illustre un certain nombre d'[opérations de composition](/fr/docs/Web/API/CanvasRenderingContext2D.globalCompositeOperation). Le résultat donne ceci:
 
-
{{EmbedLiveSample("Exemple_de_composition", "100%", 7250)}}

+{{EmbedLiveSample("Exemple_de_composition", "100%", 7250)}}
 
-
Exemple de composition

+## Exemple de composition
 
-
Ce code configure les valeurs globales utilisées par le reste du programme.

+Ce code configure les valeurs globales utilisées par le reste du programme.
 
-
var canvas1 = document.createElement("canvas");
+```js
+var canvas1 = document.createElement("canvas");
 var canvas2 = document.createElement("canvas");
 var gco = [ 'source-over','source-in','source-out','source-atop',
             'destination-over','destination-in','destination-out','destination-atop',
@@ -59,13 +60,14 @@ var gcoText = [
 ].reverse();
 var width = 320;
 var height = 340;
-

+```
 
-
Programme principal

+### Programme principal
 
-
Quand la page se charge, le code suivant s'exécute pour configurer et exécuter l'exemple:

+Quand la page se charge, le code suivant s'exécute pour configurer et exécuter l'exemple:
 
-
window.onload = function() {
+```js
+window.onload = function() {
     // lum en sRGB
     var lum = {
         r: 0.33,
@@ -82,11 +84,12 @@ var height = 340;
     runComposite();
     return;
 };
-

+```
 
-
Et dans le code suivant, runComposite() gère la majeure partie du travail, en s'appuyant sur un certain nombre de fonctions utilitaires pour faire les parties difficiles.

+Et dans le code suivant, `runComposite()` gère la majeure partie du travail, en s'appuyant sur un certain nombre de fonctions utilitaires pour faire les parties difficiles.
 
-
function createCanvas() {
+```js
+function createCanvas() {
     var canvas = document.createElement("canvas");
     canvas.style.background = "url("+op_8x8.data+")";
     canvas.style.border = "1px solid #000";
@@ -156,13 +159,14 @@ function runComposite() {
         dl.appendChild(dd);
     }
 };
-

+```
 
-
Fonctions utilitaires

+### Fonctions utilitaires
 
-
Notre programme repose sur un certain nombbre de fonctions utilitaires:

+Notre programme repose sur un certain nombbre de fonctions utilitaires:
 
-
var lightMix = function() {
+```js
+var lightMix = function() {
     var ctx = canvas2.getContext("2d");
     ctx.save();
     ctx.globalCompositeOperation = "lighter";
@@ -184,9 +188,10 @@ function runComposite() {
     ctx.fillRect(0,0,30,30)
     ctx.fill();
 };
-

+```
 
-
var colorSphere = function(element) {
+```js
+var colorSphere = function(element) {
     var ctx = canvas1.getContext("2d");
     var width = 360;
     var halfWidth = width / 2;
@@ -194,7 +199,7 @@ function runComposite() {
     var offset = 0; // scrollbar offset
     var oleft = -20;
     var otop = -20;
-    for (var n = 0; n <= 359; n ++) {
+    for (var n = 0; n <= 359; n ++) {
         var gradient = ctx.createLinearGradient(oleft + halfWidth, otop, oleft + halfWidth, otop + halfWidth);
         var color = Color.HSV_RGB({ H: (n + 300) % 360, S: 100, V: 100 });
         gradient.addColorStop(0, "rgba(0,0,0,0)");
@@ -216,9 +221,10 @@ function runComposite() {
     ctx.fill();
     return ctx.canvas;
 };
-

+```
 
-
// HSV (1978) = H: Hue / S: Saturation / V: Value
+```js
+// HSV (1978) = H: Hue / S: Saturation / V: Value
 Color = {};
 Color.HSV_RGB = function (o) {
     var H = o.H / 360,
@@ -229,7 +235,7 @@ Color.HSV_RGB = function (o) {
     if (S == 0) {
         R = G = B = Math.round(V * 255);
     } else {
-        if (H >= 1) H = 0;
+        if (H >= 1) H = 0;
         H = 6 * H;
         D = H - Math.floor(H);
         A = Math.round(255 * V * (1 - S));
@@ -293,4 +299,5 @@ var createInterlace = function (size, color1, color2) {
     return pattern;
 };
 
-var op_8x8 = createInterlace(8, "#FFF", "#eee");

+var op_8x8 = createInterlace(8, "#FFF", "#eee");
+```
diff --git a/files/fr/web/api/canvas_api/tutorial/compositing/index.md b/files/fr/web/api/canvas_api/tutorial/compositing/index.md
index 0ce19656af..3e0bf39741 100644
--- a/files/fr/web/api/canvas_api/tutorial/compositing/index.md
+++ b/files/fr/web/api/canvas_api/tutorial/compositing/index.md
@@ -8,47 +8,44 @@ tags:
 translation_of: Web/API/Canvas_API/Tutorial/Compositing
 original_slug: Web/API/Canvas_API/Tutoriel_canvas/Composition
 ---
-
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}}

+{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}}
 
-
Dans tous nos exemples précédents, les formes étaient toutes dessinées les unes au dessus des autres. C'est plus que suffisant pour la plupart des situations, mais cela limite l'ordre dans lequel les formes composées sont construites. Nous pouvons cependant changer ce comportement en définissant la propriété globalCompositeOperation. En complément, la propriété clip nous permet de cacher les parties des formes que nous ne désirons pas.

+Dans tous nos [exemples précédents](/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations), les formes étaient toutes dessinées les unes au dessus des autres. C'est plus que suffisant pour la plupart des situations, mais cela limite l'ordre dans lequel les formes composées sont construites. Nous pouvons cependant changer ce comportement en définissant la propriété `globalCompositeOperation`. En complément, la propriété `clip` nous permet de cacher les parties des formes que nous ne désirons pas.
 
-
globalCompositeOperation

+## `globalCompositeOperation`
 
-
Nous pouvons non seulement dessiner de nouvelles formes derrière des formes existantes mais nous pouvons aussi les utiliser pour masquer certaines zones, supprimer des sections du canvas (ce n'est pas limité aux rectangles comme pour la méthode {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}) et davantage.

+Nous pouvons non seulement dessiner de nouvelles formes derrière des formes existantes mais nous pouvons aussi les utiliser pour masquer certaines zones, supprimer des sections du canvas (ce n'est pas limité aux rectangles comme pour la méthode {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}) et davantage.
 
-

- 
{{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation = type")}}

- 
Cela configure le type d'opération de composition à appliquer lorsqu'on dessine de nouvelles formes, où le type correspond à une string qui fait référence à une des douze opérations de composition possibles.

-

+- {{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation = type")}}
+  - : Cela configure le type d'opération de composition à appliquer lorsqu'on dessine de nouvelles formes, où le type correspond à une string qui fait référence à une des douze opérations de composition possibles.
 
-
Reportez-vous aux exemples de compositon pour le code des exemples suivants.

+Reportez-vous aux [exemples de compositon](/fr/docs/Tutoriel_canvas/Composition/Example) pour le code des exemples suivants.
 
-
{{EmbedLiveSample("Exemple_de_composition", 750, 6750, "" ,"/Tutoriel_canvas/Composition/Example")}}

+{{EmbedLiveSample("Exemple_de_composition", 750, 6750, "" ,"/Tutoriel_canvas/Composition/Example")}}
 
-
Détourage

+## Détourage
 
-
Un détourage (clipping path en anglais) est comme une forme de canvas standard, à la différence près qu'elle sert à masquer certaines parties du canvas. Voyez l'image de droite, la forme rouge (en étoile) est un détourage du canvas. Tout ce qui est en dehors du chemin n'est pas dessiné sur le canvas.

+Un détourage (_clipping path_ en anglais) est comme une forme de canvas standard, à la différence près qu'elle sert à masquer certaines parties du canvas. Voyez l'image de droite, la forme rouge (en étoile) est un détourage du canvas. Tout ce qui est en dehors du chemin n'est pas dessiné sur le canvas.
 
-
+![](canvas_clipping_path.png)
 
-
Si nous comparons le détourage à la propriété globalCompositeOperation vue précédemment, nous voyons deux modes de composition qui ont plus ou moins les mémes effets qu'avec source-in et source-atop. La différence la plus significative entre les deux est que le détourage n'est jamais dessiné sur le canvas à proprement parler et il n'est jamais affecté par l'ajout de nouvelles formes. Ça le rend idéal pour dessiner plusieurs formes dans une zone restreinte.

+Si nous comparons le détourage à la propriété `globalCompositeOperation` vue précédemment, nous voyons deux modes de composition qui ont plus ou moins les mémes effets qu'avec `source-in` et `source-atop`. La différence la plus significative entre les deux est que le détourage n'est jamais dessiné sur le canvas à proprement parler et il n'est jamais affecté par l'ajout de nouvelles formes. Ça le rend idéal pour dessiner plusieurs formes dans une zone restreinte.
 
-
Dans le chapitre "dessiner des formes avec le canevas", nous n'avions mentionné que les méthodes stroke() et fill(), mais il y en a une troisième: clip() — elle permet de faire des détourages.

+Dans le chapitre "[dessiner des formes avec le canevas](/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)", nous n'avions mentionné que les méthodes `stroke()` et `fill()`, mais il y en a une troisième: `clip()` — elle permet de faire des détourages.
 
-

- 
{{domxref("CanvasRenderingContext2D.clip", "clip()")}}

- 
Transforme le chemin en cours de création en détourage effectif.

-

+- {{domxref("CanvasRenderingContext2D.clip", "clip()")}}
+  - : Transforme le chemin en cours de création en détourage effectif.
 
-
Il faut utiliser clip() plutot que closePath() pour fermer un chemin et enfaire un détourage.

+Il faut utiliser `clip()` plutot que `closePath()` pour fermer un chemin et enfaire un détourage.
 
-
Par défault, l'élément {{HTMLElement("canvas")}} possède un détourage aux mêmes dimensions que le canvas lui-même. Donc, par défaut aucune découpe n'est apparente.

+Par défault, l'élément {{HTMLElement("canvas")}} possède un détourage aux mêmes dimensions que le canvas lui-même. Donc, par défaut aucune découpe n'est apparente.
 
-
Un exemple de clip

+### Un exemple de `clip`
 
-
Dans cet exemple, nous allons utiliser un détourage circulaire pour restreindre le dessin d'un essemble d'étoiles aléatoires à une zone particulière (et circulaire...).

+Dans cet exemple, nous allons utiliser un détourage circulaire pour restreindre le dessin d'un essemble d'étoiles aléatoires à une zone particulière (et circulaire...).
 
-
function draw() {
+```js
+function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
   ctx.fillRect(0, 0, 150, 150);
   ctx.translate(75, 75);
@@ -67,7 +64,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Composition
   ctx.fillRect(-75, -75, 150, 150);
 
   // draw stars
-  for (var j = 1; j < 50; j++) {
+  for (var j = 1; j < 50; j++) {
     ctx.save();
     ctx.fillStyle = '#fff';
     ctx.translate(75 - Math.floor(Math.random() * 150),
@@ -82,7 +79,7 @@ function drawStar(ctx, r) {
   ctx.save();
   ctx.beginPath();
   ctx.moveTo(r, 0);
-  for (var i = 0; i < 9; i++) {
+  for (var i = 0; i < 9; i++) {
     ctx.rotate(Math.PI / 5);
     if (i % 2 === 0) {
       ctx.lineTo((r / 0.525731) * 0.200811, 0);
@@ -94,16 +91,20 @@ function drawStar(ctx, r) {
   ctx.fill();
   ctx.restore();
 }
-

+```
 
-
+```html hidden
+
+```
 
-
+```js hidden
+draw();
+```
 
-
Dans les premières lignes de code, nous dessinons un rectangle noir ayant la même taille que le canvas comme toile de fond puis nous déplaçons l'origine au centre de l'image. Ensuite, nous créons le détourage circulaire en dessinant un arc (complet) et en faisant appelle à clip(). Les détourages font aussi partie de l'état de sauvegarde des canvas. Si on voulait garder le détourage d'origine, on pourrait par exemple sauvegarder l'état du canvas au préalable.

+Dans les premières lignes de code, nous dessinons un rectangle noir ayant la même taille que le canvas comme toile de fond puis nous déplaçons l'origine au centre de l'image. Ensuite, nous créons le détourage circulaire en dessinant un arc (complet) et en faisant appelle à `clip()`. Les détourages font aussi partie de l'état de sauvegarde des canvas. Si on voulait garder le détourage d'origine, on pourrait par exemple sauvegarder l'état du canvas au préalable.
 
-
Tout ce qui sera dessiné après la création du détourage n'apparaîtra qu'à l'intérieur de ce chemin. Vous pouvez voir ça clairement avec le dégradé linéaire qui est dessiné après. Ensuite, un ensemble de 50 étoiles aléatoires est dessiné, en utilisant la fonction drawStar(). Nous pouvons voir, une fois de plus, que les éléments (ici les étoiles) n'apparaissent qu'à l'intérieur du détourage.

+Tout ce qui sera dessiné après la création du détourage n'apparaîtra qu'à l'intérieur de ce chemin. Vous pouvez voir ça clairement avec le dégradé linéaire qui est dessiné après. Ensuite, un ensemble de 50 étoiles aléatoires est dessiné, en utilisant la fonction `drawStar()`. Nous pouvons voir, une fois de plus, que les éléments (ici les étoiles) n'apparaissent qu'à l'intérieur du détourage.
 
-
{{EmbedLiveSample("A_clip_example", "180", "180", "canvas_clip.png")}}

+{{EmbedLiveSample("A_clip_example", "180", "180", "canvas_clip.png")}}
 
-
{{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}}

+{{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}}
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 b265fb649a..99f0eb42d4 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
@@ -12,45 +12,45 @@ tags:
 translation_of: Web/API/Canvas_API/Tutorial/Drawing_shapes
 original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
 ---
-
{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Utilisation_de_base", "Tutoriel_canvas/Ajout_de_styles_et_de_couleurs")}}

+{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Utilisation_de_base", "Tutoriel_canvas/Ajout_de_styles_et_de_couleurs")}}
 
-
Maintenant que nous avons défini notre environnement de canevas, nous pouvons entrer dans les détails de la façon de dessiner sur le canevas. A la fin de cet article, vous aurez appris à tracer des rectangles, des triangles, des lignes, des arcs et des courbes, vous rendant ainsi familier avec certaines des formes de base. Le travail avec les trajets est essentiel lors du dessin d'objets sur le canevas, et nous verrons comment cela peut être fait.

+Maintenant que nous avons défini notre [environnement de canevas](/fr/docs/Tutoriel_canvas/Utilisation_de_base), nous pouvons entrer dans les détails de la façon de dessiner sur le canevas. A la fin de cet article, vous aurez appris à tracer des rectangles, des triangles, des lignes, des arcs et des courbes, vous rendant ainsi familier avec certaines des formes de base. Le travail avec les trajets est essentiel lors du dessin d'objets sur le canevas, et nous verrons comment cela peut être fait.
 
-
La grille

+## La grille
 
-
Avant de pouvoir commencer à dessiner, il nous faut parler de la grille ou système de coordonnées. Notre schéma HTML de la page précédente avait un élément canevas large de 150 pixels et haut de 150 pixels. À droite, vous voyez ce canevas avec la grille par défaut superposée. Normalement, 1 unité dans la grille correspond à 1 pixel sur le canevas. L'origine de cette grille est positionnée dans le coin supérieur gauche de coordonnées (0, 0). Tous les éléments sont placés relativement à cette origine. Ainsi, le coin supérieur gauche du carré bleu est à x pixels à partir de la gauche et à y pixels à partir du haut, aux coordonnées (x, y). Plus loin dans ce tutoriel, nous verrons comment déplacer l'origine à une position différente, faire pivoter la grille ou même la mettre à l'échelle ; mais pour l'instant, nous nous en tiendrons aux valeurs par défaut.

+Avant de pouvoir commencer à dessiner, il nous faut parler de la grille ou **système de coordonnées**. Notre schéma HTML de la page précédente avait un élément canevas large de 150 pixels et haut de 150 pixels. À droite, vous voyez ce canevas avec la grille par défaut superposée. Normalement, 1 unité dans la grille correspond à 1 pixel sur le canevas. L'origine de cette grille est positionnée dans le coin *supérieur gauche* de coordonnées (0, 0). Tous les éléments sont placés relativement à cette origine. Ainsi, le coin supérieur gauche du carré bleu est à `x` pixels à partir de la gauche et à `y` pixels à partir du haut, aux coordonnées (x, y). Plus loin dans ce tutoriel, nous verrons comment déplacer l'origine à une position différente, faire pivoter la grille ou même la mettre à l'échelle ; mais pour l'instant, nous nous en tiendrons aux valeurs par défaut.
 
-
+![](canvas_default_grid.png)
 
-
Dessin de rectangles

+## Dessin de rectangles
 
-
Au contraire de SVG, le {{HTMLElement("canvas")}} ne supporte qu'une seule forme primitive : le rectangle. Toute autre forme doit être créée en combinant un ou plusieurs trajets, c'est-à-dire des listes de points reliés par des lignes. Heureusement, nous avons un assortiment de fonctions de dessin de trajets, qui rendent possible la composition de formes très complexes.

+Au contraire de [SVG](/fr/docs/Web/SVG), le {{HTMLElement("canvas")}} ne supporte qu'une seule forme primitive : le rectangle. Toute autre forme doit être créée en combinant un ou plusieurs trajets, c'est-à-dire des listes de points reliés par des lignes. Heureusement, nous avons un assortiment de fonctions de dessin de trajets, qui rendent possible la composition de formes très complexes.
 
-
Commençons par le rectangle. Il y a trois fonctions qui dessinent des rectangles sur le canvas :

+Commençons par le rectangle. Il y a trois fonctions qui dessinent des rectangles sur le canvas :
 
-

- 
{{domxref("CanvasRenderingContext2D.fillRect", "fillRect(x, y, largeur, hauteur)")}}

- 
Dessine un rectangle rempli.

- 
{{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect(x, y, largeur, hauteur)")}}

- 
Dessine un contour rectangulaire

- 
{{domxref("CanvasRenderingContext2D.clearRect", "clearRect(x, y, largeur, hauteur)")}}

- 
Efface la zone rectangulaire spécifiée, la rendant complètement transparente.

-

+- {{domxref("CanvasRenderingContext2D.fillRect", "fillRect(x, y, largeur, hauteur)")}}
+  - : Dessine un rectangle rempli.
+- {{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect(x, y, largeur, hauteur)")}}
+  - : Dessine un contour rectangulaire
+- {{domxref("CanvasRenderingContext2D.clearRect", "clearRect(x, y, largeur, hauteur)")}}
+  - : Efface la zone rectangulaire spécifiée, la rendant complètement transparente.
 
-
Chacune de ces trois fonctions a les mêmes paramètres. x et y indiquent la position sur le canevas (par rapport à l'origine) du coin supérieur gauche du rectangle sur le canvas. largeur et hauteur indiquent la taille du rectangle.

+Chacune de ces trois fonctions a les mêmes paramètres. `x` et `y` indiquent la position sur le canevas (par rapport à l'origine) du coin supérieur gauche du rectangle sur le canvas. `largeur` et `hauteur` indiquent la taille du rectangle.
 
-
Ci-dessous la fonction draw() de la page précédente, mais utilisant maintenant ces trois fonctions.

+Ci-dessous la fonction `draw()` de la page précédente, mais utilisant maintenant ces trois fonctions.
 
-
Exemple de forme rectangulaire

+### Exemple de forme rectangulaire
 
-
+```html hidden
+
+ 
+   
+ 
+
+```
 
-
function draw() {
+```js
+function draw() {
   var canvas = document.getElementById('canvas');
   if (canvas.getContext) {
     var ctx = canvas.getContext('2d');
@@ -59,70 +59,65 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
     ctx.clearRect(45, 45, 60, 60);
     ctx.strokeRect(50, 50, 50, 50);
   }
-}

+}
+```
 
-
Le résultat de cet exemple est montré ci-dessous.

+Le résultat de cet exemple est montré ci-dessous.
 
-
{{EmbedLiveSample("Exemple_de_forme_rectangulaire", 160, 160, "canvas_rect.png")}}

+{{EmbedLiveSample("Exemple_de_forme_rectangulaire", 160, 160, "canvas_rect.png")}}
 
-
La fonction fillRect() dessine un grand carré noir de 100 pixels de côté. La fonction clearRect() efface ensuite un carré de 60x60 pixels, et finalement, la fonction strokeRect() est appelée pour créer un contour rectangulaire de 50x50 pixels dans l'espace effacé.

+La fonction `fillRect()` dessine un grand carré noir de 100 pixels de côté. La fonction `clearRect()` efface ensuite un carré de 60x60 pixels, et finalement, la fonction `strokeRect()` est appelée pour créer un contour rectangulaire de 50x50 pixels dans l'espace effacé.
 
-
Dans les pages qui suivent, nous verrons deux méthodes alternatives pour clearRect(), et nous verrons aussi comment changer la couleur et le style de trait des formes rendues.

+Dans les pages qui suivent, nous verrons deux méthodes alternatives pour `clearRect()`, et nous verrons aussi comment changer la couleur et le style de trait des formes rendues.
 
-
A la différence des fonctions de trajet que nous allons voir dans la prochaine section, les trois fonctions de rectangles dessinent immédiatement sur le canvas.

+A la différence des fonctions de trajet que nous allons voir dans la prochaine section, les trois fonctions de rectangles dessinent immédiatement sur le canvas.
 
-
Dessin de trajets

+## Dessin de trajets
 
-
Les seules autres formes primitives sont les trajets. Un trajet est une liste de points, reliés par des segments de lignes qui peuvent être de différentes formes, incurvées ou non, de largeur différente et de couleur différente. Un trajet, ou même un sous-trajet, peut être fermé. La réalisation de formes utilisant des trajets requiert quelques étapes supplémentaires :

+Les seules autres formes primitives sont les _trajets_. Un trajet est une liste de points, reliés par des segments de lignes qui peuvent être de différentes formes, incurvées ou non, de largeur différente et de couleur différente. Un trajet, ou même un sous-trajet, peut être fermé. La réalisation de formes utilisant des trajets requiert quelques étapes supplémentaires :
 
-
    
- 
  1. Tout d'abord, vous devez créer le trajet.
    2. 
- 
  2. Ensuite vous devez utiliser des instructions de dessin pour dessiner sur le trajet.
    3. 
- 
  3. Finalement, vous devez fermer le trajet.
    4. 
- 
  4. Une fois que le trajet a été créé, vous devez le tracer ou le remplir pour le faire apparaître.
    5. 
-

+1.  Tout d'abord, vous devez créer le trajet.
+2.  Ensuite vous devez utiliser des [instructions de dessin](/fr-FR/docs/Web/API/CanvasRenderingContext2D#Paths) pour dessiner sur le trajet.
+3.  Finalement, vous devez fermer le trajet.
+4.  Une fois que le trajet a été créé, vous devez le tracer ou le remplir pour le faire apparaître.
 
-
Voici les functions utilisées pour réaliser ces étapes :

+Voici les functions utilisées pour réaliser ces étapes :
 
-

- 
{{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}}

- 
Crée un nouveau trajet. Une fois créé, les fonctions de dessin ultérieures seront dirigées vers le trajet et utilisées pour le construire.

- 
Méthodes de trajet

- 
Méthodes pour définir différents trajets pour les objets.

- 
{{domxref("CanvasRenderingContext2D.closePath", "closePath()")}}

- 
Ferme le trajet pour que les fonctions de dessin ultérieures soient à nouveau dirigées vers le contexte.

- 
{{domxref("CanvasRenderingContext2D.stroke", "stroke()")}}

- 
Dessine la forme en traçant son contour.

- 
{{domxref("CanvasRenderingContext2D.fill", "fill()")}}

- 
Dessine une forme pleine en remplissant la zone de contenu du trajet.

-

+- {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}}
+  - : Crée un nouveau trajet. Une fois créé, les fonctions de dessin ultérieures seront dirigées vers le trajet et utilisées pour le construire.
+- [Méthodes de trajet](/fr-FR/docs/Web/API/CanvasRenderingContext2D#Paths)
+  - : Méthodes pour définir différents trajets pour les objets.
+- {{domxref("CanvasRenderingContext2D.closePath", "closePath()")}}
+  - : Ferme le trajet pour que les fonctions de dessin ultérieures soient à nouveau dirigées vers le contexte.
+- {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}}
+  - : Dessine la forme en traçant son contour.
+- {{domxref("CanvasRenderingContext2D.fill", "fill()")}}
+  - : Dessine une forme pleine en remplissant la zone de contenu du trajet.
 
-
La première étape pour créer un trajet est d'appeler beginPath(). En interne, les trajets sont stockés comme une liste de sous-trajets (lignes, arcs, etc) qui ensemble réalisent une forme. Chaque fois que cette méthode est appelée, la liste est remise à zéro, et nous pouvons commencer à dessiner de nouvelles formes.

+La première étape pour créer un trajet est d'appeler `beginPath()`. En interne, les trajets sont stockés comme une liste de sous-trajets (lignes, arcs, etc) qui ensemble réalisent une forme. Chaque fois que cette méthode est appelée, la liste est remise à zéro, et nous pouvons commencer à dessiner de nouvelles formes.
 
-

-  
Note : Lorsque le trajet en cours est vide, par exemple immédiatement après avoir appelé beginPath(), ou sur un canvas nouvellement créé, la première instruction de construction de trajet est toujours traitée comme un moveTo(), indépendamment de ce qu'elle est en réalité. Pour cette raison, il sera pratiquement toujours souhaitable d'indiquer la position de départ après la réinitialisation d'un trajet.

-

+> **Note :** Lorsque le trajet en cours est vide, par exemple immédiatement après avoir appelé `beginPath()`, ou sur un canvas nouvellement créé, la première instruction de construction de trajet est toujours traitée comme un `moveTo()`, indépendamment de ce qu'elle est en réalité. Pour cette raison, il sera pratiquement toujours souhaitable d'indiquer la position de départ après la réinitialisation d'un trajet.
 
-
La deuxième étape est d'appeler les méthodes qui indiquent effectivement les sous-trajets à dessiner. Nous verrons ces méthodes bientôt.

+La deuxième étape est d'appeler les méthodes qui indiquent effectivement les sous-trajets à dessiner. Nous verrons ces méthodes bientôt.
 
-
La troisième méthode, optionnelle, est l'appel à closePath(). Cette méthode essaye de fermer la forme géométrique en dessinant une ligne droite depuis le point courant jusqu'au début du trajet. Si la forme a déjà été fermée ou s'il n'y a qu'un seul point dans la liste, cette fonction ne fait rien.

+La troisième méthode, optionnelle, est l'appel à `closePath()`. Cette méthode essaye de fermer la forme géométrique en dessinant une ligne droite depuis le point courant jusqu'au début du trajet. Si la forme a déjà été fermée ou s'il n'y a qu'un seul point dans la liste, cette fonction ne fait rien.
 
-

-  
Note : Quand vous appelez fill(), toutes les formes ouvertes sont automatiquement fermées, ainsi vous n'avez pas à appeler closePath(). Ce n'est pas le cas quand vous appelez stroke().

-

+> **Note :** Quand vous appelez `fill()`, toutes les formes ouvertes sont automatiquement fermées, ainsi vous n'avez pas à appeler `closePath()`. Ce n'est **pas** le cas quand vous appelez `stroke()`.
 
-
Dessin d'un triangle

+### Dessin d'un triangle
 
-
Par exemple, le code pour dessiner un triangle peut ressembler à ce qui suit :

+Par exemple, le code pour dessiner un triangle peut ressembler à ce qui suit :
 
-
+```html hidden
+
+ 
+   
+ 
+
+```
 
-
function dessiner() {
+```js
+function dessiner() {
   var canevas = document.getElementById('canevas');
   if (canevas.getContext) {
     var ctx = canevas.getContext('2d');
@@ -134,33 +129,33 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
     ctx.fill();
   }
 }
-

+```
 
-
Le résultat ressemble à :

+Le résultat ressemble à :
 
-
{{EmbedLiveSample("Dessin_d'un_triangle", 110, 110, "triangle.png")}}

+{{EmbedLiveSample("Dessin_d'un_triangle", 110, 110, "triangle.png")}}
 
-
Déplacement du stylo

+### Déplacement du stylo
 
-
Une fonction très utile, qui ne dessine rien mais qui fait tout de même partie de la liste de trajets décrite plus haut, est la fonction moveTo(). La meilleure façon de l'imaginer est le fait de lever un stylo ou un crayon depuis une position sur un papier, et de le placer sur une autre.

+Une fonction très utile, qui ne dessine rien mais qui fait tout de même partie de la liste de trajets décrite plus haut, est la fonction `moveTo()`. La meilleure façon de l'imaginer est le fait de lever un stylo ou un crayon depuis une position sur un papier, et de le placer sur une autre.
 
-

- 
{{domxref("CanvasRenderingContext2D.moveTo", "moveTo(x, y)")}}

- 
Déplace le stylo aux coordonnées x et y.

-

+- {{domxref("CanvasRenderingContext2D.moveTo", "moveTo(x, y)")}}
+  - : Déplace le stylo aux coordonnées `x` et `y`.
 
-
Lorsque le canevas est initialisé ou que beginPath() est appelé, vous souhaiterez typiquement utiliser moveTo() pour positionner le point de départ quelque part ailleurs. On pourrait aussi utiliser moveTo() pour dessiner des trajets non reliés. Jetez un coup d'œil à l'émoticon ci-dessous.

+Lorsque le canevas est initialisé ou que `beginPath()` est appelé, vous souhaiterez typiquement utiliser `moveTo()` pour positionner le point de départ quelque part ailleurs. On pourrait aussi utiliser `moveTo()` pour dessiner des trajets non reliés. Jetez un coup d'œil à l'émoticon ci-dessous.
 
-
Pour essayer par vous-même, vous pouvez utiliser le fragment de code ci-dessous. Collez-le simplement dans la fonction draw() que nous avons vue plus tôt.

+Pour essayer par vous-même, vous pouvez utiliser le fragment de code ci-dessous. Collez-le simplement dans la fonction `draw()` que nous avons vue plus tôt.
 
-
+```html hidden
+
+ 
+   
+ 
+
+```
 
-
function draw() {
+```js
+function draw() {
   var canvas = document.getElementById('canvas');
   if (canvas.getContext) {
     var ctx = canvas.getContext('2d');
@@ -176,39 +171,37 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
     ctx.stroke();
   }
 }
-

+```
 
-
Le résultat ressemble à ce qui suit :

+Le résultat ressemble à ce qui suit :
 
-
{{EmbedLiveSample("Déplacement_du_stylo", 160, 160, "canvas_smiley.png")}}

+{{EmbedLiveSample("Déplacement_du_stylo", 160, 160, "canvas_smiley.png")}}
 
-
Si vous voulez voir les lignes d'interconnexion, vous pouvez enlever les lignes qui appellent moveTo().

+Si vous voulez voir les lignes d'interconnexion, vous pouvez enlever les lignes qui appellent `moveTo()`.
 
-

-
Note : Pour en savoir plus sur la fonction arc(), voir la section {{anch("Arcs")}} ci-dessous.

-

+> **Note :** Pour en savoir plus sur la fonction `arc()`, voir la section {{anch("Arcs")}} ci-dessous.
 
-
Les lignes

+### Les lignes
 
-
Pour dessiner des lignes droites, utilisez la méthode lineTo().

+Pour dessiner des lignes droites, utilisez la méthode `lineTo()`.
 
-

- 
{{domxref("CanvasRenderingContext2D.lineTo", "lineTo(x, y)")}}

- 
Dessine une ligne depuis la position de dessin courante jusqu'à la position spécifiée par x et y.

-

+- {{domxref("CanvasRenderingContext2D.lineTo", "lineTo(x, y)")}}
+  - : Dessine une ligne depuis la position de dessin courante jusqu'à la position spécifiée par `x` et `y`.
 
-
Cette méthode prend deux arguments, x et y, qui sont les coordonnées du point final de la ligne. Le point de départ dépend des trajets précédemment tracés, où le point final du trajet précédent est le point de départ du suivant, etc. Le point de départ peut aussi être changé en utilisant la méthode moveTo().

+Cette méthode prend deux arguments, `x` et `y`, qui sont les coordonnées du point final de la ligne. Le point de départ dépend des trajets précédemment tracés, où le point final du trajet précédent est le point de départ du suivant, etc. Le point de départ peut aussi être changé en utilisant la méthode `moveTo()`.
 
-
L'exemple ci-dessous dessine deux triangles, un rempli et un filaire.

+L'exemple ci-dessous dessine deux triangles, un rempli et un filaire.
 
-
+```html hidden
+
+ 
+   
+ 
+
+```
 
-
function dessiner() {
+```js
+function dessiner() {
   var canevas = document.getElementById('canevas');
   if (canevas.getContext) {
     var ctx = canevas.getContext('2d');
@@ -229,57 +222,53 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
     ctx.stroke();
   }
 }
-

+```
 
-
Il commence par appeler beginPath() pour démarrer un nouveau trajet de forme. Nous utilisons ensuite la méthode moveTo() pour déplacer le point de départ à la position désirée. En dessous, deux lignes sont dessinées, qui constituent deux côtés du triangle.

+Il commence par appeler `beginPath()` pour démarrer un nouveau trajet de forme. Nous utilisons ensuite la méthode `moveTo()` pour déplacer le point de départ à la position désirée. En dessous, deux lignes sont dessinées, qui constituent deux côtés du triangle.
 
-
{{EmbedLiveSample("Les_lignes", 160, 160, "canvas_lineto.png")}}

+{{EmbedLiveSample("Les_lignes", 160, 160, "canvas_lineto.png")}}
 
-
Vous remarquerez la différence entre le triangle plein et le filaire. Cela, comme mentionné précédemment, vient du fait que les formes sont automatiquement fermées lorsqu'un trajet est rempli, mais pas lorsqu'elles sont dessinées au trait. Si nous avions omis le closePath() pour le triangle filaire, seules deux lignes auraient été tracées, et non pas un triangle complet.

+Vous remarquerez la différence entre le triangle plein et le filaire. Cela, comme mentionné précédemment, vient du fait que les formes sont automatiquement fermées lorsqu'un trajet est rempli, mais pas lorsqu'elles sont dessinées au trait. Si nous avions omis le `closePath()` pour le triangle filaire, seules deux lignes auraient été tracées, et non pas un triangle complet.
 
-
Les arcs

+### Les arcs
 
-
Pour dessiner des arcs ou des cercles, on utilise les méthodes arc() ou arcTo().

+Pour dessiner des arcs ou des cercles, on utilise les méthodes `arc() ou arcTo()`.
 
-

- 
{{domxref("CanvasRenderingContext2D.arc", "arc(x, y, rayon, angleInitial, angleFinal, antihoraire)")}}

- 
Dessine un arc de cercle qui est centré à la position (x, y), de rayon r, commençant à angleInitial et finissant à angleFinal en allant dans le sens indiqué par antihoraire (par défaut, horaire).

- 
{{domxref("CanvasRenderingContext2D.arcTo", "arcTo(x1, y1, x2, y2, rayon)")}}

- 
Dessine un arc avec les points de contrôle et l'angle donnés, relié au point précédent par une ligne droite.

-

+- {{domxref("CanvasRenderingContext2D.arc", "arc(x, y, rayon, angleInitial, angleFinal, antihoraire)")}}
+  - : Dessine un arc de cercle qui est centré à la position _(x, y),_ de rayon _r_, commençant à _angleInitial_ et finissant à *angleFinal* en allant dans le sens indiqué par _antihoraire_ (par défaut, horaire).
+- **{{domxref("CanvasRenderingContext2D.arcTo", "arcTo(x1, y1, x2, y2, rayon)")}}**
+  - : Dessine un arc avec les points de contrôle et l'angle donnés, relié au point précédent par une ligne droite.
 
-
Regardons plus en détail la méthode arc, qui prend six paramètres : x et y sont les coordonnées du centre du cercle sur lequel l'arc doit être tracé. rayon se passe d'explication. Les paramètres angleInitial et angleFinal définissent en radians les points de départ et d'arrivée de l'arc, le long de la courbe du cercle. Ceux-ci sont mesurés à partir de l'axe des x. Le paramètre antihoraire est une valeur booléenne qui, lorsque true, dessine l'arc dans le sens antihoraire, sinon, l'arc est dessiné dans le sens horaire.

+Regardons plus en détail la méthode `arc`, qui prend six paramètres : `x` et `y` sont les coordonnées du centre du cercle sur lequel l'arc doit être tracé. `rayon` se passe d'explication. Les paramètres `angleInitial et` `angleFinal` définissent en radians les points de départ et d'arrivée de l'arc, le long de la courbe du cercle. Ceux-ci sont mesurés à partir de l'axe des x. Le paramètre `antihoraire` est une valeur booléenne qui, lorsque `true`, dessine l'arc dans le sens antihoraire, sinon, l'arc est dessiné dans le sens horaire.
 
-

-
Note : Les angles dans la fonction arc sont mesurés en radians, et non en degrés. Pour convertir des degrés en radians, vous pouvez utiliser l'expression JavaScript suivante : radians = (Math.PI/180)*degres.

-

+> **Note :** Les angles dans la fonction `arc` sont mesurés en radians, et non en degrés. Pour convertir des degrés en radians, vous pouvez utiliser l'expression JavaScript suivante : `radians = (Math.PI/180)*degres`.
 
-
L'exemple suivant est un peu plus complexe que ceux que nous avons vus plus haut. Il dessine 12 arcs différents, avec des angles et des remplissages différents.

+L'exemple suivant est un peu plus complexe que ceux que nous avons vus plus haut. Il dessine 12 arcs différents, avec des angles et des remplissages différents.
 
-
Les deux boucles for bouclent sur les lignes et les colonnes des arcs. Pour chaque arc, on commence un nouveau trajet en appelant beginPath(). Dans le code, chacun des paramètres dans l'arc est une variable pour des raisons de clarté, mais en réalité, vous n'avez pas besoin de le faire.

+Les deux [boucles `for`](/fr-FR/docs/Web/JavaScript/Reference/Statements/for) bouclent sur les lignes et les colonnes des arcs. Pour chaque arc, on commence un nouveau trajet en appelant `beginPath()`. Dans le code, chacun des paramètres dans l'arc est une variable pour des raisons de clarté, mais en réalité, vous n'avez pas besoin de le faire.
 
-
Les coordonnées x et y devraient être claires. rayon et angleInitial sont fixés. L'angleFinal commence à 180 degrés (demi-cercle) dans la première colonne et il est augmenté par pas de 90 degrés, pour finir par un cercle complet dans la dernière colonne.

+Les coordonnées `x` et `y` devraient être claires. `rayon` et `angleInitial` sont fixés. L'`angleFinal` commence à 180 degrés (demi-cercle) dans la première colonne et il est augmenté par pas de 90 degrés, pour finir par un cercle complet dans la dernière colonne.
 
-
L'instruction pour le paramètre antihoraire a pour résultat que la première et de la troisième ligne sont dessinées comme des arcs de sens horaire, et que la deuxième et quatrième sont dessinées comme des arcs de sens antihoraire. Enfin, l'instruction if fait des arcs filaires dans la moité supérieure, et des arcs remplis dans la moitié inférieure.

+L'instruction pour le paramètre `antihoraire` a pour résultat que la première et de la troisième ligne sont dessinées comme des arcs de sens horaire, et que la deuxième et quatrième sont dessinées comme des arcs de sens antihoraire. Enfin, l'instruction `if` fait des arcs filaires dans la moité supérieure, et des arcs remplis dans la moitié inférieure.
 
-

-
Note : Cet exemple requiert canevas légèrement plus large que les autres sur cette page : 150 x 200 pixels.

-

+> **Note :** Cet exemple requiert canevas légèrement plus large que les autres sur cette page : 150 x 200 pixels.
 
-
+```html hidden
+
+ 
+   
+ 
+
+```
 
-
function dessiner() {
+```js
+function dessiner() {
   var canevas = document.getElementById('canevas');
   if (canevas.getContext) {
     var ctx = canevas.getContext('2d');
 
-    for(var i = 0; i < 4; i++) {
-      for(var j = 0; j < 3; j++) {
+    for(var i = 0; i < 4; i++) {
+      for(var j = 0; j < 3; j++) {
         ctx.beginPath();
         var x = 25 + j * 50; // Coordonnée x
         var y = 25 + i * 50; // Coordonnée y
@@ -290,7 +279,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
 
         ctx.arc(x, y, rayon, angleInitial, angleFinal, antihoraire);
 
-        if (i>1) {
+        if (i>1) {
           ctx.fill();
         } else {
           ctx.stroke();
@@ -299,43 +288,43 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
     }
   }
 }
-

+```
 
-
{{EmbedLiveSample("Les_arcs", 160, 210, "canvas_arc.png")}}

+{{EmbedLiveSample("Les_arcs", 160, 210, "canvas_arc.png")}}
 
-
Les courbes quadratiques et de Bézier

+### Les courbes quadratiques et de Bézier
 
-
Le type suivant de trajets disponible est la courbe de Bézier, disponible en deux variétés, cubique et quadratique. Elles sont généralement utilisées pour dessiner des formes naturelles complexes.

+Le type suivant de trajets disponible est la [courbe de Bézier](https://fr.wikipedia.org/wiki/Courbe_de_B%C3%A9zier), disponible en deux variétés, cubique et quadratique. Elles sont généralement utilisées pour dessiner des formes naturelles complexes.
 
-

- 
{{domxref("CanvasRenderingContext2D.quadraticCurveTo", "quadraticCurveTo(cp1x, cp1y, x, y)")}}

- 
Dessine une courbe de Bézier quadratique depuis la position courante du stylo jusqu'au point final spécifié par x et y, en utilisant le point de contrôle spécifié par cp1x et cp1y.

- 
{{domxref("CanvasRenderingContext2D.bezierCurveTo", "bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)")}}

- 
Dessine une courbe de Bézier cubique depuis la position courante du stylo jusqu'au point spécifié par x et y, en utilisant les points de contrôle (cp1x, cp1y) et (cp2x, cp2y).

-

+- {{domxref("CanvasRenderingContext2D.quadraticCurveTo", "quadraticCurveTo(cp1x, cp1y, x, y)")}}
+  - : Dessine une courbe de Bézier quadratique depuis la position courante du stylo jusqu'au point final spécifié par `x` et `y`, en utilisant le point de contrôle spécifié par `cp1x` et `cp1y`.
+- {{domxref("CanvasRenderingContext2D.bezierCurveTo", "bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)")}}
+  - : Dessine une courbe de Bézier cubique depuis la position courante du stylo jusqu'au point spécifié par `x` et `y`, en utilisant les points de contrôle (`cp1x`, `cp1y`) et (`cp2x`, `cp2y`).
 
-
La différence entre ces deux méthodes est mieux décrite par l'image à droite. Une courbe quadratique de Bézier a un point de départ et un point d'arrivée (points bleus), et seulement un point de contrôle (indiqué par le point rouge), tandis qu'une courbe de Bézier cubique utilise deux points de contrôle.

+La différence entre ces deux méthodes est mieux décrite par l'image à droite. Une courbe quadratique de Bézier a un point de départ et un point d'arrivée (points bleus), et seulement un **point de contrôle** (indiqué par le point rouge), tandis qu'une courbe de Bézier cubique utilise deux points de contrôle.
 
-

+![](canvas_curves.png)
 
-
Les paramètres x et y de ces deux méthodes sont les coordonnées du point d'arrivée. cp1x et cp1y sont les coordonnées du premier point de contrôle, et  cp2x et cp2y sont les coordonnées du second point de contrôle.

+Les paramètres `x` et `y` de ces deux méthodes sont les coordonnées du point d'arrivée. `cp1x` et `cp1y` sont les coordonnées du premier point de contrôle, et  `cp2x` et `cp2y` sont les coordonnées du second point de contrôle.
 
-
Utiliser des courbes quadratiques et cubiques de Bézier peut constituer un certain défi, car à la différence d'un logiciel de tracé des vecteurs comme Adobe Illustrator, nous n'avons pas de retour visuel direct concernant ce que nous faisons. Cela rend passablement difficile le dessin de formes complexes. Dans l'exemple suivant, nous allons dessiner quelques formes naturelles simples, mais si vous avez du temps et - surtout - de la patience, des formes bien plus complexes peuvent être créées.

+Utiliser des courbes quadratiques et cubiques de Bézier peut constituer un certain défi, car à la différence d'un logiciel de tracé des vecteurs comme _Adobe Illustrator_, nous n'avons pas de retour visuel direct concernant ce que nous faisons. Cela rend passablement difficile le dessin de formes complexes. Dans l'exemple suivant, nous allons dessiner quelques formes naturelles simples, mais si vous avez du temps et - surtout - de la patience, des formes bien plus complexes peuvent être créées.
 
-
Il n'y a rien de très difficile dans ces exemples. Dans les deux cas, on peut voir une succession de courbes être dessinées qui aboutissent finalement à une forme complète.

+Il n'y a rien de très difficile dans ces exemples. Dans les deux cas, on peut voir une succession de courbes être dessinées qui aboutissent finalement à une forme complète.
 
-
Courbes de Bézier quadratiques

+#### Courbes de Bézier quadratiques
 
-
Cet exemple utilise plusieurs courbes quadratiques de Bézier pour rendre une bulle de dialogue.

+Cet exemple utilise plusieurs courbes quadratiques de Bézier pour rendre une bulle de dialogue.
 
-
+```html hidden
+
+ 
+   
+ 
+
+```
 
-
function dessiner() {
+```js
+function dessiner() {
   var canevas = document.getElementById('canevas');
   if (canevas.getContext) {
     var ctx = canevas.getContext('2d');
@@ -352,22 +341,24 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
     ctx.stroke();
   }
 }
-

+```
 
-
{{EmbedLiveSample("Courbes_de_Bézier_quadratiques", 160, 160, "canvas_quadratic.png")}}

+{{EmbedLiveSample("Courbes_de_Bézier_quadratiques", 160, 160, "canvas_quadratic.png")}}
 
-
Les courbes de Bézier cubiques

+#### Les courbes de Bézier cubiques
 
-
Cet exemple dessine un cœur en utilisant les courbes de Bézier cubiques.

+Cet exemple dessine un cœur en utilisant les courbes de Bézier cubiques.
 
-
+```html hidden
+
+ 
+   
+ 
+
+```
 
-
function dessiner() {
+```js
+function dessiner() {
   var canevas = document.getElementById('canevas');
   if (canevas.getContext) {
     var ctx = canevas.getContext('2d');
@@ -384,33 +375,33 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
     ctx.fill();
   }
 }
-

+```
 
-
{{EmbedLiveSample("Les_courbes_de_Bézier_cubiques", 160, 160, "canvas_bezier.png")}}

+{{EmbedLiveSample("Les_courbes_de_Bézier_cubiques", 160, 160, "canvas_bezier.png")}}
 
-
Rectangles

+### Rectangles
 
-
En plus des trois méthodes que nous avons vues dans {{anch("Dessin de rectangles")}}, qui dessinent des formes rectangulaires directement sur le canevas, il y a la méthode rect(), qui ajoute un trajet rectangulaire à un trajet actuellement ouvert.

+En plus des trois méthodes que nous avons vues dans {{anch("Dessin de rectangles")}}, qui dessinent des formes rectangulaires directement sur le canevas, il y a la méthode `rect()`, qui ajoute un trajet rectangulaire à un trajet actuellement ouvert.
 
-

- 
{{domxref("CanvasRenderingContext2D.rect", "rect(x, y, largeur, hauteur)")}}

- 
Dessine un rectangle dont l'angle supérieur gauche est spécifié par (x, y), avec les largeur et hauteur spécifiées.

-

+- {{domxref("CanvasRenderingContext2D.rect", "rect(x, y, largeur, hauteur)")}}
+  - : Dessine un rectangle dont l'angle supérieur gauche est spécifié par (`x`, `y`), avec les `largeur` et `hauteur` spécifiées.
 
-
Quand cette méthode est exécutée, la méthode moveTo() est automatiquement appelée avec les paramètres (0,0). En d'autres termes, la position en cours du stylo est automatiquement réinitialisée aux coordonnées par défaut.

+Quand cette méthode est exécutée, la méthode `moveTo()` est automatiquement appelée avec les paramètres (0,0). En d'autres termes, la position en cours du stylo est automatiquement réinitialisée aux coordonnées par défaut.
 
-
Combiner les possibilités

+### Combiner les possibilités
 
-
Jusqu'à présent, chaque exemple de cette page a utilisé un seul type de fonction de trajet par forme. Cependant, il n'y a pas de limite au nombre ou aux types de trajets que vous pouvez utiliser pour créer une forme. Ainsi, dans ce dernier exemple, combinons toutes les fonctions de trajet pour faire un ensemble de personnages d'un jeu très célèbre.

+Jusqu'à présent, chaque exemple de cette page a utilisé un seul type de fonction de trajet par forme. Cependant, il n'y a pas de limite au nombre ou aux types de trajets que vous pouvez utiliser pour créer une forme. Ainsi, dans ce dernier exemple, combinons toutes les fonctions de trajet pour faire un ensemble de personnages d'un jeu très célèbre.
 
-
+```html hidden
+
+ 
+   
+ 
+
+```
 
-
function dessiner() {
+```js
+function dessiner() {
   var canevas = document.getElementById('canevas');
   if (canevas.getContext) {
     var ctx = canevas.getContext('2d');
@@ -427,15 +418,15 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques
     ctx.lineTo(31, 37);
     ctx.fill();
 
-    for(var i = 0; i< 8; i++) {
+    for(var i = 0; i< 8; i++) {
       ctx.fillRect(51 + i * 16, 35, 4, 4);
     }
 
-    for(i = 0; i < 6; i++) {
+    for(i = 0; i < 6; i++) {
       ctx.fillRect(115, 51 + i * 16, 4, 4);
     }
 
-    for(i = 0; i < 8; i++) {
+    for(i = 0; i < 8; i++) {
       ctx.fillRect(51 + i * 16, 99, 4, 4);
     }
 
@@ -493,52 +484,51 @@ function rectArrondi(ctx, x, y, largeur, hauteur, rayon) {
   ctx.quadraticCurveTo(x, y, x, y + rayon);
   ctx.stroke();
 }
+```
 
-

+L'image résultante ressemble à ce qui suit :
 
-
L'image résultante ressemble à ce qui suit :

+{{EmbedLiveSample("Combiner_les_possibilités", 160, 160)}}
 
-
{{EmbedLiveSample("Combiner_les_possibilités", 160, 160)}}

+Nous ne l'expliquerons pas plus en détails, du fait que c'est étonnament simple. Les choses les plus importantes à noter sont l'utilisation de la propriété `fillStyle` sur le contexte du dessin, et l'utilisation d'une fonction utilitaire dans ce cas, rectArrondi`())`. L'utilisation de fonctions utilitaires pour des éléments de dessin que vous faites souvent peut être très utile, et peut réduire la quantité de code dont vous avez besoin, ainsi que sa complexité.
 
-
Nous ne l'expliquerons pas plus en détails, du fait que c'est étonnament simple. Les choses les plus importantes à noter sont l'utilisation de la propriété fillStyle sur le contexte du dessin, et l'utilisation d'une fonction utilitaire dans ce cas, rectArrondi()). L'utilisation de fonctions utilitaires pour des éléments de dessin que vous faites souvent peut être très utile, et peut réduire la quantité de code dont vous avez besoin, ainsi que sa complexité.

+Nous reviendrons sur `fillStyle` plus en détail plus loin dans ce tutoriel. Pour l'instant, tout ce que nous faisons est de l'utiliser pour changer en blanc la couleur pour les trajets depuis la couleur noire par défaut, et inversement ensuite.
 
-
Nous reviendrons sur fillStyle plus en détail plus loin dans ce tutoriel. Pour l'instant, tout ce que nous faisons est de l'utiliser pour changer en blanc la couleur pour les trajets depuis la couleur noire par défaut, et inversement ensuite.

+## Objets Path2D
 
-
Objets Path2D

+Comme nous l'avons vu dans le dernier exemple, il peut y avoir une série de trajets et d'instructions de dessin pour dessiner des objets sur votre canevas. Pour simplifier le code et améliorer les performances, l'objet {{domxref("Path2D")}}, disponible dans les versions récentes des navigateurs, vous permet de mettre en cache ou d'enregistrer ces instrucions de dessin. Vous pourrez alors rejouer vos trajets rapidement.
+Voyons comment nous pouvons construire un objet `Path2D `:
 
-
Comme nous l'avons vu dans le dernier exemple, il peut y avoir une série de trajets et d'instructions de dessin pour dessiner des objets sur votre canevas. Pour simplifier le code et améliorer les performances, l'objet {{domxref("Path2D")}}, disponible dans les versions récentes des navigateurs, vous permet de mettre en cache ou d'enregistrer ces instrucions de dessin. Vous pourrez alors rejouer vos trajets rapidement.

- Voyons comment nous pouvons construire un objet Path2D :

+- {{domxref("Path2D.Path2D", "Path2D()")}}
+  - : Le constructor **`Path2D()`** retourne un objet `Path2D` nouvellement instancié, optionellement avec un autre trajet comme argument (crée une copie), ou optionellement avec une chaîne constituée de données de [trajet SVG](/fr-FR/docs/Web/SVG/Tutorial/Paths).
 
-

- 
{{domxref("Path2D.Path2D", "Path2D()")}}

- 
Le constructor Path2D() retourne un objet Path2D nouvellement instancié, optionellement avec un autre trajet comme argument (crée une copie), ou optionellement avec une chaîne constituée de données de trajet SVG.

-

+
 
-
new Path2D();     // objet trajet vide
-new Path2D(trajet); // copie depuis un autre objet Path2D
-new Path2D(d);    // trajet depuis des données de trajet SVG

+    new Path2D();     // objet trajet vide
+    new Path2D(trajet); // copie depuis un autre objet Path2D
+    new Path2D(d);    // trajet depuis des données de trajet SVG
 
-
Toutes les méthodes de trajet telles que moveTo, rect, arc ou quadraticCurveTo, etc., que nous avons appris à connaître ci-dessus, sont disponibles sur les objets Path2D.

+Toutes les [méthodes de trajet](/en-US/docs/Web/API/CanvasRenderingContext2D#Paths) telles que `moveTo`, `rect`, `arc` ou `quadraticCurveTo`, etc., que nous avons appris à connaître ci-dessus, sont disponibles sur les objets `Path2D`.
 
-
L'API Path2D ajoute aussi une manière de combiner des trajets en utilisant la méthode addPath. Cela peut être utile quand vous voulez contruire des objets à partir de plusieurs composants, par exemple.

+L'API `Path2D` ajoute aussi une manière de combiner des trajets en utilisant la méthode `addPath`. Cela peut être utile quand vous voulez contruire des objets à partir de plusieurs composants, par exemple.
 
-

- 
{{domxref("Path2D.addPath", "Path2D.addPath(trajet [, transformation])")}}

- 
Ajoute un trajet, au trajet en cours, avec une matrice de transformation.

-

+- {{domxref("Path2D.addPath", "Path2D.addPath(trajet [, transformation])")}}
+  - : Ajoute un trajet, au trajet en cours, avec une matrice de transformation.
 
-
Exemple de Path2D

+### Exemple de Path2D
 
-
Dans cet exemple, on crée un rectangle et un cercle. Tous deux sont stockés comme des objets Path2D, de sorte qu'ils sont disponibles pour un usage ultérieur. Avec la nouvelle API Path2D, plusieurs méthodes ont été mises à jour pour accepter optionnellement un objet Path2D à utiliser au lieu du trajet en cours. Ici, stroke et fill sont utilisés avec un argument de trajet pour dessiner les deux objets sur le canevas, par exemple.

+Dans cet exemple, on crée un rectangle et un cercle. Tous deux sont stockés comme des objets `Path2D`, de sorte qu'ils sont disponibles pour un usage ultérieur. Avec la nouvelle API `Path2D`, plusieurs méthodes ont été mises à jour pour accepter optionnellement un objet `Path2D` à utiliser au lieu du trajet en cours. Ici, `stroke` et `fill` sont utilisés avec un argument de trajet pour dessiner les deux objets sur le canevas, par exemple.
 
-
+```html hidden
+
+ 
+   
+ 
+
+```
 
-
function dessiner() {
+```js
+function dessiner() {
   var canevas = document.getElementById('canvas');
   if (canevas.getContext){
     var ctx = canevas.getContext('2d');
@@ -553,16 +543,17 @@ new Path2D(d);    // trajet depuis des données de trajet SVG

     ctx.stroke(rectangle);
     ctx.fill(cercle);
   }
-}

+}
+```
 
-
{{EmbedLiveSample("Exemple_de_Path2D", 130, 110, "path2d.png")}}

+{{EmbedLiveSample("Exemple_de_Path2D", 130, 110, "path2d.png")}}
 
-
Utilisation de trajets SVG

+### Utilisation de trajets SVG
 
-
Une autre fonctionnalité puissante de la nouvelle API Path2D de canevas est l'utilisation de données de trajet SVG pour initialiser des trajets sur votre canevas. Cela peut vous permettre de faire circuler des données de trajet et les réutiliser, à la fois en SVG et dans un canevas.

+Une autre fonctionnalité puissante de la nouvelle API `Path2D` de canevas est l'utilisation de [données de trajet SVG](/fr-FR/docs/Web/SVG/Tutorial/Paths) pour initialiser des trajets sur votre canevas. Cela peut vous permettre de faire circuler des données de trajet et les réutiliser, à la fois en SVG et dans un canevas.
 
-
Le trajet se déplacera au point (M10 10) et se déplacera alors de 80 points horizontalement vers la droite (h 80), ensuite de 80 points vers le bas (v 80), puis de 80 points vers la gauche (h -80), et reviendra alors au départ (z). Vous pouvez voir cet exemple sur la page du constructeur Path2D.

+Le trajet se déplacera au point (`M10 10`) et se déplacera alors de 80 points horizontalement vers la droite (`h 80`), ensuite de 80 points vers le bas (`v 80`), puis de 80 points vers la gauche (`h -80`), et reviendra alors au départ (`z`). Vous pouvez voir cet exemple sur la page du [constructeur P`ath2D`](/en-US/docs/Web/API/Path2D.Path2D#Using_SVG_paths).
 
-
var p = new Path2D("M10 10 h 80 v 80 h -80 Z");

+    var p = new Path2D("M10 10 h 80 v 80 h -80 Z");
 
-
{{PreviousNext("Tutoriel_canvas/Utilisation_de_base", "Tutoriel_canvas/Ajout_de_styles_et_de_couleurs")}}

+{{PreviousNext("Tutoriel_canvas/Utilisation_de_base", "Tutoriel_canvas/Ajout_de_styles_et_de_couleurs")}}
diff --git a/files/fr/web/api/canvas_api/tutorial/drawing_text/index.md b/files/fr/web/api/canvas_api/tutorial/drawing_text/index.md
index 4a1dfdcfa8..8cb24960db 100644
--- a/files/fr/web/api/canvas_api/tutorial/drawing_text/index.md
+++ b/files/fr/web/api/canvas_api/tutorial/drawing_text/index.md
@@ -9,73 +9,81 @@ tags:
 translation_of: Web/API/Canvas_API/Tutorial/Drawing_text
 original_slug: Web/API/Canvas_API/Tutoriel_canvas/Dessin_de_texte_avec_canvas
 ---
-
{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Ajout_de_styles_et_de_couleurs", "Tutoriel_canvas/Utilisation_d'images")}}

+{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Ajout_de_styles_et_de_couleurs", "Tutoriel_canvas/Utilisation_d'images")}}
 
-
Après avoir vu comment appliquer les styles et les couleurs dans le chapitre précédent, nous allons maintenant voir comment dessiner du texte sur canvas.

+Après avoir vu comment [appliquer les styles et les couleurs](/fr/docs/Tutoriel_canvas/Ajout_de_styles_et_de_couleurs) dans le chapitre précédent, nous allons maintenant voir comment dessiner du texte sur canvas.
 
-
Dessin de texte

+## Dessin de texte
 
-
  Le contexte de rendu du canevas fournit deux méthodes pour le rendu du texte :

+Le contexte de rendu du canevas fournit deux méthodes pour le rendu du texte :
 
-

- 
{{domxref("CanvasRenderingContext2D.fillText", "fillText(text, x, y [, maxWidth])")}}

- 
Remplit un texte donné à la position (x, y). Facultatif, avec une largeur maximale à dessiner.

- 
{{domxref("CanvasRenderingContext2D.strokeText", "strokeText(text, x, y [, maxWidth])")}}

- 
Trait d'un texte donné à la position (x, y). Facultatif, avec une largeur maximale à dessiner.

-

+- {{domxref("CanvasRenderingContext2D.fillText", "fillText(text, x, y [, maxWidth])")}}
+  - : Remplit un texte donné à la position (x, y). Facultatif, avec une largeur maximale à dessiner.
+- {{domxref("CanvasRenderingContext2D.strokeText", "strokeText(text, x, y [, maxWidth])")}}
+  - : Trait d'un texte donné à la position (x, y). Facultatif, avec une largeur maximale à dessiner.
 
-
Un exemple fillText

+### Un exemple fillText
 
-
Le texte est rempli en utilisant le fillStyle actuel.

+Le texte est rempli en utilisant le `fillStyle` actuel.
 
-
function draw() {
+```js
+function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
   ctx.font = '48px serif';
   ctx.fillText('Hello world', 10, 50);
-}

+}
+```
 
-
+```html hidden
+
+```
 
-
+```js hidden
+draw();
+```
 
-
{{EmbedLiveSample("A_fillText_example", 310, 110)}}

+{{EmbedLiveSample("A_fillText_example", 310, 110)}}
 
-
Un exemple de strokeText

+### Un exemple de strokeText
 
-
Le texte est rempli en utilisant le  strokeStyle courant.

+Le texte est rempli en utilisant le `strokeStyle` courant.
 
-
function draw() {
+```js
+function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
   ctx.font = '48px serif';
   ctx.strokeText('Hello world', 10, 50);
-}

+}
+```
 
-
+```html hidden
+
+```
 
-
+```js hidden
+draw();
+```
 
-
{{EmbedLiveSample("A_strokeText_example", 310, 110)}}

+{{EmbedLiveSample("A_strokeText_example", 310, 110)}}
 
-
Style de texte

+## Style de texte
 
-
Dans les exemples ci-dessus, nous utilisons déjà la propriété de police pour rendre le texte un peu plus grand que la taille par défaut. Il existe d'autres propriétés qui vous permettent d'ajuster la façon dont le texte est affiché sur le canevas :

+Dans les exemples ci-dessus, nous utilisons déjà la propriété de police pour rendre le texte un peu plus grand que la taille par défaut. Il existe d'autres propriétés qui vous permettent d'ajuster la façon dont le texte est affiché sur le canevas :
 
-

- 
{{domxref("CanvasRenderingContext2D.font", "font = value")}}

- 
Le style de texte actuel utilisé lors du dessin du texte. Cette chaîne utilise la même syntaxe que la propriété CSS {{cssxref ("font")}}. La police par défaut est 10px sans-serif.

- 
{{domxref("CanvasRenderingContext2D.textAlign", "textAlign = value")}}

- 
Paramètre d'alignement du texte. Valeurs possibles :  start (début),  end (fin),  left (gauche),  right (droite) ou  center (centre). La valeur par défaut est start.

- 
{{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline = value")}}

- 
Paramètre d'alignement de base. Valeurs possibles :  top (haut),  hanging (suspendu),  middle (moyen),  alphabetic (alphabétique),  ideographic (idéographique),  bottom (en bas). La valeur par défaut est alphabetic.

- 
{{domxref("CanvasRenderingContext2D.direction", "direction = value")}}

- 
Directionnalité. Valeurs possibles:  ltr (de gauche à droite),  rtl (de droite à gauche), inherit (hérité). La valeur par défaut est inherit.

-

+- {{domxref("CanvasRenderingContext2D.font", "font = value")}}
+  - : Le style de texte actuel utilisé lors du dessin du texte. Cette chaîne utilise la même syntaxe que la propriété CSS {{cssxref ("font")}}. La police par défaut est 10px sans-serif.
+- {{domxref("CanvasRenderingContext2D.textAlign", "textAlign = value")}}
+  - : Paramètre d'alignement du texte. Valeurs possibles : `start` _(\*\*début)_, `end` _(\*\*fin)_, `left` _(\*\*gauche)_, `right` _(\*\*droite)_ ou `center` _(\*\*centre)_. La valeur par défaut est `start`.
+- {{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline = value")}}
+  - : Paramètre d'alignement de base. Valeurs possibles : `top` _(\*\*haut)_, `hanging` _(\*\*suspendu)_, `middle` _(\*\*moyen)_, `alphabetic` _(\*\*alphabétique)_, `ideographic` _(\*\*idéographique)_, `bottom` _(\*\*en bas)_. La valeur par défaut est `alphabetic`.
+- {{domxref("CanvasRenderingContext2D.direction", "direction = value")}}
+  - : Directionnalité. Valeurs possibles: `ltr` _(de gauche à droite)_, `rtl` _(de droite à gauche)_, `inherit` _(hérité)_. La valeur par défaut est `inherit`.
 
-
Ces propriétés peuvent vous être familières si vous avez déjà travaillé avec CSS.

+Ces propriétés peuvent vous être familières si vous avez déjà travaillé avec CSS.
 
-
Le diagramme suivant du  WHATWG  illustre les différentes lignes de base prises en charge par la propriété textBaseline.

+Le diagramme suivant du [WHATWG](http://www.whatwg.org/) illustre les différentes lignes de base prises en charge par la propriété `textBaseline.`
 
-
The top of the em square is
+![The top of the em square is
 roughly at the top of the glyphs in a font, the hanging baseline is
 where some glyphs like आ are anchored, the middle is half-way
 between the top of the em square and the bottom of the em square,
@@ -84,29 +92,34 @@ f, and Ω are anchored, the ideographic baseline is
 where glyphs like 私 and 達 are anchored, and the bottom
 of the em square is roughly at the bottom of the glyphs in a
 font. The top and bottom of the bounding box can be far from these
-baselines, due to glyphs extending far outside the em square.

+baselines, due to glyphs extending far outside the em square.](http://www.whatwg.org/specs/web-apps/current-work/images/baselines.png)
 
-
Un exemple de textBaseline

+### Un exemple de textBaseline
 
-
Modifiez le code ci-dessous et visualisez vos mises à jour en direct dans le canevas :

+Modifiez le code ci-dessous et visualisez vos mises à jour en direct dans le canevas :
 
-
ctx.font = '48px serif';
+```js
+ctx.font = '48px serif';
 ctx.textBaseline = 'hanging';
-ctx.strokeText('Hello world', 0, 100);

-
-
Playable code

-
-