recursal/MDN huggingface dataset:
MediaKeyStatusMap: keys() method
================================

 The **`keys`** property of the
 `MediaKeyStatusMap` interface returns a new Iterator object, containing
 keys for each element in the status map, in insertion order.

Syntax
------


```js
keys()
```

### Parameters

None.

### Return value

A new iterator.

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

#### No specification found

No specification data found for `api.MediaKeyStatusMap.keys`.  
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

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

 The **`forEach`** property of the
 `MediaKeyStatusMap` interface calls callback once for each key-value pair
 in the status map, in insertion order. If an argument is present it will be passed to
 the callback.

Syntax
------


```js
forEach(callbackFn)
forEach(callbackFn, thisArg)
```

### Parameters

`callbackFn`

Function to execute for each element, taking three arguments:

`currentValue`

The current element being processed in the array.

`index` Optional

The index of the current element being processed in the array.

`array` Optional

Which array `forEach()` is being applied to.


`thisArg` Optional

Value used as `this` when executing `callback`.

### Return value

None (`undefined`).

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

#### No specification found

No specification data found for `api.MediaKeyStatusMap.forEach`.  
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

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

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

 The read-only `offset` property of the `ConstantSourceNode`
 interface returns a `AudioParam` object indicating the numeric a-rate value which is always returned
 by the source when asked for the next sample.


**Note:** While the `AudioParam` named `offset` is read-only, the
 `value` property within is not. So you can change the value of
 `offset` by setting the value of
 `ConstantSourceNode.offset.value`:



```js
myConstantSourceNode.offset.value = newValue;
```


Value
-----

 An `AudioParam` object indicating the a-rate value returned for every
 sample by this node. The default value is 1.0.

 To access the `offset` parameter's current value, access the parameter's
 `value` property, as shown in the syntax box above.

Examples
--------

 This example shows how to set up a `ConstantSourceNode` so its
 `offset` is used as the input to a pair of `GainNode`s; this
 snippet is derived from the complete example you can find in Controlling multiple parameters with ConstantSourceNode.


```js
gainNode2 = context.createGain();
gainNode3 = context.createGain();
gainNode2.gain.value = gainNode3.gain.value = 0.5;

volumeSliderControl.value = gainNode2.gain.value;

constantSource = context.createConstantSource();
constantSource.connect(gainNode2.gain);
constantSource.connect(gainNode3.gain);
```


 First, the gain nodes are created and configured, and a slider control's value is set
 to match the gain on the two nodes. Then we create a new
 `ConstantSourceNode` and make it the source for the two gain nodes'
 `GainNode.gain` values. Each of those values is also an
 `AudioParam`.

 Let's say we have an event handler (for `click` events, in this case) which
 needs to respond by altering the value of the two gain nodes. With the linkage above in
 place, that can be done using this simple event handler:


```js
function handleClickEvent(event) {
  constantSource.offset.value = volumeSliderControl.value;
}
```


 All this function has to do is fetch the current value of the slider control we're
 using to control the paired nodes' gains, then store that value into the
 `ConstantSourceNode`'s `offset` parameter. That's done by changing
 the contents of its `AudioParam.value` property. The two gain nodes quickly
 adopt the new volume level.

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

| Specification |
| --- |
| Web Audio API # dom-constantsourcenode-offset |

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

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

See also
--------

* Using the Web Audio API
* `ConstantSourceNode`
* `AudioNode`
* `AudioParam`
ConstantSourceNode: ConstantSourceNode() constructor
====================================================

 The **`ConstantSourceNode()`** constructor creates a new
 `ConstantSourceNode` object instance, representing an audio source which
 constantly outputs samples whose values are always the same.

Syntax
------


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

### Parameters

`context`

 An `AudioContext` representing the audio context you want the node to
 be associated with.


`options`

 A `ConstantSourceOptions` dictionary object defining the properties you
 want the `ConstantSourceNode` to have:


`offset`

 A read-only `AudioParam` specifying the
 constant value generated by the source. The default is 1.0. The normal range is
 -1.0 to 1.0, but the value can be anywhere in the range from
 `-Infinity` to `+Infinity`.



Examples
--------

 In this example, an audio context is created, then a `ConstantSourceNode` is
 established with its `offset` initialized to 0.5.


```js
let audioContext = new AudioContext();

let myConstantSource = new ConstantSourceNode(audioContext, { offset: 0.5 });
```


**Note:** The new `ConstantSourceNode` created by the
 constructor has a
 `channelCount` of
 2.


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

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

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

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

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

 The **`sameDocument`** read-only property of the
 `NavigationDestination` interface returns `true` if the navigation is to the same `document` as the current `Document` value, or `false` otherwise.

This is useful for checking whether the navigation will be same-document or cross-document.

Value
-----

A boolean.

Examples
--------


```js
navigation.addEventListener("navigate", (event) => {
  console.log(event.destination.sameDocument);
});
```

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

| Specification |
| --- |
| HTML Standard # the-navigationdestination-interface:dom-navigationdestination-samedocument-2 |

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

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

See also
--------

* Modern client-side routing: the Navigation API
* Navigation API explainer
* Domenic Denicola's Navigation API live demo
NavigationDestination: url property
===================================

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

 The **`url`** read-only property of the
 `NavigationDestination` interface returns the URL being navigated to.

Value
-----

A string.

Examples
--------

### Handling a navigation using `intercept()`


```js
navigation.addEventListener("navigate", (event) => {
  // Exit early if this navigation shouldn't be intercepted,
  // e.g. if the navigation is cross-origin, or a download request
  if (shouldNotIntercept(event)) {
    return;
  }

  const url = new URL(event.destination.url);

  if (url.pathname.startsWith("/articles/")) {
    event.intercept({
      async handler() {
        // The URL has already changed, so show a placeholder while
        // fetching the new content, such as a spinner or loading page
        renderArticlePagePlaceholder();

        // Fetch the new content and display when ready
        const articleContent = await getArticleContent(url.pathname);
        renderArticlePage(articleContent);
      },
    });
  }
});
```

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

| Specification |
| --- |
| HTML Standard # the-navigationdestination-interface:dom-navigationdestination-url-2 |

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

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

See also
--------

* Modern client-side routing: the Navigation API
* Navigation API explainer
* Domenic Denicola's Navigation API live demo
NavigationDestination: key property
===================================

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

 The **`key`** read-only property of the
 `NavigationDestination` interface returns the `key` value of the destination `NavigationHistoryEntry` if the `NavigateEvent.navigationType` is `traverse`, or an empty string otherwise.

The `key` is a unique, UA-generated value that represents the history entry's slot in the history entries list, used to navigate to this place in the history via `Navigation.traverseTo()`. It will be reused by other entries that replace the entry in the list (i.e. if the `NavigateEvent.navigationType` is `replace`).

Value
-----

A string representing the `key` of the destination `NavigationHistoryEntry`, or an empty string.

Examples
--------


```js
navigation.addEventListener("navigate", (event) => {
  console.log(event.destination.key);
});
```

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

| Specification |
| --- |
| HTML Standard # the-navigationdestination-interface:dom-navigationdestination-key-2 |

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

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

See also
--------

* Modern client-side routing: the Navigation API
* Navigation API explainer
* Domenic Denicola's Navigation API live demo
NavigationDestination: 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
 `NavigationDestination` interface returns the `id` value of the destination `NavigationHistoryEntry` if the `NavigateEvent.navigationType` is `traverse`, or an empty string otherwise.

The `id` is a unique, UA-generated value that always represents the history entry, useful to correlate a history entry with an external resource such as a storage cache.

Value
-----

A string representing the `id` of the destination `NavigationHistoryEntry`, or an empty string.

Examples
--------


```js
navigation.addEventListener("navigate", (event) => {
  console.log(event.destination.id);
});
```

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

| Specification |
| --- |
| HTML Standard # the-navigationdestination-interface:dom-navigationdestination-id-2 |

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

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

See also
--------

* Modern client-side routing: the Navigation API
* Navigation API explainer
* Domenic Denicola's Navigation API live demo
NavigationDestination: getState() method
========================================

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

 The **`getState()`** method of the
 `NavigationDestination` interface returns a clone of the developer-supplied state associated with the destination `NavigationHistoryEntry`, or navigation operation (e.g. `navigate()`) as appropriate.

Syntax
------


```js
getState()
```

### Parameters

None.

### Return value

A value representing the state. This can be any type.

If no state is defined, it returns `undefined`.

### Exceptions

None.

Examples
--------


```js
navigation.addEventListener("navigate", (event) => {
  console.log(event.destination.getState());
});
```

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

| Specification |
| --- |
| HTML Standard # the-navigationdestination-interface:dom-navigationdestination-getstate-2 |

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

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

See also
--------

* Modern client-side routing: the Navigation API
* Navigation API explainer
* Domenic Denicola's Navigation API live demo
* Methods that allow state to be updated — `Navigation.navigate()`, `Navigation.reload()`, and `Navigation.updateCurrentEntry()`
NavigationDestination: index property
=====================================

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

 The **`index`** read-only property of the
 `NavigationDestination` interface returns the `index` value of the destination `NavigationHistoryEntry` if the `NavigateEvent.navigationType` is `traverse`, or `-1` otherwise.

Value
-----

A number representing the `index` of the destination `NavigationHistoryEntry`, or -1.

Examples
--------


```js
navigation.addEventListener("navigate", (event) => {
  console.log(event.destination.index);
});
```

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

| Specification |
| --- |
| HTML Standard # the-navigationdestination-interface:dom-navigationdestination-index-2 |

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

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

See also
--------

* Modern client-side routing: the Navigation API
* Navigation API explainer
* Domenic Denicola's Navigation API live demo
CanMakePaymentEvent: respondWith() method
=========================================

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

The **`respondWith()`** method of the `CanMakePaymentEvent` interface enables the service worker to respond appropriately to signal whether it is ready to handle payments.

Syntax
------


```js
respondWith(response)
```

### Parameters

`response`

A `Promise` that resolves with a boolean value to signal that it is ready to handle a payment request: (`true`), or not (`false`).

### Return value

None (`undefined`).

Examples
--------


```js
self.addEventListener("canmakepayment", (e) => {
  e.respondWith(
    new Promise((resolve, reject) => {
      someAppSpecificLogic()
        .then((result) => {
          resolve(result);
        })
        .catch((error) => {
          reject(error);
        });
    }),
  );
});
```

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

| Specification |
| --- |
| Payment Handler API # dom-canmakepaymentevent-respondwith |

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

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

See also
--------

* Payment Handler API
* Web-based payment apps overview
* Setting up a payment method
* Life of a payment transaction
* Using the Payment Request API
* Payment processing concepts
CanMakePaymentEvent: CanMakePaymentEvent() constructor
======================================================

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

The **`CanMakePaymentEvent()`** constructor creates a new `CanMakePaymentEvent` object instance.

Syntax
------


```js
new CanMakePaymentEvent(type)
```

### Parameters

`type`

A string representing the type of event. In the case of `CanMakePaymentEvent` this is always `canmakepayment`.

Examples
--------

A developer would not use this constructor manually. A new `CanMakePaymentEvent` object is constructed when a handler is invoked as a result of the `canmakepayment` event firing.


```js
self.addEventListener("canmakepayment", (e) => {
  e.respondWith(
    new Promise((resolve, reject) => {
      someAppSpecificLogic()
        .then((result) => {
          resolve(result);
        })
        .catch((error) => {
          reject(error);
        });
    }),
  );
});
```

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

| Specification |
| --- |
| Payment Handler API # dom-canmakepaymentevent-constructor |

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

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

See also
--------

* Payment Handler API
* Web-based payment apps overview
* Setting up a payment method
* Life of a payment transaction
* Using the Payment Request API
* Payment processing concepts
MediaStreamAudioSourceNode: mediaStream property
================================================

 The `MediaStreamAudioSourceNode` interface's
 read-only **`mediaStream`** property indicates the
 `MediaStream` that contains the audio track from which the node is
 receiving audio.

 This stream was specified when the node was first created,
 either using the `MediaStreamAudioSourceNode()` constructor or the
 `AudioContext.createMediaStreamSource()` method.

Value
-----

 A `MediaStream` representing the stream which contains the
 `MediaStreamTrack` serving as the source of audio for the node.

 The user agent uses the first audio track it finds on the specified
 stream as the audio source for this node. However, there is no way to be certain which
 track that will be on multi-track streams. If the specific track matters to you, or you
 need to have access to the track itself, you should use a
 `MediaStreamTrackAudioSourceNode` instead.

Examples
--------


```js
const audioCtx = new window.AudioContext();
let options = {
  mediaStream: stream,
};

let source = new MediaStreamAudioSourceNode(audioCtx, options);
console.log(source.mediaStream);
```

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

| Specification |
| --- |
| Web Audio API # dom-mediastreamaudiosourcenode-mediastream |

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

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

 The Web Audio API's **`MediaStreamAudioSourceNode()`** constructor
 creates and returns a new `MediaStreamAudioSourceNode` object which uses
 the first audio track of a given `MediaStream` as its source.


**Note:** Another way to create a
 `MediaStreamAudioSourceNode` is to call
 the `AudioContext.createMediaStreamSource()` method, specifying the stream
 from which you want to obtain audio.


Syntax
------


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

### Parameters

`context`

 An `AudioContext` representing the audio context you want the node to
 be associated with.


`options`

An object defining the properties you want the `MediaStreamAudioSourceNode` to have:

`mediaStream`

A required property which specifies the `MediaStream` from which to obtain audio for the node.


### Return value

 A new `MediaStreamAudioSourceNode` object representing the audio node
 whose media is obtained from the specified source stream.

### Exceptions

`InvalidStateError` `DOMException`

Thrown if the specified `MediaStream` does not contain any audio tracks.

Examples
--------

 This example uses `getUserMedia()` to obtain
 access to the user's camera, then creates a new
 `MediaStreamAudioSourceNode` from its `MediaStream`.


```js
// define variables
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();

// getUserMedia block - grab stream
// put it into a MediaStreamAudioSourceNode
if (navigator.mediaDevices.getUserMedia) {
  navigator.mediaDevices
    .getUserMedia(
      // constraints: audio and video for this app
      {
        audio: true,
        video: false,
      },
    )
    .then((stream) => {
      const options = {
        mediaStream: stream,
      };

      const source = new MediaStreamAudioSourceNode(audioCtx, options);
      source.connect(audioCtx.destination);
    })
    .catch((err) => {
      console.error(`The following gUM error occurred: ${err}`);
    });
} else {
  console.log("new getUserMedia not supported on your browser!");
}
```

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

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

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

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

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

 The **`label`** property of the
 `GPURenderPipeline` interface provides a label that can be used to identify the object, for example in `GPUError` messages or console warnings.

This can be set by providing a `label` property in the descriptor object passed into the originating `GPUDevice.createRenderPipeline()` or `GPUDevice.createRenderPipelineAsync()` call, or you can get and set it directly on the `GPURenderPipeline` object.

Value
-----

A string. If this has not been previously set as described above, it will be an empty string.

Examples
--------

Setting and getting a label via `GPURenderPipeline.label`:


```js
// ...

const pipelineDescriptor = {
  vertex: {
    module: shaderModule,
    entryPoint: "vertex\_main",
    buffers: vertexBuffers,
  },
  fragment: {
    module: shaderModule,
    entryPoint: "fragment\_main",
    targets: [
      {
        format: navigator.gpu.getPreferredCanvasFormat(),
      },
    ],
  },
  primitive: {
    topology: "triangle-list",
  },
  layout: "auto",
};

const renderPipeline = device.createRenderPipeline(pipelineDescriptor);

renderPipeline.label = "myrenderpipeline";

console.log(renderPipeline.label); // "myrenderpipeline"
```


Setting a label via a `GPUDevice.createRenderPipeline()` call, and then getting it via `GPURenderPipeline.label`:


```js
// ...

const pipelineDescriptor = {
  vertex: {
    module: shaderModule,
    entryPoint: "vertex\_main",
    buffers: vertexBuffers,
  },
  fragment: {
    module: shaderModule,
    entryPoint: "fragment\_main",
    targets: [
      {
        format: navigator.gpu.getPreferredCanvasFormat(),
      },
    ],
  },
  primitive: {
    topology: "triangle-list",
  },
  layout: "auto",
  label: "myrenderpipeline",
};

const renderPipeline = device.createRenderPipeline(pipelineDescriptor);

console.log(renderPipeline.label); // "myrenderpipeline"
```

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

| Specification |
| --- |
| WebGPU # dom-gpuobjectbase-label |

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

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

See also
--------

* The WebGPU API