recursal/MDN huggingface dataset:
PushMessageData: json() method
==============================

The **`json()`** method of the `PushMessageData` interface extracts push message data by parsing it as a JSON string and returning the result.

Syntax
------


```js
json()
```

### Parameters

None.

### Return value

The result of parsing push event data as JSON. This could be anything that can be represented by JSON — an object, an array, a string, a number…

Examples
--------


```js
self.addEventListener("push", (event) => {
  const myData = event.data.json();

  // do something with your data
});
```

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

| Specification |
| --- |
| Push API # dom-pushmessagedata-json |

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

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

The **`arrayBuffer()`** method of the `PushMessageData` interface extracts push message data as an `ArrayBuffer` object.

Syntax
------


```js
arrayBuffer()
```

### Parameters

None.

### Return value

An `ArrayBuffer`.

Examples
--------


```js
self.addEventListener("push", (event) => {
  const buffer = event.data.arrayBuffer();

  // do something with your array buffer
});
```

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

| Specification |
| --- |
| Push API # dom-pushmessagedata-arraybuffer |

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

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

The **`blob()`** method of the `PushMessageData` interface extracts push message data as a `Blob` object.

Syntax
------


```js
blob()
```

### Parameters

None.

### Return value

A `Blob`.

Examples
--------


```js
self.addEventListener("push", (event) => {
  const blob = event.data.blob();

  // do something with your Blob
});
```

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

| Specification |
| --- |
| Push API # dom-pushmessagedata-blob |

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

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

The **`text()`** method of the `PushMessageData` interface extracts push message data as a plain text string.

Syntax
------


```js
text()
```

### Parameters

None.

### Return value

A string.

Examples
--------


```js
self.addEventListener("push", (event) => {
  const textObj = event.data.text();

  // do something with your text
});
```

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

| Specification |
| --- |
| Push API # dom-pushmessagedata-text |

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

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

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

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

The **`close()`** method of the `AudioEncoder` interface ends all pending work and releases system resources.

Syntax
------


```js
close()
```

### Parameters

None.

### Return value

None (`undefined`).

Examples
--------

The following example closes the `AudioEncoder`.


```js
AudioEncoder.close();
```

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

| Specification |
| --- |
| WebCodecs # dom-audioencoder-close |

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

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

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

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

The **`state`** read-only property of the `AudioEncoder` interface returns the current state of the underlying codec.

Value
-----

A string containing one of the following values:

`"unconfigured"`

The codec is not configured for decoding.

`"configured"`

The codec has a valid configuration and is ready.

`"closed"`

The codec is no longer usable and system resources have been released.

Examples
--------

The following example prints the state of the `AudioEncoder` to the console.


```js
console.log(AudioEncoder.state);
```

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

| Specification |
| --- |
| WebCodecs # dom-audioencoder-state |

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

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

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

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

The **`dequeue`** event of the `AudioEncoder` interface fires to signal a decrease in `AudioEncoder.encodeQueueSize`.

This eliminates the need for developers to use a `setTimeout()` poll to determine when the queue has decreased, and more work should be queued up.

Syntax
------

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


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

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

Example
-------


```js
audioEncoder.addEventListener("dequeue", (event) => {
  // Queue up more encoding work
});
```

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

| Specification |
| --- |
| WebCodecs # eventdef-audioencoder-dequeue |

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

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

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

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

The **`isConfigSupported()`** static method of the `AudioEncoder` interface checks if the given config is supported (that is, if `AudioEncoder` objects can be successfully configured with the given config).

Syntax
------


```js
AudioEncoder.isConfigSupported(config)
```

### Parameters

`config`

The dictionary object accepted by `AudioEncoder.configure`

### Return value

A `Promise` that resolves with an object containing the following members:

`supported`

A boolean value which is `true` if the given config is supported by the encoder.

`config`

A copy of the given config with all the fields recognized by the encoder.

### Exceptions

`TypeError`

Thrown if the provided `config` is invalid; that is, if doesn't have required values (such as an empty `codec` field) or has invalid values (such as a negative `sampleRate`).

Examples
--------

The following example tests if the browser supports several audio codecs.


```js
const codecs = ["mp4a.40.2", "mp3", "alaw", "ulaw"];
const configs = [];
for (const codec of codecs) {
  configs.push({
    codec,
    sampleRate: 48000,
    numberOfChannels: 1,
    not\_supported\_field: 123,
  });
}
for (const config of configs) {
  const support = await AudioEncoder.isConfigSupported(config);
  console.log(
    `AudioEncoder's config ${JSON.stringify(support.config)} support: ${
 support.supported
 }`,
  );
}
```

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

| Specification |
| --- |
| WebCodecs # dom-audioencoder-isconfigsupported |

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

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

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

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

The **`encodeQueueSize`** read-only property of the `AudioEncoder` interface returns the number of pending encode requests in the queue.

Value
-----

An integer containing the number of requests.

Examples
--------

The following example prints the size of the queue to the console.


```js
console.log(AudioEncoder.encodeQueueSize);
```

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

| Specification |
| --- |
| WebCodecs # dom-audioencoder-encodequeuesize |

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

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

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

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

The **`reset()`** method of the `AudioEncoder` interface resets all states including configuration, control messages in the control message queue, and all pending callbacks.

Syntax
------


```js
reset()
```

### Parameters

None.

### Return value

None (`undefined`).

Examples
--------

The following example resets the `AudioEncoder`.


```js
AudioEncoder.reset();
```

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

| Specification |
| --- |
| WebCodecs # dom-audioencoder-reset |

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

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

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

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

The **`AudioEncoder()`** constructor creates a new `AudioEncoder` object with the provided `init.output` callback assigned as the output callback, the provided `init.error` callback as the error callback, and the `AudioEncoder.state` set to `"unconfigured"`.

Syntax
------


```js
new AudioEncoder(init)
```

### Parameters

`init`

An object containing two required callbacks.

`output`

A callback which takes a `EncodedAudioChunk` object as the first argument, and an optional metadata object as the second. The metadata object has one member, `decoderConfig` which has an object as its value containing:

`codec`

A string containing a valid codec string.

`sampleRate`

An integer representing the number of frame samples per second.

`numberOfChannels`

An integer representing the number of audio channels.

`description` Optional

An `ArrayBuffer`, a `TypedArray`, or a `DataView` containing a sequence of codec specific bytes, commonly known as extradata.


`error`

A callback which takes an `Error` object as its only argument.


Examples
--------

In the following example an `AudioEncoder` is created with the two required callback functions, one to deal with the decoded frame and the other to handle errors.


```js
const audioEncoder = new AudioEncoder({
  output: processAudio,
  error: onEncoderError,
});
```

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

| Specification |
| --- |
| WebCodecs # dom-audioencoder-audioencoder |

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

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

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

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

The **`configure()`** method of the `AudioEncoder` interface enqueues a control message to configure the audio encoder for encoding chunks.

Syntax
------


```js
configure(config)
```

### Parameters

`config`

A dictionary object containing the following members:

`codec`

A string containing a valid codec string. See "codecs" parameter for details on codec string construction.

`sampleRate`

An integer representing the number of frame samples per second.

`numberOfChannels`

An integer representing the number of audio channels.

`bitrate` Optional

An integer representing the bitrate.


### Return value

None (`undefined`).

### Exceptions

`TypeError`

Thrown if the provided `config` is invalid.

`InvalidStateError` `DOMException`

Thrown if the `state` is `"closed"`.

`NotSupportedError` `DOMException`

Thrown if the provided `config` is valid but the user agent cannot provide a codec that can decode this profile.

Examples
--------

The following example creates a new `AudioEncoder` and configures it with some of the available options.


```js
const init = {
  output: handleOutput,
  error: (e) => {
    console.log(e.message);
  },
};

let config = {
  codec: "opus",
  sampleRate: 44100,
  numberOfChannels: 2,
  bitrate: 128\_000, // 128 kbps
};

let encoder = new AudioEncoder(init);
encoder.configure(config);
```

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

| Specification |
| --- |
| WebCodecs # dom-audioencoder-configure |

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

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

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

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

The **`flush()`** method of the `AudioEncoder` interface returns a Promise that resolves once all pending messages in the queue have been completed.

Syntax
------


```js
flush()
```

### Parameters

None.

### Return value

A `Promise` that resolves with undefined.

### Exceptions

`InvalidStateError` `DOMException`

Thrown if the Promise is rejected because the `state` is not `"configured"`.

Examples
--------

The following example flushes the `AudioEncoder`.


```js
AudioEncoder.flush();
```

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

| Specification |
| --- |
| WebCodecs # dom-audioencoder-flush |

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

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

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

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

The **`encode()`** method of the `AudioEncoder` interface enqueues a control message to encode a given `AudioData` object.

Syntax
------


```js
encode(data)
```

### Parameters

`data`

An `AudioData` object.

### Return value

None (`undefined`).

### Exceptions

`InvalidStateError` `DOMException`

Thrown if the `state` is not `"configured"`.

`TypeError`

Thrown if the `AudioData` object has been transferred.

Examples
--------

In the following example `encode` is passed an `AudioData` object.


```js
encoder.encode(data);
```

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

| Specification |
| --- |
| WebCodecs # dom-audioencoder-encode |

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

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

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

 The *obsolete* **`vspace`** property of the
 `HTMLImageElement` interface specifies the number of pixels of empty space
 to leave empty on the top and bottom of the `<img>` element when laying
 out the page.

Value
-----

 An integer value specifying the height, in pixels, of the vertical margin to apply to
 the top and bottom sides of the image.

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

 The value specified for `vspace` is mapped to the `margin-top`
 and `margin-bottom` properties to specify the height of those margins in
 pixels.


**Warning:** This property is obsolete. You should instead use the CSS
 `margin` property and its longhand forms to establish margins around
 an `<img>`.


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

| Specification |
| --- |
| HTML Standard # dom-img-vspace |

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

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

 The **`useMap`** property on the
 `HTMLImageElement` interface reflects the value of the
 HTML `usemap` attribute, which is a string
 providing the name of the client-side image map to apply to the image.

Value
-----

 A string providing the page-local URL (that is, a URL that begins
 with the hash or pound symbol, "`#`") of the `<map>` element
 which defines the image map to apply to the image.

You can learn more about client-side image maps in our learning article Add a hitmap on top of an image.

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

 The string value of `useMap` must be a valid anchor for a
 `<map>` element. In other words, this string should be the value of the
 appropriate `<map>`'s `name` attribute with a
 pound or hash symbol prepended to it.

Consider a `<map>` that looks like this:


```html
<map name="mainmenu-map">
  <area
 shape="circle"
 coords="25, 25, 75"
 href="/index.html"
 alt="Return to home page" />
  <area shape="rect" coords="25, 25, 100, 150" href="/index.html" alt="Shop" />
</map>
```


 Given the image map named `mainmenu-map`, the image which uses it should
 look something like the following:


```html
<img src="menubox.png" usemap="#mainmenu-map" />
```


 For additional examples (including interactive ones), see the articles about the
 `<map>` and `<area>` elements, as well as the guide to using image maps.

Examples
--------

Try it
------

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

| Specification |
| --- |
| HTML Standard # dom-img-usemap |

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

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

 The **`height`** property of the
 `HTMLImageElement` interface indicates the height at which the image is
 drawn, in CSS pixels if the image is being drawn or rendered to any
 visual medium such as the screen or a printer; otherwise, it's the natural, pixel
 density corrected height of the image.

Value
-----

 An integer value indicating the height of the image. The terms in which the height is
 defined depends on whether the image is being rendered to a visual medium or not.

* If the image is being rendered to a visual medium such as a screen or printer, the
 height is expressed in CSS pixels.
* Otherwise, the image's height is represented using its natural (intrinsic) height,
 adjusted for the display density as indicated by
 `naturalHeight`.
Examples
--------

 In this example, two different sizes are provided for an image of a clock using the
 `srcset` attribute. One is 200px wide and the other is 400px
 wide. Further, the `sizes` attribute is provided to specify the
 width at which the image should be drawn given the viewport's width.

### HTML

 Specifically, for viewports up to 400px wide, the image is drawn at a width of 200px;
 otherwise, it's drawn at 300px.


```html
<p>Image height: <span class="size">?</span>px (resize to update)</p>
<img
 src="/en-US/docs/Web/HTML/Element/img/clock-demo-200px.png"
 alt="Clock"
 srcset="
 /en-US/docs/Web/HTML/Element/img/clock-demo-200px.png 200w,
 /en-US/docs/Web/HTML/Element/img/clock-demo-400px.png 400w
 "
 sizes="(max-width: 400px) 200px, 300px" />
```

### JavaScript

 The JavaScript code looks at the `height` to determine the height of the
 image given the width at which it's currently drawn.


```js
const clockImage = document.querySelector("img");
let output = document.querySelector(".size");

const updateHeight = (event) => {
  output.innerText = clockImage.height;
};

window.addEventListener("load", updateHeight);
window.addEventListener("resize", updateHeight);
```

### Result

This example may be easier to try out in its own window.

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

| Specification |
| --- |
| HTML Standard # dom-img-height-dev |

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

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

See also
--------

* `HTMLCanvasElement.height`
* `HTMLObjectElement.height`
* `HTMLVideoElement.height`