recursal/MDN huggingface dataset:
OfflineAudioContext: resume() method
====================================

 The **`resume()`** method of the
 `OfflineAudioContext` interface resumes the progression of time in an audio
 context that has been suspended. The promise resolves immediately because the
 `OfflineAudioContext` does not require the audio hardware.

Syntax
------


```js
resume()
```

### Parameters

None.

### Return value

A `Promise` resolving to `undefined`.

### Exceptions

The promise is rejected when an exception is encountered.

`InvalidStateError` `DOMException`

Returned if the context is not currently suspended or the rendering has not started.

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

| Specification |
| --- |
| Web Audio API # dom-offlineaudiocontext-resume |

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

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

 The **`length`** property of the
 `OfflineAudioContext` interface returns an integer representing the size of
 the buffer in sample-frames.

Value
-----

An integer representing the size of the buffer in sample-frames.

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

| Specification |
| --- |
| Web Audio API # dom-offlineaudiocontext-length |

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

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

 The **`suspend()`** method of the `OfflineAudioContext` interface schedules a suspension of the time
 progression in the audio context at the specified time and returns a promise. This is
 generally useful at the time of manipulating the audio graph synchronously on
 OfflineAudioContext.

 Note that the maximum precision of suspension is the size of the render quantum and the
 specified suspension time will be rounded down to the nearest render quantum boundary.
 For this reason, it is not allowed to schedule multiple suspends at the same quantized
 frame. Also scheduling should be done while the context is not running to ensure the
 precise suspension.

Syntax
------


```js
suspend(suspendTime)
```

### Parameters

`suspendTime`

A floating-point number specifying the suspend time, in seconds.

### Return value

A `Promise` resolving to `undefined`.

### Exceptions

The promise is rejected when any exception is encountered.

`InvalidStateError` `DOMException`

Returned if the quantized frame number is one of the following:

* a negative number
* less than or equal to the current time
* greater than or equal to the total render duration
* scheduled by another suspend for the same time

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

| Specification |
| --- |
| Web Audio API # dom-offlineaudiocontext-suspend |

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

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

The `complete` event of the `OfflineAudioContext` interface is fired when the rendering of an offline audio context is complete.

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("complete", (event) => {});

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

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

An `OfflineAudioCompletionEvent`. Inherits from `Event`.

Event

OfflineAudioCompletionEventEvent properties
----------------

*Also inherits properties from its parent, `Event`*.

`OfflineAudioCompletionEvent.renderedBuffer` Read only 

An `AudioBuffer` containing the result of processing an `OfflineAudioContext`.

Examples
--------

When processing is complete, you might want to use the `complete` event handler to prompt the user that the audio can now be played, and enable the play button:


```js
const offlineAudioCtx = new OfflineAudioContext();

offlineAudioCtx.addEventListener("complete", () => {
  console.log("Offline audio processing now complete");
  showModalDialog("Song processed and ready to play");
  playBtn.disabled = false;
});
```


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


```js
const offlineAudioCtx = new OfflineAudioContext();

offlineAudioCtx.oncomplete = () => {
  console.log("Offline audio processing now complete");
  showModalDialog("Song processed and ready to play");
  playBtn.disabled = false;
};
```

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

| Specification |
| --- |
| Web Audio API # OfflineAudioCompletionEvent |
| Web Audio API # dom-offlineaudiocontext-oncomplete |

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

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

See also
--------

* Web Audio API
OfflineAudioContext: OfflineAudioContext() constructor
======================================================

 The
 **`OfflineAudioContext()`** constructor—part of the Web Audio API—creates and returns a new
 `OfflineAudioContext` object instance, which can then be used to render
 audio to an `AudioBuffer` rather than to an audio output device.

Syntax
------


```js
new OfflineAudioContext(options)

new OfflineAudioContext(numberOfChannels, length, sampleRate)
```

### Parameters

 You can specify the parameters for the `OfflineAudioContext()` constructor
 as either the same set of parameters as are inputs into the
 `BaseAudioContext.createBuffer` method, or by passing those parameters in an
 `options` object. Either way, the individual parameters are the same.

`numberOfChannels`

 An integer specifying the number of channels the resulting
 `AudioBuffer` should have.


`length`

 An integer specifying the size of the buffer to create for the audio context, in
 sample-frames, where one sample-frame is a unit that can contain a single sample of
 audio data for every channel in the audio data. For example, a 5-second buffer with a
 `sampleRate` of 48000Hz would have a length of
 `5 * 48000 = 240000` sample-frames.


`sampleRate`

 The sample-rate of the linear audio data in sample-frames per second. All user
 agents are required to support a range of 8000Hz to 96000Hz, and may support a wider
 range than that. The most commonly-used rate is 44100Hz, which is the sample rate used
 by CD audio.



 It is important to note that, whereas you can create a new `AudioContext`
 using the `new AudioContext()` constructor
 with no arguments, the `OfflineAudioContext()` constructor requires three
 arguments, since it needs to create an `AudioBuffer`. This works in exactly
 the same way as when you create a new `AudioBuffer` with the
 `BaseAudioContext.createBuffer` method. For more detail, read Audio buffers: frames, samples and channels from our Basic concepts guide.

### Return value

 A new `OfflineAudioContext` object whose associated
 `AudioBuffer` is configured as requested.

 Like a regular `AudioContext`, an
 `OfflineAudioContext` can be the target of events, therefore it implements
 the `EventTarget` interface.

Examples
--------


```js
const offlineCtx = new OfflineAudioContext({
  numberOfChannels: 2,
  length: 44100 \* 40,
  sampleRate: 44100,
});
const source = offlineCtx.createBufferSource();
// …
```


 For a full working example, see our offline-audio-context-promise
 GitHub repo (see the source code too.)

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

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

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

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

 The **`MessageChannel()`** constructor of the `MessageChannel`
 interface returns a new `MessageChannel` object with two new
 `MessagePort` objects.

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

Syntax
------


```js
new MessageChannel()
```

### Parameters

None (`undefined`).

### Return value

A new `MessageChannel` object.

Examples
--------

 In the following code block, you can see a new channel being created using the
 `MessageChannel()` constructor.
 When the `<iframe>` has loaded,
 we pass `port2` to the `<iframe>` using `MessagePort.postMessage` along with a message.
 The `handleMessage` handler then responds to a message being sent back from the
 `<iframe>` (using `onmessage`), putting it into a paragraph.
 The `port1` is listened to, to check when the message arrives.


```js
const channel = new MessageChannel();
const para = document.querySelector("p");

const ifr = document.querySelector("iframe");
const otherWindow = ifr.contentWindow;

ifr.addEventListener("load", iframeLoaded, false);

function iframeLoaded() {
  otherWindow.postMessage("Hello from the main page!", "\*", [channel.port2]);
}

channel.port1.onmessage = handleMessage;
function handleMessage(e) {
  para.innerHTML = e.data;
}
```


 For a full working example,
 see our channel messaging basic demo
 on GitHub (run it live too).

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

| Specification |
| --- |
| HTML Standard # dom-messagechannel-dev |

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

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

See also
--------

* Using channel messaging
MessageChannel: port1 property
==============================

 The **`port1`** read-only property of the
 `MessageChannel` interface returns the first port of the message channel —
 the port attached to the context that originated the channel.

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

Value
-----

 A `MessagePort` object, the first port of the channel, that is the port
 attached to the context that originated the channel.

Examples
--------

 In the following code block, you can see a new channel being created using the
 `MessageChannel()` constructor. When the
 `<iframe>` has loaded, we pass `port2` to the
 `<iframe>` using `MessagePort.postMessage` along with a
 message. The `handleMessage` handler then responds to a message being sent
 back from the `<iframe>` (using `onmessage`),
 putting it into a paragraph. The `handleMessage` method is associated to the
 `port1` to listen when the message arrives.


```js
const channel = new MessageChannel();
const para = document.querySelector("p");

const ifr = document.querySelector("iframe");
const otherWindow = ifr.contentWindow;

ifr.addEventListener("load", iframeLoaded, false);

function iframeLoaded() {
  otherWindow.postMessage("Hello from the main page!", "\*", [channel.port2]);
}

channel.port1.onmessage = handleMessage;
function handleMessage(e) {
  para.innerHTML = e.data;
}
```

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

| Specification |
| --- |
| HTML Standard # dom-messagechannel-port1-dev |

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

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

See also
--------

* Using channel messaging
MessageChannel: port2 property
==============================

 The **`port2`** read-only property of the
 `MessageChannel` interface returns the second port of the message channel —
 the port attached to the context at the other end of the channel, which the message is
 initially sent to.

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

Value
-----

 A `MessagePort` object representing the second port of the channel, the
 port attached to the context at the other end of the channel.

Examples
--------

 In the following code block, you can see a new channel being created using the
 `MessageChannel()` constructor. When the
 IFrame has loaded, we pass `port2` to the IFrame using
 `MessagePort.postMessage` along with a message. The
 `handleMessage` handler then responds to a message being sent back from the
 IFrame (using `onmessage`), putting it into a paragraph.
 `port1` is listened to, to check when the message arrives.


```js
const channel = new MessageChannel();
const para = document.querySelector("p");

const ifr = document.querySelector("iframe");
const otherWindow = ifr.contentWindow;

ifr.addEventListener("load", iframeLoaded, false);

function iframeLoaded() {
  otherWindow.postMessage("Hello from the main page!", "\*", [channel.port2]);
}

channel.port1.onmessage = handleMessage;
function handleMessage(e) {
  para.innerHTML = e.data;
}
```


For a full working example, see our channel messaging basic demo on GitHub (run it live too).

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

| Specification |
| --- |
| HTML Standard # dom-messagechannel-port2-dev |

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

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

See also
--------

* Using channel messaging
TextMetrics: actualBoundingBoxAscent property
=============================================

The read-only **`actualBoundingBoxAscent`** property of the `TextMetrics` interface is a `double` giving the distance from the horizontal line indicated by the `CanvasRenderingContext2D.textBaseline` attribute to the top of the bounding rectangle used to render the text, in CSS pixels.

Examples
--------


```js
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
const text = ctx.measureText("foo"); // returns TextMetrics object

text.actualBoundingBoxAscent; // 8;
```

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

| Specification |
| --- |
| HTML Standard # dom-textmetrics-actualboundingboxascent-dev |

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

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

See also
--------

* `TextMetrics`
TextMetrics: ideographicBaseline property
=========================================

The read-only `ideographicBaseline` property of the `TextMetrics` interface is a `double` giving the distance from the horizontal line indicated by the `CanvasRenderingContext2D.textBaseline` property to the ideographic baseline of the line box, in CSS pixels.

Examples
--------


```js
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
const text = ctx.measureText("foo"); // returns TextMetrics object

text.ideographicBaseline; // -1.201171875;
```

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

| Specification |
| --- |
| HTML Standard # dom-textmetrics-ideographicbaseline-dev |

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

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

See also
--------

* `TextMetrics`
TextMetrics: actualBoundingBoxLeft property
===========================================

The read-only `actualBoundingBoxLeft` property of the `TextMetrics` interface is a `double` giving the distance parallel to the baseline from the alignment point given by the `CanvasRenderingContext2D.textAlign` property to the left side of the bounding rectangle of the given text, in CSS pixels; positive numbers indicating a distance going left from the given alignment point.

Examples
--------


```js
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
const text = ctx.measureText("foo"); // returns TextMetrics object

text.actualBoundingBoxLeft; // 0;
```

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

| Specification |
| --- |
| HTML Standard # dom-textmetrics-actualboundingboxleft-dev |

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

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

See also
--------

* `TextMetrics`
TextMetrics: actualBoundingBoxRight property
============================================

The read-only `actualBoundingBoxRight` property of the `TextMetrics` interface is a `double` giving the distance parallel to the baseline from the alignment point given by the `CanvasRenderingContext2D.textAlign` property to the right side of the bounding rectangle of the given text, in CSS pixels.

Examples
--------


```js
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
const text = ctx.measureText("foo"); // returns TextMetrics object

text.actualBoundingBoxRight; // 15.633333333333333;
```

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

| Specification |
| --- |
| HTML Standard # dom-textmetrics-actualboundingboxright-dev |

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

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

See also
--------

* `TextMetrics`
TextMetrics: fontBoundingBoxDescent property
============================================

The read-only `fontBoundingBoxDescent` property of the `TextMetrics` interface returns the distance from the horizontal line indicated by the `CanvasRenderingContext2D.textBaseline` attribute to the bottom of the bounding rectangle of all the fonts used to render the text, in CSS pixels.

Value
-----

A number, in CSS pixels.

Examples
--------

The code below shows how you can get the `fontBoundingBoxDescent` for text in a particular font.


```js
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");

ctx.font = "25px serif";
const text = "Foo";

const textMetrics = ctx.measureText("foo"); // returns TextMetrics object
const descentCssPixels = textMetrics.fontBoundingBoxDescent;
```


```
<p id="log"></p>
```


```
const log = document.getElementById("log");
log.innerText = `fontBoundingBoxDescent: ${descentCssPixels}`;
```


The descent in CSS pixels for the text "Foo" in a 25px serif font is shown below.

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

| Specification |
| --- |
| HTML Standard # dom-textmetrics-fontboundingboxdescent-dev |

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

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

See also
--------

* `TextMetrics.fontBoundingBoxAscent`
* `TextMetrics`
TextMetrics: fontBoundingBoxAscent property
===========================================

The read-only `fontBoundingBoxAscent` property of the `TextMetrics` interface returns the distance from the horizontal line indicated by the `CanvasRenderingContext2D.textBaseline` attribute, to the top of the highest bounding rectangle of all the fonts used to render the text, in CSS pixels.

Value
-----

A number, in CSS pixels.

Examples
--------

The code below shows how you can get the `fontBoundingBoxAscent` for some text in a particular font.


```js
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");

ctx.font = "25px serif";
const text = "Foo";

const textMetrics = ctx.measureText("foo"); // returns TextMetrics object
const ascentCssPixels = textMetrics.fontBoundingBoxAscent;
```


```
<p id="log"></p>
```


```
const log = document.getElementById("log");
log.innerText = `fontBoundingBoxAscent: ${ascentCssPixels}`;
```


The ascent in CSS pixels for the text "Foo" in a 25px serif font is shown below.

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

| Specification |
| --- |
| HTML Standard # dom-textmetrics-fontboundingboxascent-dev |

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

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

See also
--------

* `TextMetrics.fontBoundingBoxDescent`
* `TextMetrics`
TextMetrics: width property
===========================

The read-only **`width`** property of the `TextMetrics` interface contains the text's advance width (the width of that inline box) in CSS pixels.

Examples
--------

Start with this `<canvas>` element:


```html
<canvas id="canvas"></canvas>
```


You can get a `TextMetrics` object using the following code:


```js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

let text = ctx.measureText("foo"); // TextMetrics object
text.width; // 16;
```

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

| Specification |
| --- |
| HTML Standard # dom-textmetrics-width-dev |

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

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

See also
--------

* `TextMetrics`
TextMetrics: emHeightAscent property
====================================

The read-only `emHeightAscent` property of the `TextMetrics` interface returns the distance from the horizontal line indicated by the `CanvasRenderingContext2D.textBaseline` property to the top of the *em* square in the line box, in CSS pixels.

Value
-----

A number, in CSS pixels.

Examples
--------


```js
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
const text = ctx.measureText("foo"); // returns TextMetrics object

text.emHeightAscent; // 7.59765625;
```

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

| Specification |
| --- |
| HTML Standard # dom-textmetrics-emheightascent-dev |

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

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

See also
--------

* `TextMetrics`
TextMetrics: alphabeticBaseline property
========================================

The read-only `alphabeticBaseline` property of the `TextMetrics` interface is a `double` giving the distance from the horizontal line indicated by the `CanvasRenderingContext2D.textBaseline` property to the alphabetic baseline of the line box, in CSS pixels.

Examples
--------


```js
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
const text = ctx.measureText("foo"); // returns TextMetrics object

text.alphabeticBaseline; // -0;
```

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

| Specification |
| --- |
| HTML Standard # dom-textmetrics-alphabeticbaseline-dev |

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

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

See also
--------

* `TextMetrics`
TextMetrics: hangingBaseline property
=====================================

The read-only `hangingBaseline` property of the `TextMetrics` interface is a `double` giving the distance from the horizontal line indicated by the `CanvasRenderingContext2D.textBaseline` property to the hanging baseline of the line box, in CSS pixels.

Examples
--------


```js
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
const text = ctx.measureText("foo"); // returns TextMetrics object

text.hangingBaseline; // 6.078125;
```

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

| Specification |
| --- |
| HTML Standard # dom-textmetrics-hangingbaseline-dev |

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

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

See also
--------

* `TextMetrics`
TextMetrics: actualBoundingBoxDescent property
==============================================

The read-only `actualBoundingBoxDescent` property of the `TextMetrics` interface is a `double` giving the distance from the horizontal line indicated by the `CanvasRenderingContext2D.textBaseline` attribute to the bottom of the bounding rectangle used to render the text, in CSS pixels.

Examples
--------


```js
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
const text = ctx.measureText("foo"); // returns TextMetrics object

text.actualBoundingBoxDescent; // 0;
```

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

| Specification |
| --- |
| HTML Standard # dom-textmetrics-actualboundingboxdescent-dev |

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

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

See also
--------

* `TextMetrics`
TextMetrics: emHeightDescent property
=====================================

The read-only `emHeightDescent` property of the `TextMetrics` interface returns the distance from the horizontal line indicated by the `CanvasRenderingContext2D.textBaseline` property to the bottom of the *em* square in the line box, in CSS pixels.

Value
-----

A number, in CSS pixels.

Examples
--------


```js
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
const text = ctx.measureText("foo"); // returns TextMetrics object

text.emHeightDescent; // -2.40234375;
```

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

| Specification |
| --- |
| HTML Standard # dom-textmetrics-emheightdescent-dev |

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

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

See also
--------

* `TextMetrics`