recursal/MDN huggingface dataset:
AudioBufferSourceNode: loopStart property
=========================================

 The **`loopStart`** property of the `AudioBufferSourceNode` interface is a floating-point value indicating, in
 seconds, where in the `AudioBuffer` the restart of the play must happen.

The `loopStart` property's default value is `0`.

Value
-----

 A floating-point number indicating the offset, in seconds, into the audio buffer at
 which each loop should begin during playback. This value is only used when the
 `loop` parameter is `true`.

Examples
--------

### Setting `loopStart`

In this example, when the user presses "Play", we load an audio track, decode it, and put it into an `AudioBufferSourceNode`.

The example then sets the `loop` property to `true`, so the track loops, and plays the track.

The user can set the `loopStart` and `loopEnd` properties using range controls.

**Note:** You can run the full example live (or view the source.)


```js
let audioCtx;
let buffer;
let source;

const play = document.getElementById("play");
const stop = document.getElementById("stop");

const loopstartControl = document.getElementById("loopstart-control");
const loopstartValue = document.getElementById("loopstart-value");

const loopendControl = document.getElementById("loopend-control");
const loopendValue = document.getElementById("loopend-value");

async function loadAudio() {
  try {
    // Load an audio file
    const response = await fetch("rnb-lofi-melody-loop.wav");
    // Decode it
    buffer = await audioCtx.decodeAudioData(await response.arrayBuffer());
    const max = Math.floor(buffer.duration);
    loopstartControl.setAttribute("max", max);
    loopendControl.setAttribute("max", max);
  } catch (err) {
    console.error(`Unable to fetch the audio file. Error: ${err.message}`);
  }
}

play.addEventListener("click", async () => {
  if (!audioCtx) {
    audioCtx = new AudioContext();
    await loadAudio();
  }
  source = audioCtx.createBufferSource();
  source.buffer = buffer;
  source.connect(audioCtx.destination);
  source.loop = true;
  source.loopStart = loopstartControl.value;
  source.loopEnd = loopendControl.value;
  source.start();
  play.disabled = true;
  stop.disabled = false;
  loopstartControl.disabled = false;
  loopendControl.disabled = false;
});

stop.addEventListener("click", () => {
  source.stop();
  play.disabled = false;
  stop.disabled = true;
  loopstartControl.disabled = true;
  loopendControl.disabled = true;
});

loopstartControl.addEventListener("input", () => {
  source.loopStart = loopstartControl.value;
  loopstartValue.textContent = loopstartControl.value;
});

loopendControl.addEventListener("input", () => {
  source.loopEnd = loopendControl.value;
  loopendValue.textContent = loopendControl.value;
});
```

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

| Specification |
| --- |
| Web Audio API # dom-audiobuffersourcenode-loopstart |

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
AudioBufferSourceNode: detune property
======================================

 The **`detune`** property of the
 `AudioBufferSourceNode` interface is a k-rate `AudioParam`
 representing detuning of oscillation in cents.

 For example, values of +100 and -100 detune the source up or down by one semitone,
 while +1200 and -1200 detune it up or down by one octave.

Value
-----

 A k-rate `AudioParam`
 whose value indicates the detuning of oscillation in cents.


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


Examples
--------


```js
const audioCtx = new AudioContext();

const channelCount = 2;
const frameCount = audioCtx.sampleRate \* 2.0; // 2 seconds

const myArrayBuffer = audioCtx.createBuffer(
  channelCount,
  frameCount,
  audioCtx.sampleRate,
);

for (let channel = 0; channel < channelCount; channel++) {
  const nowBuffering = myArrayBuffer.getChannelData(channel);
  for (let i = 0; i < frameCount; i++) {
    nowBuffering[i] = Math.random() \* 2 - 1;
  }
}

const source = audioCtx.createBufferSource();
source.buffer = myArrayBuffer;
source.connect(audioCtx.destination);
source.detune.value = 100; // value in cents
source.start();
```

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

| Specification |
| --- |
| Web Audio API # dom-audiobuffersourcenode-detune |

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

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

See also
--------

* Using the Web Audio API
* Web Audio API
AudioBufferSourceNode: start() method
=====================================

 The `start()` method of the `AudioBufferSourceNode`
 Interface is used to schedule playback of the audio data contained in the buffer, or
 to begin playback immediately.

Syntax
------


```js
start(when)
start(when, offset)
start(when, offset, duration)
```

### Parameters

`when` Optional

 The time, in seconds, at which the sound should begin to play, in the same time
 coordinate system used by the `AudioContext`. If `when` is
 less than (`AudioContext.currentTime`, or if it's 0, the sound begins to
 play at once. **The default value is 0.**

`offset` Optional

 An offset, specified as the number of seconds in the same time coordinate system as
 the `AudioContext`, to the time within the audio buffer that playback
 should begin. For example, to start playback halfway through a 10-second audio clip,
 `offset` should be 5. The default value, 0, will begin playback at the
 beginning of the audio buffer, and offsets past the end of the audio which will be
 played (based on the audio buffer's `duration`
 and/or the `loopEnd` property) are
 silently clamped to the maximum value allowed. The computation of the offset into the
 sound is performed using the sound buffer's natural sample rate, rather than the
 current playback rate, so even if the sound is playing at twice its normal speed, the
 midway point through a 10-second audio buffer is still 5.


`duration` Optional

 The duration of the sound to be played, specified in seconds. If this parameter
 isn't specified, the sound plays until it reaches its natural conclusion or is stopped
 using the `stop()` method. Using this
 parameter is functionally identical to calling `start(when, offset)` and
 then calling `stop(when+duration)`.


### Return value

None (`undefined`).

### Exceptions

`TypeError`

 Thrown if a negative value was specified for one or more of the three time parameters. Please
 don't attempt to tamper with the laws of temporal physics.


`InvalidStateError` `DOMException`

 Thrown if `start()` has already been called. You can only call this function once
 during the lifetime of an `AudioBufferSourceNode`.


Examples
--------

 The most simple example just starts the audio buffer playing from the beginning — you
 don't need to specify any parameters in this case:


```js
source.start();
```


 The following more complex example will, 1 second from now, start playing 10 seconds
 worth of sound starting 3 seconds into the audio buffer.


```js
source.start(audioCtx.currentTime + 1, 3, 10);
```


**Note:** For a more complete example showing `start()` in use, check out our `AudioContext.decodeAudioData()` example. You can also try the example live, and have a look at the example source.

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

| Specification |
| --- |
| Web Audio API # dom-audiobuffersourcenode-start |

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

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

See also
--------

* Using the Web Audio API
AudioBufferSourceNode: buffer property
======================================

 The **`buffer`** property of the `AudioBufferSourceNode` interface provides the ability to play back audio
 using an `AudioBuffer` as the source of the sound data.

 If the `buffer` property is set to the value `null`, the node
 generates a single channel containing silence (that is, every sample is 0).

Value
-----

 An `AudioBuffer` which contains the data representing the sound which the
 node will play.

Examples
--------

**Note:** For a full working example, see this code running live, or view the source.


```js
const myArrayBuffer = audioCtx.createBuffer(2, frameCount, audioCtx.sampleRate);

button.onclick = () => {
  // Fill the buffer with white noise;
  //just random values between -1.0 and 1.0
  for (let channel = 0; channel < channels; channel++) {
    // This gives us the actual ArrayBuffer that contains the data
    const nowBuffering = myArrayBuffer.getChannelData(channel);
    for (let i = 0; i < frameCount; i++) {
      // Math.random() is in [0; 1.0]
      // audio needs to be in [-1.0; 1.0]
      nowBuffering[i] = Math.random() \* 2 - 1;
    }
  }

  // Get an AudioBufferSourceNode.
  // This is the AudioNode to use when we want to play an AudioBuffer
  const source = audioCtx.createBufferSource();
  // set the buffer in the AudioBufferSourceNode
  source.buffer = myArrayBuffer;
};
```

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

| Specification |
| --- |
| Web Audio API # dom-audiobuffersourcenode-buffer |

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

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

See also
--------

* Using the Web Audio API
* Web Audio API
AudioBufferSourceNode: playbackRate property
============================================

 The **`playbackRate`** property of
 the `AudioBufferSourceNode` interface Is a k-rate `AudioParam` that
 defines the speed at which the audio asset will be played.

 A value of 1.0 indicates it should play at the same speed as its sampling rate,
 values less than 1.0 cause the sound to play more slowly, while values greater than
 1.0 result in audio playing faster than normal. The default value is `1.0`.
 When set to another value, the `AudioBufferSourceNode` resamples the audio
 before sending it to the output.

Value
-----

 An `AudioParam` whose `value` is a
 floating-point value indicating the playback rate of the audio as a decimal proportion
 of the original sampling rate.

 Consider a sound buffer containing audio sampled at 44.1 kHz (44,100 samples per
 second). Let's see what a few values of `playbackRate` do:

* A `playbackRate` of 1.0 plays the audio at full speed, or 44,100 Hz.
* A `playbackRate` of 0.5 plays the audio at half speed, or 22,050 Hz.
* A `playbackRate` of 2.0 doubles the audio's playback rate to 88,200 Hz.
Examples
--------

### Setting `playbackRate`

In this example, when the user presses "Play", we load an audio track, decode it, and put it into an `AudioBufferSourceNode`.

The example then sets the `loop` property to `true`, so the track loops, and plays the track.

The user can set the `playbackRate` property using a range control.

**Note:** You can run the full example live (or view the source.)


```js
let audioCtx;
let buffer;
let source;

const play = document.getElementById("play");
const stop = document.getElementById("stop");

const playbackControl = document.getElementById("playback-rate-control");
const playbackValue = document.getElementById("playback-rate-value");

async function loadAudio() {
  try {
    // Load an audio file
    const response = await fetch("rnb-lofi-melody-loop.wav");
    // Decode it
    buffer = await audioCtx.decodeAudioData(await response.arrayBuffer());
  } catch (err) {
    console.error(`Unable to fetch the audio file. Error: ${err.message}`);
  }
}

play.addEventListener("click", async () => {
  if (!audioCtx) {
    audioCtx = new AudioContext();
    await loadAudio();
  }
  source = audioCtx.createBufferSource();
  source.buffer = buffer;
  source.connect(audioCtx.destination);
  source.loop = true;
  source.playbackRate.value = playbackControl.value;
  source.start();
  play.disabled = true;
  stop.disabled = false;
  playbackControl.disabled = false;
});

stop.addEventListener("click", () => {
  source.stop();
  play.disabled = false;
  stop.disabled = true;
  playbackControl.disabled = true;
});

playbackControl.oninput = () => {
  source.playbackRate.value = playbackControl.value;
  playbackValue.textContent = playbackControl.value;
};
```

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

| Specification |
| --- |
| Web Audio API # dom-audiobuffersourcenode-playbackrate |

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

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

See also
--------

* Using the Web Audio API
* Web Audio API
StylePropertyMap: set() method
==============================

 The **`set()`** method of the `StylePropertyMap`
 interface changes the CSS declaration with the given property.

Syntax
------


```js
set(property, value)
```

### Parameters

`property`

 An identifier indicating the stylistic feature (e.g. font, width, background
 color) to change.


`value`

The value the given property should have.

### Return value

None (`undefined`).

Examples
--------

 This example sets the `padding-top` property, with the given value, within
 the element's style attribute.


```js
// get the button element
const buttonEl = document.querySelector("button");

// set padding-top on button style attribute
buttonEl.attributeStyleMap.set("padding-top", CSS.px(10));
```

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

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-stylepropertymap-set |

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

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

 The **`append()`** method of the
 `StylePropertyMap` interface adds the passed CSS value to the
 `StylePropertyMap` with the given property.

Syntax
------


```js
append(property, value)
```

### Parameters

`property`

 An identifier indicating the stylistic feature (e.g. font, width, background
 color) to add.


`value`

The value the given property should have.

### Return value

None (`undefined`).

Examples
--------

 This example shows an extra background image value being added to the
 `background-image` property of the element, using
 `HTMLElement.attributeStyleMap`.


```js
// get the button element
const buttonEl = document.querySelector("button");

// append another value to the background-image property set on the attribute
buttonEl.attributeStyleMap.append(
  "background-image",
  "linear-gradient(180deg, blue, black)",
);
```

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

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-stylepropertymap-append |

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

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

 The **`delete()`** method of the
 `StylePropertyMap` interface removes the CSS declaration with the given
 property.

Syntax
------


```js
delete(property)
```

### Parameters

`property`

 An identifier indicating the stylistic feature (e.g. font, width, background
 color) to remove.


### Return value

None (`undefined`).

Examples
--------

 The following example removes the `background-image` property from the
 element's style attribute.


```js
// get the button element
const buttonEl = document.querySelector("button");

// remove background-image from style attribute
buttonEl.attributeStyleMap.delete("background-image");
```

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

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-stylepropertymap-delete |

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

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

 The **`clear()`** method of the `StylePropertyMap`
 interface removes all declarations in the `StylePropertyMap`.

Syntax
------


```js
clear()
```

### Parameters

None.

### Return value

None (`undefined`).

Examples
--------

The following example removes all styles within the elements style attribute.


```js
// get the button element
const buttonEl = document.querySelector(".example");

// remove all styles from the style attribute
buttonEl.attributeStyleMap.clear();
```

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

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-stylepropertymap-clear |

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

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

 The read-only **`length`** property of the `NamedNodeMap` interface
 is the number of objects stored in the map.

Value
-----

A number containing the number of objects in the map

Example
-------


```html
<pre zero="test" one="test" two="test"></pre>
```



```js
const pre = document.querySelector("pre");
const attrMap = pre.attributes;
pre.textContent = `The 'test' attribute contains ${attrMap.length} attributes.\n`;
```

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

| Specification |
| --- |
| DOM Standard # dom-namednodemap-length |

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

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

 The **`removedNamedItemNS()`** method of the `NamedNodeMap` interface
 removes the `Attr` corresponding to the given namespace and local name from the map.

Syntax
------


```js
removeNamedItem(namespace, localName)
```

### Parameters

`namespace`

The namespace of the attribute to remove from the map

**Warning:** `namespace` is the URI of the namespace, not the prefix.

`localName`

The local name of the attribute to remove from the map.

### Return value

The removed `Attr`.

### Exceptions

`NotFoundError` `DOMException`

Thrown if there is no attribute with the given namespace and local name.

Example
-------
```

<pre></pre>
```



```js
const parser = new DOMParser();
const xmlString =
  '<warning ob:one="test" xmlns:ob="http://www.example.com/ob">Beware!</warning>';
const doc = parser.parseFromString(xmlString, "application/xml");

const pre = document.querySelector("pre");
const warning = doc.querySelector("warning");
const attrMap = warning.attributes;

let result = `The 'ob:one' attribute initially contains '${attrMap["ob:one"].value}'.\n`;

result += "We remove it.\n\n";
attrMap.removeNamedItemNS("http://www.example.com/ob", "one");

result += attrMap["ob:one"]
  ? "And 'ob:one' still exists."
  : "And 'ob:one' is no more to be found.";

pre.textContent = result;
```

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

| Specification |
| --- |
| DOM Standard # dom-namednodemap-removenameditemns |

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

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

The **`getNamedItem()`** method of the `NamedNodeMap` interface returns the `Attr` corresponding to the given name, or `null` if there is no corresponding attribute.

**Note:** This method is also called when you use the operator `[]` syntax.
 So, `myMap[str]`is equivalent to `myMap.getNamedItem(str)` where `str` is a string.


Syntax
------


```js
getNamedItem(name)
[name]
```

### Parameters

`name`

A string with the name of the desired attribute.

### Return value

An `Attr` corresponding to the `name` given in parameter, or `null` if none has been found.

Example
-------


```html
<pre test="test"></pre>
```



```js
const pre = document.querySelector("pre");
const attrMap = pre.attributes;
const value = attrMap.getNamedItem("test").value;
pre.textContent = `The 'test' attribute contains ${value}.
And 'boum' has ${attrMap["boum"] ? "been" : "not been"} found.`;
```

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

| Specification |
| --- |
| DOM Standard # dom-namednodemap-getnameditem |

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

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

The **`getNamedItemNS()`** method of the `NamedNodeMap` interface returns the `Attr` corresponding to the given local name in the given namespace, or `null` if there is no corresponding attribute.

Syntax
------


```js
getNamedItemNS(namespace, localName)
```

### Parameters

`namespace`

A string with the namespace URI of the desired attribute.

**Warning:** `namespace` is the URI of the namespace, not the prefix.

`localName`

A string with the localName of the desired attribute.

### Return value

An `Attr` corresponding to the namespace and local name given in parameters, or `null` if none has been found.

Example
-------
```

<pre></pre>
```



```js
const parser = new DOMParser();
const xmlString =
  '<warning ob:one="test" xmlns:ob="http://www.example.com/ob">Beware!</warning>';
const doc = parser.parseFromString(xmlString, "application/xml");

const pre = document.querySelector("pre");
const warning = doc.querySelector("warning");

const value = warning.attributes.getNamedItemNS(
  "http://www.example.com/ob",
  "one",
).value;

pre.textContent = `The 'ob:one' attribute contains: ${value}.`;
```

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

| Specification |
| --- |
| DOM Standard # dom-namednodemap-getnameditemns |

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

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

 The **`removeNamedItem()`** method of the `NamedNodeMap` interface
 removes the `Attr` corresponding to the given name from the map.

Syntax
------


```js
removeNamedItem(attrName)
```

### Parameters

`attrName`

The name of the attribute to remove from the map.

### Return value

The removed `Attr`.

### Exceptions

`NotFoundError` `DOMException`

Thrown if there is no attribute with the given name.

Example
-------


```html
<pre test="testValue"></pre>
```



```js
const pre = document.querySelector("pre");
const attrMap = pre.attributes;

let result = `The 'test' attribute initially contains '${attrMap["test"].value}'.\n`;

result += "We remove it.\n\n";
attrMap.removeNamedItem("test");

result += attrMap.getNamedItem("test")
  ? "And 'test' still exists."
  : "And 'test' is no more to be found.";

pre.textContent = result;
```

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

| Specification |
| --- |
| DOM Standard # dom-namednodemap-removenameditem |

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

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

 The **`setNamedItem()`** method of the `NamedNodeMap` interface
 puts the `Attr` identified by its name in the map.
 If there is already an `Attr` with the same name in the map,
 it is *replaced*.

Syntax
------


```js
setNamedItem(attr)
```

### Parameters

`attr`

the attribute to insert in the map.

### Return value

Returns the old attribute if replaced, or `null` if the attribute is new.

### Exceptions

`InUseAttributeError` `DOMException`

Thrown if the attribute is still part of another map.

Example
-------


```html
<span one="one" two="two"></span>
<pre test="testValue"></pre>
```



```js
const span = document.querySelector("span");
const pre = document.querySelector("pre");
const attrMap = pre.attributes;

let result = `The '<pre>' element initially contains ${attrMap.length} attributes.\n\n`;

result += "We remove `one` from `<span>` and adds it to `<pre>`.\n";
const one = span.attributes.removeNamedItem("one");
attrMap.setNamedItem(one);
result += `The '<pre>' element now contains ${pre.attributes.length} attributes.\n\n`;

result += "We get 'two' from '<span>' and try to adds it to '<pre>'.\n";
const two = span.attributes.getNamedItem("two");
try {
  attrMap.setNamedItem(two);
} catch (error) {
  result += `An exception has been raised: ${error.name}.\n`;
}

pre.textContent = result;
```

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

| Specification |
| --- |
| DOM Standard # dom-namednodemap-setnameditem |

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

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