recursal/MDN huggingface dataset:
PannerNode: refDistance property
================================

The `refDistance` property of the `PannerNode` interface is a double value representing the reference distance for reducing volume as the audio source moves further from the listener – i.e. the distance at which the volume reduction starts taking effect. This value is used by all distance models.

The `refDistance` property's default value is `1`.

Value
-----

A non-negative number. If the value is set to less than 0, a `RangeError` is thrown.

### Exceptions

`RangeError`

Thrown if the property has been given a value that is outside the accepted range.

Examples
--------

This example demonstrates how different values of `refDistance` affect how the volume of a sound decays as it moves away from the listener. Unlike `rolloffFactor`, changing this value also *delays* the volume decay until the sound moves past the reference point.


```js
const context = new AudioContext();
// all our test tones will last this many seconds
const NOTE\_LENGTH = 6;
// this is how far we'll move the sound
const Z\_DISTANCE = 20;

// this function creates a graph for the test tone with a given refDistance
// and schedules it to move away from the listener along the Z (depth-wise) axis
// at the given start time, resulting in a decrease in volume (decay)
const scheduleTestTone = (refDistance, startTime) => {
  const osc = new OscillatorNode(context);

  const panner = new PannerNode(context);
  panner.refDistance = refDistance;

  // set the initial Z position, then schedule the ramp
  panner.positionZ.setValueAtTime(0, startTime);
  panner.positionZ.linearRampToValueAtTime(Z\_DISTANCE, startTime + NOTE\_LENGTH);

  osc.connect(panner).connect(context.destination);

  osc.start(startTime);
  osc.stop(startTime + NOTE\_LENGTH);
};

// this tone should decay immediately and fairly quickly
scheduleTestTone(1, context.currentTime);
// this tone should decay slower and later than the previous one
scheduleTestTone(4, context.currentTime + NOTE\_LENGTH);
// this tone should decay only slightly, and only start decaying fairly late
scheduleTestTone(7, context.currentTime + NOTE\_LENGTH \* 2);
```


After running this code, the resulting waveforms should look something like this:

![A waveform visualization of three oscillator tones produced in Web Audio. Each oscillator moves away from the listener at the same speed, but with different refDistances affecting the resulting volume decay.](/en-US/docs/Web/API/PannerNode/refDistance/screen_shot_2018-10-11_at_23.14.32.png)

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

| Specification |
| --- |
| Web Audio API # dom-pannernode-refdistance |

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 spatialization basics
PannerNode: positionX property
==============================

 The **`positionX`** property of the `PannerNode` interface specifies the X coordinate of the audio source's position in 3D Cartesian
 coordinates, corresponding to the *horizontal* axis (left-right).

 The complete vector is defined by the position of the audio source, given as
 (`positionX`, `positionY`, `positionZ`), and the orientation
 of the audio source (that is, the direction in which it's facing), given as
 (`orientationX`,
 `orientationY`,
 `orientationZ`).

 Depending on the directionality of the sound (as specified using the attributes
 `coneInnerAngle`,
 `coneOuterAngle`, and
 `codeOuterGain`), the orientation of the
 sound may alter the perceived volume of the sound as it's being played. If the sound
 is pointing toward the listener, it will be louder than if the sound is pointed away
 from the listener.

 The `AudioParam` contained by this property is read only; however, you
 can still change the value of the parameter by assigning a new value to its
 `AudioParam.value` property.

Value
-----

 An `AudioParam` whose `value` is the X coordinate of the audio
 source's position, in 3D Cartesian coordinates. The default value is 0.

Examples
--------

 The following example starts an oscillator, and pans it to the left after 1 second, to
 the right after 2 seconds, and back to the center after 3 seconds.


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

const osc = new OscillatorNode(context);
const panner = new PannerNode(context);

panner.positionX.setValueAtTime(-1, context.currentTime + 1);
panner.positionX.setValueAtTime(1, context.currentTime + 2);
panner.positionX.setValueAtTime(0, context.currentTime + 3);

osc.connect(panner).connect(context.destination);

osc.start(0);
```

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

| Specification |
| --- |
| Web Audio API # dom-pannernode-positionx |

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 spatialization basics
* `PannerNode`
PannerNode: coneOuterAngle property
===================================

The `coneOuterAngle` property of the `PannerNode` interface is a double value describing the angle, in degrees, of a cone outside of which the volume will be reduced by a constant value, defined by the `coneOuterGain` property.

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

Value
-----

A double.

Examples
--------

See `PannerNode.orientationX` for example code that demonstrates the effect on volume of changing the `PannerNode` orientation parameters in combination with `coneInnerAngle` and `coneOuterAngle`.

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

| Specification |
| --- |
| Web Audio API # dom-pannernode-coneouterangle |

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 spatialization basics
PannerNode: panningModel property
=================================

The `panningModel` property of the `PannerNode` interface is an enumerated value determining which spatialization algorithm to use to position the audio in 3D space.

The possible values are:

* `equalpower`: Represents the equal-power panning algorithm, generally regarded as simple and efficient. `equalpower` is the default value.
* `HRTF`: Renders a stereo output of higher quality than `equalpower` — it uses a convolution with measured impulse responses from human subjects.
Value
-----

An enum — see `PanningModelType`.

Examples
--------

See `BaseAudioContext.createPanner()` for example code.

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

| Specification |
| --- |
| Web Audio API # dom-pannernode-panningmodel |

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

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

See also
--------

* Using the Web Audio API
PannerNode: positionZ property
==============================

 The **`positionZ`** property of the `PannerNode` interface specifies the Z coordinate of the audio source's position in 3D Cartesian
 coordinates, corresponding to the *depth* axis (behind-in front of the
 listener). The complete vector is defined by the position of the audio source, given
 as (`positionX`,
 `positionY`, `positionZ`), and the orientation of the audio source (that is, the direction in
 which it's facing), given as (`orientationX`,
 `orientationY`,
 `orientationZ`).

 Depending on the directionality of the sound (as specified using the attributes
 `coneInnerAngle`,
 `coneOuterAngle`, and
 `codeOuterGain`), the orientation of the
 sound may alter the perceived volume of the sound as it's being played. If the sound
 is pointing toward the listener, it will be louder than if the sound is pointed away
 from the listener.

 The `AudioParam` contained by this property is read only; however, you
 can still change the value of the parameter by assigning a new value to its
 `AudioParam.value` property.

Value
-----

 An `AudioParam` whose `value` is the Z coordinate of the audio
 source's position, in 3D Cartesian coordinates.

Examples
--------

 The following example starts an oscillator and moves it in front of the listener after
 1 second, behind the listener after 2 seconds, and back to the listener's position after
 3 seconds. Note that in this case, the change will mainly affect the timbre and
 perceived volume of the sound.


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

const osc = new OscillatorNode(context);
const panner = new PannerNode(context);
panner.panningModel = "HRTF";

panner.positionZ.setValueAtTime(1, context.currentTime + 1);
panner.positionZ.setValueAtTime(-1, context.currentTime + 2);
panner.positionZ.setValueAtTime(0, context.currentTime + 3);

osc.connect(panner).connect(context.destination);

osc.start(0);
```

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

| Specification |
| --- |
| Web Audio API # dom-pannernode-positionz |

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 spatialization basics
* `PannerNode`
PannerNode: setPosition() method
================================

**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.

**Note:** The suggested replacement for this deprecated method is to instead set the `positionX`, `positionY`, and `positionZ` attributes directly.

The `setPosition()` method of the `PannerNode` Interface defines the position of the audio source relative to the listener (represented by an `AudioListener` object stored in the `BaseAudioContext.listener` attribute.) The three parameters `x`, `y` and `z` are unitless and describe the source's position in 3D space using the right-hand Cartesian coordinate system.

The `setPosition()` method's default value of the position is `(0, 0, 0)`.

Syntax
------


```js
setPosition(x, y, z)
```

### Parameters

`x`

The x position of the panner in 3D space.

`y`

The y position of the panner in 3D space.

`z`

The z position of the panner in 3D space.

### Return value

None (`undefined`).

Examples
--------

See `BaseAudioContext.createPanner()` for example code.

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

| Specification |
| --- |
| Web Audio API # dom-pannernode-setposition |

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

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

See also
--------

* Using the Web Audio API
PannerNode: orientationY property
=================================

 The **`orientationY`** property of the `PannerNode` interface
 indicates the Y (vertical) component of the direction the audio source is facing, in 3D Cartesian coordinate space.

 The complete vector is defined by the position of the audio source, given as
 (`positionX`, `positionY`, `positionZ`), and the orientation
 of the audio source (that is, the direction in which it's facing), given as
 (`orientationX`,
 `orientationY`,
 `orientationZ`).

 Depending on the directionality of the sound (as specified using the attributes
 `coneInnerAngle`,
 `coneOuterAngle`, and
 `codeOuterGain`), the orientation of the
 sound may alter the perceived volume of the sound as it's being played. If the sound
 is pointing toward the listener, it will be louder than if the sound is pointed away
 from the listener.

 The `AudioParam` contained by this property is read only; however, you
 can still change the value of the parameter by assigning a new value to its
 `AudioParam.value` property.

Value
-----

 An `AudioParam` whose `value` is the Y component of the
 direction the audio source is facing, in 3D Cartesian coordinate space.

Examples
--------

See `PannerNode.orientationX` for example code that demonstrates the effect on volume of changing the `PannerNode` orientation parameters in combination with `coneInnerAngle` and `coneOuterAngle`.

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

| Specification |
| --- |
| Web Audio API # dom-pannernode-orientationy |

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 spatialization basics
* `PannerNode`
PannerNode: distanceModel property
==================================

The `distanceModel` property of the `PannerNode` interface is an enumerated value determining which algorithm to use to reduce the volume of the audio source as it moves away from the listener.

The possible values are:

* `linear`: A *linear distance model* calculating the gain induced by the distance according to:
 `1 - rolloffFactor * (distance - refDistance) / (maxDistance - refDistance)`
* `inverse`: An *inverse distance model* calculating the gain induced by the distance according to:
 `refDistance / (refDistance + rolloffFactor * (Math.max(distance, refDistance) - refDistance))`
* `exponential`: An *exponential distance model* calculating the gain induced by the distance according to:
 `pow((Math.max(distance, refDistance) / refDistance, -rolloffFactor)`.

`inverse` is the default value of `distanceModel`.

Value
-----

An enum — see `DistanceModelType`.

Examples
--------

See `BaseAudioContext.createPanner()` for example code.

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

| Specification |
| --- |
| Web Audio API # dom-pannernode-distancemodel |

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 spatialization basics
PannerNode: maxDistance property
================================

The `maxDistance` property of the `PannerNode` interface is a double value representing the maximum distance between the audio source and the listener, after which the volume is not reduced any further. This value is used only by the `linear` distance model.

The `maxDistance` property's default value is `10000`.

Value
-----

A double. The default is `10000`, and non-positive values are not allowed.

### Exceptions

`RangeError`

Thrown if the property has been given a value that is outside the accepted range.

Examples
--------

See `BaseAudioContext.createPanner()` for example code.

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

| Specification |
| --- |
| Web Audio API # dom-pannernode-maxdistance |

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

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

See also
--------

* Using the Web Audio API
CSSMathProduct: CSSMathProduct() constructor
============================================

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

 The **`CSSMathProduct()`** constructor creates
 a new `CSSMathProduct` object which creates a new
 `CSSMathProduct` object which multiplies the arguments passed into it.

Syntax
------


```js
new CSSMathProduct(args)
```

### Parameters

`args`

 A list of values for the `CSSMathProduct` object to be either a double
 integer or a `CSSNumericValue`.


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

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-cssmathproduct-cssmathproduct |

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

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

 The **`CSSMathProduct.values`** read-only
 property of the `CSSMathProduct` interface returns a
 `CSSNumericArray` object which contains one or more
 `CSSNumericValue` objects.

Value
-----

A `CSSNumericArray`.

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

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-cssmathproduct-values |

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

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

The read-only **`basePalette`** property of the `CSSFontPaletteValuesRule` interface indicates the base palette associated with the rule.

Value
-----

A string that can be one of the following color values:

`light`

Matches the first palette in the font file that is marked as applicable to a light background, that is, *close to white*. If there is no palette in the font or if no palette has the required metadata, the value is equivalent to `"0"`, that is, the first palette in the font.

`dark`

Matches the first palette in the font file that is marked as applicable to a dark background, that is, *close to black*. If there is no palette in the font or if no palette has the required metadata, the value is equivalent to `"0"`, that is, the first palette in the font.

a string containing an index (like `"0"`, `"1"`, …)

Matches the palette corresponding to the index. The first palette corresponds to `"0"`.

Examples
--------

### Read the associated base palette

This example adds rules in an extra stylesheet added to the document, returned as the last stylesheet in the document (`document.styleSheets[document.styleSheets.length-1].cssRules`). So, `rules[2]` returns the first `CSSFontPaletteValuesRule` object, and `rules[3]` the second one.

#### HTML


```html
<h2>default base-palette</h2>
<h2 class="two">base-palette at index 2</h2>
<h2 class="five">base-palette at index 5</h2>
<pre id="log"></pre>
```


#### CSS


```css
@import url("https://fonts.googleapis.com/css2?family=Nabla&display=swap");

h2 {
  font-family: "Nabla";
}

@font-palette-values --two {
  font-family: "Nabla";
  base-palette: 2;
}

@font-palette-values --five {
  font-family: "Nabla";
  base-palette: 5;
}

.two {
  font-palette: --two;
}

.five {
  font-palette: --five;
}
```


#### JavaScript


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

const rules = document.styleSheets[document.styleSheets.length - 1].cssRules;
const twoRule = rules[2]; // A CSSFontPaletteValuesRule interface
const fiveRule = rules[3]; // A CSSFontPaletteValuesRule interface

log.textContent = `The ${twoRule.name} @font-palette-values base palette is: ${twoRule.basePalette}\n`;
log.textContent += `The ${fiveRule.name} @font-palette-values base palette is: ${fiveRule.basePalette}`;
```


#### Result

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # dom-cssfontpalettevaluesrule-basepalette |

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

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

See also
--------

* `@font-palette-values` at-rule
* `base-palette` descriptor
CSSFontPaletteValuesRule: fontFamily property
=============================================

The read-only **`fontFamily`** property of the `CSSFontPaletteValuesRule` interface lists the font families the rule can be applied to. The font families must be *named* families; *generic* families like `courier` are not valid.

Value
-----

A string containing a space-separated list of the font families on which the rule can be applied

Examples
--------

### Read the associated font family

This example first defines an `@import` and an `@font-palette-values` at-rule. Then it reads the `@font-palette-values` rule and displays its name. As these rules live in the last stylesheet added to the document, the palette will be the second `CSSRule` returned by the last stylesheet in the document (`document.styleSheets[document.styleSheets.length-1].cssRules`). So, `rules[1]` returns a `CSSFontPaletteValuesRule` object, from which we can access `fontFamily`.

#### HTML


```html
<pre id="log">
The @font-palette-values at-rule's applies to the font families:</pre
>
```


#### CSS


```css
@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);

@font-palette-values --Alternate {
  font-family: "Bungee Spice";
  override-colors:
    0 #00ffbb,
    1 #007744;
}

.alternate {
  font-palette: --Alternate;
}
```


#### JavaScript


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

const rules = document.styleSheets[document.styleSheets.length - 1].cssRules;
const fontPaletteValuesRule = rules[1]; // a CSSFontPaletteValuesRule interface
log.textContent += ` ${fontPaletteValuesRule.fontFamily}`;
```


#### Result

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # dom-cssfontpalettevaluesrule-fontfamily |

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

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

See also
--------

* `@font-palette-values` at-rule
* `font-family` descriptor
CSSFontPaletteValuesRule: overrideColors property
=================================================

The read-only **`overrideColors`** property of the `CSSFontPaletteValuesRule` interface is a string containing a list of color index and color pair that are to be used instead. It is specified in the same format as the corresponding `override-colors` descriptor.

Value
-----

A string containing a comma-separated list of color index and color pair

Examples
--------

### Read the overridden color

This example first defines a few at-rules, among them two `@font-palette-values`. As these rules live in the last stylesheet added to the document, the palette will be the second `CSSRule` returned by the last stylesheet in the document (`document.styleSheets[document.styleSheets.length-1].cssRules`).

#### HTML


```html
<div class="hat">
  <div class="emoji colored-hat">🎩</div>
</div>
<button>Toggle color</button>
<pre id="log"></pre>
```


#### CSS


```css
@font-face {
  font-family: "Noto Color Emoji";
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/l/font?kit=Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabts6diywYkdG3gjD0U&skey=a373f7129eaba270&v=v24)
    format("woff2");
}

.emoji {
  font-family: "Noto Color Emoji";
  font-size: 3rem;
}

@font-palette-values --blue {
  font-family: "Noto Color Emoji";
  override-colors:
    3 rgb(1 28 193),
    4 rgb(60 124 230);
}

@font-palette-values --green {
  font-family: "Noto Color Emoji";
  override-colors:
    3 rgb(28 193 1),
    4 rgb(34 230 1);
}

.colored-hat {
  font-palette: --blue;
}
```


#### JavaScript


```js
const log = document.getElementById("log");
const button = document.querySelector("button");
const hat = document.querySelector(".colored-hat");
const rules = document.styleSheets[document.styleSheets.length - 1].cssRules;
const greenFontPaletteValuesRule = rules[3];
const blueFontPaletteValuesRule = rules[2];
log.textContent = `Overridden colors: ${blueFontPaletteValuesRule.overrideColors}`;

button.addEventListener("click", (event) => {
  if (hat.style.fontPalette !== "--green") {
    hat.style.fontPalette = "--green";
    log.textContent = `Overridden colors: ${greenFontPaletteValuesRule.overrideColors}`;
  } else {
    hat.style.fontPalette = "--blue";
    log.textContent = `Overridden colors: ${blueFontPaletteValuesRule.overrideColors}`;
  }
});
```


#### Result

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # dom-cssfontpalettevaluesrule-overridecolors |

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

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

See also
--------

* `@font-palette-values` at-rule
* `override-colors` descriptor