recursal/MDN huggingface dataset:
GPUBuffer: getMappedRange() method
==================================

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

 The **`getMappedRange()`** method of the
 `GPUBuffer` interface returns an `ArrayBuffer` containing the mapped contents of the `GPUBuffer` in the specified range.

This can only happen once the `GPUBuffer` has been successfully mapped with `GPUBuffer.mapAsync()` (this can be checked via `GPUBuffer.mapState`). While the `GPUBuffer` is mapped it cannot be used in any GPU commands.

When you have finished working with the `GPUBuffer` values, call `GPUBuffer.unmap()` to unmap it, making it accessible to the GPU again.

Syntax
------


```js
getMappedRange()
getMappedRange(offset)
getMappedRange(offset, size)
```

### Parameters

`offset` Optional

A number representing the offset, in bytes, from the start of the `GPUBuffer`'s mapped range to the start of the range to be returned in the `ArrayBuffer`. If `offset` is omitted, it defaults to 0.

`size` Optional

A number representing the size, in bytes, of the `ArrayBuffer` to return. If `size` is omitted, the range extends to the end of the `GPUBuffer`'s mapped range.

### Return value

An `ArrayBuffer`.

### Validation

The following criteria must be met when calling **`getMappedRange()`**, otherwise an `OperationError` `DOMException` is thrown:

* `offset` is a multiple of 8.
* The total range to be mapped (`size` if specified, or mapped range length - `offset` if not) is a multiple of 4.
* The total range is inside the bounds of the mapped range and does not overlap with the `ArrayBuffer` ranges specified by any other active `getMappedRange()` calls.
### Exceptions

`TypeError` `DOMException`

Thrown if an attempt is made to detach the `ArrayBuffer` in any way other than via `GPUBuffer.unmap()`.

Examples
--------

See the main `GPUBuffer` page for an example.

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

| Specification |
| --- |
| WebGPU # dom-gpubuffer-getmappedrange |

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

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

See also
--------

* The WebGPU API
GPUBuffer: destroy() method
===========================

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

 The **`destroy()`** method of the
 `GPUBuffer` interface destroys the `GPUBuffer`.

Syntax
------


```js
destroy()
```

### Parameters

None.

### Return value

None (`Undefined`).

Examples
--------


```js
const output = device.createBuffer({
  size: 1000,
  usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY\_SRC,
});

// some time later

output.destroy();
```

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

| Specification |
| --- |
| WebGPU # dom-gpubuffer-destroy |

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

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

See also
--------

* The WebGPU API
MediaMetadata: artwork property
===============================

 The **`artwork`** property of the
 `MediaMetaData` interface returns or sets an array of
 objects representing images associated with playing
 media.

Value
-----

An `Array` of objects, each containing the following fields:

`src`

The URL from which the user agent fetches the image's data.

`sizes` Optional

Specifies the resource in multiple sizes so the user agent doesn't have to scale a single image. It defaults to the empty string (`""`).

`type` Optional

The MIME type hint for the user agent that allows it to ignore images of types that it doesn't support. However, the user agent may still use MIME type sniffing after downloading the image to determine its type. It defaults to the empty string (`""`).

Examples
--------

 The following example checks for browser compatibility and sets the current metadata
 for the media session.


```js
if ("mediaSession" in navigator) {
  navigator.mediaSession.metadata = new MediaMetadata({
    title: "Unforgettable",
    artist: "Nat King Cole",
    album: "The Ultimate Collection (Remastered)",
    artwork: [
      {
        src: "https://dummyimage.com/96x96",
        sizes: "96x96",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/128x128",
        sizes: "128x128",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/192x192",
        sizes: "192x192",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/256x256",
        sizes: "256x256",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/384x384",
        sizes: "384x384",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/512x512",
        sizes: "512x512",
        type: "image/png",
      },
    ],
  });
}
```

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

| Specification |
| --- |
| Media Session # dom-mediametadata-artwork |

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

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

 The **`title`** property of the
 `MediaMetaData` interface returns or sets the title of the media to be
 played.

Value
-----

A `String` containing the title of the media.

Examples
--------

 The following example checks for browser compatibility and sets the current metadata
 for the media session.


```js
if ("mediaSession" in navigator) {
  navigator.mediaSession.metadata = new MediaMetadata({
    title: "Unforgettable",
    artist: "Nat King Cole",
    album: "The Ultimate Collection (Remastered)",
    artwork: [
      {
        src: "https://dummyimage.com/96x96",
        sizes: "96x96",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/128x128",
        sizes: "128x128",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/192x192",
        sizes: "192x192",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/256x256",
        sizes: "256x256",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/384x384",
        sizes: "384x384",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/512x512",
        sizes: "512x512",
        type: "image/png",
      },
    ],
  });
}
```

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

| Specification |
| --- |
| Media Session # dom-mediametadata-title |

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

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

 The **`album`** property of the
 `MediaMetaData` interface returns or sets the name of the album or
 collection containing the media to be played.

Value
-----

A `String` containing the name of the album.

Examples
--------

 The following example checks for browser compatibility and sets the current metadata
 for the media session.


```js
if ("mediaSession" in navigator) {
  navigator.mediaSession.metadata = new MediaMetadata({
    title: "Unforgettable",
    artist: "Nat King Cole",
    album: "The Ultimate Collection (Remastered)",
    artwork: [
      {
        src: "https://dummyimage.com/96x96",
        sizes: "96x96",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/128x128",
        sizes: "128x128",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/192x192",
        sizes: "192x192",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/256x256",
        sizes: "256x256",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/384x384",
        sizes: "384x384",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/512x512",
        sizes: "512x512",
        type: "image/png",
      },
    ],
  });
}
```

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

| Specification |
| --- |
| Media Session # dom-mediametadata-album |

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

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

 The **`MediaMetadata()`** constructor creates a new
 `MediaMetadata` object.

Syntax
------


```js
new MediaMetadata()
new MediaMetadata(metadata)
```

### Parameters

`metadata` Optional

The metadata parameters are as follows:

`title` Optional

The title of the media to be played. It defaults to the empty string (`""`).

`artist` Optional

The name of the artist, group, creator, etc. of the media to be played. It defaults to the empty string (`""`).

`album` Optional

The name of the album, or collection, containing the media to be played. It defaults to the empty string (`""`).

`artwork` Optional

An `Array` of objects that represent images associated with the playing media that defaults to be an empty array. The object structure is:

`src`

The URL from which the user agent fetches the image's data.

`sizes` Optional

Specifies the resource in multiple sizes so the user agent doesn't have to scale a single image. It defaults to the empty string (`""`).

`type` Optional

The MIME type hint for the user agent that allows it to ignore images of types that it doesn't support. However, the user agent may still use MIME type sniffing after downloading the image to determine its type. It defaults to the empty string (`""`).


Example
-------

 The following example creates a new `MediaMetadata` object using the
 correct format of metadata.


```js
if ("mediaSession" in navigator) {
  navigator.mediaSession.metadata = new MediaMetadata({
    title: "Unforgettable",
    artist: "Nat King Cole",
    album: "The Ultimate Collection (Remastered)",
    artwork: [
      {
        src: "https://dummyimage.com/96x96",
        sizes: "96x96",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/128x128",
        sizes: "128x128",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/192x192",
        sizes: "192x192",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/256x256",
        sizes: "256x256",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/384x384",
        sizes: "384x384",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/512x512",
        sizes: "512x512",
        type: "image/png",
      },
    ],
  });
}
```

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

| Specification |
| --- |
| Media Session # dom-mediametadata-mediametadata |

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

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

 The **`artist`** property of the
 `MediaMetaData` interface returns or sets the name of the artist, group,
 creator, etc., of the media to be played.

Value
-----

A `String` containing the name of the artist.

Examples
--------

 The following example checks for browser compatibility and sets the current metadata
 for the media session.


```js
if ("mediaSession" in navigator) {
  navigator.mediaSession.metadata = new MediaMetadata({
    title: "Unforgettable",
    artist: "Nat King Cole",
    album: "The Ultimate Collection (Remastered)",
    artwork: [
      {
        src: "https://dummyimage.com/96x96",
        sizes: "96x96",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/128x128",
        sizes: "128x128",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/192x192",
        sizes: "192x192",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/256x256",
        sizes: "256x256",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/384x384",
        sizes: "384x384",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/512x512",
        sizes: "512x512",
        type: "image/png",
      },
    ],
  });
}
```

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

| Specification |
| --- |
| Media Session # dom-mediametadata-artist |

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

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

 The read-only **`VideoTrackList`**
 property **`selectedIndex`** returns the index of the
 currently selected track, if any, or `-1` otherwise.

Value
-----

 A number indicating the index of the currently selected track, if any, or
 `-1` otherwise.

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

| Specification |
| --- |
| HTML Standard # dom-videotracklist-selectedindex-dev |

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

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

 The **`VideoTrackList`** method
 **`getTrackById()`** returns the first
 `VideoTrack` object from the track list whose `id` matches the specified string.

 This lets you find a specified track if
 you know its ID string.

Syntax
------


```js
getTrackById(id)
```

### Parameters

`id`

 A string indicating the ID of the track to locate within the track
 list.


### Return value

 A `VideoTrack` object indicating the first track found within the
 `VideoTrackList` whose `id` matches the specified string. If no
 match is found, this method returns `null`.

 The tracks are searched in their natural order; that is, in the order defined by the
 media resource itself, or, if the resource doesn't define an order, the relative order
 in which the tracks are declared by the media resource.

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

| Specification |
| --- |
| HTML Standard # dom-videotracklist-gettrackbyid-dev |

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

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

 The read-only **`VideoTrackList`**
 property **`length`** returns the number of entries in the
 `VideoTrackList`, each of which is a `VideoTrack` representing
 one video track in the media element.

 A value of 0 indicates that there are no
 video tracks in the media.

Value
-----

 A number indicating how many video tracks are included in the
 `VideoTrackList`. Each track can be accessed by treating the
 `VideoTrackList` as an array of objects of type `VideoTrack`.

Examples
--------

 This snippet gets the number of video tracks in the first `<video>`
 element found in the DOM by `querySelector()`.


```js
const videoElem = document.querySelector("video");
let numVideoTracks = 0;

if (videoElem.videoTracks) {
  numVideoTracks = videoElem.videoTracks.length;
}
```


 Note that this sample checks to be sure `HTMLMediaElement.videoTracks` is
 defined, to avoid failing on browsers without support for `VideoTrack`.

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

| Specification |
| --- |
| HTML Standard # dom-videotracklist-length-dev |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
VideoTrackList: addtrack event
==============================

The `addtrack` event is fired when a video track is added to a `VideoTrackList`.

Syntax
------

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


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

onaddtrack = (event) => {};
```

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

A `TrackEvent`. Inherits from `Event`.

Event

TrackEventEvent properties
----------------

*In addition to the properties listed below, properties from the parent interface, `Event`, are available.*

`track` Read only 

The newly-added `VideoTrack` the event is in reference to.

Examples
--------

Using `addEventListener()`:


```js
const videoElement = document.querySelector("video");

videoElement.videoTracks.addEventListener("addtrack", (event) => {
  console.log(`Video track: ${event.track.label} added`);
});
```


Using the `onaddtrack` event handler property:


```js
const videoElement = document.querySelector("video");

videoElement.videoTracks.onaddtrack = (event) => {
  console.log(`Video track: ${event.track.label} added`);
};
```

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

| Specification |
| --- |
| HTML Standard # event-media-addtrack |
| HTML Standard # handler-tracklist-onaddtrack |

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

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

See also
--------

* Related events: `removetrack`, `change`
* This event on `AudioTrackList` targets: `addtrack`
* This event on `MediaStream` targets: `addtrack`
* Media Capture and Streams API
* WebRTC
VideoTrackList: change event
============================

The `change` event is fired when a video track is made active or inactive, for example by changing the track's `selected` property.

Syntax
------

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


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

onchange = (event) => {};
```

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

A generic `Event` with no added properties.

Examples
--------

Using `addEventListener()`:


```js
const videoElement = document.querySelector("video");
videoElement.videoTracks.addEventListener("change", (event) => {
  console.log(`'${event.type}' event fired`);
});

// changing the value of `selected` will trigger the `change` event
const toggleTrackButton = document.querySelector(".toggle-track");
toggleTrackButton.addEventListener("click", () => {
  const track = videoElement.videoTracks[0];
  track.selected = !track.selected;
});
```


Using the `onchange` event handler property:


```js
const videoElement = document.querySelector("video");
videoElement.videoTracks.onchange = (event) => {
  console.log(`'${event.type}' event fired`);
};

// changing the value of `selected` will trigger the `change` event
const toggleTrackButton = document.querySelector(".toggle-track");
toggleTrackButton.addEventListener("click", () => {
  const track = videoElement.videoTracks[0];
  track.selected = !track.selected;
});
```

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

| Specification |
| --- |
| HTML Standard # event-media-change |
| HTML Standard # handler-tracklist-onchange |

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

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

See also
--------

* Related events: `addtrack`, `removetrack`
* This event on `AudioTrackList` targets: `change`
* Media Capture and Streams API
* WebRTC
VideoTrackList: removetrack event
=================================

The `removetrack` event is fired when a video track is removed from a `VideoTrackList`.

Syntax
------

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


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

onremovetrack = (event) => {};
```

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

A `TrackEvent`. Inherits from `Event`.

Event

TrackEventEvent properties
----------------

*In addition to the properties listed below, properties from the parent interface, `Event`, are available.*

`track` Read only 

The newly-removed `VideoTrack` the event is in reference to.

Examples
--------

Using `addEventListener()`:


```js
const videoElement = document.querySelector("video");

videoElement.videoTracks.addEventListener("removetrack", (event) => {
  console.log(`Video track: ${event.track.label} removed`);
});
```


Using the `onremovetrack` event handler property:


```js
const videoElement = document.querySelector("video");

videoElement.videoTracks.onremovetrack = (event) => {
  console.log(`Video track: ${event.track.label} removed`);
};
```

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

| Specification |
| --- |
| HTML Standard # event-media-removetrack |
| HTML Standard # handler-tracklist-onremovetrack |

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

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

See also
--------

* Related events: `addtrack`, `change`
* This event on `AudioTrackList` targets: `removetrack`
* This event on `MediaStream` targets: `removetrack`
* Media Capture and Streams API
* WebRTC
MediaKeyStatusMap: get() method
===============================

 The **`get`** property of the
 `MediaKeyStatusMap` interface returns the value associated with the given
 key, or `undefined` if there is none.

Syntax
------


```js
get(key)
```

### Parameters

`key`

The key whose value you want returned.

### Return value

The value associated with the given key, or `undefined`.

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

| Specification |
| --- |
| Encrypted Media Extensions # dom-mediakeystatusmap-get |

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

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

 The **`entries()`** read-only property
 of the `MediaKeyStatusMap` interface returns a new Iterator object,
 containing an array of [key, value] pairs for each element in the status map, in
 insertion order.

Syntax
------


```js
entries()
```

### Parameters

None.

### Return value

### Exceptions

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

#### No specification found

No specification data found for `api.MediaKeyStatusMap.entries`.  
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: has() method
===============================

 The **`has`** property of the
 `MediaKeyStatusMap` interface returns a `Boolean`, asserting
 whether a value has been associated with the given key.

Syntax
------


```js
has(key)
```

### Parameters

`key`

The key whose value you want returned

### Return value

A `Boolean`.

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

| Specification |
| --- |
| Encrypted Media Extensions # dom-mediakeystatusmap-has |

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

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

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

Syntax
------


```js
values()
```

### Parameters

None.

### Return value

A new iterator.

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

#### No specification found

No specification data found for `api.MediaKeyStatusMap.values`.  
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: size property
================================

 The **`size`** read-only property of
 the `MediaKeyStatusMap` interface returns the number of key/value paIrs
 in the status map.

Value
-----

A long integer.

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

| Specification |
| --- |
| Encrypted Media Extensions # dom-mediakeystatusmap-size |

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

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