recursal/MDN huggingface dataset:
AudioWorkletGlobalScope: sampleRate property
============================================

The read-only **`sampleRate`** property of the `AudioWorkletGlobalScope` interface returns a float that represents the sample rate of the associated `BaseAudioContext` the worklet belongs to.

Value
-----

A floating-point number representing the associated sample rate.

Examples
--------

The `AudioWorkletProcessor` has access to the specific `AudioWorkletGlobalScope` properties:


```js
// AudioWorkletProcessor defined in : test-processor.js
class TestProcessor extends AudioWorkletProcessor {
  constructor() {
    super();

    // Logs the current sample-frame and time at the moment of instantiation.
    // They are accessible from the AudioWorkletGlobalScope.
    console.log(currentFrame);
    console.log(currentTime);
  }

  // The process method is required - output silence,
  // which the outputs are already filled with.
  process(inputs, outputs, parameters) {
    return true;
  }
}

// Logs the sample rate, that is not going to change ever,
// because it's a read-only property of a BaseAudioContext
// and is set only during its instantiation.
console.log(sampleRate);

// You can declare any variables and use them in your processors
// for example it may be an ArrayBuffer with a wavetable.
const usefulVariable = 42;
console.log(usefulVariable);

registerProcessor("test-processor", TestProcessor);
```


The main script loads the processor, creates an instance of `AudioWorkletNode`, passes the name of the processor to it, and connects the node to an audio graph. We should see the output of `console.log()` calls in the console:


```js
const audioContext = new AudioContext();
await audioContext.audioWorklet.addModule("test-processor.js");
const testNode = new AudioWorkletNode(audioContext, "test-processor");
testNode.connect(audioContext.destination);
```

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

| Specification |
| --- |
| Web Audio API # dom-audioworkletglobalscope-samplerate |

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

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

See also
--------

* Web Audio API
* Using the Web Audio API
AudioWorkletGlobalScope: registerProcessor() method
===================================================

 The **`registerProcessor`** method of the
 `AudioWorkletGlobalScope` interface registers a class constructor derived
 from `AudioWorkletProcessor` interface under a specified *name*.

Syntax
------


```js
registerProcessor(name, processorCtor)
```

### Parameters

`name`

A string representing the name under which the processor will be registered.

`processorCtor`

The constructor of a class derived from `AudioWorkletProcessor`.



**Note:** A key-value pair `{ name: constructor }`
 is saved internally in the `AudioWorkletGlobalScope` once the processor
 is registered. The *name* is to be referred to when creating an
 `AudioWorkletNode` based on the registered processor. A new processor by
 the given name is internally created and associated with the new node.


### Return value

None (`undefined`).

### Exceptions

`NotSupportedError` `DOMException`

Thrown under the following conditions:

* The *name* is an empty string.
* A constructor under the given *name* is already registered. Registering
 the same name twice is not allowed.

`TypeError`

Thrown under the following conditions:

* The *processorCtor* is not a callable constructor.
* The `parameterDescriptors` property of the constructor exists and doesn't return an
 array of `AudioParamDescriptor`-based objects.

Examples
--------

In this example we create a custom `AudioWorkletNode` that outputs silence.

 First, we need to define a custom `AudioWorkletProcessor` and register it.
 Note that this should be done in a separate file.


```js
// test-processor.js
class TestProcessor extends AudioWorkletProcessor {
  process(inputs, outputs, parameters) {
    return true;
  }
}

registerProcessor("test-processor", TestProcessor);
```


 Next, in our main script file we'll load the processor, create an instance of
 `AudioWorkletNode` — passing it the processor name that we used when calling
 `registerProcessor` — and connect it to an audio graph.


```js
const audioContext = new AudioContext();
await audioContext.audioWorklet.addModule("test-processor.js");
const node = new AudioWorkletNode(audioContext, "test-processor");
node.connect(audioContext.destination);
```

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

| Specification |
| --- |
| Web Audio API # dom-audioworkletglobalscope-registerprocessor |

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

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

See also
--------

* Using the Web Audio API
AudioWorkletGlobalScope: currentTime property
=============================================

The read-only **`currentTime`** property of the `AudioWorkletGlobalScope` interface returns a double that represents the ever-increasing context time of the audio block being processed. It is equal to the `currentTime` property of the `BaseAudioContext` the worklet belongs to.

Value
-----

A floating-point number representing the time.

Examples
--------

The `AudioWorkletProcessor` has access to the specific `AudioWorkletGlobalScope` properties:


```js
// AudioWorkletProcessor defined in : test-processor.js
class TestProcessor extends AudioWorkletProcessor {
  constructor() {
    super();

    // Logs the current sample-frame and time at the moment of instantiation.
    // They are accessible from the AudioWorkletGlobalScope.
    console.log(currentFrame);
    console.log(currentTime);
  }

  // The process method is required - output silence,
  // which the outputs are already filled with.
  process(inputs, outputs, parameters) {
    return true;
  }
}

// Logs the sample rate, that is not going to change ever,
// because it's a read-only property of a BaseAudioContext
// and is set only during its instantiation.
console.log(sampleRate);

// You can declare any variables and use them in your processors
// for example it may be an ArrayBuffer with a wavetable.
const usefulVariable = 42;
console.log(usefulVariable);

registerProcessor("test-processor", TestProcessor);
```


The main script loads the processor, creates an instance of `AudioWorkletNode`, passes the name of the processor to it, and connects the node to an audio graph. We should see the output of `console.log()` calls in the console:


```js
const audioContext = new AudioContext();
await audioContext.audioWorklet.addModule("test-processor.js");
const testNode = new AudioWorkletNode(audioContext, "test-processor");
testNode.connect(audioContext.destination);
```

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

| Specification |
| --- |
| Web Audio API # dom-audioworkletglobalscope-currenttime |

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

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

See also
--------

* Web Audio API
* Using the Web Audio API
AbortSignal: aborted property
=============================

The **`aborted`** read-only property returns a value that indicates whether the asynchronous operations the signal is communicating with are aborted (`true`) or not (`false`).

Value
-----

`true` (aborted) or `false`

Examples
--------

 In the following snippet, we create a new `AbortController` object, and get its `AbortSignal` (available using the `signal` property).
 Later on, using the `aborted` property, we check whether or not the signal has been aborted, and send an appropriate log to the console.


```js
const controller = new AbortController();
const signal = controller.signal;

// …

if (signal.aborted) {
  console.log("Request has been aborted");
} else {
  console.log("Request not aborted");
}
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-abortsignal-aborted① |

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

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

See also
--------

* Fetch API
AbortSignal: reason property
============================

The **`reason`** read-only property returns a JavaScript value that indicates the abort reason.

 The property is `undefined` when the signal has not been aborted.
 It can be set to a specific value when the signal is aborted, using `AbortController.abort()` or `AbortSignal.abort()`.
 If not explicitly set in those methods, it defaults to "AbortError" `DOMException`.

Value
-----

A JavaScript value that indicates the abort reason, or `undefined`, if not aborted.

Examples
--------

 In the following snippet, we create a new `AbortController` object, and get its `AbortSignal` (available using the `signal` property).
 Later on, using the `aborted` property, we check whether or not the signal has been aborted, and log the abort status and reason to the console.


```js
const controller = new AbortController();
const signal = controller.signal;

// …

if (signal.aborted) {
  if (signal.reason) {
    console.log(`Request aborted with reason: ${signal.reason}`);
  } else {
    console.log("Request aborted but no reason was given.");
  }
} else {
  console.log("Request not aborted");
}
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-abortsignal-reason① |

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

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

See also
--------

* Fetch API
AbortSignal: throwIfAborted() method
====================================

The **`throwIfAborted()`** method throws the signal's abort `reason` if the signal has been aborted; otherwise it does nothing.

An API that needs to support aborting can accept an `AbortSignal` object and use `throwIfAborted()` to test and throw when the `abort` event is signalled.

This method can also be used to abort operations at particular points in code, rather than passing to functions that take a signal.

Syntax
------


```js
throwIfAborted()
```

### Parameters

None.

### Return value

None (`undefined`).

Examples
--------

The examples below come from the specification.

### Aborting a polling operation

This example demonstrates how you can use `throwIfAborted()` to abort a polling operation.

 Consider an asynchronous `waitForCondition()` function that is called with another asynchronous function `func`, a target value `targetValue`, and an `AbortSignal`.
 The method compares the result of `func` with `targetValue` in a loop, returning when they match.


```js
async function waitForCondition(func, targetValue, { signal } = {}) {
  while (true) {
    signal?.throwIfAborted();

    const result = await func();
    if (result === targetValue) {
      return;
    }
  }
}
```


 On each iteration of the loop, we use `throwIfAborted()` to throw the signal's `reason` if the operation has been aborted (and otherwise do nothing).
 If the signal is aborted, this will cause the `waitForCondition()` promise to be rejected .

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-abortsignal-throwifaborted① |

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

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

See also
--------

* Fetch API
AbortSignal: any() static method
================================

The **`AbortSignal.any()`** static method takes an iterable of abort signals and returns an `AbortSignal`. The returned abort signal is aborted when any of the input iterable abort signals are aborted. The abort reason will be set to the reason of the first signal that is aborted. If any of the given abort signals are already aborted then so will be the returned `AbortSignal`.

Syntax
------


```js
AbortSignal.any(iterable)
```

### Parameters

`iterable`

An iterable (such as an `Array`) of abort signals.

### Return value

A `AbortSignal` that is:

* **Already aborted**, if any of the abort signals given is already aborted. The returned `AbortSignal`'s reason will be already set to the `reason` of the first abort signal that was already aborted.
* **Asynchronously aborted**, when any abort signal in `iterable` aborts. The `reason` will be set to the reason of the first abort signal that is aborted.
Examples
--------

### Using `AbortSignal.any()`

This example demonstrates combining both a signal from an `AbortController`, and a timeout signal from `AbortSignal.timeout`.


```js
const cancelDownloadButton = document.getElementById("cancelDownloadButton");

const userCancelController = new AbortController();

cancelDownloadButton.addEventListener("click", () => {
  userCancelController.abort();
});

// Timeout after 5 minutes
const timeoutSignal = AbortSignal.timeout(1\_000 \* 60 \* 5);

// This signal will abort when either the user clicks the cancel button or 5 minutes is up
// whichever is sooner
const combinedSignal = AbortSignal.any([
  userCancelController.signal,
  timeoutSignal,
]);

try {
  const res = await fetch(someUrlToDownload, {
    // Stop the fetch when any of the
    signal: combinedSignal,
  });
  const body = await res.blob();
  // Do something with downloaded content:
  // ...
} catch (e) {
  if (e.name === "AbortError") {
    // Cancelled by the user
  } else if (e.name === "TimeoutError") {
    // Show user that download timed out
  } else {
    // Other error, e.g. network error
  }
}
```

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

| Specification |
| --- |
| DOM Standard # dom-abortsignal-any |

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

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

The **`AbortSignal.timeout()`** static method returns an `AbortSignal` that will automatically abort after a specified time.

 The signal aborts with a `TimeoutError` `DOMException` on timeout, or with `AbortError` `DOMException` due to pressing a browser stop button (or some other inbuilt "stop" operation).
 This allows UIs to differentiate timeout errors, which typically require user notification, from user-triggered aborts that do not.

The timeout is based on active rather than elapsed time, and will effectively be paused if the code is running in a suspended worker, or while the document is in a back-forward cache ("bfcache").

To combine multiple signals, you can use `AbortSignal.any()`, for example, to directly abort a download using either a timeout signal or by calling `AbortController.abort()`.

Syntax
------


```js
AbortSignal.timeout(time)
```

### Parameters

`time`

The "active" time in milliseconds before the returned `AbortSignal` will abort.

### Return value

An `AbortSignal`.

The signal will abort with its `AbortSignal.reason` property set to a `TimeoutError` `DOMException` on timeout, or an `AbortError` `DOMException` if the operation was user-triggered.

Examples
--------

 Below is a simple example showing a fetch operation that will timeout if unsuccessful after 5 seconds.
 Note that this may also fail if the method is not supported, if a browser "stop" button is pressed, or for another reason.


```js
const url = "https://path\_to\_large\_file.mp4";

try {
  const res = await fetch(url, { signal: AbortSignal.timeout(5000) });
  const result = await res.blob();
  // …
} catch (err) {
  if (err.name === "TimeoutError") {
    console.error("Timeout: It took more than 5 seconds to get the result!");
  } else if (err.name === "AbortError") {
    console.error(
      "Fetch aborted by user action (browser stop button, closing tab, etc.",
    );
  } else if (err.name === "TypeError") {
    console.error("AbortSignal.timeout() method is not supported");
  } else {
    // A network error, or some other problem.
    console.error(`Error: type: ${err.name}, message: ${err.message}`);
  }
}
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-abortsignal-timeout① |

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

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

The **`abort`** event of the `AbortSignal` is fired when the associated request is aborted, i.e. using `AbortController.abort()`.

Syntax
------

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


```js
addEventListener('abort', (event) => { })

onabort = (event) => { }
```

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

A generic `Event` with no added properties.

Examples
--------

In the following snippets, we create a new `AbortController` object, and get its `AbortSignal` (available using the `signal` property). Later on we check whether or not the signal has been aborted using an event handler property,

You can detect the `abort` event using an `addEventListener` method:


```js
const controller = new AbortController();
const signal = controller.signal;

signal.addEventListener("abort", () => {
  console.log("Request aborted");
});
```


Or use the `onabort` event handler property:


```js
const controller = new AbortController();
const signal = controller.signal;

signal.onabort = () => {
  console.log("Request aborted");
};
```

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

| Specification |
| --- |
| DOM Standard # eventdef-abortsignal-abort |
| DOM Standard # abortsignal-onabort |

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

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

The **`AbortSignal.abort()`** static method returns an `AbortSignal` that is already set as aborted (and which does not trigger an `abort` event).

This is shorthand for the following code:


```js
const controller = new AbortController();
controller.abort();
return controller.signal;
```


This could, for example, be passed to a fetch method in order to run its abort logic (i.e. it may be that code is organized such that the abort logic should be run even if the intended fetch operation has not been started).

**Note:** The method is similar in purpose to `Promise.reject`.

Syntax
------


```js
AbortSignal.abort()
AbortSignal.abort(reason)
```

### Parameters

`reason`

 The reason why the operation was aborted, which can be any JavaScript value.
 If not specified, the reason is set to "AbortError" `DOMException`.


### Return value

An `AbortSignal` instance with the `AbortSignal.aborted` property set to `true`, and `AbortSignal.reason` set to the specified or default reason value.

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-abortsignal-abort① |

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

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

 The **`activeElement`** read-only property of the
 `ShadowRoot` interface returns the element within the shadow tree that has focus.

Value
-----

The `Element` which currently has focus, or `null` if there is no focused element.

Examples
--------


```js
let customElem = document.querySelector("my-shadow-dom-element");
let shadow = customElem.shadowRoot;
let focusedElem = shadow.activeElement;
```

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

| Specification |
| --- |
| HTML Standard # dom-documentorshadowroot-activeelement-dev |

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

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

See also
--------

* `Document.activeElement`
ShadowRoot: slotAssignment property
===================================

The read-only **`slotAssignment`** property of the `ShadowRoot` interface returns the *slot assignment mode* for the shadow DOM tree. Nodes are either automatically assigned (`named`) or manually assigned (`manual`). The value of this property defined using the `slotAssignment` option when calling `Element.attachShadow()`.

Value
-----

A string that can be one of:

`named`

Elements are automatically assigned to `<slot>` elements within this shadow root. Any descendants of the host with a `slot` attribute which matches the `name` attribute of a `<slot>` within this shadow root will be assigned to that slot. Any top-level children of the host with no `slot` attribute will be assigned to a `<slot>` with no `name` attribute (the "default slot") if one is present.

`manual`

Elements are not automatically assigned to `<slot>` elements. Instead, they must be manually assigned with `HTMLSlotElement.assign()`.

Examples
--------

In the example below, the `assign()` method is used to display the correct tab in a tabbed application. The function is called and passed the panel to show, which is then assigned to the slot. We test if the `slotAssignment` is `named` to prevent an exception to be raised when `HTMLSlotElement.assign()` is called.


```js
function UpdateDisplayTab(elem, tabIdx) {
  const shadow = elem.shadowRoot;

  // This test is usually not needed, but can be useful when debugging
  if (shadow.slotAssignment === "named") {
    console.error(
      "Trying to manually assign a slot on an automatically-assigned (named) slot",
    );
  }
  const slot = shadow.querySelector("slot");
  const panels = elem.querySelectorAll("tab-panel");
  if (panels.length && tabIdx && tabIdx <= panels.length) {
    slot.assign(panels[tabIdx - 1]);
  } else {
    slot.assign();
  }
}
```

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

| Specification |
| --- |
| DOM Standard # dom-shadowroot-slotassignment |

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

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

See also
--------

* `Element.attachShadow()`
* `HTMLSlotElement.assign()`
ShadowRoot: innerHTML property
==============================

 The **`innerHTML`** property of the `ShadowRoot`
 interface sets or returns a reference to the DOM tree inside the
 `ShadowRoot`.

Value
-----

A string.

Examples
--------


```js
let customElem = document.querySelector("my-shadow-dom-element");
let shadow = customElem.shadowRoot;

shadow.innerHTML = "<strong>This element should be more important!</strong>";
```

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

| Specification |
| --- |
| DOM Parsing and Serialization # ref-for-dom-innerhtml-innerhtml-2 |

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

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

The **`delegatesFocus`** read-only property of the `ShadowRoot` interface returns `true` if the shadow root delegates focus, and `false` otherwise.

If `true`, when a non-focusable part of the shadow DOM is clicked, or `.focus()` is called on the host element, the first focusable part is given focus, and the shadow host is given any available `:focus` styling.

Focus is of particular importance for keyboard users (including those using screen readers). `delegatesFocus` default behavior is to focus the first focusable element — which may be undesirable if that element is not meant to be part of the tabbing order (for example, an element with `tabindex="-1"`), or if a more 'important' focusable element should receive initial focus (for instance, the first text field rather than the 'close' button which precedes it). In such cases, the `autofocus` attribute can be specified on the element which should receive initial focus. Use the `autofocus` attribute with caution as it can introduce accessibility issues, such as bypassing important content which may go unnoticed due to focus being set to an element later in the DOM order.

The property value is set using the `delegatesFocus` property of the object passed to `Element.attachShadow()`).

Examples
--------


```js
let customElem = document.querySelector("my-shadow-dom-element");
let shadow = customElem.shadowRoot;

// ...

// Does it delegate focus?
let hostElem = shadow.delegatesFocus;
```

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

| Specification |
| --- |
| DOM Standard # shadowroot-delegates-focus |

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

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