recursal/MDN huggingface dataset:
MediaRecorder: resume event
===========================

 The **`resume`** event of the `MediaRecorder` interface is fired when
 `MediaRecorder.resume()` is called.

Syntax
------

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


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

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

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

A generic `Event`.

Example
-------


```js
pause.onclick = () => {
  if (MediaRecorder.state === "recording") {
    mediaRecorder.pause();
    // recording paused
  } else if (MediaRecorder.state === "paused") {
    mediaRecorder.resume();
    // resume recording
  }
};

mediaRecorder.onpause = () => {
  // do something in response to
  // recording being paused
};

mediaRecorder.onresume = () => {
  // do something in response to
  // recording being resumed
};
```

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

| Specification |
| --- |
| MediaStream Recording # dom-mediarecorder-onresume |

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

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

See also
--------

* Using the MediaStream Recording API
* Web Dictaphone: MediaRecorder +
 getUserMedia + Web Audio API visualization demo, by Chris Mills (source on GitHub.)
* simpl.info MediaStream Recording demo, by Sam Dutton.
* `Navigator.getUserMedia`
MediaRecorder: pause() method
=============================

 The **`pause()`** method of the `MediaRecorder` interface is used
 to pause recording of media streams.

 When a `MediaRecorder` object's `pause()`method is called, the
 browser queues a task that runs the below steps:

1. If `MediaRecorder.state` is "inactive", raise a DOM
 `InvalidState` error and terminate these steps. If not, continue to the
 next step.
2. Set `MediaRecorder.state` to "paused".
3. Stop gathering data into the current `Blob`, but keep it available so
 that recording can be resumed later on.
4. Raise a `pause` event.
Syntax
------


```js
pause()
```

### Parameters

None.

### Return value

None (`undefined`).

### Exceptions

`InvalidStateError` `DOMException`

 Thrown if the `MediaRecorder` is currently `"inactive"`; you cannot pause
 the recording if the `MediaRecorder` is not active. If you call `pause()` while already paused,
 the method silently does nothing.


Examples
--------


```js
pause.onclick = () => {
  mediaRecorder.pause();
  console.log("recording paused");
};
```

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

| Specification |
| --- |
| MediaStream Recording # dom-mediarecorder-pause |

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

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

See also
--------

* Using the MediaStream Recording API
* Web Dictaphone: MediaRecorder +
 getUserMedia + Web Audio API visualization demo, by Chris Mills (source on GitHub.)
* simpl.info MediaStream Recording demo, by Sam Dutton.
* `Navigator.getUserMedia`
MediaRecorder: dataavailable event
==================================

 The **`dataavailable`** event of the `MediaRecorder` interface is fired when the MediaRecorder delivers media
 data to your application for its use. The data is provided in a `Blob`
 object that contains the data. This occurs in four situations:

* When the media stream ends, any media data not already delivered to your
 `ondataavailable` handler is passed in a single `Blob`.
* When `MediaRecorder.stop()` is called, all media data which has been
 captured since recording began or the last time a `dataavailable` event
 occurred is delivered in a `Blob`; after this, capturing ends.
* When `MediaRecorder.requestData()` is called, all media data which has
 been captured since recording began or the last time a `dataavailable`
 event occurred is delivered; then a new `Blob` is created and media capture
 continues into that blob.
* If a `timeslice` property was passed into the
 `MediaRecorder.start()` method that started media capture, a
 `dataavailable` event is fired every `timeslice` milliseconds.
 That means that each blob will have a specific time duration (except the last blob,
 which might be shorter, since it would be whatever is left over since the last event).
 So if the method call looked like this — `recorder.start(1000);` — the
 `dataavailable` event would fire after each second of media capture, and
 our event handler would be called every second with a blob of media data that's one
 second long. You can use `timeslice` alongside
 `MediaRecorder.stop()` and `MediaRecorder.requestData()` to
 produce multiple same-length blobs plus other shorter blobs as well.

**Note:** The `Blob` containing the media data is available in the
 `dataavailable` event's `data` property.


Syntax
------

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


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

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

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

A `BlobEvent`. Inherits from `Event`.

Event

BlobEventExample
-------


```js
const chunks = [];

mediaRecorder.onstop = (e) => {
  console.log("data available after MediaRecorder.stop() called.");

  const audio = document.createElement("audio");
  audio.controls = true;
  const blob = new Blob(chunks, { type: mediaRecorder.mimeType });
  const audioURL = window.URL.createObjectURL(blob);
  audio.src = audioURL;
  console.log("recorder stopped");
};

mediaRecorder.ondataavailable = (e) => {
  chunks.push(e.data);
};
```

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

| Specification |
| --- |
| MediaStream Recording # dom-mediarecorder-ondataavailable |

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

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

See also
--------

* Using the MediaStream Recording API
* Web Dictaphone: MediaRecorder +
 getUserMedia + Web Audio API visualization demo, by Chris Mills (source on GitHub.)
* simpl.info MediaStream Recording demo, by Sam Dutton.
* `Navigator.getUserMedia()`
EditContext: EditContext() constructor
======================================

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

The **`EditContext()`** constructor returns a new `EditContext` object.

Syntax
------


```js
new EditContext()
new EditContext(options)
```

### Parameters

`options` Optional

An optional object with the following properties:

`text`

A string to set the initial text of the `EditContext`.

`selectionStart`

A number to set the initial selection start of the `EditContext`.

`selectionEnd`

A number to set the initial selection end of the `EditContext`.


Examples
--------

### Instantiating an `EditContext` object

The following example creates a new `EditContext` object with the initial text "Hello world!" and the initial selection covering the entire text.


```html
<div id="editor"></div>
```



```js
const initialText = "Hello world!";

const editContext = new EditContext({
  text: initialText,
  selectionStart: 0,
  selectionEnd: initialText.length,
});

const editorElement = document.getElementById("editor");
editorElement.editContext = editContext;

console.log(
  `EditContext object ready. Text: ${editContext.text}. Selection: ${editContext.selectionStart} - ${editContext.selectionEnd}.`,
);
```

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

| Specification |
| --- |
| EditContext API # dom-editcontext-constructor |

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

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

See also
--------

* The `EditContext` interface it belongs to.
EditContext: updateSelection() method
=====================================

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

The **`updateSelection()`** method of the `EditContext` interface updates the internal state of the selection within the editable text context. This method is used to update the selection state when the user interacts with the text rendering in the `EditContext`'s associated element, such as by clicking or dragging the mouse, or by using the keyboard.

Syntax
------


```js
updateSelection(start, end)
```

### Parameters

`start`

A number representing the new selection start.

`end`

A number representing the new selection end.

If the `start` and `end` values are the same, the selection is equivalent to a caret.

### Exceptions

* If only one argument is provided, a `TypeError` `DOMException` is thrown.
* If either argument is not a positive number, a `DOMException` is thrown.
* If `start` is greater than `end`, a `DOMException` is thrown.
Examples
--------

### Updating the selection when the user interacts with the text

This example shows how to use the `updateSelection` method to update the selection in the `EditContext` of a `canvas` element when the arrow keys are used to move the caret or select text in the editable region.


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



```js
const canvas = document.getElementById("editor-canvas");
const editContext = new EditContext();
canvas.editContext = editContext;

canvas.addEventListener("keydown", (e) => {
  if (e.key == "ArrowLeft") {
    const newPosition = Math.max(editContext.selectionStart - 1, 0);

    if (e.shiftKey) {
      editContext.updateSelection(newPosition, editContext.selectionEnd);
    } else {
      editContext.updateSelection(newPosition, newPosition);
    }
  } else if (e.key == "ArrowRight") {
    const newPosition = Math.min(
      editContext.selectionEnd + 1,
      editContext.text.length,
    );

    if (e.shiftKey) {
      editContext.updateSelection(editContext.selectionStart, newPosition);
    } else {
      editContext.updateSelection(newPosition, newPosition);
    }
  }

  console.log(
    `The new EditContext selection is ${editContext.selectionStart}, ${editContext.selectionEnd}`,
  );
});
```

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

| Specification |
| --- |
| EditContext API # dom-editcontext-updateselection |

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

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

See also
--------

* The `EditContext` interface it belongs to.
EditContext: updateText() method
================================

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

The **`updateText()`** method of the `EditContext` interface updates the internal text content of an `EditContext` object.

This method doesn't need to be used when the user types text in the associated element. The `EditContext` object will automatically update its internal text content, and will fire `textupdate` events as needed.

This method can, however, be used when the user interacts with the text content in other ways, such as when pasting text from the clipboard.

Syntax
------


```js
updateText(rangeStart, rangeEnd, text)
```

### Parameters

`rangeStart`

A number representing the start of the range of text to replace.

`rangeEnd`

A number representing the end of the range of text to replace.

`text`

A string representing the new text content.

### Exceptions

* If less than three arguments are provided, a `TypeError` `DOMException` is thrown.
* if `rangeStart` is greater than `rangeEnd`, a `DOMException` is thrown.
Examples
--------

### Updating the editor when the user pastes text in it

This example shows how to use the `updateText` method to update the text content in the `EditContext` of a `<canvas>` element when the user presses the `Ctrl`/`Cmd` + `V` shortcut to paste some text.

The example also uses the `Clipboard.readText()` method to read the text from the clipboard.


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



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

const editContext = new EditContext();
canvas.editContext = editContext;

function render() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillText(editContext.text, 0, 40);
}

editContext.addEventListener("textupdate", (e) => {
  render();
});

canvas.addEventListener("keydown", async (e) => {
  if (e.key == "v" && (e.ctrlKey || e.metaKey)) {
    const pastedText = await navigator.clipboard.readText();
    console.log(
      `The user pasted the text: ${pastedText}. Updating the EditContext text.`,
    );

    editContext.updateText(
      editContext.selectionStart,
      editContext.selectionEnd,
      pastedText,
    );

    editContext.updateSelection(
      editContext.selectionStart + pastedText.length,
      editContext.selectionStart + pastedText.length,
    );

    render();
  }
});
```

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

| Specification |
| --- |
| EditContext API # dom-editcontext-updatetext |

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

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

See also
--------

* The `EditContext` interface it belongs to.
EditContext: updateSelectionBounds() method
===========================================

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

The **`EditContext.updateSelectionBounds()`** method of the `EditContext` interface is used to inform the operating system about the bounds of the text selection within the editable region that's associated with the `EditContext` object.

Call this method to tell the operating system the bounds of the user's current selection. You should call the method whenever the user's selection changes in the editable region. The selection bounds are used by the operating system to help position the IME window or any other platform-specific editing-related UI surfaces.

Syntax
------


```js
updateSelectionBounds(selectionBounds)
```

### Parameters

`selectionBounds`

A `DOMRect` object representing the new selection bounds.

### Exceptions

* If no argument is provided, a `TypeError` `DOMException` is thrown.
* If the provided argument is not a `DOMRect` a `TypeError` `DOMException` is thrown.
Specifications
--------------

| Specification |
| --- |
| EditContext API # dom-editcontext-updateselectionbounds |

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

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

See also
--------

* The `EditContext` interface it belongs to.
EditContext: selectionEnd property
==================================

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

The **`selectionEnd`** read-only property of the `EditContext` refers to the offset, within the editable text content, of the end of the current selection.

Value
-----

A `Number`

Examples
--------

### Using `selectionEnd` to render the user selection in an editable canvas

This example shows how to use the `selectionStart` and `selectionEnd` properties to draw the current selection in a `<canvas>` element that's associated to an `EditContext`.


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



```js
const ANCHOR\_X = 10;
const ANCHOR\_Y = 30;
const FONT\_SIZE = 20;

const canvas = document.getElementById("editor-canvas");
const ctx = canvas.getContext("2d");
ctx.font = `${FONT\_SIZE}px Arial`;

const editContext = new EditContext({
  text: "Hello world!",
  selectionStart: 6,
  selectionEnd: 11,
});
canvas.editContext = editContext;

function render() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // Render the entire text content first.
  ctx.fillStyle = "black";
  ctx.fillText(editContext.text, ANCHOR\_X, ANCHOR\_Y);

  // Get the width from the start of the text to the start of the selection.
  const selectionStartX = ctx.measureText(
    editContext.text.substring(0, editContext.selectionStart),
  );

  // Get the width of the selection.
  const selectionWidth = ctx.measureText(
    editContext.text.substring(
      editContext.selectionStart,
      editContext.selectionEnd,
    ),
  );

  // Draw a rectangle on top of the text to represent the selection.
  ctx.fillStyle = "blue";
  ctx.fillRect(
    selectionStartX.width + ANCHOR\_X,
    ANCHOR\_Y - FONT\_SIZE,
    selectionWidth.width,
    FONT\_SIZE,
  );

  // Re-render just the selected text in white, over the rectangle.
  ctx.fillStyle = "white";
  ctx.fillText(
    editContext.text.substring(
      editContext.selectionStart,
      editContext.selectionEnd,
    ),
    selectionStartX.width + ANCHOR\_X,
    ANCHOR\_Y,
  );
}

render();
```

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

| Specification |
| --- |
| EditContext API # dom-editcontextinit-selectionend |

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

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

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

The **`attachedElements()`** method of the `EditContext` interface returns an `Array` that contains only one item. This item is the element that's associated with the `EditContext` object.

Syntax
------


```js
attachedElements()
```

### Return value

An `Array` containing one `HTMLElement` object.

There can only be one element associated to an `EditContext` instance, so the returned array will always contain one element. If the API is extended in the future to support multiple associated elements, the return value will be an array containing multiple elements.

Examples
--------

### Getting the element associated with an `EditContext` instance

This example shows how to use the `attachedElements` method to get the element that's associated with an `EditContext` instance.


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



```js
const canvas = document.getElementById("editor-canvas");
const editContext = new EditContext();
canvas.editContext = editContext;

const attachedElements = editContext.attachedElements();
console.log(attachedElements[0] === canvas); // true
```

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

| Specification |
| --- |
| EditContext API # dom-editcontext-attachedelements |

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

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

See also
--------

* The `EditContext` interface it belongs to.
EditContext: textupdate event
=============================

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

The `textupdate` event of the `EditContext` interface fires when the user has made changes to the text or selection of an editable region that's attached to an `EditContext` instance.

This event makes it possible to render the updated text and selection in the UI, in response to user input.

Syntax
------

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


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

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

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

A `TextUpdateEvent`. Inherits from `Event`.

Event properties
----------------

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

`TextUpdateEvent.updateRangeStart` Read only 

Returns the index of the first character in the range of text that was updated.

`TextUpdateEvent.updateRangeEnd` Read only 

Returns the index of the last character in the range of text that was updated.

`TextUpdateEvent.text` Read only 

Returns the text that was inserted in the updated range.

`TextUpdateEvent.selectionStart` Read only 

Returns the index of the first character in the new selection range, after the update.

`TextUpdateEvent.selectionEnd` Read only 

Returns the index of the last character in the new selection range, after the update.

Examples
--------

### Rendering the updated text on `textupdate`

In the following example, the `textupdate` event of the EditContext API is used to render the text a user enters in an editable `<canvas>` element.


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



```js
const canvas = document.getElementById("editor-canvas");
const ctx = canvas.getContext("2d");
const editContext = new EditContext();
canvas.editContext = editContext;

editContext.addEventListener("textupdate", (e) => {
  // When the user has focus on the <canvas> and enters text,
  // this event is fired, and we use it to re-render the text.
  console.log(
    `The user entered the text: ${e.text} at ${e.updateRangeStart}. Re-rendering the full EditContext text`,
  );
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillText(editContext.text, 10, 10);
});
```

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

| Specification |
| --- |
| EditContext API # dom-editcontext-ontextupdate |

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

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

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

The **`EditContext.updateControlBounds()`** method of the `EditContext` interface is used to inform the operating system about the position and size of the editable text region of the `EditContext` object.

Call this method to tell the operating system the bounds of the current editable region. You should call it when initializing the EditContext, and whenever the editable region's bounds change such as when the webpage is resized. These bounds are used to position platform-specific editing-related UI surfaces such as an Input Method Editor (IME) window.

Syntax
------


```js
updateControlBounds(controlBounds)
```

### Parameters

`controlBounds`

A `DOMRect` object representing the new control bounds.

### Exceptions

* If no argument is provided, a `TypeError` `DOMException` is thrown.
* If the provided argument is not a `DOMRect` a `TypeError` `DOMException` is thrown.
Examples
--------

### Updating the control bounds when the editor is initialized and on window resize

This example shows how to use the `updateControlBounds()` method to tell the platform where the editable region is at all times.


```css
#editor {
  border: 1px solid black;
  height: 50vw;
  width: 50vh;
}
```



```html
<div id="editor"></div>
```



```js
const editorEl = document.getElementById("editor");
const editContext = new EditContext();
editorEl.editContext = editContext;

function updateControlBounds() {
  const editorBounds = editorEl.getBoundingClientRect();
  editContext.updateControlBounds(editorBounds);
  console.log(
    `Updated control bounds to ${editorBounds.x}, ${editorBounds.y}, ${editorBounds.width}, ${editorBounds.height}`,
  );
}

// Update the control bounds now.
updateControlBounds();
// And when the page is resized.
window.addEventListener("resize", updateControlBounds);
```

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

| Specification |
| --- |
| EditContext API # dom-editcontext-updatecontrolbounds |

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

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

See also
--------

* The `EditContext` interface it belongs to.