recursal/MDN huggingface dataset:
AnalyserNode: maxDecibels property
==================================

The **`maxDecibels`** property of the `AnalyserNode` interface is a double value representing the maximum power value in the scaling range for the FFT analysis data, for conversion to unsigned byte values — basically, this specifies the maximum value for the range of results when using `getByteFrequencyData()`.

Value
-----

A double, representing the maximum decibel value for scaling the FFT analysis data, where `0` dB is the loudest possible sound, `-10` dB is a 10th of that, etc. The default value is `-30` dB.

When getting data from `getByteFrequencyData()`, any frequencies with an amplitude of `maxDecibels` or higher will be returned as `255`.

### Exceptions

`IndexSizeError` `DOMException`

Thrown if a value less than or equal to `AnalyserNode.minDecibels` is set.

Examples
--------

 The following example shows basic usage of an `AudioContext` to create an `AnalyserNode`, then `requestAnimationFrame` and `<canvas>` to collect frequency data repeatedly and draw a "winamp bar graph style" output of the current audio input.
 For more complete applied examples/information, check out our Voice-change-O-matic demo (see app.js lines 108–193 for relevant code).


```js
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
const analyser = audioCtx.createAnalyser();
analyser.minDecibels = -90;
analyser.maxDecibels = -10;

// …

analyser.fftSize = 256;
const bufferLength = analyser.frequencyBinCount;
console.log(bufferLength);
const dataArray = new Uint8Array(bufferLength);

canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);

function draw() {
  drawVisual = requestAnimationFrame(draw);

  analyser.getByteFrequencyData(dataArray);

  canvasCtx.fillStyle = "rgb(0 0 0)";
  canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);

  const barWidth = (WIDTH / bufferLength) \* 2.5;
  let barHeight;
  let x = 0;

  for (let i = 0; i < bufferLength; i++) {
    barHeight = dataArray[i];

    canvasCtx.fillStyle = `rgb(${barHeight + 100} 50 50)`;
    canvasCtx.fillRect(x, HEIGHT - barHeight / 2, barWidth, barHeight / 2);

    x += barWidth + 1;
  }
}

draw();
```

Specifications
--------------

| Specification |
| --- |
| Web Audio API # dom-analysernode-maxdecibels |

Browser compatibility
---------------------

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

See also
--------

* Using the Web Audio API
AnalyserNode: fftSize property
==============================

The **`fftSize`** property of the `AnalyserNode` interface is an unsigned long value and represents the window size in samples that is used when performing a Fast Fourier Transform (FFT) to get frequency domain data.

Value
-----

An unsigned integer, representing the window size of the FFT, given in number of samples. A higher value will result in more details in the frequency domain but fewer details in the amplitude domain.

Must be a power of 2 between 2^5 and 2^15, so one of: `32`, `64`, `128`, `256`, `512`, `1024`, `2048`, `4096`, `8192`, `16384`, and `32768`. Defaults to `2048`.

### Exceptions

`IndexSizeError` `DOMException`

Thrown if the value set is not a power of 2, or is outside the allowed range.

Examples
--------

 The following example shows basic usage of an `AudioContext` to create an `AnalyserNode`, then `requestAnimationFrame` and `<canvas>` to collect time domain data repeatedly and draw an "oscilloscope style" output of the current audio input.
 For more complete applied examples/information, check out our Voice-change-O-matic demo (see app.js lines 108–193 for relevant code).


```js
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
const analyser = audioCtx.createAnalyser();

// …

analyser.fftSize = 2048;
const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);
analyser.getByteTimeDomainData(dataArray);

// draw an oscilloscope of the current audio source

function draw() {
  drawVisual = requestAnimationFrame(draw);

  analyser.getByteTimeDomainData(dataArray);

  canvasCtx.fillStyle = "rgb(200 200 200)";
  canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);

  canvasCtx.lineWidth = 2;
  canvasCtx.strokeStyle = "rgb(0 0 0)";

  canvasCtx.beginPath();

  const sliceWidth = (WIDTH \* 1.0) / bufferLength;
  let x = 0;

  for (let i = 0; i < bufferLength; i++) {
    const v = dataArray[i] / 128.0;
    const y = (v \* HEIGHT) / 2;

    if (i === 0) {
      canvasCtx.moveTo(x, y);
    } else {
      canvasCtx.lineTo(x, y);
    }

    x += sliceWidth;
  }

  canvasCtx.lineTo(canvas.width, canvas.height / 2);
  canvasCtx.stroke();
}

draw();
```

Specifications
--------------

| Specification |
| --- |
| Web Audio API # dom-analysernode-fftsize |

Browser compatibility
---------------------

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

See also
--------

* Using the Web Audio API
AnalyserNode: smoothingTimeConstant property
============================================

The **`smoothingTimeConstant`** property of the `AnalyserNode` interface is a double value representing the averaging constant with the last analysis frame. It's basically an average between the current buffer and the last buffer the `AnalyserNode` processed, and results in a much smoother set of value changes over time.

Value
-----

A double within the range `0` to `1` (`0` meaning no time averaging). The default value is `0.8`.

If 0 is set, there is no averaging done, whereas a value of 1 means "overlap the previous and current buffer quite a lot while computing the value", which essentially smooths the changes across `AnalyserNode.getFloatFrequencyData`/`AnalyserNode.getByteFrequencyData` calls.

In technical terms, we apply a Blackman window and smooth the values over time. The default value is good enough for most cases.

**Note:** If a value outside the range 0–1 is set, an `INDEX_SIZE_ERR` exception is thrown.

Examples
--------

 The following example shows basic usage of an `AudioContext` to create an `AnalyserNode`, then `requestAnimationFrame` and `<canvas>` to collect frequency data repeatedly and draw a "winamp bar graph style" output of the current audio input.
 For more complete applied examples/information, check out our Voice-change-O-matic demo (see app.js lines 108–193 for relevant code).

If you are curious about the effect the `smoothingTimeConstant()` has, try cloning the above example and setting `analyser.smoothingTimeConstant = 0;` instead. You'll notice that the value changes are much more jarring.


```js
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
const analyser = audioCtx.createAnalyser();
analyser.minDecibels = -90;
analyser.maxDecibels = -10;
analyser.smoothingTimeConstant = 0.85;

// …

analyser.fftSize = 256;
const bufferLength = analyser.frequencyBinCount;
console.log(bufferLength);
const dataArray = new Uint8Array(bufferLength);

canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);

function draw() {
  drawVisual = requestAnimationFrame(draw);

  analyser.getByteFrequencyData(dataArray);

  canvasCtx.fillStyle = "rgb(0 0 0)";
  canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);

  const barWidth = (WIDTH / bufferLength) \* 2.5;
  let barHeight;
  let x = 0;

  for (let i = 0; i < bufferLength; i++) {
    barHeight = dataArray[i];

    canvasCtx.fillStyle = `rgb(${barHeight + 100} 50 50)`;
    canvasCtx.fillRect(x, HEIGHT - barHeight / 2, barWidth, barHeight / 2);

    x += barWidth + 1;
  }
}

draw();
```

Specifications
--------------

| Specification |
| --- |
| Web Audio API # dom-analysernode-smoothingtimeconstant |

Browser compatibility
---------------------

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

See also
--------

* Using the Web Audio API
AnalyserNode: getFloatTimeDomainData() method
=============================================

The **`getFloatTimeDomainData()`** method of the `AnalyserNode` Interface copies the current waveform, or time-domain, data into a `Float32Array` array passed into it. Each array value is a *sample*, the magnitude of the signal at a particular time.

Syntax
------


```js
getFloatTimeDomainData(array)
```

### Parameters

`array`

 The `Float32Array` that the time domain data will be copied to.
 If the array has fewer elements than the `AnalyserNode.fftSize`, excess elements are dropped. If it has more elements than needed, excess elements are ignored.


### Return value

None (`undefined`).

Examples
--------

 The following example shows basic usage of an `AudioContext` to create an `AnalyserNode`, then `requestAnimationFrame` and `<canvas>` to collect time domain data repeatedly and draw an "oscilloscope style" output of the current audio input.
 For more complete applied examples/information, check out our Voice-change-O-matic demo (see app.js lines 108–193 for relevant code).


```js
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
const analyser = audioCtx.createAnalyser();

// …

analyser.fftSize = 1024;
const bufferLength = analyser.fftSize;
console.log(bufferLength);
const dataArray = new Float32Array(bufferLength);

canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);

function draw() {
  drawVisual = requestAnimationFrame(draw);
  analyser.getFloatTimeDomainData(dataArray);

  canvasCtx.fillStyle = "rgb(200 200 200)";
  canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
  canvasCtx.lineWidth = 2;
  canvasCtx.strokeStyle = "rgb(0 0 0)";
  canvasCtx.beginPath();

  const sliceWidth = (WIDTH \* 1.0) / bufferLength;
  let x = 0;

  for (let i = 0; i < bufferLength; i++) {
    const v = dataArray[i] \* 200.0;
    const y = HEIGHT / 2 + v;

    if (i === 0) {
      canvasCtx.moveTo(x, y);
    } else {
      canvasCtx.lineTo(x, y);
    }
    x += sliceWidth;
  }

  canvasCtx.lineTo(canvas.width, canvas.height / 2);
  canvasCtx.stroke();
}

draw();
```

Specifications
--------------

| Specification |
| --- |
| Web Audio API # dom-analysernode-getfloattimedomaindata |

Browser compatibility
---------------------

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

See also
--------

* Using the Web Audio API
AnalyserNode: getByteTimeDomainData() method
============================================

The **`getByteTimeDomainData()`** method of the `AnalyserNode` Interface copies the current waveform, or time-domain, data into a `Uint8Array` (unsigned byte array) passed into it.

If the array has fewer elements than the `AnalyserNode.fftSize`, excess elements are dropped. If it has more elements than needed, excess elements are ignored.

Syntax
------


```js
getByteTimeDomainData(array)
```

### Parameters

`array`

 The `Uint8Array` that the time domain data will be copied to.
 If the array has fewer elements than the `AnalyserNode.fftSize`, excess elements are dropped. If it has more elements than needed, excess elements are ignored.


### Return value

None (`undefined`).

Examples
--------

 The following example shows basic usage of an `AudioContext` to create an `AnalyserNode`, then `requestAnimationFrame` and `<canvas>` to collect time domain data repeatedly and draw an "oscilloscope style" output of the current audio input.
 For more complete applied examples/information, check out our Voice-change-O-matic demo (see app.js lines 108–193 for relevant code).


```js
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
const analyser = audioCtx.createAnalyser();

// …

analyser.fftSize = 2048;
const bufferLength = analyser.fftSize;
const dataArray = new Uint8Array(bufferLength);
analyser.getByteTimeDomainData(dataArray);

// draw an oscilloscope of the current audio source
function draw() {
  drawVisual = requestAnimationFrame(draw);
  analyser.getByteTimeDomainData(dataArray);

  canvasCtx.fillStyle = "rgb(200 200 200)";
  canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);

  canvasCtx.lineWidth = 2;
  canvasCtx.strokeStyle = "rgb(0 0 0)";

  const sliceWidth = (WIDTH \* 1.0) / bufferLength;
  let x = 0;

  canvasCtx.beginPath();
  for (let i = 0; i < bufferLength; i++) {
    const v = dataArray[i] / 128.0;
    const y = (v \* HEIGHT) / 2;

    if (i === 0) {
      canvasCtx.moveTo(x, y);
    } else {
      canvasCtx.lineTo(x, y);
    }

    x += sliceWidth;
  }

  canvasCtx.lineTo(WIDTH, HEIGHT / 2);
  canvasCtx.stroke();
}

draw();
```

Specifications
--------------

| Specification |
| --- |
| Web Audio API # dom-analysernode-getbytetimedomaindata |

Browser compatibility
---------------------

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

See also
--------

* Using the Web Audio API
AnalyserNode: minDecibels property
==================================

The **`minDecibels`** property of the `AnalyserNode` interface is a double value representing the minimum power value in the scaling range for the FFT analysis data, for conversion to unsigned byte values — basically, this specifies the minimum value for the range of results when using `getByteFrequencyData()`.

Value
-----

A double, representing the minimum decibel value for scaling the FFT analysis data, where `0` dB is the loudest possible sound, `-10` dB is a 10th of that, etc. The default value is `-100` dB.

When getting data from `getByteFrequencyData()`, any frequencies with an amplitude of `minDecibels` or lower will be returned as `0`.

**Note:** If a value greater than `AnalyserNode.maxDecibels` is set, an `INDEX_SIZE_ERR` exception is thrown.

Examples
--------

 The following example shows basic usage of an `AudioContext` to create an `AnalyserNode`, then `requestAnimationFrame` and `<canvas>` to collect frequency data repeatedly and draw a "winamp bar graph style" output of the current audio input.
 For more complete applied examples/information, check out our Voice-change-O-matic demo (see app.js lines 108–193 for relevant code).


```js
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
const analyser = audioCtx.createAnalyser();
analyser.minDecibels = -90;
analyser.maxDecibels = -10;

// …

analyser.fftSize = 256;
const bufferLength = analyser.frequencyBinCount;
console.log(bufferLength);
const dataArray = new Uint8Array(bufferLength);

canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);

function draw() {
  drawVisual = requestAnimationFrame(draw);

  analyser.getByteFrequencyData(dataArray);

  canvasCtx.fillStyle = "rgb(0 0 0)";
  canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);

  const barWidth = (WIDTH / bufferLength) \* 2.5;
  let barHeight;
  let x = 0;

  for (let i = 0; i < bufferLength; i++) {
    barHeight = dataArray[i];

    canvasCtx.fillStyle = `rgb(${barHeight + 100} 50 50)`;
    canvasCtx.fillRect(x, HEIGHT - barHeight / 2, barWidth, barHeight / 2);

    x += barWidth + 1;
  }
}

draw();
```

Specifications
--------------

| Specification |
| --- |
| Web Audio API # dom-analysernode-mindecibels |

Browser compatibility
---------------------

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

See also
--------

* Using the Web Audio API
AnalyserNode: AnalyserNode() constructor
========================================

The **`AnalyserNode()`** constructor of the Web Audio API creates a new `AnalyserNode` object instance.

Syntax
------


```js
new AnalyserNode(context)
new AnalyserNode(context, options)
```

### Parameters

`context`

A reference to an `AudioContext` or `OfflineAudioContext`.

`options` Optional

An object with the following properties, all optional:

`fftSize`

 The desired initial size of the FFT for frequency-domain analysis.
 The default is `2048`.


`maxDecibels`

 The desired initial maximum power in dB for FFT analysis.
 The default is `-30`.


`minDecibels`

 The desired initial minimum power in dB for FFT analysis.
 The default is `-100`.


`smoothingTimeConstant`

The desired initial smoothing constant for the FFT analysis. The default is `0.8`.

`channelCount`

 Represents an integer used to determine how many channels are used when up-mixing and down-mixing connections to any inputs to the node. (See
 `AudioNode.channelCount` for more information.) Its usage and precise
 definition depend on the value of `channelCountMode`.


`channelCountMode`

 Represents an enumerated value describing the way channels must be matched between
 the node's inputs and outputs. (See `AudioNode.channelCountMode` for more
 information including default values.)


`channelInterpretation`

 Represents an enumerated value describing the meaning of the channels. This
 interpretation will define how audio up-mixing and down-mixing will happen.
 The possible values are `"speakers"` or `"discrete"`. (See
 `AudioNode.channelCountMode` for more information including default
 values.)



Specifications
--------------

| Specification |
| --- |
| Web Audio API # dom-analysernode-analysernode |

Browser compatibility
---------------------

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

See also
--------

* `BaseAudioContext.createAnalyser()`, the equivalent factory method
AnalyserNode: getByteFrequencyData() method
===========================================

The **`getByteFrequencyData()`** method of the `AnalyserNode` interface copies the current frequency data into a `Uint8Array` (unsigned byte array) passed into it.

The frequency data is composed of integers on a scale from 0 to 255.

Each item in the array represents the decibel value for a specific frequency. The frequencies are spread linearly from 0 to 1/2 of the sample rate. For example, for `48000` sample rate, the last item of the array will represent the decibel value for `24000` Hz.

If the array has fewer elements than the `AnalyserNode.frequencyBinCount`, excess elements are dropped. If it has more elements than needed, excess elements are ignored.

Syntax
------


```js
getByteFrequencyData(array)
```

### Parameters

`array`

 The `Uint8Array` that the frequency domain data will be copied to. For any sample which is silent, the value is `-Infinity`.
 If the array has fewer elements than the `AnalyserNode.frequencyBinCount`, excess elements are dropped. If it has more elements than needed, excess elements are ignored.


### Return value

None (`undefined`).

Examples
--------

The following example shows basic usage of an `AudioContext` to create an `AnalyserNode`, then `requestAnimationFrame` and `<canvas>` to collect frequency data repeatedly and draw a "winamp bar graph style" output of the current audio input. For more complete applied examples/information, check out our Voice-change-O-matic demo (see app.js lines 108–193 for relevant code).


```js
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
const analyser = audioCtx.createAnalyser();

// …

analyser.fftSize = 256;
const bufferLength = analyser.frequencyBinCount;
console.log(bufferLength);
const dataArray = new Uint8Array(bufferLength);

canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);

function draw() {
  drawVisual = requestAnimationFrame(draw);

  analyser.getByteFrequencyData(dataArray);

  canvasCtx.fillStyle = "rgb(0 0 0)";
  canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);

  const barWidth = (WIDTH / bufferLength) \* 2.5;
  let barHeight;
  let x = 0;

  for (let i = 0; i < bufferLength; i++) {
    barHeight = dataArray[i];

    canvasCtx.fillStyle = `rgb(${barHeight + 100} 50 50)`;
    canvasCtx.fillRect(x, HEIGHT - barHeight / 2, barWidth, barHeight / 2);

    x += barWidth + 1;
  }
}

draw();
```

Specifications
--------------

| Specification |
| --- |
| Web Audio API # dom-analysernode-getbytefrequencydata |

Browser compatibility
---------------------

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

See also
--------

* Using the Web Audio API
CSSSkew: ax property
====================

 The **`ax`** property of the
 `CSSSkew` interface gets and sets the angle used to distort the element
 along the x-axis (or abscissa).

Value
-----

A `CSSNumericValue`.

Examples
--------

To do

Specifications
--------------

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-cssskew-ax |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CSSSkew: CSSSkew() constructor
==============================

 The **`CSSSkew()`** constructor creates a new
 `CSSSkew` object which represents the
 `skew()` value
 of the individual `transform` property in CSS.

Syntax
------


```js
new CSSSkew(ax, ay)
```

### Parameters

`ax`

A value for the `ax` (x-axis) angle of the `CSSSkew` object to be constructed. This must be a `CSSNumericValue`.

`ay`

A value for the `ay` (y-axis) angle of the `CSSSkew` object to be constructed. This must be a `CSSNumericValue`.

Examples
--------

To do

Specifications
--------------

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-cssskew-cssskew |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CSSSkew: ay property
====================

 The **`ay`** property of the
 `CSSSkew` interface gets and sets the angle used to distort the element
 along the y-axis (or ordinate).

Value
-----

A `CSSNumericValue`.

Examples
--------

To do

Specifications
--------------

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-cssskew-ay |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
XRFrame: session property
=========================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

An `XRFrame` object's *read-only* **`session`** property returns the `XRSession` object that generated the frame.

Value
-----

 A `XRSession` object representing the WebXR session for which
 this `XRFrame` describes the object positions and orientations.

Specifications
--------------

| Specification |
| --- |
| WebXR Device API # dom-xrframe-session |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
XRFrame: getLightEstimate() method
==================================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The **`getLightEstimate()`** method of the `XRFrame` interface returns an `XRLightEstimate` object containing estimated lighting values for a given `XRLightProbe`.

Syntax
------


```js
getLightEstimate(lightProbe)
```

### Parameters

`lightProbe`

An `XRLightProbe` object containing the current lighting state for the frame.

### Return value

An `XRLightEstimate` object or `null` if the device cannot estimate lighting for this frame.

Examples
--------

### Getting light estimates for each frame

Given a session's `XRLightProbe`, the `getLightEstimate()` method gets an `XRLightEstimate` object containing the lighting values for each frame.


```js
const lightProbe = await xrSession.requestLightProbe();

// frame loop
function onXRFrame(time, xrFrame) {
  let lightEstimate = xrFrame.getLightEstimate(lightProbe);

  // Use light estimate data to light the scene

  // Available properties
  lightEstimate.sphericalHarmonicsCoefficients;
  lightEstimate.primaryLightDirection;
  lightEstimate.primaryLightIntensity;
}
```

Specifications
--------------

| Specification |
| --- |
| WebXR Lighting Estimation API Level 1 # dom-xrframe-getlightestimate |

Browser compatibility
---------------------

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

See also
--------

* `XRLightEstimate`
* `XRLightProbe`