recursal/MDN huggingface dataset:
AudioBufferSourceNode.loop
==========================

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

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

Syntaxe
-------


```js
var source = audioCtx.createBufferSource();
source.loop = true;
```

### Value

Un booléen.

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

Exemple
-------

Dans cet exemple, la fonction `AudioContext.decodeAudioData` (en-US) est utilisée pour décoder une piste audio et la placer dans un `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.)


```js
function getData() {
  source = audioCtx.createBufferSource();
  request = new XMLHttpRequest();

  request.open("GET", "viper.ogg", true);

  request.responseType = "arraybuffer";

  request.onload = function () {
    var audioData = request.response;

    audioCtx.decodeAudioData(
      audioData,
      function (buffer) {
        myBuffer = buffer;
        source.buffer = myBuffer;
        source.playbackRate.value = playbackControl.value;
        source.connect(audioCtx.destination);
        source.loop = true;
      },

      function (e) {
        "Error with decoding audio data" + e.err;
      },
    );
  };

  request.send();
}

// lie les boutons pour lire et arrêter l'audio, et le slider

play.onclick = function () {
  getData();
  source.start(0);
  play.setAttribute("disabled", "disabled");
  playbackControl.removeAttribute("disabled");
};
```

Spécifications
--------------

| Specification |
| --- |
| Web Audio API # dom-audiobuffersourcenode-loop |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Utiliser la Web Audio API
AudioBufferSourceNode.buffer
============================

La propriété **`buffer`** de l'interface `AudioBufferSourceNode` donne la possibilité de lire un son en utilisant un objet `AudioBuffer` comme ressource audio.

Si la propriété `buffer` a la valeur `null`, le nœud génère un canal unique silencieux (chaque échantillon vaut `0`).

Syntaxe
-------


```js
AudioBufferSourceNode.buffer = soundBuffer;
```

### Valeur

Un objet `AudioBuffer` qui contient les données représentant le son que le nœud va lire.

Exemple
-------

**Note :** Pour un exemple complet, voir cette démonstration, ou le code source correspondant.


```js
let AudioContext = window.AudioContext || window.webkitAudioContext;
let audioCtx;

// Stereo
let channels = 2;

function init() {
  audioCtx = new AudioContext();
}

button.onclick = function () {
  if (!audioCtx) {
    init();
  }

  // On crée un tampon stéréo vide de deux secondes
  // qui utilise l'échantillonage de AudioContext
  let frameCount = audioCtx.sampleRate \* 2.0;

  let myArrayBuffer = audioCtx.createBuffer(
    channels,
    frameCount,
    audioCtx.sampleRate,
  );

  // On remplit le buffer avec du bruit blanc ;
  // soit des valeurs entre -1.0 et 1.0
  for (let channel = 0; channel < channels; channel++) {
    // Voici le calcul du tableau réel qui contient
    // les données
    let nowBuffering = myArrayBuffer.getChannelData(channel);
    for (let i = 0; i < frameCount; i++) {
      // Math.random() donne une valeur sur [0; 1.0]
      // audio doit être sur [-1.0; 1.0]
      nowBuffering[i] = Math.random() \* 2 - 1;
    }
  }

  // On récupère un AudioBufferSourceNode.
  // C'est l'objet AudioNode à utiliser pour lire
  // un AudioBuffer
  let source = audioCtx.createBufferSource();
  // on passe le buffer avec AudioBufferSourceNode
  source.buffer = myArrayBuffer;
  // on connecte le nœud AudioBufferSourceNode à
  // la destination afin d'entendre le son
  source.connect(audioCtx.destination);
  // on lance la lecture
  source.start();

  source.onended = () => {
    console.log("Bruit blanc terminé");
  };
};
```

Spécifications
--------------

| Specification |
| --- |
| Web Audio API # dom-audiobuffersourcenode-buffer |

Compatibilité navigateurs
-------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Utiliser l'API *Web Audio*
* L'API *Web Audio*
AudioBufferSourceNode.detune
============================

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

Ses valeur sont comprises entre -1200 et 1200.

Syntaxe
-------


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

### Valeur

Un `AudioParam` de type k-rate (en-US).

Exemple
-------


```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++) {
  var chanData = audioBuffer.getChannelData(chan);
  for (var i = 0; i < nbFrames; i++) {
    chanData[i] = Math.random() \* 2 - 1;
  }
}

var source = audioCtx.createBufferSource();
source.buffer = audioBuffer;
source.connect(audioCtx.destination);
source.detune.value = 100; // valeur en cents
source.start();
```

Spécifications
--------------

| Specification |
| --- |
| Web Audio API # dom-audiobuffersourcenode-detune |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Utiliser la Web Audio API (en-US)
PerformanceElementTiming.identifier
===================================

**Expérimental:** **Cette fonction est expérimentale**  
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.  
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

**Non standard:** Cette fonctionnalité n'est ni standard, ni en voie de standardisation. Ne l'utilisez pas pour des sites accessibles sur le Web : elle ne fonctionnera pas pour tout utilisateur. Il peut également y avoir d'importantes incompatibilités entre les implémentations et son comportement peut être modifié dans le futur.

La propriété en lecture seule **`identifier`** de l'interface `PerformanceElementTiming` renvoie la valeur de l'attribut `elementtiming` sur l'élément.

Syntaxe
-------


```js
var identifier = PerformanceElementTiming.identifier;
```

### Valeur

Une chaîne de caractères `DOMString`.

Examples
--------

Dans cet exemple, la valeur de `elementtiming` est `big-image`. L'appel à `entry.indentifier` renvoie donc la chaîne de caractères `big-image`.


```html
<img
 src="image.jpg"
 alt="une belle image"
 elementtiming="big-image"
 id="myImage" />
```



```js
const observer = new PerformanceObserver((list) => {
  let entries = list.getEntries().forEach(function (entry) {
    if (entry.identifier === "big-image") {
      console.log(entry.naturalWidth);
    }
  });
});
observer.observe({ entryTypes: ["element"] });
```


**Note :** Cet exemple utilise l'interface `PerformanceObserver` pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément `entryType` `element` afin d'utiliser l'interface `PerformanceElementTiming`.

Spécifications
--------------

| Specification |
| --- |
| Element Timing API # ref-for-dom-performanceelementtiming-identifier |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
PerformanceElementTiming.loadTime
=================================

La propriété en lecture seule **`loadTime`** de l'interface `PerformanceElementTiming` renvoie toujours 0 pour le texte. Pour les images, elle renvoie le temps qui est le plus tardif entre le moment où la ressource image est chargée et le moment où elle est attachée à l'élément.

Syntaxe
-------


```js
var loadTime = PerformanceElementTiming.loadTime;
```

### Valeur

Un objet `DOMHighResTimeStamp` avec le temps de chargement de l'élément.

Exemples
--------

Dans cet exemple, l'appel à `entry.loadTime` renvoie le temps de chargement de l'image.


```html
<img
 src="image.jpg"
 alt="une belle image"
 elementtiming="big-image"
 id="myImage" />
```



```js
const observer = new PerformanceObserver((list) => {
  let entries = list.getEntries().forEach(function (entry) {
    if (entry.identifier === "big-image") {
      console.log(entry.loadTime);
    }
  });
});
observer.observe({ entryTypes: ["element"] });
```


**Note :** Cet exemple utilise l'interface `PerformanceObserver` pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément `PerformanceEntry.entryType` afin d'utiliser l'interface `PerformanceElementTiming`.

Spécifications
--------------

| Specification |
| --- |
| Element Timing API # ref-for-dom-performanceelementtiming-loadtime① |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
PerformanceElementTiming.naturalHeight
======================================

La propriété en lecture seule **`naturalHeight`** de l'interface `PerformanceElementTiming` renvoie la hauteur intrinsèque de l'élément image.

Syntaxe
-------


```js
var height = PerformanceElementTiming.naturalHeight;
```

### Valeur

Un entier de 32 bits non signé (*unsigned long*) qui est la hauteur intrinsèque de l'image si cela est appliqué à une image, 0 pour le texte.

Exemples
--------

Dans cet exemple, le fichier image a une largeur de 1000px et une hauteur de 750px. L'appel de `entry.naturalHeight` renvoie `750`, c'est-à-dire la hauteur intrinsèque en pixels.


```html
<img
 src="image.jpg"
 alt="une belle image"
 elementtiming="big-image"
 id="myImage" />
```



```js
const observer = new PerformanceObserver((list) => {
  let entries = list.getEntries().forEach(function (entry) {
    if (entry.identifier === "big-image") {
      console.log(entry.naturalHeight);
    }
  });
});
observer.observe({ entryTypes: ["element"] });
```


**Note :** Cet exemple utilise l'interface `PerformanceObserver` pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément `PerformanceEntry.entryType` afin d'utiliser l'interface `PerformanceElementTiming`.

Spécifications
--------------

| Specification |
| --- |
| Element Timing API # ref-for-dom-performanceelementtiming-naturalheight |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
PerformanceElementTiming.id
===========================

**Expérimental:** **Cette fonction est expérimentale**  
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.  
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

**Non standard:** Cette fonctionnalité n'est ni standard, ni en voie de standardisation. Ne l'utilisez pas pour des sites accessibles sur le Web : elle ne fonctionnera pas pour tout utilisateur. Il peut également y avoir d'importantes incompatibilités entre les implémentations et son comportement peut être modifié dans le futur.

La propriété en lecture seule **`id`** de l'interface `PerformanceElementTiming` renvoie l'`id` de l'élément associé.

Syntaxe
-------


```js
var id = PerformanceElementTiming.id;
```

### Valeur

Une chaîne de caractères `DOMString`.

Exemples
--------

Dans cet exemple, l'appel à `entry.id` entraînera l'affichage dans la console du code `myImage`, qui est l'`id` de l'élément image.


```html
<img
 src="image.jpg"
 alt="une belle image"
 elementtiming="big-image"
 id="myImage" />
```



```js
const observer = new PerformanceObserver((list) => {
  let entries = list.getEntries().forEach(function (entry) {
    if (entry.identifier === "big-image") {
      console.log(entry.id);
    }
  });
});
observer.observe({ entryTypes: ["element"] });
```


**Note :** Cet exemple utilise l'interface `PerformanceObserver` pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément `entryType` `element` afin d'utiliser l'interface `PerformanceElementTiming`.

Spécifications
--------------

| Specification |
| --- |
| Element Timing API # ref-for-dom-performanceelementtiming-id |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
PerformanceElementTiming.toJSON()
=================================

La méthode **`toJSON()`** de l'interface `PerformanceElementTiming` est un sérialiseur standard. Elle renvoie une représentation JSON des propriétés de l'objet.

Syntaxe
-------


```js
var json = PerformanceElementTiming.toJSON();
```

### Valeur de retour

`json`

Un objet JSON qui est la sérialisation de l'objet `PerformanceElementTiming`.

Exemples
--------

Dans cet exemple, l'appel de `entry.toJSON()` renvoie une représentation JSON de l'objet `PerformanceElementTiming`, avec les informations sur l'élément image.


```html
<img
 src="image.jpg"
 alt="une belle image"
 elementtiming="big-image"
 id="myImage" />
```



```js
const observer = new PerformanceObserver((list) => {
  let entries = list.getEntries().forEach(function (entry) {
    if (entry.identifier === "big-image") {
      console.log(entry.toJSON());
    }
  });
});
observer.observe({ entryTypes: ["element"] });
```


**Note :** Cet exemple utilise l'interface `PerformanceObserver` pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément `PerformanceEntry.entryType` afin d'utiliser l'interface `PerformanceElementTiming`.

Spécifications
--------------

| Specification |
| --- |
| Element Timing API # dom-performanceelementtiming-tojson |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
PerformanceElementTiming.renderTime
===================================

La propriété en lecture seule **`renderTime`** de l'interface `PerformanceElementTiming` renvoie le temps écoulé pour le rendu de l'élément associé.

Syntaxe
-------


```js
var renderTime = PerformanceElementTiming.renderTime;
```

### Valeur

Un objet `DOMHighResTimeStamp` avec le temps de rendu de l'élément.

Pour les images, il s'agira de l'**horodatage du rendu de l'image**. Ceci est défini comme le moment du rendu suivant le chargement complet de l'image. Si la vérification de l'autorisation de temporisation échoue (comme défini par l'en-tête Timing-allow-origin (en-US)), ceci retournera 0.

Pour les nœuds de texte, il s'agira de l'**horodatage du rendu du texte**. Ceci est défini comme le moment où l'élément est affiché à l'écran.

Exemples
--------

Dans cet exemple, appeler `entry.renderTime` renvoie le temps de rendu de l'élément image.


```html
<img
 src="image.jpg"
 alt="une belle image"
 elementtiming="big-image"
 id="myImage" />
```



```js
const observer = new PerformanceObserver((list) => {
  let entries = list.getEntries().forEach(function (entry) {
    if (entry.identifier === "big-image") {
      console.log(entry.renderTime);
    }
  });
});
observer.observe({ entryTypes: ["element"] });
```


**Note :** Cet exemple utilise l'interface `PerformanceObserver` pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément `PerformanceEntry.entryType` afin d'utiliser l'interface `PerformanceElementTiming`.

Spécifications
--------------

| Specification |
| --- |
| Element Timing API # ref-for-dom-performanceelementtiming-rendertime① |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
PerformanceElementTiming.intersectionRect
=========================================

La propriété en lecture seule **`intersectionRect`** de l'interface `PerformanceElementTiming` renvoie le rectangle de l'élément dans la zone d'affichage (*viewport*).

Syntaxe
-------


```js
var rect = PerformanceElementTiming.intersectionRect;
```

### Valeur

Un objet `DOMRectReadOnly` qui est le rectangle de l'élément dans la zone d'affichage.

Pour les images, il s'agit du rectangle d'affichage de l'image dans la zone d'affichage. Pour le texte, il s'agit du rectangle d'affichage du nœud dans la zone d'affichage. Il s'agit du plus petit rectangle qui contient l'union de tous les nœuds de texte appartenant à l'élément.

Exemples
--------

Dans cet exemple, l'appel à `entry.intersectionRect` renvoie un objet `DOMRectReadOnly` avec le rectangle d'affichage de l'image.


```html
<img
 src="image.jpg"
 alt="une belle image"
 elementtiming="big-image"
 id="myImage" />
```



```js
const observer = new PerformanceObserver((list) => {
  let entries = list.getEntries().forEach(function (entry) {
    if (entry.identifier === "big-image") {
      console.log(entry.intersectionRect);
    }
  });
});
observer.observe({ entryTypes: ["element"] });
```


**Note :** Cet exemple utilise l'interface `PerformanceObserver` pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément `PerformanceEntry.entryType` afin d'utiliser l'interface `PerformanceElementTiming`.

Spécifications
--------------

| Specification |
| --- |
| Element Timing API # ref-for-dom-performanceelementtiming-intersectionrect |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
PerformanceElementTiming.naturalWidth
=====================================

La propriété en lecture seule **`naturalWidth`** de l'interface `PerformanceElementTiming` renvoie la largeur intrinsèque de l'élément image.

Syntaxe
-------


```js
var width = PerformanceElementTiming.naturalWidth;
```

### Valeur

Un entier de 32 bits non signé (*unsigned long*) qui est la largeur intrinsèque de l'image si cela est appliqué à une image, 0 pour le texte.

Exemples
--------

Dans cet exemple, le fichier image a une largeur de 1000px et une hauteur de 750px. L'appel de `entry.naturalWidth` renvoie `1000`, c'est-à-dire la largeur intrinsèque en pixels.


```html
<img
 src="image.jpg"
 alt="une belle image"
 elementtiming="big-image"
 id="myImage" />
```



```js
const observer = new PerformanceObserver((list) => {
  let entries = list.getEntries().forEach(function (entry) {
    if (entry.identifier === "big-image") {
      console.log(entry.naturalWidth);
    }
  });
});
observer.observe({ entryTypes: ["element"] });
```


**Note :** Cet exemple utilise l'interface `PerformanceObserver` pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément `PerformanceEntry.entryType` afin d'utiliser l'interface `PerformanceElementTiming`.

Spécifications
--------------

| Specification |
| --- |
| Element Timing API # ref-for-dom-performanceelementtiming-naturalwidth |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
PerformanceElementTiming.element
================================

La propriété en lecture seule **`element`** de l'interface `PerformanceElementTiming` renvoie un `Element` qui est une représentation littérale de l'élément associé.

Syntaxe
-------


```js
var element = PerformanceElementTiming.element;
```

### Valeur

Un objet de type `Element`.

Exemples
--------

Dans cet exemple, l'appel à `entry.element` va enregistrer dans la console `<img src="image.jpg" alt="une belle image" elementtiming="big-image">`.


```html
<img src="image.jpg" alt="une belle image" elementtiming="big-image" />
```



```js
const observer = new PerformanceObserver((list) => {
  let entries = list.getEntries().forEach(function (entry) {
    if (entry.identifier === "big-image") {
      console.log(entry.element);
    }
  });
});
observer.observe({ entryTypes: ["element"] });
```


**Note :** Cet exemple utilise l'interface `PerformanceObserver` pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément `PerformanceEntry.entryType` afin d'utiliser l'interface `PerformanceElementTiming`.

Spécifications
--------------

| Specification |
| --- |
| Element Timing API # ref-for-dom-performanceelementtiming-element |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
PerformanceElementTiming.url
============================

La propriété en lecture seule **`url`** de l'interface `PerformanceElementTiming` renvoie l'URL initiale de la demande de ressource lorsque l'élément est une image.

Syntaxe
-------


```js
var url = PerformanceElementTiming.url;
```

### Valeur

Une `DOMString` qui est l'URL initiale de la demande de ressources pour les images ou 0 pour le texte.

Exemples
--------

Dans cet exemple, appeler `entry.url` renvoie `https://example.com/image.jpg`.


```html
<img
 src="https://example.com/image.jpg"
 alt="une belle imahe"
 elementtiming="big-image"
 id="myImage" />
```



```js
const observer = new PerformanceObserver((list) => {
  let entries = list.getEntries().forEach(function (entry) {
    if (entry.identifier === "big-image") {
      console.log(entry.url);
    }
  });
});
observer.observe({ entryTypes: ["element"] });
```


**Note :** Cet exemple utilise l'interface `PerformanceObserver` pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément `PerformanceEntry.entryType` afin d'utiliser l'interface `PerformanceElementTiming`.

Spécifications
--------------

| Specification |
| --- |
| Element Timing API # ref-for-dom-performanceelementtiming-url |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.