recursal/MDN huggingface dataset:
FontData: style property
========================

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

The **`style`** read-only property of the `FontData` interface returns the style of the font face.

This is the value used to select the style of the font you want to use, for example inside the `font-style` property.

Examples include:

* UltraLight
* Regular
* Heavy
* Medium Italic
* Extrabold
Value
-----

A string.

Examples
--------

The following snippet will query for all available fonts, and log metadata. This could be used, for example, to populate a font-picker control.


```js
async function logFontData() {
  try {
    const availableFonts = await window.queryLocalFonts();
    for (const fontData of availableFonts) {
      console.log(fontData.postscriptName);
      console.log(fontData.fullName);
      console.log(fontData.family);
      console.log(fontData.style);
    }
  } catch (err) {
    console.error(err.name, err.message);
  }
}
```

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

| Specification |
| --- |
| Local Font Access # ref-for-dom-fontdata-style |

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

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

See also
--------

* Use advanced typography with local fonts
* `@font-face`
FontData: blob() method
=======================

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

The **`blob()`** method of the `FontData` interface returns a `Promise` that fulfills with a `Blob` containing the raw bytes of the underlying font file.

Syntax
------


```js
blob()
```

### Parameters

None.

### Return value

A `Promise` that fulfills with a `Blob` containing the raw bytes of the underlying font file.

Examples
--------

The `blob()` method provides access to low-level SFNT data — this is a font file format that can contain other font formats, such as PostScript, TrueType, OpenType, or Web Open Font Format (WOFF).


```js
async function computeOutlineFormat() {
  try {
    const availableFonts = await window.queryLocalFonts({
      postscriptNames: ["ComicSansMS"],
    });
    for (const fontData of availableFonts) {
      // `blob()` returns a Blob containing valid and complete
      // SFNT-wrapped font data.
      const sfnt = await fontData.blob();
      // Slice out only the bytes we need: the first 4 bytes are the SFNT
      // version info.
      // Spec: https://docs.microsoft.com/en-us/typography/opentype/spec/otff#organization-of-an-opentype-font
      const sfntVersion = await sfnt.slice(0, 4).text();

      let outlineFormat = "UNKNOWN";
      switch (sfntVersion) {
        case "\x00\x01\x00\x00":
        case "true":
        case "typ1":
          outlineFormat = "truetype";
          break;
        case "OTTO":
          outlineFormat = "cff";
          break;
      }
      console.log("Outline format:", outlineFormat);
    }
  } catch (err) {
    console.error(err.name, err.message);
  }
}
```

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

| Specification |
| --- |
| Local Font Access # ref-for-dom-fontdata-blob① |

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

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

See also
--------

* Use advanced typography with local fonts
* `@font-face`
FontData: family property
=========================

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

The **`family`** read-only property of the `FontData` interface returns the family of the font face.

This is the name used when referring to the font family from code, for example, in the `font-family` property or in places within the `@font-face` at-rule such as the `local()` function.

Examples include:

* Apple SD Gothic Neo
* Arial Black
* Avenir Next
* Katari
* YuMincho +36p Kana
Value
-----

A string.

Examples
--------

The following snippet will query for all available fonts, and log metadata. This could be used, for example, to populate a font-picker control.


```js
async function logFontData() {
  try {
    const availableFonts = await window.queryLocalFonts();
    for (const fontData of availableFonts) {
      console.log(fontData.postscriptName);
      console.log(fontData.fullName);
      console.log(fontData.family);
      console.log(fontData.style);
    }
  } catch (err) {
    console.error(err.name, err.message);
  }
}
```

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

| Specification |
| --- |
| Local Font Access # ref-for-dom-fontdata-family |

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

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

See also
--------

* Use advanced typography with local fonts
* `@font-face`
InterventionReportBody: lineNumber property
===========================================

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

The **`lineNumber`** read-only property of the `InterventionReportBody` interface returns the line in the source file in which the intervention occurred.

**Note:** This property is most useful alongside `InterventionReportBody.sourceFile` as it enables the location of the line in that file where the feature is used.

Value
-----

An integer, or `null` if the line is not known.

Examples
--------

In this example we create a new `ReportingObserver` to observe intervention reports, then print the value of `lineNumber` to the console.


```js
const options = {
  types: ["intervention"],
  buffered: true,
};

const observer = new ReportingObserver((reports, observer) => {
  const firstReport = reports[0];
  console.log(firstReport.type); // intervention
  console.log(firstReport.body.sourceFile); // the source file
  console.log(firstReport.body.lineNumber); // the line in that file
}, options);
```

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

| Specification |
| --- |
| Intervention Reporting # dom-interventionreportbody-linenumber |

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

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

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

The **`columnNumber`** read-only property of the `InterventionReportBody` interface returns the line in the source file in which the intervention occurred.

**Note:** This property is most useful alongside `InterventionReportBody.sourceFile` and `InterventionReportBody.lineNumber` as it enables the location of the column in that file and line where the feature is used.

Value
-----

An integer, or `null` if the column is not known.

Examples
--------

In this example we create a new `ReportingObserver` to observe intervention reports, then print the value of `columnNumber` to the console.


```js
const options = {
  types: ["intervention"],
  buffered: true,
};

const observer = new ReportingObserver((reports, observer) => {
  const firstReport = reports[0];
  console.log(firstReport.type); // intervention
  console.log(firstReport.body.sourceFile); // the source file
  console.log(firstReport.body.lineNumber); // the line in that file
  console.log(firstReport.body.columnNumber); // the column in that file.
}, options);
```

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

| Specification |
| --- |
| Intervention Reporting # dom-interventionreportbody-columnnumber |

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

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

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

The **`id`** read-only property of the `InterventionReportBody` interface returns a string identifying the intervention that generated the report. This can be used to group reports.

Value
-----

A string.

Examples
--------

In this example we create a new `ReportingObserver` to observe intervention reports, then print the value of `id` to the console.


```js
const options = {
  types: ["intervention"],
  buffered: true,
};

const observer = new ReportingObserver((reports, observer) => {
  const firstReport = reports[0];
  console.log(firstReport.type); // intervention
  console.log(firstReport.body.id);
}, options);
```

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

| Specification |
| --- |
| Intervention Reporting # dom-interventionreportbody-id |

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

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

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

The **`toJSON()`** method of the `InterventionReportBody` interface is a *serializer*, and returns a JSON representation of the `InterventionReportBody` object.

Syntax
------


```js
toJSON()
```

### Parameters

None.

### Return value

A JSON object that is the serialization of the `InterventionReportBody` object.

Examples
--------

In this example we create a new `ReportingObserver` to observe intervention reports, then return a JSON representation of the first entry.


```js
const options = {
  types: ["intervention"],
  buffered: true,
};

const observer = new ReportingObserver((reports, observer) => {
  const firstReport = reports[0];
  console.log(firstReport.toJSON());
}, options);
```

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

| Specification |
| --- |
| Intervention Reporting # dom-interventionreportbody-tojson |

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

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

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

The **`sourceFile`** read-only property of the `InterventionReportBody` interface returns the path to the source file where the intervention occurred.

**Note:** This property can be used with `InterventionReportBody.lineNumber` and `InterventionReportBody.columnNumber` to locate the column and line in the file where the feature is used.

Value
-----

A string, or `null` if the path is not known.

Examples
--------

In this example we create a new `ReportingObserver` to observe intervention reports, then print the value of `sourceFile` to the console.


```js
const options = {
  types: ["intervention"],
  buffered: true,
};

const observer = new ReportingObserver((reports, observer) => {
  const firstReport = reports[0];
  console.log(firstReport.type); // intervention
  console.log(firstReport.body.sourceFile);
}, options);
```

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

| Specification |
| --- |
| Intervention Reporting # dom-interventionreportbody-sourcefile |

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

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

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

The **`message`** read-only property of the `InterventionReportBody` interface returns a human-readable description of the intervention, including information such as how the intervention could be avoided. This typically matches the message a browser will display in its DevTools console when an intervention is imposed, if one is available.

Value
-----

A string.

Examples
--------

In this example we create a new `ReportingObserver` to observe intervention reports, then print the value of `message` to the console.


```js
const options = {
  types: ["intervention"],
  buffered: true,
};

const observer = new ReportingObserver((reports, observer) => {
  const firstReport = reports[0];
  console.log(firstReport.type); // intervention
  console.log(firstReport.body.message);
}, options);
```

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

| Specification |
| --- |
| Intervention Reporting # dom-interventionreportbody-message |

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

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

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

 The **`canvas`** read-only property of the
 `GPUCanvasContext` interface returns a reference to the canvas that the context was created from.

Value
-----

An `HTMLCanvasElement` or `OffscreenCanvas` object instance.

Examples
--------


```js
const canvas = document.querySelector("#gpuCanvas");
const context = canvas.getContext("webgpu");

// returns an HTMLCanvasElement reference
context.canvas;
```

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

| Specification |
| --- |
| WebGPU # dom-gpucanvascontext-canvas |

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

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

See also
--------

* The WebGPU API
GPUCanvasContext: getCurrentTexture() method
============================================

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

 The **`getCurrentTexture()`** method of the
 `GPUCanvasContext` interface returns the next `GPUTexture` to be composited to the document by the canvas context.

Syntax
------


```js
getCurrentTexture()
```

### Parameters

None.

### Return value

A `GPUTexture` object instance.

### Exceptions

`InvalidStateError` `DOMException`

Thrown if `getCurrentTexture()` is called on the canvas context before it is configured (i.e. before `GPUCanvasContext.configure()` has been called).

Examples
--------


```js
const canvas = document.querySelector("#gpuCanvas");
const context = canvas.getContext("webgpu");

context.configure({
  device: device,
  format: navigator.gpu.getPreferredCanvasFormat(),
  alphaMode: "premultiplied",
});

//...
// Later on
const commandEncoder = device.createCommandEncoder();

const renderPassDescriptor = {
  colorAttachments: [
    {
      clearValue: [0, 0, 0, 1], // Opaque black
      loadOp: "clear",
      storeOp: "store",
      view: context.getCurrentTexture().createView(),
    },
  ],
};

const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
```

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

| Specification |
| --- |
| WebGPU # dom-gpucanvascontext-getcurrenttexture |

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

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

See also
--------

* The WebGPU API
GPUCanvasContext: unconfigure() method
======================================

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

 The **`unconfigure()`** method of the
 `GPUCanvasContext` interface removes any previously-set context configuration, and destroys any textures returned via `getCurrentTexture()` while the canvas context was configured.

Syntax
------


```js
unconfigure()
```

### Parameters

None.

### Return value

None (`undefined`).

Examples
--------


```js
const canvas = document.querySelector("#gpuCanvas");
const context = canvas.getContext("webgpu");

context.configure({
  device: device,
  format: navigator.gpu.getPreferredCanvasFormat(),
  alphaMode: "premultiplied",
});

// Later on
context.unconfigure();
```

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

| Specification |
| --- |
| WebGPU # dom-gpucanvascontext-unconfigure |

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

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

See also
--------

* The WebGPU API
AmbientLightSensor: illuminance property
========================================

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

The **`illuminance`** property of the `AmbientLightSensor` interface returns the current light level in lux of the ambient light level around the hosting device.

Value
-----

A `Number` indicating the current light level in lux.

Examples
--------


```js
if ("AmbientLightSensor" in window) {
  const sensor = new AmbientLightSensor();
  sensor.addEventListener("reading", (event) => {
    console.log("Current light level:", sensor.illuminance);
  });
  sensor.addEventListener("error", (event) => {
    console.log(event.error.name, event.error.message);
  });
  sensor.start();
}
```

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

| Specification |
| --- |
| Ambient Light Sensor # ambient-light-sensor-reading-attribute |

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

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

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

The **`AmbientLightSensor()`** constructor creates a new `AmbientLightSensor` object, which returns the current light level or illuminance of the ambient light around the hosting device.

Syntax
------


```js
new AmbientLightSensor()
new AmbientLightSensor(options)
```

### Parameters

`options` Optional

Currently only one option is supported:

`frequency`

The desired number of times per second a sample should be taken, meaning the number of times per second that `reading` event will be called. A whole number or decimal may be used, the latter for frequencies less than a second. The actual reading frequency depends on the device hardware and consequently may be less than requested.


### Exceptions

`SecurityError` `DOMException`

Use of this feature was blocked by a Permissions Policy.

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

| Specification |
| --- |
| Ambient Light Sensor # dom-ambientlightsensor-ambientlightsensor |

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

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

See also
--------

* `reading` event
GainNode: GainNode() constructor
================================

 The **`GainNode()`** constructor of the Web Audio API creates a new
 `GainNode` object which is an `AudioNode` that represents a
 change in volume.

Syntax
------


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

### Parameters

`context`

A reference to a `BaseAudioContext`, e.g. an `AudioContext`.

`options` Optional

Options are as follows:

`gain`

 The amount of gain to apply. This parameter is a- `rate`
 and it's nominal range is (-∞,+∞). The default is `1`.


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



### Return value

A new `GainNode` object instance.

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

| Specification |
| --- |
| Web Audio API # dom-gainnode-constructor-gainnode |

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

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

The `gain` property of the `GainNode` interface is an a-rate `AudioParam` representing the amount of gain to apply.

Value
-----

An `AudioParam`.

**Note:** Though the `AudioParam` returned is read-only, the value it represents is not.

Examples
--------

See `BaseAudioContext.createGain()` for example code showing how to use an `AudioContext` to create a `GainNode`, which is then used to mute and unmute the audio by changing the gain property value.

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

| Specification |
| --- |
| Web Audio API # dom-gainnode-gain |

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

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

See also
--------

* Using the Web Audio API
AudioWorkletGlobalScope: currentFrame property
==============================================

The read-only **`currentFrame`** property of the `AudioWorkletGlobalScope` interface returns an integer that represents the ever-increasing current sample-frame of the audio block being processed. It is incremented by 128 (the size of a render quantum) after the processing of each audio block.

Value
-----

An integer number.

Examples
--------

The `AudioWorkletProcessor` has access to the specific `AudioWorkletGlobalScope` properties:


```js
// AudioWorkletProcessor defined in : test-processor.js
class TestProcessor extends AudioWorkletProcessor {
  constructor() {
    super();

    // Logs the current sample-frame and time at the moment of instantiation.
    // They are accessible from the AudioWorkletGlobalScope.
    console.log(currentFrame);
    console.log(currentTime);
  }

  // The process method is required - output silence,
  // which the outputs are already filled with.
  process(inputs, outputs, parameters) {
    return true;
  }
}

// Logs the sample rate, that is not going to change ever,
// because it's a read-only property of a BaseAudioContext
// and is set only during its instantiation.
console.log(sampleRate);

// You can declare any variables and use them in your processors
// for example it may be an ArrayBuffer with a wavetable.
const usefulVariable = 42;
console.log(usefulVariable);

registerProcessor("test-processor", TestProcessor);
```


The main script loads the processor, creates an instance of `AudioWorkletNode`, passes the name of the processor to it, and connects the node to an audio graph. We should see the output of `console.log()` calls in the console:


```js
const audioContext = new AudioContext();
await audioContext.audioWorklet.addModule("test-processor.js");
const testNode = new AudioWorkletNode(audioContext, "test-processor");
testNode.connect(audioContext.destination);
```

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

| Specification |
| --- |
| Web Audio API # dom-audioworkletglobalscope-currentframe |

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

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

See also
--------

* Web Audio API
* Using the Web Audio API