recursal/MDN huggingface dataset:
DynamicsCompressorNode: DynamicsCompressorNode() constructor
============================================================

 The **`DynamicsCompressorNode()`**
 constructor creates a new `DynamicsCompressorNode` object which provides
 a compression effect, which lowers the volume of the loudest parts of the
 signal, in order to help prevent clipping and distortion. That can occur when
 multiple sounds are played and multiplexed together at once.

Syntax
------


```js
new DynamicsCompressorNode(context, options)
```

### Parameters

`context`

A reference to an `AudioContext`.

`options` Optional

Options are as follows:

`attack`

 The amount of time (in seconds) to reduce the gain by 10dB.
 Its default value is 0.003. This parameter is k-rate. Its nominal range is [0, 1].


`knee`

 A decibel value representing the range above the threshold
 where the curve smoothly transitions to the "ratio" portion. Its default value is
 30. This parameter is k-rate. Its nominal range is [0, 40].


`ratio`

 The amount of dB change in input for a 1 dB change in
 output. Its default value is 12. This parameter is k-rate. Its nominal range is
 [1, 20].


`release`

 The amount of time (in seconds) to increase the gain by 10dB. Its
 default value is 0.250. This parameter is k-rate. Its nominal range is [0, 1].


`threshold`

 The decibel value above which the compression will start taking
 effect. Its default value is -24. This parameter is k-rate. Its nominal range is
 [-100, 0].



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

| Specification |
| --- |
| Web Audio API # dom-dynamicscompressornode-constructor-dynamicscompressornode |

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

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

The `threshold` property of the `DynamicsCompressorNode` interface is a k-rate `AudioParam` representing the decibel value above which the compression will start taking effect.

The `threshold` property's default value is `-24` and it can be set between `-100` and `0`.

![The threshold attribute has no effect on signals lowers than its value, but induce volume reduction on signal stronger than its value.](/en-US/docs/Web/API/DynamicsCompressorNode/threshold/webaudiothreshold.png)

Value
-----

An `AudioParam`.

**Note:** Though the `AudioParam` returned is read-only, the value it represents is not.

Examples
--------


```js
const audioCtx = new AudioContext();
const compressor = audioCtx.createDynamicsCompressor();
compressor.threshold.value = -50;
```


See `BaseAudioContext.createDynamicsCompressor()` for more complete example code.

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

| Specification |
| --- |
| Web Audio API # dom-dynamicscompressornode-threshold |

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

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

See also
--------

* Using the Web Audio API
DynamicsCompressorNode: reduction property
==========================================

The **`reduction`** read-only property of the `DynamicsCompressorNode` interface is a float representing the amount of gain reduction currently applied by the compressor to the signal.

Intended for metering purposes, it returns a value in dB, or `0` (no gain reduction) if no signal is fed into the `DynamicsCompressorNode`. The range of this value is between `-20` and `0` (in dB).

Value
-----

A float.

Examples
--------


```js
const audioCtx = new AudioContext();
const compressor = audioCtx.createDynamicsCompressor();
const myReduction = compressor.reduction;
```


See `BaseAudioContext.createDynamicsCompressor()` for more complete example code.

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

| Specification |
| --- |
| Web Audio API # dom-dynamicscompressornode-reduction |

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

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

See also
--------

* Using the Web Audio API
DynamicsCompressorNode: release property
========================================

The `release` property of the `DynamicsCompressorNode` interface Is a k-rate `AudioParam` representing the amount of time, in seconds, required to increase the gain by 10 dB. It defines how quick the signal is adapted when its volume is reduced.

The `release` property's default value is `0.25` and it can be set between `0` and `1`.

Value
-----

An `AudioParam`.

**Note:** Though the `AudioParam` returned is read-only, the value it represents is not.

Examples
--------


```js
const audioCtx = new AudioContext();
const compressor = audioCtx.createDynamicsCompressor();
compressor.release.value = 0.25;
```


See `BaseAudioContext.createDynamicsCompressor()` for more complete example code.

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

| Specification |
| --- |
| Web Audio API # dom-dynamicscompressornode-release |

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

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

See also
--------

* Using the Web Audio API
DynamicsCompressorNode: knee property
=====================================

The `knee` property of the `DynamicsCompressorNode` interface is a k-rate `AudioParam` containing a decibel value representing the range above the threshold where the curve smoothly transitions to the compressed portion.

The `knee` property's default value is `30` and it can be set between `0` and `40`.

![Describes the effect of a knee, showing two curves one for a hard knee, the other for a soft knee.](/en-US/docs/Web/API/DynamicsCompressorNode/knee/webaudioknee.png)

Value
-----

An `AudioParam`.

**Note:** Though the `AudioParam` returned is read-only, the value it represents is not.

Examples
--------


```js
const audioCtx = new AudioContext();
const compressor = audioCtx.createDynamicsCompressor();
compressor.knee.value = 40;
```


See `BaseAudioContext.createDynamicsCompressor()` for more complete example code.

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

| Specification |
| --- |
| Web Audio API # dom-dynamicscompressornode-knee |

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

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

See also
--------

* Using the Web Audio API
SVGAnimatedString: baseVal property
===================================

BaseVal gets or sets the base value of the given attribute before any animations are applied. The base value of the given attribute before applying any animations. Setter throws DOMException.

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # \_\_svg\_\_SVGAnimatedString\_\_baseVal |

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

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

AnimVal attribute or animVal property contains the same value as the `SVGAnimatedString.baseVal` property. If the given attribute or property is being animated, contains the current animated value of the attribute or property. If the given attribute or property is not currently being animated, then it contains the same value as baseVal

**Note:** The **animVal** property is a read only property.

Syntax
------


```js
const currentValue = object.animVal
```

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # \_\_svg\_\_SVGAnimatedString\_\_animVal |

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

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

 The **`DataTransfer.types`** read-only property returns the available types
 that exist in the `items`.

Value
-----

 An array of the data formats used in the drag operation. Each format is a string
 which is generally a MIME type such as `text/plain` or `text/html`. If the drag
 operation included no data, this list will be empty. If any files are included in
 the drag operation, then one of the types will be the string `Files`.

Examples
--------

 This example shows the use of the `types` and
 `items` properties.


```html
<!doctype html>
<html lang="en">
  <title>Examples of DataTransfer.{types,items} properties</title>
  <meta content="width=device-width" />
  <style>
 div {
 margin: 0em;
 padding: 2em;
 }
 #target {
 border: 1px solid black;
 }
 </style>
  <script>
 function dragstart\_handler(ev) {
 console.log("dragStart: target.id = " + ev.target.id);

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

 function drop\_handler(ev) {
 console.log("drop: target.id = " + ev.target.id);
 ev.preventDefault();

 // Get the id of the target and add the moved element to the target's DOM
 const data = ev.dataTransfer.getData("text");
 ev.target.appendChild(document.getElementById(data));

 // Print each format type
 for (let i = 0; i < ev.dataTransfer.types.length; i++) {
 console.log(`… types[${i}] = ${ev.dataTransfer.types[i]}`);
 }

 // Print each item's "kind" and "type"
 for (let i = 0; i < ev.dataTransfer.items.length; i++) {
 console.log(
 `… items[${i}].kind = ${ev.dataTransfer.items[i].kind}; type = ${ev.dataTransfer.items[i].type}`,
 );
 }
 }

 function dragover\_handler(ev) {
 console.log("dragOver");
 ev.preventDefault();
 // Set the dropEffect to move
 ev.dataTransfer.dropEffect = "move";
 }
 </script>
  <body>
    <h1>
      Examples of <code>DataTransfer</code>.{<code>types</code>,
      <code>items</code>} properties
    </h1>
    <ul>
      <li id="i1" ondragstart="dragstart\_handler(event);" draggable="true">
        Drag Item 1 to the Drop Zone
      </li>
      <li id="i2" ondragstart="dragstart\_handler(event);" draggable="true">
        Drag Item 2 to the Drop Zone
      </li>
    </ul>
    <div
 id="target"
 ondrop="drop\_handler(event);"
 ondragover="dragover\_handler(event);">
      Drop Zone
    </div>
  </body>
</html>
```

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

| Specification |
| --- |
| HTML Standard # dom-datatransfer-types-dev |

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

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

See also
--------

* Drag and drop
* Drag Operations
* Recommended Drag Types
* DataTransfer test - Paste or Drag
DataTransfer: items property
============================

 The read-only `DataTransfer` property `items` property is a
 `list` of the data
 transfer items in a drag operation. The list includes one item for each item in the
 operation and if the operation had no items, the list is empty.

Value
-----

 A `DataTransferItemList` object containing `DataTransferItem`
 objects representing the items being dragged in a drag operation, one list item for each
 object being dragged. If the drag operation had no data, the list is empty.

Examples
--------

### Logging dragged items

This example uses `items` to log information about dragged items.

#### HTML


```html
<ul>
  <li id="source1" draggable="true">Drag Item 1 to the Drop Zone</li>
  <li id="source2" draggable="true">Drag Item 2 to the Drop Zone</li>
</ul>
<div id="target">Drop Zone</div>

<button id="reset">Reset</button>
```


#### CSS


```css
div {
  margin: 0em;
  padding: 2em;
}

#target {
  border: 1px solid black;
}
```


#### JavaScript


```js
function dragstartHandler(ev) {
  console.log(`dragstart: target.id = ${ev.target.id}`);
  // Add this element's id to the drag payload so the drop handler will
  // know which element to add to its tree
  ev.dataTransfer.setData("text/plain", ev.target.id);
  ev.dataTransfer.effectAllowed = "move";
}

function dropHandler(ev) {
  ev.preventDefault();
  // Get the id of the target and add the moved element to the target's DOM
  const data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
  // Print each item's "kind" and "type"
  if (ev.dataTransfer.items) {
    for (const item of ev.dataTransfer.items) {
      console.log(`kind = ${item.kind}, type = ${item.type}`);
    }
  }
}

function dragoverHandler(ev) {
  ev.preventDefault();
  // Set the dropEffect to move
  ev.dataTransfer.dropEffect = "move";
}

const source1 = document.querySelector("#source1");
const source2 = document.querySelector("#source2");
const target = document.querySelector("#target");

source1.addEventListener("dragstart", dragstartHandler);
source2.addEventListener("dragstart", dragstartHandler);
target.addEventListener("dragover", dragoverHandler);
target.addEventListener("drop", dropHandler);

const reset = document.querySelector("#reset");
reset.addEventListener("click", () => document.location.reload());
```


#### Result

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

| Specification |
| --- |
| HTML Standard # dom-datatransfer-items-dev |

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

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

See also
--------

* Drag and drop
* Drag Operations
* Recommended Drag Types
* DataTransfer test - Paste or Drag
DataTransfer: files property
============================

The **`files`** read-only property of `DataTransfer` objects is a `list of the files` in the drag operation. If the operation includes no files, the list is empty.

This feature can be used to drag files from a user's desktop to the browser.

**Note:** The `files` property of `DataTransfer` objects can only be accessed from within the `drop` event. For all other events, the `files` property will be empty — because its underlying data store will be in a protected mode.

Value
-----

 A `list` of the files in a drag operation, one list item for
 each file in the operation. If the drag operation had no files, the list is empty.

Examples
--------

There are two live examples of this interface:

* Firefox only: https://jsfiddle.net/9C2EF/
* All browsers: https://jsbin.com/hiqasek/
Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-datatransfer-files-dev |

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

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

 The **`DataTransfer.getData()`**
 method retrieves drag data (as a string) for the specified type.
 If the drag operation does not include data, this method returns an empty
 string.

Example data types are `text/plain` and `text/uri-list`.

Syntax
------


```js
getData(format)
```

### Parameters

`format`

A string representing the type of data to retrieve.

### Return value

A string representing the drag data for the specified `format`. If the drag operation has no data or the operation has no data for the specified `format`, this method returns an empty string.

### Caveats

Data availability

 The HTML Drag and Drop Specification dictates a `drag data store mode`.
 This may result in unexpected behavior, being
 **`DataTransfer.getData()`** not returning an expected
 value, because not all browsers enforce this restriction.


During the `dragstart` and `drop` events, it is safe to access the data. For all other events, the data should be considered unavailable. Despite this, the items and their formats can still be enumerated.

Examples
--------

 This example shows the use of the `DataTransfer` object's
 `getData()` and
 `setData()` methods.

### HTML


```html
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  <span id="drag" draggable="true" ondragstart="drag(event)"
 >drag me to the other box</span
 >
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
```

### CSS


```css
#div1,
#div2 {
  width: 100px;
  height: 50px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}
```

### JavaScript


```js
function allowDrop(allowdropevent) {
  allowdropevent.target.style.color = "blue";
  allowdropevent.preventDefault();
}

function drag(dragevent) {
  dragevent.dataTransfer.setData("text", dragevent.target.id);
  dragevent.target.style.color = "green";
}

function drop(dropevent) {
  dropevent.preventDefault();
  const data = dropevent.dataTransfer.getData("text");
  dropevent.target.appendChild(document.getElementById(data));
  document.getElementById("drag").style.color = "black";
}
```

### Result

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

| Specification |
| --- |
| HTML Standard # dom-datatransfer-getdata-dev |

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

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

See also
--------

* Drag and drop
* Drag Operations
* Recommended Drag Types
* DataTransfer test - Paste or Drag
DataTransfer: addElement() method
=================================

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

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

 The **`DataTransfer.addElement()`** method sets the drag source
 to the given element. This element will be the element to which `drag` and
 `dragend` events are fired, and not the default target (the node that was
 dragged).

**Note:** This method is Firefox-specific.

Syntax
------


```js
addElement(element)
```

### Parameters

`element`

The `Element` to set as the drag source.

### Return value

None (`undefined`).

Examples
--------

This example shows the use of the `addElement()` method


```js
function change\_drag\_node(event, node) {
  const dt = event.dataTransfer;
  dt.addElement(node);
}
```

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

This method is not defined in any Web standard.

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

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

See also
--------

* Drag and drop
* Drag Operations
* Recommended Drag Types
* DataTransfer test - Paste or Drag
DataTransfer: DataTransfer() constructor
========================================

 The **`DataTransfer`** constructor creates a new
 `DataTransfer` object instance.

Syntax
------


```js
new DataTransfer()
```

### Parameters

None.

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

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

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

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

 The **`DataTransfer.setData()`** method sets the drag
 operation's `drag data` to the specified data and type. If
 data for the given type does not exist, it is added at the end of the drag data store,
 such that the last item in the `types` list will be
 the new type. If data for the given type already exists, the existing data is replaced
 in the same position. That is, the order of the
 `types` list is not changed when replacing data of the
 same type.

Example data types are `text/plain` and `text/uri-list`.

Syntax
------


```js
setData(format, data)
```

### Parameters

`format`

 A string representing the type of the drag data to add to the
 `drag object`.


`data`

 A string representing the data to add to the
 `drag object`.


### Return value

None (`undefined`).

Examples
--------

### Dragging an element

In this example we can drag a `<p>` element into a target `<div>` element.

* In the `dragstart` handler, we use `setData()` to add the `id` of the `<p>` element to the `DataTransfer` object.
* In the `drop` handler we retrieve the `id` and use it to move the `<p>` element into the target.

#### HTML


```html
<div>
  <p id="source" 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">Drop Zone</div>

<button id="reset">Reset example</button>
```


#### CSS


```css
div {
  margin: 0.5em 0;
  padding: 2em;
}

#target,
#source {
  border: 1px solid black;
  padding: 0.5rem;
}

.dragging {
  background-color: pink;
}
```


#### JavaScript


```js
const source = document.querySelector("#source");
source.addEventListener("dragstart", (ev) => {
  console.log("dragStart");
  // Change the source element's background color
  // to show that drag has started
  ev.currentTarget.classList.add("dragging");
  // Clear the drag data cache (for all formats/types)
  ev.dataTransfer.clearData();
  // Set the drag's format and data.
  // Use the event target's id for the data
  ev.dataTransfer.setData("text/plain", ev.target.id);
});
source.addEventListener("dragend", (ev) =>
  ev.target.classList.remove("dragging"),
);

const target = document.querySelector("#target");
target.addEventListener("dragover", (ev) => {
  console.log("dragOver");
  ev.preventDefault();
});
target.addEventListener("drop", (ev) => {
  console.log("Drop");
  ev.preventDefault();
  // Get the data, which is the id of the source element
  const data = ev.dataTransfer.getData("text");
  const source = document.getElementById(data);
  ev.target.appendChild(source);
});

const reset = document.querySelector("#reset");
reset.addEventListener("click", () => document.location.reload());
```


#### Result

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

| Specification |
| --- |
| HTML Standard # dom-datatransfer-setdata-dev |

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

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

See also
--------

* Drag and drop
* Drag Operations
* Recommended Drag Types
* DataTransfer test - Paste or Drag
CSSCounterStyleRule: name property
==================================

The **`name`** property of the `CSSCounterStyleRule` interface gets and sets the `<custom-ident>` defined as the `name` for the associated rule.

Value
-----

A string

Examples
--------

The following example shows a `@counter-style` rule. In JavaScript, `myRules[0]` is this `@counter-style` rule, returning `name` gives us the custom ident "box-corner".


```css
@counter-style box-corner {
  system: fixed;
  symbols: ◰ ◳ ◲ ◱;
  suffix: ": ";
  fallback: disc;
}
```



```js
let myRules = document.styleSheets[0].cssRules;
console.log(myRules[0].name); // "box-corner"
```

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

| Specification |
| --- |
| CSS Counter Styles Level 3 # dom-csscounterstylerule-name |

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

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

The **`symbols`** property of the `CSSCounterStyleRule` interface gets and sets the value of the `symbols` descriptor. If the descriptor does not have a value set, this attribute returns an empty string.

Value
-----

A string

Examples
--------

The following example shows a `@counter-style` rule. In JavaScript, `myRules[0]` is this `@counter-style` rule, returning `symbols` gives us the value "◰ ◳ ◲ ◱".


```css
@counter-style box-corner {
  system: fixed;
  symbols: ◰ ◳ ◲ ◱;
  suffix: ": ";
  negative: "-";
}
```



```js
let myRules = document.styleSheets[0].cssRules;
console.log(myRules[0].symbols); // "◰ ◳ ◲ ◱"
```

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

| Specification |
| --- |
| CSS Counter Styles Level 3 # dom-csscounterstylerule-symbols |

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

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