recursal/MDN huggingface dataset:
BaseAudioContext: createBufferSource() method
=============================================

 The `createBufferSource()` method of the `BaseAudioContext`
 Interface is used to create a new `AudioBufferSourceNode`, which can be
 used to play audio data contained within an `AudioBuffer` object. `AudioBuffer`s are created using
 `BaseAudioContext.createBuffer` or returned by
 `BaseAudioContext.decodeAudioData` when it successfully decodes an audio
 track.


**Note:** The `AudioBufferSourceNode()`
 constructor is the recommended way to create a `AudioBufferSourceNode`; see
 Creating an AudioNode.


Syntax
------


```js
createBufferSource()
```

### Parameters

None.

### Return value

An `AudioBufferSourceNode`.

Examples
--------

 In this example, we create a two second buffer, fill it with white noise, and then play
 it via an `AudioBufferSourceNode`. The comments should clearly explain
 what is going on.


**Note:** You can also run the code live,
 or view the source.



```js
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
const button = document.querySelector("button");
const pre = document.querySelector("pre");
const myScript = document.querySelector("script");

pre.innerHTML = myScript.innerHTML;

// Stereo
const channels = 2;
// Create an empty two second stereo buffer at the
// sample rate of the AudioContext
const frameCount = audioCtx.sampleRate \* 2.0;

const myArrayBuffer = audioCtx.createBuffer(
  channels,
  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;
  // connect the AudioBufferSourceNode to the
  // destination so we can hear the sound
  source.connect(audioCtx.destination);
  // start the source playing
  source.start();
};
```

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

| Specification |
| --- |
| Web Audio API # dom-baseaudiocontext-createbuffersource |

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

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

See also
--------

* Using the Web Audio API
BaseAudioContext: createAnalyser() method
=========================================

 The `createAnalyser()` method of the
 `BaseAudioContext` interface creates an `AnalyserNode`, which
 can be used to expose audio time and frequency data and create data visualizations.


**Note:** The `AnalyserNode()` constructor is the
 recommended way to create an `AnalyserNode`; see
 Creating an AudioNode.



**Note:** For more on using this node, see the
 `AnalyserNode` page.


Syntax
------


```js
createAnalyser()
```

### Parameters

None.

### Return value

An `AnalyserNode`.

Examples
--------

 The following example shows basic usage of an AudioContext to create an Analyser node,
 then use requestAnimationFrame() to collect time domain data repeatedly and draw an
 "oscilloscope style" output of the current audio input. For more complete applied
 examples/information, check out our Voice-change-O-matic demo (see
 app.js lines 108-193 for relevant code).


```js
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
const analyser = audioCtx.createAnalyser();

// …

analyser.fftSize = 2048;
const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);
analyser.getByteTimeDomainData(dataArray);

// draw an oscilloscope of the current audio source

function draw() {
  drawVisual = requestAnimationFrame(draw);

  analyser.getByteTimeDomainData(dataArray);

  canvasCtx.fillStyle = "rgb(200 200 200)";
  canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);

  canvasCtx.lineWidth = 2;
  canvasCtx.strokeStyle = "rgb(0 0 0)";

  canvasCtx.beginPath();

  const sliceWidth = (WIDTH \* 1.0) / bufferLength;
  let x = 0;

  for (let i = 0; i < bufferLength; i++) {
    const v = dataArray[i] / 128.0;
    const y = (v \* HEIGHT) / 2;

    if (i === 0) {
      canvasCtx.moveTo(x, y);
    } else {
      canvasCtx.lineTo(x, y);
    }

    x += sliceWidth;
  }

  canvasCtx.lineTo(canvas.width, canvas.height / 2);
  canvasCtx.stroke();
}

draw();
```

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

| Specification |
| --- |
| Web Audio API # dom-baseaudiocontext-createanalyser |

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

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

See also
--------

* Using the Web Audio API
BaseAudioContext: createConvolver() method
==========================================

 The `createConvolver()` method of the `BaseAudioContext`
 interface creates a `ConvolverNode`, which is commonly used to apply
 reverb effects to your audio. See the spec definition of Convolution for more information.


**Note:** The `ConvolverNode()`
 constructor is the recommended way to create a `ConvolverNode`; see
 Creating an AudioNode.


Syntax
------


```js
createConvolver()
```

### Parameters

None.

### Return value

A `ConvolverNode`.

Examples
--------

### Creating a convolver node

 The following example shows how to use an AudioContext to create a convolver node.
 You create an `AudioBuffer` containing a sound sample to be used
 as an ambience to shape the convolution (called the *impulse response*) and
 apply that to the convolver. The example below uses a short sample of a concert hall
 crowd, so the reverb effect applied is really deep and echoey.

For more complete applied examples/information, check out our Voice-change-O-matic demo (see app.js for the code that is excerpted below).


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

const convolver = audioCtx.createConvolver();
// ...

// Grab audio track via fetch() for convolver node
try {
  const response = await fetch(
    "https://mdn.github.io/voice-change-o-matic/audio/concert-crowd.ogg",
  );
  const arrayBuffer = await response.arrayBuffer();
  const decodedAudio = await audioCtx.decodeAudioData(arrayBuffer);
  convolver.buffer = decodedAudio;
} catch (error) {
  console.error(
    `Unable to fetch the audio file: ${name} Error: ${err.message}`,
  );
}
```

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

| Specification |
| --- |
| Web Audio API # dom-baseaudiocontext-createconvolver |

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

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

See also
--------

* Using the Web Audio API
BaseAudioContext: createGain() method
=====================================

 The `createGain()` method of the `BaseAudioContext`
 interface creates a `GainNode`, which can be used to control the
 overall gain (or volume) of the audio graph.


**Note:** The `GainNode()`
 constructor is the recommended way to create a `GainNode`; see
 Creating an AudioNode.


Syntax
------


```js
createGain()
```

### Parameters

None.

### Return value

 A `GainNode` which takes as input one or more audio sources and outputs
 audio whose volume has been adjusted in gain (volume) to a level specified by the node's
 `GainNode.gain` a-rate
 parameter.

Examples
--------

 The following example shows basic usage of an `AudioContext` to create a
 `GainNode`, which is then used to mute and unmute the audio when a Mute
 button is clicked by changing the `gain` property value.

 The below snippet wouldn't work as is — for a complete working example, check out our
 Voice-change-O-matic demo (view source.)


```html
<div>
  <button class="mute">Mute button</button>
</div>
```



```js
const audioCtx = new AudioContext();
const gainNode = audioCtx.createGain();
const mute = document.querySelector(".mute");
let source;

if (navigator.mediaDevices.getUserMedia) {
  navigator.mediaDevices.getUserMedia(
    // constraints - only audio needed for this app
    {
      audio: true,
    },

    // Success callback
    (stream) => {
      source = audioCtx.createMediaStreamSource(stream);
    },

    // Error callback
    (err) => {
      console.error(`The following gUM error occurred: ${err}`);
    },
  );
} else {
  console.error("getUserMedia not supported on your browser!");
}

source.connect(gainNode);
gainNode.connect(audioCtx.destination);

// …

mute.onclick = () => {
  if (mute.id === "") {
    // 0 means mute. If you still hear something, make sure you haven't
    // connected your source into the output in addition to using the GainNode.
    gainNode.gain.setValueAtTime(0, audioCtx.currentTime);
    mute.id = "activated";
    mute.textContent = "Unmute";
  } else {
    gainNode.gain.setValueAtTime(1, audioCtx.currentTime);
    mute.id = "";
    mute.textContent = "Mute";
  }
};
```

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

| Specification |
| --- |
| Web Audio API # dom-baseaudiocontext-creategain |

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

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

See also
--------

* Using the Web Audio API
BaseAudioContext: createDelay() method
======================================

 The `createDelay()` method of the
 `BaseAudioContext` Interface is used to create a `DelayNode`,
 which is used to delay the incoming audio signal by a certain amount of time.


**Note:** The `DelayNode()`
 constructor is the recommended way to create a `DelayNode`; see
 Creating an AudioNode.


Syntax
------


```js
createDelay(maxDelayTime)
```

### Parameters

`maxDelayTime` Optional

 The maximum amount of time, in seconds, that the audio signal can be delayed by.
 Must be less than 180 seconds, and defaults to 1 second if not specified.


### Return value

 A `DelayNode`. The default `DelayNode.delayTime` is 0
 seconds.

Examples
--------

 We have created a simple example that allows you to play three different samples on a
 constant loop — see create-delay (you can also
 view the source code). If
 you just press the play buttons, the loops will start immediately; if you slide the
 sliders up to the right, then press the play buttons, a delay will be introduced, so the
 looping sounds don't start playing for a short amount of time.


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

const synthDelay = audioCtx.createDelay(5.0);

// …

let synthSource;

playSynth.onclick = () => {
  synthSource = audioCtx.createBufferSource();
  synthSource.buffer = buffers[2];
  synthSource.loop = true;
  synthSource.start();
  synthSource.connect(synthDelay);
  synthDelay.connect(destination);
  this.setAttribute("disabled", "disabled");
};

stopSynth.onclick = () => {
  synthSource.disconnect(synthDelay);
  synthDelay.disconnect(destination);
  synthSource.stop();
  playSynth.removeAttribute("disabled");
};

// …

let delay1;
rangeSynth.oninput = () => {
  delay1 = rangeSynth.value;
  synthDelay.delayTime.setValueAtTime(delay1, audioCtx.currentTime);
};
```

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

| Specification |
| --- |
| Web Audio API # dom-baseaudiocontext-createdelay |

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

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

See also
--------

* Using the Web Audio API
BaseAudioContext: statechange event
===================================

A `statechange` event is fired at a `BaseAudioContext` object when its `state` member changes.

Syntax
------

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


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

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

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

A generic `Event`.

Examples
--------

 The following snippet is taken from our AudioContext states demo (see it running live.) The `onstatechange` handler is used to log the current
 `state` to the console every time it changes.


```js
audioCtx.onstatechange = () => {
  console.log(audioCtx.state);
};
```

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

| Specification |
| --- |
| Web Audio API # dom-baseaudiocontext-onstatechange |

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

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

See also
--------

* Using the Web Audio API
BaseAudioContext: listener property
===================================

 The `listener` property of the `BaseAudioContext` interface
 returns an `AudioListener` object that can then be used for
 implementing 3D audio spatialization.

Value
-----

An `AudioListener` object.

Examples
--------

**Note:** for a full Web Audio spatialization example, see our panner-node demo.


```js
const audioCtx = new AudioContext();
// Older webkit/blink browsers require a prefix

// …

const myListener = audioCtx.listener;
```

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

| Specification |
| --- |
| Web Audio API # dom-baseaudiocontext-listener |

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

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

See also
--------

* Using the Web Audio API
BaseAudioContext: audioWorklet property
=======================================

**Secure context:** This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

 The `audioWorklet` read-only property of the
 `BaseAudioContext` interface returns an instance of
 `AudioWorklet` that can be used for adding
 `AudioWorkletProcessor`-derived classes which implement custom audio
 processing.

Value
-----

An `AudioWorklet` instance.

Examples
--------

*For a complete example demonstrating user-defined audio processing, see the
`AudioWorkletNode` page.*

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

| Specification |
| --- |
| Web Audio API # dom-baseaudiocontext-audioworklet |

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

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

See also
--------

* Using Web Audio API
* `AudioWorkletNode`
BaseAudioContext: createStereoPanner() method
=============================================

 The `createStereoPanner()` method of the `BaseAudioContext` interface creates a `StereoPannerNode`, which can be used to apply
 stereo panning to an audio source.
 It positions an incoming audio stream in a stereo image using a low-cost panning algorithm.


**Note:** The `StereoPannerNode()`
 constructor is the recommended way to create a `StereoPannerNode`; see
 Creating an AudioNode.


Syntax
------


```js
createStereoPanner()
```

### Parameters

None.

### Return value

A `StereoPannerNode`.

Examples
--------

 In our StereoPannerNode example (see source code) HTML we have a simple `<audio>` element along with a
 slider `<input>` to increase and decrease pan value. In the JavaScript we
 create a `MediaElementAudioSourceNode` and a
 `StereoPannerNode`, and connect the two together using the
 `connect()` method. We then use an `oninput` event handler to
 change the value of the `StereoPannerNode.pan` parameter and update the pan
 value display when the slider is moved.

 Moving the slider left and right while the music is playing pans the music across to
 the left and right speakers of the output, respectively.


```js
const audioCtx = new AudioContext();
const myAudio = document.querySelector("audio");

const panControl = document.querySelector(".panning-control");
const panValue = document.querySelector(".panning-value");

// Create a MediaElementAudioSourceNode
// Feed the HTMLMediaElement into it
const source = audioCtx.createMediaElementSource(myAudio);

// Create a stereo panner
const panNode = audioCtx.createStereoPanner();

// Event handler function to increase panning to the right and left
// when the slider is moved

panControl.oninput = () => {
  panNode.pan.setValueAtTime(panControl.value, audioCtx.currentTime);
  panValue.innerHTML = panControl.value;
};

// connect the MediaElementAudioSourceNode to the panNode
// and the panNode to the destination, so we can play the
// music and adjust the panning using the controls
source.connect(panNode);
panNode.connect(audioCtx.destination);
```

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

| Specification |
| --- |
| Web Audio API # dom-baseaudiocontext-createstereopanner |

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

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

See also
--------

* Using the Web Audio API
BaseAudioContext: destination property
======================================

 The `destination` property of the `BaseAudioContext`
 interface returns an `AudioDestinationNode` representing the final
 destination of all audio in the context. It often represents an actual audio-rendering
 device such as your device's speakers.

Value
-----

An `AudioDestinationNode`.

Examples
--------

**Note:** For more complete applied examples/information, check out our Voice-change-O-matic demo (see app.js lines 108–193 for relevant code).


```js
const audioCtx = new AudioContext();
// Older webkit/blink browsers require a prefix

const oscillatorNode = audioCtx.createOscillator();
const gainNode = audioCtx.createGain();

oscillatorNode.connect(gainNode);
gainNode.connect(audioCtx.destination);
```

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

| Specification |
| --- |
| Web Audio API # dom-baseaudiocontext-destination |

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

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

See also
--------

* Using the Web Audio API
BaseAudioContext: sampleRate property
=====================================

 The `sampleRate` property of the `BaseAudioContext` interface returns a floating point number representing
 the sample rate, in samples per second, used by all nodes in this audio
 context. This limitation means that sample-rate converters are not supported.

Value
-----

 A floating point number indicating the audio context's sample rate, in samples per
 second.

Examples
--------

**Note:** for a full Web Audio example implementation, see one of our
 Web Audio Demos on the MDN GitHub repo. Try entering
 `audioCtx.sampleRate` into your browser console.



```js
const audioCtx = new AudioContext();
// Older webkit/blink browsers require a prefix

// …

console.log(audioCtx.sampleRate);
```

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

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

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

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

See also
--------

* Using the Web Audio API
DOMPoint: fromPoint() static method
===================================

 The **`DOMPoint`** static method
 `fromPoint()` creates and returns a new mutable `DOMPoint`
 object given a source point.

 You can also create a new `DOMPoint` object using the
 `new DOMPoint()` constructor.

 Although this interface is based on `DOMPointReadOnly`, it is not read-only;
 the properties within may be changed at will.

Syntax
------


```js
DOMPoint.fromPoint(sourcePoint)
```

### Parameters

`sourcePoint`

 A `DOMPoint` or `DOMPointReadOnly` instance, or an object containing the following properties, from which to take the
 values of the new point's properties:


`x`

An unrestricted floating-point value indicating the `x`-coordinate of the point in space. This is generally the horizontal coordinate, with positive values being to the right and negative values to the left. The default value is `0`.

`y`

An unrestricted floating-point number providing the point's `y`-coordinate. This is the vertical coordinate, and barring any transforms applied to the coordinate system, positive values are downward and negative values upward toward the top of the screen. The default is `0`.

`z`

An unrestricted floating-point value which gives the point's `z`-coordinate, which is (assuming no transformations that alter the situation) the depth coordinate; positive values are closer to the user and negative values retreat back into the screen. The default value is `0`.

`w`

The point's `w` perspective value, given as an unrestricted floating-point number. The default is `1`.


### Return value

 A new `DOMPoint` object whose coordinate and perspective values are
 identical to those in the source point. The point's properties are mutable and may be
 changed at any time.

Examples
--------

### Creating a mutable point from a read-only point

 If you have a `DOMPointReadOnly` object, you can easily create a mutable
 copy of that point:


```js
const mutablePoint = DOMPoint.fromPoint(readOnlyPoint);
```

### Creating a 2D point

 This sample creates a 2D point, specifying an inline object that includes the values to
 use for `x` and `y`. The *z* and *w* properties are allowed to keep their default
 values (0 and 1 respectively).


```js
const center = DOMPoint.fromPoint({ x: 75, y: -50, z: -55, w: 0.25 });
```

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

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # dom-dompoint-frompoint |

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

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

 The **`DOMPoint`** interface's
 **`w`** property holds the point's perspective value, w, for a
 point in space.

Value
-----

 A double-precision floating-point value indicating the *w* perspective value for
 the point. This value is **unrestricted**, meaning that it is allowed to be
 infinite or invalid (that is, its value may be `NaN` or `±Infinity`). The default is 1.0.

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

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # dom-dompointreadonly-w |

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

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

See also
--------

* The other coordinate properties: `x`,
 `y`, and `z`.
DOMPoint: z property
====================

 The **`DOMPoint`** interface's
 **`z`** property specifies the depth coordinate of a point in
 space.

 Unless transforms have changed the orientation, a `z` of 0 is
 the plane of the screen, with positive values extending outward toward the user from the
 screen, and negative values receding into the distance behind the screen.

Value
-----

 A double-precision floating-point value indicating the *z* coordinate's value
 for the point. This value is **unrestricted**, meaning that it is allowed
 to be infinite or invalid (that is, its value may be `NaN` or
 `±Infinity`).

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

| Specification |
| --- |
| Geometry Interfaces Module Level 1 # dom-dompointreadonly-z |

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

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

See also
--------

* The other coordinate properties: `x`,
 `y`, and the perspective value, `w`.