recursal/MDN huggingface dataset:
DynamicsCompressorNode
======================

`DynamicsCompressorNode` 接口提供了一个压缩效果器，用以降低信号中最响部分的音量，来协助避免在多个声音同时播放并叠加在一起的时候产生的削波失真。通常用于音乐创作和游戏音效中。`DynamicsCompressorNode` 是一个 `AudioNode` ，只有一路输入和一路输出，使用 `AudioContext.createDynamicsCompressor()` (en-US) 方法创建。

|  |  |
| --- | --- |
| Number of inputs | `1` |
| Number of outputs | `1` |
| Channel count mode | `"explicit"` |
| Channel count | `2` |
| Channel interpretation | `"speakers"` |

构造方法
----

`DynamicsCompressorNode()` (en-US)

创建一个新的 `DynamicsCompressorNode` 对象实例。

属性
--

*由父类 `AudioNode` 派生。*

`DynamicsCompressorNode.threshold` (en-US) 只读 

比例系数 (en-US) `AudioParam` 型。分贝高于此值时，将会进行压缩。

`DynamicsCompressorNode.knee` (en-US) 只读 

比例系数 (en-US) `AudioParam` 型。当超出 threshold 设置的值之后，曲线在哪个点开始朝着 ratio 设置的部分平滑变换。

`DynamicsCompressorNode.ratio` (en-US) 只读 

比例系数 (en-US) `AudioParam` 型。输入增益变化多少来产生 1 dB 的输出。

`DynamicsCompressorNode.reduction` (en-US) 只读 

`float` 型。表示当前压缩器使用的增益压缩值。

`DynamicsCompressorNode.attack` (en-US) 只读 

比例系数 (en-US) `AudioParam` 型。降低增益 10 dB 的时间（单位为秒）。

`DynamicsCompressorNode.release` (en-US) 只读 

比例系数 (en-US) `AudioParam` 型。提升增益 10 dB 的时间（单位为秒）。

方法
--

*没有自定义的方法，继承父类 `AudioNode` 中的方法。*

示例
--

参见 `BaseAudioContext.createDynamicsCompressor()` (en-US) 以查看示例代码。

规范
--

| Specification |
| --- |
| Web Audio API # DynamicsCompressorNode |

浏览器兼容性
------

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

参见
--

* Using the Web Audio API (en-US)
EventTarget
===========

`EventTarget` 接口由可以接收事件、并且可以创建侦听器的对象实现。换句话说，任何事件目标都会实现与该接口有关的这三个方法。

`Element` 及其子项、`document` 和 `window` 是最常见的事件目标，但其他对象也可以是事件目标。比如 `XMLHttpRequest`、`AudioNode` 和 `AudioContext` 等等。

许多事件目标（包括 `element`、`document` 和 `window`）都支持通过 `onevent` 特性和属性设置事件处理程序 (en-US)。

构造函数
----

`EventTarget()`

创建一个新的 `EventTarget` 对象实例。

方法
--

`EventTarget.addEventListener()`

在 `EventTarget` 上注册特定事件类型的事件处理程序。

`EventTarget.removeEventListener()`

`EventTarget` 中删除事件侦听器。

`EventTarget.dispatchEvent()`

将事件分派到此 `EventTarget`。

规范
--

| Specification |
| --- |
| DOM Standard # interface-eventtarget |

浏览器兼容性
------

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

参见
--

* 事件参考——站点中列出的事件
* 事件介绍
* `Event` 接口
LockManager
===========

**安全上下文:** 此项功能仅在一些支持的浏览器的安全上下文（HTTPS）中可用。

Web Locks API 的 **`LockManager`** 接口提供了请求新的 `Lock` 对象以及枚举现有的 `Lock` 对象的方法。要获取 `LockManager` 实例，请访问 `navigator.locks` 属性。

**备注：** 此特性在 Web Worker 中可用

实例方法
----

`LockManager.request()`

请求一个指定其名称和模式参数的 `Lock` 对象。

`LockManager.query()`

返回一个 `Promise`，兑现一个包含持有的锁以及等待的锁请求的对象。

规范
--

| Specification |
| --- |
| Web Locks API # api-lock-manager |

浏览器兼容性
------

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

**`HTMLBodyElement`** 接口提供了用于操作 `<body>` 元素的特定属性（除继承自 `HTMLElement` 接口的属性以外）。

EventTarget

Node

Element

HTMLElement

HTMLBodyElement实例属性
----

*从其父接口 `HTMLElement` 继承属性。*

`HTMLBodyElement.aLink` 
已弃用

一个表示活动链接颜色的字符串。

`HTMLBodyElement.background` 
已弃用

一个表示背景图片资源位置的字符串。注意，这不是 URI，尽管一些旧版浏览器可能会期望它是。

`HTMLBodyElement.bgColor` 
已弃用

一个表示文档背景颜色的字符串。

`HTMLBodyElement.link` 
已弃用

一个表示未访问链接颜色的字符串。

`HTMLBodyElement.text` 
已弃用

一个表示文本前景色的字符串。

`HTMLBodyElement.vLink` 
已弃用

一个表示已访问链接颜色的字符串。

实例方法
----

*无特定方法；从其父接口 `HTMLElement` 继承方法。*

事件处理器
-----

从 `HTMLElement` 继承事件。

以下以 `Window` 为目标的 `onXYZ` 事件处理器属性同样在 `window` 对象这一别名目标上可用。但建议直接在 `window` 对象上监听这些事件，而不是在 `HTMLBodyElement` 上。

**备注：** 对于以下的 `onXYZ` 事件处理器，在 `HTMLBodyElement` 上使用 `addEventListener()` 将不会生效。请在 `window` 对象上监听这些事件。

`HTMLBodyElement.onafterprint`

在关联的文档开始打印或打印预览关闭后触发。

`HTMLBodyElement.onbeforeprint`

在关联的文档即将打印或预览打印时触发。

`HTMLBodyElement.onbeforeunload`

在窗口、文档及其资源即将被卸载时触发。

`HTMLBodyElement.ongamepadconnected`

在浏览器检测到游戏手柄已连接或首次使用游戏手柄的按钮/轴时触发。

`HTMLBodyElement.ongamepaddisconnected` (en-US)

在浏览器检测到游戏手柄已断开连接时触发。

`HTMLBodyElement.onhashchange`

在 URL 的片段标识符（URL 中以 `#` 符号开头和紧跟的部分）发生变化时触发。

`HTMLBodyElement.onlanguagechange` (en-US)

在用户首选语言发生变更时触发。

`HTMLBodyElement.onmessage`

在窗口接收到消息时触发，例如来自另一个浏览上下文的 `Window.postMessage()` 调用。

`HTMLBodyElement.onmessageerror`

在窗口接收到无法反序列化的消息时触发。

`HTMLBodyElement.onoffline`

在浏览器失去网络连接且 `Navigator.onLine` (en-US) 的值变为 `false` 时触发。

`HTMLBodyElement.ononline`

在浏览器获得网络连接且 `Navigator.onLine` (en-US) 的值变为 `true` 时触发。

`HTMLBodyElement.onpagehide`

在浏览器在呈现会话历史中的不同页面而隐藏当前页面时触发。

`HTMLBodyElement.onpageshow`

在浏览器由于导航而显示窗口的文档时触发。

`HTMLBodyElement.onpopstate`

在用户导航会话历史而使活动历史条目发生变化时触发。

`HTMLBodyElement.onrejectionhandled`

在 JavaScript `Promise` 被拒绝且拒绝已被处理时触发。

`HTMLBodyElement.onstorage`

在另一个文档的上下文中修改存储区（`localStorage`）时触发。

`HTMLBodyElement.onunhandledrejection`

在 JavaScript `Promise` 被拒绝且拒绝未被处理时触发。

`HTMLBodyElement.onunload`

在文档被卸载时触发。

规范
--

| Specification |
| --- |
| HTML Standard # htmlbodyelement |

浏览器兼容性
------

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

参见
--

* 实现了此接口的 HTML 元素：`<body>`
UIEvent
=======

`UIEvent` 接口表示简单的用户界面事件。

`UIEvent` 是从 `Event` 派生出来的。尽管 `UIEvent.initUIEvent()` (en-US) 方法为了向后兼容而一直保留着，但是你应该使用 `UIEvent()` 构造器来创建 `UIEvent` 对象。

某些接口是这个的直接或间接后代：`MouseEvent`, `TouchEvent`, `FocusEvent`, `KeyboardEvent`, `WheelEvent`, `InputEvent`, 和`CompositionEvent`.

Constructors
------------

`UIEvent()`

创建一个 `UIEvent` 对象

属性
--

*也继承了父代 `Event` 的一些属性。*

`UIEvent.cancelBubble` (en-US) 
非标准

已弃用

返回一个 `Boolean`，表示该事件的冒泡是否被取消。

`UIEvent.detail`只读 

Returns a `long` with details about the event, depending on the event type.

`UIEvent.layerX` (en-US) 
非标准
 只读 

返回事件相对于当前层的水平坐标。

`UIEvent.layerY` (en-US) 
非标准
 只读 

返回事件相对于当前层的垂直坐标。

`UIEvent.pageX` 
非标准
 只读 

返回事件相对于整个文档的水平坐标。

`UIEvent.pageY` 
非标准
 只读 

返回事件相对于整个文档的垂直坐标。

`UIEvent.sourceCapabilities` (en-US) 
非标准
 只读 

返回输入设备功能接口的一个实例，它提供有关负责生成 touch 事件的物理设备的信息。

`UIEvent.view`只读 

返回一个包含了产生该事件的视图的 `WindowProxy` 。

`UIEvent.which` 
非标准
 只读 

返回一个对应（键盘）按下的数字类型的 `keyCode` ，或者一个字母数字键按下时的字符码 (`charCode`)。

方法
--

*也继承了父代 `Event` 的一些方法。*

`UIEvent.initUIEvent()` (en-US) 
已弃用

初始化一个 `UIEvent` 对象。如果事件已经被分派，这个方法什么都不做。

规范
--

| Specification |
| --- |
| UI Events # idl-uievent |

浏览器兼容性
------

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

相关链接
----

* Introduction to events
* `Event`
Crypto
======

**`Crypto`** 接口提供了当前上下文中可用的基本的加密功能。它允许访问一个密码学安全的随机数生成器和密码学原语（cryptographic primitive）。

**备注：** 此特性在 Web Worker 中可用

Web Crypto API 可以通过 `crypto` 属性（一个 `Crypto` 对象）来访问。

实例属性
----

*该接口实现的属性定义在 `RandomSource` 中。*

`Crypto.subtle` 只读  安全上下文

返回一个 `SubtleCrypto` 对象，用来访问公共的密码学原语，例如哈希、签名、加密以及解密。

实例方法
----

*该接口实现的方法定义在 `RandomSource` 中。*

`Crypto.getRandomValues()`

使用密码学安全的随机数填充传入的 `TypedArray`。

`Crypto.randomUUID()`

返回一个随机生成的，长度为 36 字符的第四版 UUID。

使用说明
----

即使不安全的上下文中存在 `Crypto` 接口（即 `crypto` 属性），你也应该避免在不安全的上下文中使用 Web Crypto API。`Crypto` 的 `getRandomValues()` 方法在不安全的上下文中可用，而 `subtle` 属性则不可用。

通常，你应该将 `Crypto` 视为仅在安全上下文中可用。

规范
--

| Specification |
| --- |
| Web Cryptography API # crypto-interface |

浏览器兼容性
------

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

参见
--

* Web 安全
* 安全上下文
* 仅限于安全上下文的特性
* 传输层安全
* Strict-Transport-Security
ConvolverNode
=============

`ConvolverNode` 接口是一个对给定 `AudioBuffer` 上执行线性卷积的 `AudioNode`，一般用来做音频混响效果。每一个 `ConvolverNode` 都会有一个输入值和输出值。

**备注：** 更多线性卷积理论的相关信息，请参阅Convolution article on Wikipedia.


|  |  |
| --- | --- |
| Number of inputs | `1` |
| Number of outputs | `1` |
| Channel count mode | `"clamped-max"` |
| Channel count | `1`, `2`, or `4` |
| Channel interpretation | `"speakers"` |

构造函数
----

`ConvolverNode()` (en-US)

创建一个新的 `ConvolverNode` 对象实例。

属性
--

继承其父级的属性\*, `AudioNode`\*.

`ConvolverNode.buffer` (en-US)

一个被 `ConvolverNode` 用来产生混响效果的单声道、立体声或四声道的音频缓冲器，包含了 (可能是多声道) 脉冲反应 (IR)。

`ConvolverNode.normalize` (en-US)

布尔值，在设置缓冲区属性时，可绝定是否对来自 `buffer` 的脉冲反应按等功率归一化进行缩放。

方法
--

没有具体的方法，从其父继承方法，*`AudioNode`*.

ConvolverNode 例子
----------------

下面的示例展示了 AudioContext 创建卷积节点的基础用法。

**备注：** 你需要找到一个脉冲反应来完成下面的示例。可查看此处 的实例。


```js
let audioCtx = new window.AudioContext();

async function createReverb() {
    let convolver = audioCtx.createConvolver();

    // 从文件加载脉冲反应
    let response     = await fetch("path/to/impulse-response.wav");
    let arraybuffer  = await response.arrayBuffer();
    convolver.buffer = await audioCtx.decodeAudioData(arraybuffer);

    return convolver;
}

...

let reverb = await createReverb();

// someOtherAudioNode -> reverb -> destination
someOtherAudioNode.connect(reverb);
reverb.connect(audioCtx.destination);
```

规范
--

| Specification |
| --- |
| Web Audio API # ConvolverNode |

浏览器兼容性
------

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

参见
--

* Using the Web Audio API (en-US)
HTMLSpanElement
===============

The **`HTMLSpanElement`** interface represents a `<span>` element and derives from the `HTMLElement` interface, but without implementing any additional properties or methods.

属性
--

*无特定属性；从其父元素`HTMLElement`继承属性。*

方法
--

*无特定方法；从其父元素`HTMLElement`继承方法。*

规范
--

| Specification |
| --- |
| HTML Standard # htmlspanelement |

浏览器兼容性
------

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

参见
--

* The HTML element implementing this interface: `<span>`.
BroadcastChannel
================

Baseline 2022
-------------

Newly availableSince March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`BroadcastChannel`** 接口代理了一个命名频道，可以让指定 origin 下的任意 browsing context 来订阅它。它允许同源的不同浏览器窗口，Tab 页，frame 或者 iframe 下的不同文档之间相互通信。通过触发一个 `message` 事件，消息可以广播到所有监听了该频道的 `BroadcastChannel` 对象。

**备注：** 此特性在 Web Worker 中可用

构造函数
----

`BroadcastChannel()`

创建一个链接到命名频道的对象。

属性
--

*该接口会从它的父级 `EventTarget` 继承属性。*

`BroadcastChannel.name`

频道名称，返回 `DOMString`。

### 事件处理程序

`BroadcastChannel.onmessage`

事件处理器，用于定义当该对象上触发了 `message` 事件时要执行的函数。

`BroadcastChannel.onmessageerror`

事件处理器，用于定义当该对象上触发了类型为 `MessageError` 的 `MessageEvent` 事件时要执行的函数。当接收到一条无法反序列化的消息时会触发此事件。

方法
--

*该接口会从它的父级 `EventTarget` 继承方法。*

`BroadcastChannel.postMessage()`

向所有监听了相同频道的 `BroadcastChannel` 对象发送一条消息，消息内容可以是任意类型的数据。

`BroadcastChannel.close()`

关闭频道对象，告诉它不要再接收新的消息，并允许它最终被垃圾回收。

事件
--

`message`

 当频道收到一条消息时触发。
 也可以使用 `onmessage` 属性访问。


`messageerror`

 当频道收到一条无法反序列化的消息时触发。
 也可以使用 `onmessageerror` 属性访问。


规范
--

| Specification |
| --- |
| HTML Standard # broadcasting-to-other-browsing-contexts |

浏览器兼容性
------

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

另见
--

* 一种在不同浏览器上下文之间通信的重量级方案：`ServiceWorker`。
* Broadcast Channel API overview
VisualViewport
==============

**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

Visual Viewport API (en-US) 提供了当前页面的视觉视口接口，即 **`VisualViewport`** 。对于每个页面容器来说（如 iframe），都存在有一个独立的 window 对象。每个页面容器的 window 对象都有一个独立的 `VisualViewport` 属性。

你可以使用 `Window.visualViewport` 获得对应 window 的视觉视口 API。

**备注：** 与布局视口（layout viewport）不同的是：只有最上层的 window 才有视觉视口（visual viewport）这一概念。因此只有最上层 window 的 `VisualViewport` 属性才是有效的，其他层的视觉视口属性可看作是布局视口属性的别名。比如，对于一个 `<iframe>` ，其对应的视觉视口属性 `VisualViewport.width` (en-US) 相当于对应的布局视口属性，如 `document.documentElement.clientWidth`.

属性
--

*`VisualViewport`* 从其父元素继承属性 *`EventTarget`*。

`VisualViewport.offsetLeft` (en-US) 只读 

返回视觉视口的左边框到布局视口的左边框的 CSS 像素距离。

`VisualViewport.offsetTop` 只读 

返回视觉视口的上边框到布局视口的上边框的 CSS 像素距离。

`VisualViewport.pageLeft` (en-US) 只读 

返回相对于初始的 viewport 属性的 X 轴坐标所对应的 CSS 像素数。

`VisualViewport.pageTop` (en-US) 只读 

返回相对于初始的 viewport 属性的 Y 轴坐标所对应的 CSS 像素数。

`VisualViewport.width` (en-US) 只读 

返回视觉视口的宽度所对应的 CSS 像素数。

`VisualViewport.height` (en-US) 只读 

返回视觉视口的高度所对应的 CSS 像素数。

`VisualViewport.scale` (en-US) 只读 

返回当前视觉视口所应用的缩放比例。

Events
------

通过使用 `addEventListener()` 或者将监听回调函数赋值给对应的 `oneventname` 属性，可以为对应的视口事件添加监听。

`resize` (en-US)

 当视觉视口被改变时触发。
 也可以为 `VisualViewport.onresize` (en-US) 属性赋值来添加监听。


`scroll` (en-US)

 当视觉视口滑动时触发。
 也可以为 `VisualViewport.onscroll` (en-US) 属性赋值来添加监听。


例子
--

### 缩放检测并隐藏元素

这个例子取自 Visual Viewport README，展示了如何在用户缩放时隐藏某个盒子（或元素）。这对于增强一个页面在缩放时的用户体验有重要意义。同样，你也可以查看另一个 例子 。


```js
var bottomBar = document.getElementById("bottombar");
var viewport = window.visualViewport;

function resizeHandler() {
  if (viewport.scale > 1.3) bottomBar.style.display = "none";
  else bottomBar.style.display = "block";
}

window.visualViewport.addEventListener("resize", resizeHandler);
```

### 模拟 position 属性：device-fixed

这个例子同样取自 Visual Viewport README ，展示了如何使用视觉视口 API，从而模拟 `position: device-fixed` 的 CSS 属性。类似于 `position: fixed` ，这一属性可将被设置的元素固定在视觉视口特定位置。此外，你也可以查看另一个 例子 。


```js
var bottomBar = document.getElementById("bottombar");
var viewport = window.visualViewport;
function viewportHandler() {
  var layoutViewport = document.getElementById("layoutViewport");

  // Since the bar is position: fixed we need to offset it by the visual
  // viewport's offset from the layout viewport origin.
  var offsetLeft = viewport.offsetLeft;
  var offsetTop =
    viewport.height -
    layoutViewport.getBoundingClientRect().height +
    viewport.offsetTop;

  // You could also do this by setting style.left and style.top if you
  // use width: 100% instead.
  bottomBar.style.transform =
    "translate(" +
    offsetLeft +
    "px," +
    offsetTop +
    "px) " +
    "scale(" +
    1 / viewport.scale +
    ")";
}
window.visualViewport.addEventListener("scroll", viewportHandler);
window.visualViewport.addEventListener("resize", viewportHandler);
```


**备注：** 应小心使用上述方案，使用这种方式模拟的 `position: device-fixed` 可能会导致其他元素在滚动页面时出现闪烁。

规范
--

| Specification |
| --- |
| CSSOM View Module # the-visualviewport-interface |

浏览器兼容性
------

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

参照
--

* Web 视口说明 — 解释了什么是浏览器视口和视觉视口和布局视口的区别。
Web Speech API
==============

**实验性:** **这是一项实验性技术**  
在将其用于生产之前，请仔细检查浏览器兼容性表格。

Web Speech API 使你能够将语音数据合并到 Web 应用程序中。Web Speech API 有两个部分：SpeechSynthesis 语音合成（文本到语音 TTS）和 SpeechRecognition 语音识别（异步语音识别）。

Web Speech 的概念及用法
-----------------

Web Speech API 使 Web 应用能够处理语音数据，该项 API 包含以下两个部分：

* 语音识别通过 `SpeechRecognition` (en-US) 接口进行访问，它提供了识别从音频输入（通常是设备默认的语音识别服务）中识别语音情景的能力。一般来说，你将使用该接口的构造函数来构造一个新的 `SpeechRecognition` (en-US) 对象，该对象包含了一系列有效的对象处理函数来检测识别设备麦克风中的语音输入。`SpeechGrammar` 接口则表示了你应用中想要识别的特定文法。文法则通过 JSpeech Grammar Format (**JSGF**.) 来定义。
* 语音合成通过 `SpeechSynthesis` 接口进行访问，它提供了文字到语音（TTS）的能力，这使得程序能够读出它们的文字内容（通常使用设备默认的语音合成器）。不同的声音类类型通过 `SpeechSynthesisVoice` (en-US) 对象进行表示，不同部分的文字则由 `SpeechSynthesisUtterance` (en-US) 对象来表示。你可以将它们传递给 `SpeechSynthesis.speak()` (en-US) 方法来产生语音。

更多关于这些特性的细节请参考 Using the Web Speech API。

Web Speech 的 API 接口
-------------------

### 语音识别

`SpeechRecognition` (en-US)

语音识别服务的控制器接口；它也处理由语音识别服务发来的 `SpeechRecognitionEvent` (en-US) 事件。

`SpeechRecognitionAlternative` (en-US)

表示由语音识别服务识别出的一个词汇。

`SpeechRecognitionError` (en-US)

表示语音识别服务发出的报错信息。

`SpeechRecognitionEvent` (en-US)

`result` (en-US) 和 `nomatch` (en-US) 的事件对象，包含了与语音识别过程中间或最终结果相关的全部数据。

`SpeechGrammar`

我们将要交由语音识别服务进行识别的词汇或者词汇的模式。

`SpeechGrammarList` (en-US)

表示一个由 `SpeechGrammar` 对象构成的列表。

`SpeechRecognitionResult` (en-US)

表示一次识别中的匹配项，其中可能包含多个 `SpeechRecognitionAlternative` (en-US) 对象。

`SpeechRecognitionResultList` (en-US)

表示包含 `SpeechRecognitionResult` (en-US) 对象的一个列表，如果是以 `continuous` (en-US) 模式捕获的结果，则是单个对象。

### 语音合成

`SpeechSynthesis`

语音合成服务的控制器接口，可用于获取设备上可用的合成语音，开始、暂停以及其他相关命令的信息。

`SpeechSynthesisErrorEvent` (en-US)

包含了在发音服务处理 `SpeechSynthesisUtterance` (en-US) 对象过程中的信息及报错信息。

`SpeechSynthesisEvent` (en-US)

包含了经由发音服务处理过的 `SpeechSynthesisUtterance` (en-US) 对象当前状态的信息。

`SpeechSynthesisUtterance` (en-US)

表示一次发音请求。其中包含了将由语音服务朗读的内容，以及如何朗读它（例如：语种、音高、音量）。

`SpeechSynthesisVoice` (en-US)

表示系统提供的一个声音。每个 `SpeechSynthesisVoice` 都有与之相关的发音服务，包括了语种、名称 和 URI 等信息。

`Window.speechSynthesis` (en-US)

由规格文档指定的，被称为 `SpeechSynthesisGetter` 的 `[NoInterfaceObject]` 接口的一部分，在 `Window` 对象中实现，`speechSynthesis` 属性可用于访问 `SpeechSynthesis` 控制器，从而获取语音合成功能的入口。

示例
--

GitHub 上的 Web Speech API repo 的示例程序展示了语音识别及合成。

规范
--

| Specification |
| --- |
| Web Speech API # speechreco-section |
| Web Speech API # tts-section |

浏览器兼容性
------

### api.SpeechRecognition

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

### api.SpeechSynthesis

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

相关链接
----

* Using the Web Speech API
* SitePoint article
* HTML5Rocks article
* Demo [aurelio.audero.it]
画中画（Picture-in-Picture）API
==========================

**画中画 API** 允许网站总是在其他窗口之上创建一个浮动的视频，以便用户在其他内容站点或者设备上的应用程序交互时可以继续播放媒体。

接口
--

`PictureInPictureWindow`

表示浮动的视频窗口；包含 `width` (en-US) 和 `height` (en-US) 属性，以及一个 `onresize` (en-US) 事件处理器属性。

方法
--

画中画 API 添加了 `HTMLVideoElement` 和 `Document` 接口的方法，以便允许切换浮动视频窗口。

### HTMLVideoElement 接口的方法

`HTMLVideoElement.requestPictureInPicture()`

请求用户代理将视频切换为画中画模式。

### Document 接口的方法

`Document.exitPictureInPicture()`

请求用户代理将元素由画中画模式切换回到它的原始盒子。

属性
--

*画中画 API 添加了* `HTMLVideoElement`、`Document` 和 `ShadowRoot` 接口的属性，这些属性用于决定浮动的视频窗口是否是受支持和可用的、当前画中画模式是否处于激活状态并且哪个视频是浮动的。

### HTMLVideoElement 接口的属性

`HTMLVideoElement.disablePictureInPicture`

`disablePictureInPicture` 属性将指示用户代理是否应该向用户建议画中画的功能。

### Document 接口的属性

`Document.pictureInPictureEnabled`

`pictureInPictureEnabled` 属性告诉你是否可以使用画中画模式。如果画中画模式因任何原因不可用（例如`"画中画"`功能 不被接受，或者不支持画中画模式），则是 `false` 。

### Document 或 ShadowRoot 接口的属性

`Document.pictureInPictureElement` / `ShadowRoot.pictureInPictureElement` (en-US)

`pictureInPictureElement` 属性告诉你当前在浮动窗口（或影子 DOM）显示哪个 `Element`。如果为 `null`，则此文档（或影子 DOM）没有节点处于画中画模式。

事件
--

*画中画 API 定义了三个事件，它们可以用来检测画中画模式何时被切换或者浮动窗口大小何时被调整。*

`enterpictureinpicture`

当 `HTMLVideoElement` 进入画中画模式时触发该事件。

`leavepictureinpicture`

当 `HTMLVideoElement` 离开画中画模式时触发该事件。

`resize` (en-US)

当 `PictureInPictureWindow` 大小改变时触发该事件。

控制样式
----

CSS 伪类 `:picture-in-picture` 匹配当前进入画中画模式的视频元素，并允许你配置样式表，以便视频在画中画或者传统播放模式来回切换时自动调整内容的大小、样式或布局。

控制访问权限
------

可以使用 Feature Policy 控制画中画的可用性。全屏模式的功能由字符串 `"picture-in-picture"` 标识，默认的允许列表的值是 `"self"`，意味着在顶级文档上下文以及从最顶层文档相同的来源加载的嵌套浏览上下文中允许画中画模式。

参见使用 Feature Policy，了解关于使用 Feature Policy 控制对 API 访问的更多信息。

示例
--

在此示例中，视频被展示在 web 页面。点击下面的按钮可以让用户切换浮动视频窗口。

### 切换画中画模式

当使用者点击“Toggle Picture-in-Picture”按钮时，这段代码将会由一个点击处理程序调用：


```js
function togglePictureInPicture() {
  if (document.pictureInPictureElement) {
    document.exitPictureInPicture();
  } else {
    if (document.pictureInPictureEnabled) {
      video.requestPictureInPicture();
    }
  }
}
```


该块首先会查询 `document` `pictureInPictureElement` 属性的值。

如果值不是 `null`，则它是当前处于画中画模式并在浮动窗口的元素。我们调用 `document.exitPictureInPicture()` 将视频带进它初始的盒子。

如果值是 `null`，浮动窗口没有视频。所以我们可以请求视频进入画中画模式。我们可以在 `<video>` 元素上调用 `HTMLVideoElement.requestPictureInPicture()` 来实现。

规范
--

| Specification |
| --- |
| Picture-in-Picture # interface-picture-in-picture-window |

浏览器兼容性
------

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

参见
--

* `HTMLVideoElement.requestPictureInPicture()`
* `HTMLVideoElement.disablePictureInPicture`
* `Document.pictureInPictureEnabled`
* `Document.exitPictureInPicture()`
* `Document.pictureInPictureElement`
* `:picture-in-picture`
DOMStringList
=============

某些 API 会返回的包含一列DOMString的一种类型

Properties
----------

`DOMStringList.length` (en-US) 只读 

返回列表的长度，

Methods
-------

`DOMStringList.item()` (en-US)

返回一个 `DOMString`.

`DOMStringList.contains()` (en-US)

返回`Boolean` 类型的标示来表明此类型是否包含某字符串。

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

* http://www.w3.org/TR/DOM-Level-3-Cor...#DOMStringList
origin 全局属性
===========

**备注：** 此特性在 Web Worker 中可用

**`origin`** 全局只读属性返回全局作用域的来源，序列化为一个字符串。

值
-

一个字符串。

示例
--

在 Worker 脚本中执行以下代码段，每次收到消息时，它都会将 Worker 全局作用域的来源记录到控制台中：


```js
onmessage = () => {
  console.log(self.origin);
};
```


如果来源不是协议/主机/端口元组（例如试图在本地，即通过 `file://` URL 运行脚本），`origin` 将返回字符串 `"null"`。

规范
--

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

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
ANGLE\_instanced\_arrays
========================

`ANGLE_instanced_arrays`是属于 WebGL API 的一个扩展 API，它允许多次绘制相同的对象或相似对象组，前提是它们共享相同的顶点数据、基本图形的个数和类型。WebGL 的扩展都能使用`WebGLRenderingContext.getExtension()` 这个方法。更多详细信息，请参考 WebGL tutorial*（WebGL 使用教程）里的*Using Extensions *（使用扩展）*。

**备注：** 这个扩展仅仅能使用在 WebGL1 上下文中。在 WebGL2，默认情况下这个扩展的在 WebGL2 的上下文中起作用，它的常量以及方法使用过程中没有“ANGEL”后缀。

尽管名字叫“ANGLE”，只要硬件支持，它可以运行在任意设备上，而不仅是在 Windows 上起作用。 "ANGLE"只是表明了这个扩展是被 ANGLE 这个库的作者书写的，并没有更多的含义。

常量
--

这个扩展提供了一个新常量，它能被 `gl.getVertexAttrib()` (en-US) 这个方法所使用：

`ext.VERTEX_ATTRIB_ARRAY_DIVISOR_ANGLE`

当这个常量在`gl.getVertexAttrib()` (en-US)中作为 pname 参数使用时，将返回一个用于实例渲染的频率因子`GLint` (en-US)。

方法
--

这个扩展提供了三个新的方法。

`ext.drawArraysInstancedANGLE()` (en-US)

作用与`gl.drawArrays()` 相同，除了元素范围的多实例的执行以及每次迭代时的实例扩展。

`ext.drawElementsInstancedANGLE()` (en-US)

作用与`gl.drawElements()`相同，除了元素集中的多实例的计算以及每个集之间的实例扩展。

`ext.vertexAttribDivisorANGLE()` (en-US)

当用`ext.drawArraysInstancedANGLE()` (en-US)和`ext.drawElementsInstancedANGLE()` (en-US)渲染基本图元的多实例时，会提升通用的顶点属性的速度。

示例
--

启用扩展：


```js
var ext = gl.getExtension("ANGLE\_instanced\_arrays");
```

规范
--

| Specification |
| --- |
| WebGL ANGLE\_instanced\_arrays Khronos Ratified Extension Specification  |

浏览器兼容性
------

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

参见
--

* `WebGLRenderingContext.getExtension()`
* `WebGL2RenderingContext.drawArraysInstanced()` (en-US)
* `WebGL2RenderingContext.drawElementsInstanced()` (en-US)
* `WebGL2RenderingContext.vertexAttribDivisor()` (en-US)
CDATASection
============

**`CDATASection`** 接口用于表示 CDATA 片段（CDATA section）。在 XML 中，CDATA 可以直接包含未经转义的文本。比如 `<` 和 `&`，只要位于 CDATA 片段中，它们就不需要被转义，保持原样就可以了。

在 XML 中，一个 CDATA 片段格式如下：


```xml
<![CDATA[ … ]]>
```


例如：


```html
<foo>
  这是一个 CDATA 片段：<![CDATA[ < > & ]]> 其中包含了一些没有转义的字符。
</foo>
```


唯一的例外就是，在一个 CDATA 片段中不可以使用 CDATA 片段本身的闭合标签片段：


```xml
<![CDATA[ ]]> 会引发错误   ]]>
```


注意，CDATA 片段不应该在 HTML 中被使用；它只在 XML 中有效。

属性
--

这个接口没有特有的属性，但实现了父接口 *`Text` (en-US)* 的属性。

方法
--

这个接口没有特有的方法，但实现了父接口 *`Text` (en-US)* 的方法。

规范
--

| Specification |
| --- |
| DOM Standard # interface-cdatasection |

浏览器兼容性
------

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

`WebSocket` 对象提供了用于创建和管理 WebSocket 连接，以及可以通过该连接发送和接收数据的 API。

使用 `WebSocket()` 构造函数来构造一个 `WebSocket`。

构造函数
----

`WebSocket(url[, protocols])`

返回一个 `WebSocket` 对象。

常量
--

| **Constant** | **Value** |
| --- | --- |
| `WebSocket.CONNECTING` | `0` |
| `WebSocket.OPEN` | `1` |
| `WebSocket.CLOSING` | `2` |
| `WebSocket.CLOSED` | `3` |

属性
--

`WebSocket.binaryType`

使用二进制的数据类型连接。

`WebSocket.bufferedAmount` 只读 

未发送至服务器的字节数。

`WebSocket.extensions` 只读 

服务器选择的扩展。

`WebSocket.onclose`

用于指定连接关闭后的回调函数。

`WebSocket.onerror`

用于指定连接失败后的回调函数。

`WebSocket.onmessage`

用于指定当从服务器接受到信息时的回调函数。

`WebSocket.onopen`

用于指定连接成功后的回调函数。

`WebSocket.protocol` 只读 

服务器选择的下属协议。

`WebSocket.readyState` 只读 

当前的链接状态。

`WebSocket.url` 只读 

WebSocket 的绝对路径。

方法
--

`WebSocket.close([code[, reason]])`

关闭当前链接。

`WebSocket.send(data)`

对要传输的数据进行排队。

事件
--

使用 `addEventListener()` 或将一个事件监听器赋值给本接口的 `oneventname` 属性，来监听下面的事件。

`close`

 当一个 `WebSocket` 连接被关闭时触发。
 也可以通过 `onclose` 属性来设置。


`error`

 当一个 `WebSocket` 连接因错误而关闭时触发，例如无法发送数据时。
 也可以通过 `onerror` 属性来设置。


`message`

 当通过 `WebSocket` 收到数据时触发。
 也可以通过 `onmessage` 属性来设置。


`open`

 当一个 `WebSocket` 连接成功时触发。
 也可以通过 `onopen` 属性来设置。


示例
--


```js
// Create WebSocket connection.
const socket = new WebSocket("ws://localhost:8080");

// Connection opened
socket.addEventListener("open", function (event) {
  socket.send("Hello Server!");
});

// Listen for messages
socket.addEventListener("message", function (event) {
  console.log("Message from server ", event.data);
});
```

规范
--

| Specification |
| --- |
| WebSockets Standard # the-websocket-interface |

浏览器兼容性
------

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

参见
--

* Writing WebSocket client applications