recursal/MDN huggingface dataset:
Magnetometer: z property
========================

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

 The **`z`** read-only property of the
 `Magnetometer` interface returns a number specifying
 the magnetic field around the device's z-axis.

Value
-----

A `Number`.

Examples
--------

 The magnetometer is typically read in the `reading` event
 callback. In the example below this occurs sixty times a second.


```js
let magSensor = new Magnetometer({ frequency: 60 });

magSensor.addEventListener("reading", (e) => {
  console.log(`Magnetic field along the X-axis ${magSensor.x}`);
  console.log(`Magnetic field along the Y-axis ${magSensor.y}`);
  console.log(`Magnetic field along the Z-axis ${magSensor.z}`);
});
magSensor.start();
```

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

| Specification |
| --- |
| Magnetometer # magnetometer-z |

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

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

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

 The **`x`** read-only property of the
 `Magnetometer` interface returns a number specifying
 the magnetic field around the device's x-axis.

Value
-----

A `Number`.

Examples
--------

 The magnetometer is typically read in the `reading` event
 callback. In the example below this occurs sixty times a second.


```js
let magSensor = new Magnetometer({ frequency: 60 });

magSensor.addEventListener("reading", (e) => {
  console.log(`Magnetic field along the X-axis ${magSensor.x}`);
  console.log(`Magnetic field along the Y-axis ${magSensor.y}`);
  console.log(`Magnetic field along the Z-axis ${magSensor.z}`);
});
magSensor.start();
```

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

| Specification |
| --- |
| Magnetometer # magnetometer-x |

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

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

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

 The **`y`** read-only property of the
 `Magnetometer` interface returns a number specifying
 the magnetic field around the device's y-axis.

Value
-----

A `Number`.

Examples
--------

 The magnetometer is typically read in the `reading` event
 callback. In the example below this occurs sixty times a second.


```js
let magSensor = new Magnetometer({ frequency: 60 });

magSensor.addEventListener("reading", (e) => {
  console.log(`Magnetic field along the X-axis ${magSensor.x}`);
  console.log(`Magnetic field along the Y-axis ${magSensor.y}`);
  console.log(`Magnetic field along the Z-axis ${magSensor.z}`);
});
magSensor.start();
```

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

| Specification |
| --- |
| Magnetometer # magnetometer-y |

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

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

The **`timecode`** read-only property of the `BlobEvent` interface indicates the difference between the timestamp of the first chunk of data, and the timestamp of the first chunk in the first `BlobEvent` produced by this recorder.

Note that the `timecode` in the first produced `BlobEvent` does not need to be zero.

Value
-----

A `DOMHighResTimeStamp`.

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

| Specification |
| --- |
| MediaStream Recording # dom-blobevent-timecode |

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

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

 The **`BlobEvent()`** constructor returns a newly created
 `BlobEvent` object with an associated `Blob`.

Syntax
------


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

### Parameters

`type`

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


`options`

An object that, *in addition of the properties defined in `Event()`*, can have the following properties:

`data`

The `Blob` associated with the event.

`timecode` Optional

A `DOMHighResTimeStamp` to be used in initializing the blob event.


### Return value

A new `BlobEvent` object.

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

| Specification |
| --- |
| MediaStream Recording # dom-blobevent-blobevent |

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

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

See also
--------

* The `BlobEvent` interface it belongs to.
BlobEvent: data property
========================

The **`data`** read-only property of the `BlobEvent` interface represents a `Blob` associated with the event.

Value
-----

A `Blob` object.

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

| Specification |
| --- |
| MediaStream Recording # dom-blobevent-data |

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

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

See also
--------

* The `BlobEvent` interface it belongs to.
MediaSession: setMicrophoneActive() method
==========================================

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

The **`setMicrophoneActive()`** method of the `MediaSession` interface is used to indicate to the user agent whether the user's microphone is considered to be currently muted.

 Call this method on the `navigator` object's
 `mediaSession` object.

Note that the status of the microphone is not tracked in the `MediaSession` itself, but must be tracked separately.

Syntax
------


```js
setMicrophoneActive(active)
```

### Parameters

`active`

A boolean indicating whether the microphone is considered muted or not.

### Return value

None (`undefined`).

Examples
--------

 Below is an example of updating the microphone mute state of the current
 `MediaSession`, as well as listening to requests to change the mute status with `setActionHandler()`.


```js
let microphoneActive = false;

navigator.mediaSession.setMicrophoneActive(microphoneActive);

navigator.mediaSession.setActionHandler("togglemicrophone", () => {
  microphoneActive = !microphoneActive;
  navigator.mediaSession.setMicrophoneActive(microphoneActive);
});
```

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

| Specification |
| --- |
| Media Session # dom-mediasession-setmicrophoneactive |

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

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

 The **`playbackState`** property of the
 `MediaSession` interface indicates whether the current media session is
 playing or paused.

Value
-----

 A string indicating the current playback state of the media session.
 The value may be one of the following:

`none`

 The browsing context doesn't currently know the current playback state, or the
 playback state is not available at this time.


`paused`

The browser's media session is currently paused. Playback may be resumed.

`playing`

The browser's media session is currently playing media, which can be paused.

Example
-------

 The following example sets up two functions for playing and pausing, then uses them as
 callbacks with the relevant action handlers. Each function harnesses the
 `playbackState` property to indicate whether the audio is playing or paused.


```js
const actionHandlers = [
  // play
  [
    "play",
    async () => {
      // play our audio
      await audioEl.play();
      // set playback state
      navigator.mediaSession.playbackState = "playing";
      // update our status element
      updateStatus(allMeta[index], "Action: play | Track is playing…");
    },
  ],
  [
    "pause",
    () => {
      // pause out audio
      audioEl.pause();
      // set playback state
      navigator.mediaSession.playbackState = "paused";
      // update our status element
      updateStatus(allMeta[index], "Action: pause | Track has been paused…");
    },
  ],
];

for (const [action, handler] of actionHandlers) {
  try {
    navigator.mediaSession.setActionHandler(action, handler);
  } catch (error) {
    console.log(`The media session action "${action}" is not supported yet.`);
  }
}
```

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

| Specification |
| --- |
| Media Session # dom-mediasession-playbackstate |

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

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

 The **`metadata`** property of the `MediaSession`
 interface contains a `MediaMetadata` object providing descriptive
 information about the currently playing media, or `null` if the metadata has
 not been set. This metadata is provided by the browser to the device for presentation in
 any standard media control user interface the device might offer.

Value
-----

 An instance of `MediaMetadata` containing information about the media
 currently being played.

Example
-------

 The following example checks for compatibility and creates a new media session with the
 relevant metadata:


```js
if ("mediaSession" in navigator) {
  navigator.mediaSession.metadata = new MediaMetadata({
    title: "Unforgettable",
    artist: "Nat King Cole",
    album: "The Ultimate Collection (Remastered)",
    artwork: [
      {
        src: "https://dummyimage.com/96x96",
        sizes: "96x96",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/128x128",
        sizes: "128x128",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/192x192",
        sizes: "192x192",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/256x256",
        sizes: "256x256",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/384x384",
        sizes: "384x384",
        type: "image/png",
      },
      {
        src: "https://dummyimage.com/512x512",
        sizes: "512x512",
        type: "image/png",
      },
    ],
  });
}
```

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

| Specification |
| --- |
| Media Session # dom-mediasession-metadata |

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

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

 The **`setPositionState()`** method of the
 `MediaSession` interface is used to update the current
 document's media playback position and speed for presentation by user's device in any
 kind of interface that provides details about ongoing media. This can be
 particularly useful if your code implements a player for type of media not directly
 supported by the browser.

 Call this method on the `navigator` object's
 `mediaSession` object.

Syntax
------


```js
setPositionState()
setPositionState(stateDict)
```

### Parameters

`stateDict` Optional

 An object providing updated information about the playback position and speed
 of the document's ongoing media. If the object is empty, the existing playback
 state information is cleared. This object can contain the following
 parameters:


`duration` Optional

A floating-point value giving the total duration of the current media in seconds. This should always be a positive number, with positive infinity (`Infinity`) indicating media without a defined end, such as a live stream.

`playbackRate` Optional

A floating-point value indicating the rate at which the media is being played, as a ratio relative to its normal playback speed. Thus, a value of 1 is playing at normal speed, 2 is playing at double speed, and so forth. Negative values indicate that the media is playing in reverse; -1 indicates playback at the normal speed but backward, -2 is double speed in reverse, and so on.

`position` Optional

A floating-point value indicating the last reported playback position of the media in seconds. This must always be a positive value.


### Return value

None (`undefined`).

### Exceptions

`TypeError`

This error can occur in an array of circumstances:

* The specified object's `duration` is missing, negative, or `null`.
* Its `position` is either negative or greater than `duration`.
* Its `playbackRate` is zero.

Examples
--------

 Below is a function which updates the position state of the current
 `MediaSession` track.


```js
function updatePositionState() {
  navigator.mediaSession.setPositionState({
    duration: audioEl.duration,
    playbackRate: audioEl.playbackRate,
    position: audioEl.currentTime,
  });
}
```


We can use this function when updating `media session
 metadata` and within callbacks for actions, such as below.


```js
navigator.mediaSession.setActionHandler("seekbackward", (details) => {
  // our time to skip
  const skipTime = details.seekOffset || 10;

  // set our position
  audioEl.currentTime = Math.max(audioEl.currentTime - skipTime, 0);
  updatePositionState();
});
```

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

| Specification |
| --- |
| Media Session # dom-mediasession-setpositionstate |

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

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

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

The **`setCameraActive()`** method of the `MediaSession` interface is used to indicate to the user agent whether the user's camera is considered to be active.

 Call this method on the `navigator` object's
 `mediaSession` object.

Note that the status of the camera is not tracked in the `MediaSession` itself, but must be tracked separately.

Syntax
------


```js
setCameraActive(active)
```

### Parameters

`active`

A boolean indicating whether the camera is considered active or not.

### Return value

None (`undefined`).

Examples
--------

 Below is an example of updating the camera active state of the current
 `MediaSession`, as well as listening to requests to change the camera status with `setActionHandler()`.


```js
let cameraActive = false;

navigator.mediaSession.setCameraActive(cameraActive);

navigator.mediaSession.setActionHandler("togglecamera", () => {
  cameraActive = !cameraActive;
  navigator.mediaSession.setCameraActive(cameraActive);
});
```

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

| Specification |
| --- |
| Media Session # dom-mediasession-setcameraactive |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Screen: orientationchange event
===============================

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

**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 `orientationchange` event fires when the device's orientation has changed.

Syntax
------

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


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

onorientationchange = (event) => {};
```

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

A generic `Event`.

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

This feature is not part of any specification. It is no longer on track to becoming a standard.

Use the `ScreenOrientation change event` instead.

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

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

See also
--------

* Managing screen orientation
Screen: mozBrightness property
==============================

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

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

 Indicates how bright the screen's backlight is, on a scale from 0 (very dim) to 1 (full
 brightness); this value is a double-precision float.

 You can read and write this attribute even when the screen is disabled, but the
 backlight is off while the screen is disabled. If you write a value of X into this
 attribute, the attribute may not have the same value X when you later read it. Most
 screens don't support as many different brightness levels as there are doubles between 0
 and 1. The value's precision might be reduced before storing it.

Value
-----

A number.

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

Not part of specification.

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

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

 The **`Screen.availWidth`** property returns the amount of
 horizontal space (in pixels) available to the window.

Value
-----

A number.

Examples
--------


```js
const screenAvailWidth = window.screen.availWidth;

console.log(screenAvailWidth);
```

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

| Specification |
| --- |
| CSSOM View Module # dom-screen-availwidth |

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

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

 Returns the bit depth of the screen. Per the CSSOM, some implementations
 return `24` for compatibility reasons. See the browser compatibility section for those that don't.

Value
-----

A number.

Examples
--------


```js
// if there is not adequate bit depth
// choose a simpler color
document.style.color = window.screen.pixelDepth > 8 ? "#FAEBD7" : "#FFFFFF";
```

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

| Specification |
| --- |
| CSSOM View Module # dom-screen-pixeldepth |

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

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

See also
--------

* `Screen.colorDepth`
Screen: change event
====================

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

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

The **`change`** event of the `Screen` interface is fired on a specific screen when one or more of the following properties change on it:

* `width`
* `height`
* `availWidth`
* `availHeight`
* `colorDepth`
* `orientation`
Syntax
------

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


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

onchange = (event) => {};
```

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

A generic `Event`.

Examples
--------


```js
const firstScreen = (await window.getScreenDetails()).screens[0];
firstScreen.addEventListener("change", (event) => {
  console.log("The first screen has changed.", event, firstScreen);
});
```

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

| Specification |
| --- |
| Window Management # api-screen-onchange-attribute |

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

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

See also
--------

* Window Management API
Screen: availHeight property
============================

 The read-only `Screen` interface's
 **`availHeight`** property returns the height, in CSS pixels, of
 the space available for Web content on the screen. Since `Screen` is
 exposed on the `Window` interface's `window.screen` property, you access `availHeight` using
 `window.screen.availHeight`.

 You can similarly use `Screen.availWidth` to get the number of pixels
 which are horizontally available to the browser for its use.

Value
-----

 A numeric value indicating the number of CSS pixels tall the screen's available space
 is. This can be no larger than the value of `window.screen.height`, and will be less if the device or user agent reserves any
 vertical space for itself.

 For instance, on a Mac whose Dock is located at the bottom of screen (which is the
 default), the value of `availHeight` is approximately the value of
 `height` (the total height of the screen in CSS pixels) minus the heights of
 the Dock and menu bar, as seen in the diagram below.

![Diagram showing how Screen.availHeight relates to Screen.height and the screen's contents](/en-US/docs/Web/API/Screen/availHeight/availheight-diagram.svg)

Examples
--------

 If your web application needs to open a new window, such as a tool palette which can
 contain multiple panels, and wants to position it so that it occupies the entire
 vertical space available, you can do so using code similar to what's seen here.

In the main window, when it's time to open the panels, code like the following is used.


```js
const paletteWindow = window.open(
  "panels.html",
  "Panels",
  "left=0, top=0, width=200",
);
```


 The Panels window's HTML, in `panels.html`, has JavaScript code of its own,
 which is executed as soon as the window is created. It doesn't even need to wait for any
 particular event (or any event at all). That code handles resizing the window based on
 the available space:


```js
window.outerHeight = window.screen.availHeight;
```


 The result is something similar to the below. Note the Panels window filling all
 available vertical space at the left of the screen.

![Screenshot of the example for Screen.availHeight](/en-US/docs/Web/API/Screen/availHeight/screen-availheight.png)

 On a Windows system, this would function similarly, by opening the window and sizing it
 vertically so it uses all available vertical space, leaving room for the taskbar and any
 other interface elements that reserve space.

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

| Specification |
| --- |
| CSSOM View Module # dom-screen-availheight |

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

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

See also
--------

* `Window`
* `Screen`
* `Screen.availWidth`
* `Window.innerHeight`
Screen: height property
=======================

 The **`Screen.height`** read-only property returns the height
 of the screen in pixels.

Value
-----

A number.

Examples
--------


```js
if (window.screen.availHeight !== window.screen.height) {
  // Something is occupying some screen real estate!
}
```

Notes
-----

 Note that not all of the height given by this property may be available to the window
 itself. Widgets such as taskbars or other special application windows that integrate
 with the OS (e.g., the Spinner player minimized to act like an additional toolbar on
 windows) may reduce the amount of space available to browser windows and other
 applications.

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

| Specification |
| --- |
| CSSOM View Module # dom-screen-height |

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

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