recursal/MDN huggingface dataset:
AudioScheduledSourceNode: start() method
========================================

 The `start()` method on
 `AudioScheduledSourceNode` schedules a sound to begin playback at the
 specified time. If no time is specified, then the sound begins playing
 immediately.

Syntax
------


```js
start()
start(when)
```

### Parameters

`when` Optional

 The time, in seconds, at which the sound should begin to play. This value is
 specified in the same time coordinate system as the `AudioContext` is
 using for its `currentTime` attribute. A
 value of 0 (or omitting the `when` parameter entirely) causes the sound to
 start playback immediately.


### Return value

None (`undefined`).

### Exceptions

`InvalidStateNode` `DOMException`

 Thrown if the node has already been started. This error occurs even if the node is no longer
 running because of a prior call to `stop()`.


`RangeError`

Thrown if the value specified for `when` is negative.

Examples
--------

 This example demonstrates how to create an `OscillatorNode` which is
 scheduled to start playing in 2 seconds and stop playing 1 second after that. The times
 are calculated by adding the desired number of seconds to the context's current time
 stamp returned by `AudioContext.currentTime`.


```js
context = new AudioContext();
osc = context.createOscillator();
osc.connect(context.destination);

/\* Schedule the start and stop times for the oscillator \*/

osc.start(context.currentTime + 2);
osc.stop(context.currentTime + 3);
```

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

| Specification |
| --- |
| Web Audio API # dom-audioscheduledsourcenode-start |

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

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

See also
--------

* Using the Web Audio API
* `stop()`
* `AudioScheduledSourceNode`
* `AudioBufferSourceNode`
* `ConstantSourceNode`
* `OscillatorNode`
AudioScheduledSourceNode: stop() method
=======================================

 The `stop()` method on `AudioScheduledSourceNode` schedules a
 sound to cease playback at the specified time. If no time is specified, then the sound
 stops playing immediately.

 Each time you call `stop()` on the same node, the specified time replaces
 any previously-scheduled stop time that hasn't occurred yet. If the node has already
 stopped, this method has no effect.


**Note:** If a scheduled stop time occurs before the node's scheduled
 start time, the node never starts to play.


Syntax
------


```js
stop()
stop(when)
```

### Parameters

`when` Optional

 The time, in seconds, at which the sound should stop playing. This value is
 specified in the same time coordinate system as the `AudioContext` is
 using for its `currentTime` attribute.
 Omitting this parameter, specifying a value of 0, or passing a negative value causes
 the sound to stop playback immediately.


### Return value

None (`undefined`).

### Exceptions

`InvalidStateNode` `DOMException`

Thrown if the node has not been started by calling `start()`.

`RangeError`

Thrown if the value specified for `when` is negative.

Examples
--------

 This example demonstrates starting an oscillator node, scheduled to begin playing at
 once and to stop playing in one second. The stop time is determined by taking the audio
 context's current time from `AudioContext.currentTime` and adding 1 second.


```js
context = new AudioContext();
osc = context.createOscillator();
osc.connect(context.destination);

/\* Let's play a sine wave for one second. \*/

osc.start();
osc.stop(context.currentTime + 1);
```

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

| Specification |
| --- |
| Web Audio API # dom-audioscheduledsourcenode-stop |

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

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

See also
--------

* Using the Web Audio API
* `start()`
* `AudioScheduledSourceNode`
* `AudioBufferSourceNode`
* `ConstantSourceNode`
* `OscillatorNode`
AudioScheduledSourceNode: ended event
=====================================

The `ended` event of the `AudioScheduledSourceNode` interface is fired when the source node has stopped playing.

This event occurs when a `AudioScheduledSourceNode` has stopped playing, either because it's reached a predetermined stop time, the full duration of the audio has been performed, or because the entire buffer has been played.

This event is not cancelable and does not bubble.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.


```js
addEventListener("ended", (event) => { })

onended = (event) => { }
```

Event type
----------

A generic `Event`.

Examples
--------

In this simple example, an event listener for the `ended` event is set up to enable a "Start" button in the user interface when the node stops playing:


```js
node.addEventListener("ended", () => {
  document.getElementById("startButton").disabled = false;
});
```


You can also set up the event handler using the `onended` property:


```js
node.onended = () => {
  document.getElementById("startButton").disabled = false;
};
```


For an example of the ended event in use, see our audio-buffer example on GitHub.

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

| Specification |
| --- |
| Web Audio API # dom-audioscheduledsourcenode-onended |

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

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

Related events
--------------

* audioprocess
* complete
See also
--------

* `HTMLAudioElement`
* `HTMLVideoElement`
* `<audio>`
* `<video>`
* The HTMLMediaElement `ended` event
* The MediaStreamTrack `ended` event
CSSFontFeatureValuesRule: fontFamily property
=============================================

The **`fontFamily`** property of the `CSSConditionRule` interface represents the name of the font family it applies to.

Value
-----

A string.

Examples
--------

### Read font family

In this example, we declare two `@font-feature-values` one for the *Font One* font family, and the other for *Font Two*. We then use the CSSOM to read these font families, displaying them into the log.


```html
<pre id="log"></pre>
```


#### CSS


```css
/\* At-rule for "nice-style" in Font One \*/
@font-feature-values Font One {
  @styleset {
    nice-style: 12;
  }
}

/\* At-rule for "nice-style" in Font Two \*/
@font-feature-values Font Two {
  @styleset {
    nice-style: 4;
  }
}

/\* Apply the at-rules with a single declaration \*/
.nice-look {
  font-variant-alternates: styleset(nice-style);
}
```


#### JavaScript


```js
const log = document.getElementById("log");
const rules = document.styleSheets[document.styleSheets.length - 1].cssRules;

const fontOne = rules[0]; // A CSSFontFeatureValuesRule
log.textContent = `The 1st '@font-feature-values' family: "${fontOne.fontFamily}".\n`;

const fontTwo = rules[1]; // Another CSSFontFeatureValuesRule
log.textContent += `The 2nd '@font-feature-values' family: "${fontTwo.fontFamily}".`;
```

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # dom-cssfontfeaturevaluesrule-fontfamily |

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

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

See also
--------

*
BarcodeDetector: getSupportedFormats() static method
====================================================

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

**Note:** This feature is available in Web Workers

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

 The **`getSupportedFormats()`** static method
 of the `BarcodeDetector` interface returns a `Promise` which
 fulfills with an `Array` of supported barcode format types.

Syntax
------


```js
BarcodeDetector.getSupportedFormats()
```

### Parameters

This method receives no parameters.

### Return value

 A `Promise` which fulfills with an `Array` of
 supported barcode format types.

### Exceptions

No exceptions are thrown.

Examples
--------

 The following example calls the `getSupportFormat()` static method and logs
 the results to the console.


```js
// check supported types
BarcodeDetector.getSupportedFormats().then((supportedFormats) => {
  supportedFormats.forEach((format) => console.log(format));
});
```

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

| Specification |
| --- |
| Accelerated Shape Detection in Images # dom-barcodedetector-getsupportedformats |

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

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

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

**Note:** This feature is available in Web Workers

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

 The **`BarcodeDetector()`** constructor creates
 a new `BarcodeDetector` object which detects linear and two-dimensional
 barcodes in images.

Syntax
------


```js
new BarcodeDetector()
new BarcodeDetector(options)
```

### Parameters

`options` Optional

 An options object containing a series of `BarcodeFormats` to search for
 in the subsequent `detect()` calls. The
 options are:


`formats` Optional

 An `Array` of barcode formats as strings.
 If not provided, `detect()` calls search for all supported formats.
 Limiting to specific formats is therefore recommended for performance reasons.
 To see a full list of supported formats see the supported barcode format.



### Exceptions

`TypeError`

Thrown if the `formats` is specified and the parameter is empty or contains `unknown`.

Examples
--------

 This example creates a new barcode detector object, with specified supported formats
 and tests for browser compatibility.


```js
// check compatibility
if (!("BarcodeDetector" in globalThis)) {
  console.log("Barcode Detector is not supported by this browser.");
} else {
  console.log("Barcode Detector supported!");

  // create new detector
  const barcodeDetector = new BarcodeDetector({
    formats: ["code\_39", "codabar", "ean\_13"],
  });
}
```

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

| Specification |
| --- |
| Accelerated Shape Detection in Images # dom-barcodedetector-barcodedetector |

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

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

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

**Note:** This feature is available in Web Workers

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

 The **`detect()`** method of the
 `BarcodeDetector` interface returns a `Promise` which fulfills
 with an `Array` of detected barcodes within an image.

Syntax
------


```js
detect(imageBitmapSource)
```

### Parameters

`imageBitmapSource`

Receives an image source as a parameter. This can be a `HTMLImageElement`, a `SVGImageElement`, a `HTMLVideoElement`, a `HTMLCanvasElement`, an `ImageBitmap`, an `OffscreenCanvas`, a `VideoFrame`, a `Blob` of type image or an `ImageData` object.

### Return value

 Returns a `Promise` which fulfills with an array of
 `DetectedBarcode` objects with the following properties:

`boundingBox`

 A `DOMRectReadOnly`, which returns the
 dimensions of a rectangle representing the extent of a detected barcode, aligned with
 the image.


`cornerPoints`

 The x and y co-ordinates of the four corner points of the
 detected barcode relative to the image, starting with the top left and working
 clockwise. This may not be square due to perspective distortions within the image.


`format`

 The detected barcode format. (For a full list of formats see
 the supported barcode format).


`rawValue`

A string decoded from the barcode data.

### Exceptions

`TypeError`

Thrown if no parameter is specified or the `type` is not that of an `ImageBitmapSource`.

`SecurityError` `DOMException`

Thrown if the `imageBitmapSource` has an origin and is not the same as the document's origin, or if the `imageBitmapSource` is a `HTMLCanvasElement` and its origin-clean flag is set to `false`.

`InvalidStateError` `DOMException`

Thrown if the `imageBitmapSource` is an `HTMLImageElement` and is not fully decoded or decoding failed, or is an `HTMLVideoElement` and its `readyState` is `HAVE_NOTHING` or `HAVE_METADATA`.

Examples
--------

 This example uses the `detect()` method to detect the barcodes within the
 given image. These are iterated over and the barcode data is logged to the console.


```js
barcodeDetector
  .detect(imageEl)
  .then((barcodes) => {
    barcodes.forEach((barcode) => console.log(barcode.rawValue));
  })
  .catch((err) => {
    console.error(err);
  });
```

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

| Specification |
| --- |
| Accelerated Shape Detection in Images # dom-barcodedetector-detect |

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

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

 The **`newURL`** read-only property of the
 `HashChangeEvent` interface returns the new URL to which the window is
 navigating.

Value
-----

A string.

Examples
--------


```js
window.addEventListener("hashchange", (event) => {
  console.log(`Hash changed to ${event.newURL}`);
});
```

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

| Specification |
| --- |
| HTML Standard # dom-hashchangeevent-newurl-dev |

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

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

 The **`oldURL`** read-only property of the
 `HashChangeEvent` interface returns the previous URL from which the window
 was navigated.

Value
-----

A string.

Examples
--------


```js
window.addEventListener("hashchange", (event) => {
  console.log(`Hash changed from ${event.oldURL}`);
});
```

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

| Specification |
| --- |
| HTML Standard # dom-hashchangeevent-oldurl-dev |

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

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

The **`HashChangeEvent()`** constructor creates a new `HashChangeEvent` object, that is used by the `hashchange` event fired at the `window` object when the fragment of the URL changes.

**Note:** A web developer doesn't typically need to call this constructor, as the browser creates these objects itself when firing `hashchange` events.

Syntax
------


```js
new HashChangeEvent(type, options)
```

### Parameters

`type`

 A string with the name of the event.
 It is case-sensitive and browsers set it to `hashchange`.


`options` Optional

An object that, *in addition to the properties defined in `Event()`*, has the following properties:

`oldURL` Optional

A string containing the old URL. Its default value is the empty string (`""`).

`newURL`Optional

A string containing the new URL. Its default value is the empty string (`""`).


### Return value

A new `HashChangeEvent` object.

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

| Specification |
| --- |
| HTML Standard # the-hashchangeevent-interface |

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

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

See also
--------

* `hashchange` event
XRWebGLLayer: framebufferHeight property
========================================

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

 The read-only `XRWebGLLayer` property
 **`framebufferHeight`** indicates the height of the
 framebuffer, in pixels.

 You can get the width of the framebuffer using the
 `framebufferWidth` property.

Value
-----

 The height in pixels of the XR device's framebuffer. Each of the framebuffer's
 attachments (pixel, depth, color, and/or stencil buffers, for example) are all this many
 pixels tall.

Examples
--------

This snippet fetches the framebuffer's width and height for later use.


```js
let glLayer = xrSession.renderState.baseLayer;
gl.bindFramebuffer(gl.FRAMEBUFFER, glLayer.framebuffer);

frameWidth = glLayer.framebufferHeight;
frameHeight = glLayer.framebufferHeight;
```

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

| Specification |
| --- |
| WebXR Device API # dom-xrwebgllayer-framebufferheight |

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

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

See also
--------

* WebXR Device API
XRWebGLLayer: antialias property
================================

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

 The read-only `XRWebGLLayer` property
 **`antialias`** is a Boolean value which is `true`
 if the rendering layer's frame buffer supports anti-aliasing. Otherwise, this
 property's value is `false`. The specific anti-aliasing technique used is left
 to the user agent's discretion and cannot be specified by
 the website or web app.

Syntax
------


```js
xrWebGLLayer.antialias
```

### Value

 A Boolean value which is `true` if the WebGL rendering layer's frame buffer
 is configured to support anti-aliasing. Otherwise, this property is `false`.

 When the WebXR compositor is enabled, this value corresponds to the value of the
 `antialias` property on the object returned by the WebGL context's
 `getContentAttributes()`
 method.

Usage notes
-----------

 Since this is a read-only property, you can set the anti-aliasing mode only when
 initially creating the `XRWebGLLayer`, by specifying the `antialias`
 property in the `XRWebGLLayer()`
 constructor's `options` configuration object.

Examples
--------

 This snippet checks the value of `antialias` to see if it should perform
 additional work to attempt to compensate for the lack of anti-aliasing on the WebGL
 layer.


```js
let glLayer = xrSession.renderState.baseLayer;
gl.bindFrameBuffer(gl.FRAMEBUFFER, glLayer.framebuffer);

/\* .. \*/

if (!glLayer.antialias) {
  /\* compensate for lack of anti-aliasing \*/
}
```

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

| Specification |
| --- |
| WebXR Device API # dom-xrwebgllayer-antialias |

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

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

See also
--------

* WebXR Device API
XRWebGLLayer: framebufferWidth property
=======================================

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

 The read-only `XRWebGLLayer` property
 **`framebufferWidth`** specifies the width of the framebuffer,
 in pixels.

 You can get the height of the framebuffer using the
 `framebufferHeight` property.

Value
-----

 The width in pixels of the XR device's framebuffer. Each of the framebuffer's
 attachments (pixel, depth, color, and/or stencil buffers, for example) are all this many
 pixels wide.

Examples
--------

This snippet fetches the framebuffer's width and height for later use.


```js
let glLayer = xrSession.renderState.baseLayer;
gl.bindFramebuffer(gl.FRAMEBUFFER, glLayer.framebuffer);

frameWidth = glLayer.framebufferWidth;
frameHeight = glLayer.framebufferHeight;
```

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

| Specification |
| --- |
| WebXR Device API # dom-xrwebgllayer-framebufferwidth |

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

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

See also
--------

* WebXR Device API
XRWebGLLayer: ignoreDepthValues property
========================================

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

 The read-only `XRWebGLLayer` property
 **`ignoreDepthValues`** is a Boolean value which is
 `true` if the session has been configured to ignore the values in the depth
 buffer while rendering the scene. If the depth buffer is being used to determine the
 position of vertices, this property is `false`.

 The value of `ignoreDepthValues` can only be set when the
 `XRWebGLLayer` is instantiated, by setting the corresponding value in the constructor's `options` parameter.

Value
-----

 A Boolean value which is `true` if the WebGL context's depth buffer is being
 used while computing the locations of points in the 3D world. Otherwise, if this is
 `true`, the depth buffer's values are being used to assist in placing objects
 in the scene. Since the XR compositor uses the depth buffer by default, this value is `false`
 unless explicitly set otherwise when creating the `XRWebGLLayer` using its
 constructor, `XRWebGLLayer()`.

Usage notes
-----------

 When the `ignoreDepthValues` property is `false`, the XR
 compositor uses the values found in the depth buffer, which should be accurate for the
 scene, in order to potentially improve the quality or the output as well as the comfort
 level for the viewer.

 The depth buffer is `framebufferWidth`
 entries wide and `framebuffer` entries
 tall. Each entry in the buffer specifies the depth at which the corresponding pixel is
 located, and has a value between 0.0 and 1.0.

 A depth buffer pixel value of 0.0 corresponds to the depth given by the session's
 `depthNear` and a value of 1.0 corresponds to
 the depth given by `depthFar`.

 The depth, in tandem with the coordinates of each point being rendered, makes it
 possible to more accurately represent the scene in the 3D space.

Examples
--------

 If the Web application which is using WeXR is rendering its content without using a
 depth buffer—or if the depth buffer's contents are invalid—you should disable the use of
 the depth buffer for WebXR rendering by setting `ignoreDepthValues` to true
 when creating the `XRWebGLLayer`. This is demonstrated in the snippet of
 code below:


```js
const glLayerOptions = {
  ignoreDepthValues: true,
};

let glLayer = new XRWebGLLayer(xrSession, gl, glLayerOptions);
```

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

| Specification |
| --- |
| WebXR Device API # dom-xrwebgllayer-ignoredepthvalues |

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

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

See also
--------

* WebXR Device API
* WebGL depth buffer related methods: `depthFunc()`, `clearDepth()`