recursal/MDN huggingface dataset:
DataTransferItemList: clear() method
====================================

 The `DataTransferItemList` method
 **`clear()`** removes all `DataTransferItem`
 objects from the drag data items list, leaving the list empty.

 The drag data store in which this list is kept is only writable while handling the
 `dragstart` event. While handling `drop`, the drag data store is
 in read-only mode, and this method silently does nothing. No exception is thrown.

Syntax
------


```js
clear()
```

### Parameters

None.

### Return value

None (`undefined`).

Examples
--------

This example shows the use of the `clear()` method.

### HTML


```html
<div>
  <p
 id="source"
 ondragstart="dragstartHandler(event);"
 ondragend="dragendHandler(event);"
 draggable="true">
    Select this element, drag it to the Drop Zone and then release the selection
    to move the element.
  </p>
</div>
<div
 id="target"
 ondrop="dropHandler(event);"
 ondragover="dragoverHandler(event);">
  Drop Zone
</div>
```

### CSS


```css
div {
  margin: 0em;
  padding: 2em;
}
#source {
  color: blue;
  border: 1px solid black;
}
#target {
  border: 1px solid black;
}
```

### JavaScript


```js
function dragstartHandler(ev) {
  console.log("dragStart");

  // Add this element's id to the drag payload so the drop handler will
  // know which element to add to its tree
  const dataList = ev.dataTransfer.items;
  dataList.add(ev.target.id, "text/plain");
}

function dropHandler(ev) {
  console.log("Drop");
  ev.preventDefault();

  // Loop through the dropped items and log their data
  for (const item of ev.dataTransfer.items) {
    if (item.kind === "string" && item.type.match(/^text\/plain/)) {
      // This item is the target node
      item.getAsString((s) => {
        ev.target.appendChild(document.getElementById(s));
      });
    } else if (item.kind === "string" && item.type.match(/^text\/html/)) {
      // Drag data item is HTML
      item.getAsString((s) => {
        console.log(`… Drop: HTML = ${s}`);
      });
    } else if (item.kind === "string" && item.type.match(/^text\/uri-list/)) {
      // Drag data item is URI
      item.getAsString((s) => {
        console.log(`… Drop: URI = ${s}`);
      });
    }
  }
}

function dragoverHandler(ev) {
  console.log("dragOver");
  ev.preventDefault();

  // Set the dropEffect to move
  ev.dataTransfer.dropEffect = "move";
}

function dragendHandler(ev) {
  console.log("dragEnd");
  const dataList = ev.dataTransfer.items;

  // Clear any remaining drag data
  dataList.clear();
}
```

### Result

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

| Specification |
| --- |
| HTML Standard # dom-datatransferitemlist-clear-dev |

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

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

**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 **`AudioProcessingEvent()`** constructor creates a new `AudioProcessingEvent` object.

**Note:** Usually, this constructor is not directly called by your code, as the browser creates these objects itself and provides them to the event handler.

Syntax
------


```js
new AudioProcessingEvent(type, options)
```

### Parameters

`type`

 A string with the name of the event.
 It is case-sensitive and browsers always set it to `audioprocess`.


`options`

An object that has the following properties:

`playbackTime`

A number representing the time when the audio will be played.

`inputBuffer`

An `AudioBuffer` containing the input audio data.

`outputBuffer`

An `AudioBuffer` where the output audio data will be written.


### Return value

A new `AudioProcessingEvent`.

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

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

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

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

See also
--------

* `AudioProcessingEvent`
* `ScriptProcessorNode`
AudioProcessingEvent: playbackTime 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 **`playbackTime`** read-only property of the `AudioProcessingEvent` interface represents the time when the audio will be played. It is in the same coordinate system as the time used by the `AudioContext`.

Value
-----

A number that doesn't need to be an integer.

Examples
--------


```js
const audioContext = new AudioContext();
const processor = audioContext.createScriptProcessor(256, 2, 2);

processor.addEventListener("audioprocess", (event) => {
  const inputBuffer = event.inputBuffer;
  const outputBuffer = event.outputBuffer;

  for (let channel = 0; channel < outputBuffer.numberOfChannels; channel++) {
    const inputData = inputBuffer.getChannelData(channel);
    const outputData = outputBuffer.getChannelData(channel);

    // Log the corresponding time for this audio buffer
    console.log(`Received audio data to be played at ${event.playbackTime}`);

    // Process the audio data here
    for (let i = 0; i < outputBuffer.length; i++) {
      outputData[i] = inputData[i] \* 0.5;
    }
  }
});

processor.connect(audioContext.destination);
```

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

| Specification |
| --- |
| Web Audio API # dom-audioprocessingevent-playbacktime |

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

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

See also
--------

* `AudioProcessingEvent`
* `ScriptProcessorNode`
AudioProcessingEvent: inputBuffer 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 **`inputBuffer`** read-only property of the `AudioProcessingEvent` interface represents the input buffer of an audio processing event.

The input buffer is represented by an `AudioBuffer` object, which contains a collection of audio channels, each of which is an array of floating-point values representing the audio signal waveform encoded as a series of amplitudes. The number of channels and the length of each channel are determined by the channel count and buffer size properties of the `AudioBuffer`.

Value
-----

An `AudioBuffer` object.

Examples
--------

In this example, a `ScriptProcessorNode` is created with a buffer size of 256 samples, 2 input channels, and 2 output channels. When an `audioprocess` event is fired, the input and output buffers are retrieved from the event object. The audio data in the input buffer is processed, and the result is written to the output buffer. In this case, the audio data is scaled down by a factor of 0.5.


```js
const audioContext = new AudioContext();
const processor = audioContext.createScriptProcessor(256, 2, 2);

processor.addEventListener("audioprocess", (event) => {
  const inputBuffer = event.inputBuffer;
  const outputBuffer = event.outputBuffer;

  for (let channel = 0; channel < outputBuffer.numberOfChannels; channel++) {
    const inputData = inputBuffer.getChannelData(channel);
    const outputData = outputBuffer.getChannelData(channel);

    // Process the audio data here
    for (let i = 0; i < outputBuffer.length; i++) {
      outputData[i] = inputData[i] \* 0.5;
    }
  }
});

processor.connect(audioContext.destination);
```

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

| Specification |
| --- |
| Web Audio API # dom-audioprocessingevent-inputbuffer |

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

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

See also
--------

* `AudioProcessingEvent.outputBuffer`
* `ScriptProcessorNode`
AudioProcessingEvent: outputBuffer 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 **`outputBuffer`** read-only property of the `AudioProcessingEvent` interface represents the output buffer of an audio processing event.

The output buffer is represented by an `AudioBuffer` object, which contains a collection of audio channels, each of which is an array of floating-point values representing the audio signal waveform encoded as a series of amplitudes. The number of channels and the length of each channel are determined by the channel count and buffer size properties of the `AudioBuffer`.

Value
-----

An `AudioBuffer` object.

Examples
--------

In this example, a `ScriptProcessorNode` is created with a buffer size of 256 samples, 2 input channels, and 2 output channels. When an `audioprocess` event is fired, the input and output buffers are retrieved from the event object. The audio data in the input buffer is processed, and the result is written to the output buffer. In this case, the audio data is scaled down by a factor of 0.5.


```js
const audioContext = new AudioContext();
const processor = audioContext.createScriptProcessor(256, 2, 2);

processor.addEventListener("audioprocess", (event) => {
  const inputBuffer = event.inputBuffer;
  const outputBuffer = event.outputBuffer;

  for (let channel = 0; channel < outputBuffer.numberOfChannels; channel++) {
    const inputData = inputBuffer.getChannelData(channel);
    const outputData = outputBuffer.getChannelData(channel);

    // Process the audio data here
    for (let i = 0; i < outputBuffer.length; i++) {
      outputData[i] = inputData[i] \* 0.5;
    }
  }
});

processor.connect(audioContext.destination);
```

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

| Specification |
| --- |
| Web Audio API # dom-audioprocessingevent-outputbuffer |

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

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

See also
--------

* `AudioProcessingEvent.inputBuffer`
* `ScriptProcessorNode`
KeyboardLayoutMap: forEach() method
===================================

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

 The **`forEach()`** method of the
 `KeyboardLayoutMap` interface executes a provided function once for
 each element of the map.

The method is otherwise the same as `Map.prototype.forEach()`.

Syntax
------


```js
forEach(callbackFn)
forEach(callbackFn, thisArg)
```

### Parameters

`callbackFn`

The function to execute for each element, taking three arguments:

`currentValue`

The value of the current element being processed.

`index` Optional

The index of the current element being processed.

`array` Optional

The KeyboardLayoutMap that `forEach()` is being called on.


`thisArg` Optional

 Value to use as **`this`** (i.e., the reference
 `Object`) when executing `callback`.


### Return value

None (`undefined`).

Examples
--------

The following example iterates every location- or layout-specific string and its associated keyboard code on an English QWERTY keyboard.


```js
navigator.keyboard.getLayoutMap().then((keyboardLayoutMap) => {
  keyboardLayoutMap.forEach((key, code) => {
    console.log(`${code} keyboard code represents ${key} key`);
  });
});
```

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

| Specification |
| --- |
| ECMAScript Language Specification # sec-map.prototype.foreach |

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

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

See also
--------

* `Map.prototype.forEach()`
KeyboardLayoutMap: get() method
===============================

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

 The **`get()`** method of the
 `KeyboardLayoutMap` interface returns the element with the given
 key.

A list of valid keys is found in the UI Events KeyboardEvent code Values spec.

The method is otherwise the same as `Map.prototype.get()`.

Syntax
------


```js
get(key)
```

### Parameters

`key`

The key of the item to return from the map.

### Return value

The value of the specified key.

Examples
--------

The following example demonstrates how to get the location- or layout-specific string associated with the keyboard code that corresponds to the 'W' key on an English QWERTY keyboard.


```js
navigator.keyboard.getLayoutMap().then((keyboardLayoutMap) => {
  const upKey = keyboardLayoutMap.get("KeyW");
  window.alert(`Press ${upKey} to move up.`);
});
```

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

| Specification |
| --- |
| ECMAScript Language Specification # sec-map.prototype.get |

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

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

See also
--------

* `Map.prototype.get()`
KeyboardLayoutMap: has() method
===============================

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

 The **`has()`** method of the
 `KeyboardLayoutMap` interface returns a boolean indicating whether the
 object has an element with the specified key.

 A list of valid keys is found in
 the UI Events KeyboardEvent code Values spec.

The method is otherwise the same as `Map.prototype.has()`.

Syntax
------


```js
has(key)
```

### Parameters

`key`

The key of an element to search for in the map.

### Return value

A `Boolean` indicating whether the specified key was found.

Examples
--------

The following example checks whether the location- or layout-specific string associated with the keyboard code that corresponds to the 'W' key on an English QWERTY keyboard exists.


```js
navigator.keyboard.getLayoutMap().then((keyboardLayoutMap) => {
  console.log(keyboardLayoutMap.has("KeyW"));
});
```

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

| Specification |
| --- |
| ECMAScript Language Specification # sec-map.prototype.has |

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

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

See also
--------

* `Map.prototype.has()`
KeyboardLayoutMap: keys() method
================================

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

The **`keys()`** method of the `KeyboardLayoutMap` interface returns a new Iterator object that contains the keys for each index in the `KeyboardLayoutMap` object.

The method is otherwise the same as `Map.prototype.keys()`.

Value
-----

A new Iterator object.

Examples
--------

The following example iterates every keyboard code on an English QWERTY keyboard.


```js
navigator.keyboard.getLayoutMap().then((keyboardLayoutMap) => {
  for (const code of keyboardLayoutMap.keys()) {
    console.log(`${code} keyboard code`);
  }
});
```

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

| Specification |
| --- |
| ECMAScript Language Specification # sec-map.prototype.keys |

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

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

See also
--------

* `Map.prototype.keys()`
KeyboardLayoutMap: size property
================================

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

 The **`size`** read-only property of
 the `KeyboardLayoutMap` interface returns the number of elements in the
 map.

The property is otherwise the same as `Map.prototype.size`.

Value
-----

A number.

Examples
--------

The following example get the count of the location- or layout-specific string and its associated keyboard code on an English QWERTY keyboard.


```js
navigator.keyboard.getLayoutMap().then((keyboardLayoutMap) => {
  console.log(keyboardLayoutMap.size);
});
```

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

| Specification |
| --- |
| ECMAScript Language Specification # sec-get-map.prototype.size |

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

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

See also
--------

* `Map.prototype.size`
KeyboardLayoutMap: values() method
==================================

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

The **`values()`** method of the `KeyboardLayoutMap` interface returns a new Iterator object that contains the values for each index in the `KeyboardLayoutMap` object.

The method is otherwise the same as `Map.prototype.values()`.

Value
-----

A new Iterator object.

Examples
--------

The following example iterates every location- or layout-specific string on an English QWERTY keyboard.


```js
navigator.keyboard.getLayoutMap().then((keyboardLayoutMap) => {
  for (const key of keyboardLayoutMap.values()) {
    console.log(`${key} key`);
  }
});
```

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

| Specification |
| --- |
| ECMAScript Language Specification # sec-map.prototype.values |

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

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

See also
--------

* `Map.prototype.values()`
KeyboardLayoutMap: entries() method
===================================

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

The **`entries()`** method of the `KeyboardLayoutMap` interface returns a new Iterator object that contains the key/value pairs, in the same order as that provided by a `for...in` loop (the difference being that a `for-in` loop enumerates properties in the prototype chain as well).

The method is otherwise the same as `Map.prototype.entries()`.

Value
-----

A new Iterator object.

Examples
--------

The following example iterates every location- or layout-specific string and its associated keyboard code on an English QWERTY keyboard.


```js
navigator.keyboard.getLayoutMap().then((keyboardLayoutMap) => {
  for (const [code, key] of keyboardLayoutMap.entries()) {
    console.log(`${code} keyboard code represents ${key} key`);
  }
});
```

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

| Specification |
| --- |
| ECMAScript Language Specification # sec-map.prototype.entries |

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

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

See also
--------

* `Map.prototype.entries()`
EncodedAudioChunk: type 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
**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The **`type`** read-only property of the `EncodedAudioChunk` interface returns a value indicating whether the audio chunk is a key chunk, which does not relying on other frames for decoding.

Value
-----

A string, one of:

`"key"`

The data is a key chunk.

`"delta"`

The data is not a key chunk.

Examples
--------

In the following example the `type` is printed to the console.


```js
const init = {
  type: "key",
  data: audioBuffer,
  timestamp: 23000000,
  duration: 2000000,
};
chunk = EncodedAudioChunk(init);

console.log(chunk.type); //"key"
```

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

| Specification |
| --- |
| WebCodecs # dom-encodedaudiochunk-type |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
EncodedAudioChunk: copyTo() 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
**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The **`copyTo()`** method of the `EncodedAudioChunk` interface copies the encoded chunk of audio data.

Syntax
------


```js
copyTo(destination)
```

### Parameters

`destination`

An `ArrayBuffer`, a `TypedArray`, or a `DataView` that the data can be copied to.

### Return value

None (`undefined`).

Examples
--------

In the following example an `EncodedAudioChunk` is created then copied.


```js
const init = {
  type: "key",
  data: audioBuffer,
  timestamp: 23000000,
  duration: 2000000,
};
chunk = EncodedAudioChunk(init);

chunk.copyTo(newBuffer);
```

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

| Specification |
| --- |
| WebCodecs # dom-encodedaudiochunk-copyto |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
EncodedAudioChunk: timestamp 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
**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The **`timestamp`** read-only property of the `EncodedAudioChunk` interface returns an integer indicating the timestamp of the audio in microseconds.

Value
-----

An integer.

Examples
--------

In the following example the `timestamp` is printed to the console.


```js
const init = {
  type: "key",
  data: audioBuffer,
  timestamp: 23000000,
  duration: 2000000,
};
chunk = EncodedAudioChunk(init);

console.log(chunk.timestamp); //23000000
```

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

| Specification |
| --- |
| WebCodecs # dom-encodedaudiochunk-timestamp |

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

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