recursal/MDN huggingface dataset:
AudioWorkletNode
================

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

虽然这个接口可以在 secure contexts 之外调用，但是 `BaseAudioContext.audioWorklet` (en-US) 属性不行，从而 `AudioWorkletProcessor` 不能在外部定义。

Web Audio API 中的 **`AudioWorkletNode`** 接口代表了用户定义的`AudioNode`的基类，该基类可以与其他节点一起连接到音频路由图。其具有关联的`AudioWorkletProcessor`, 它在 Web Audio 执行实际的音频处理。

构造函数
----

`AudioWorkletNode()` (en-US)

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

属性
--

*也继承父类的属性，`AudioNode`*.

`AudioWorkletNode.port` (en-US) 只读 

返回一个 `MessagePort` 用于节点与其关联的 `AudioWorkletProcessor` 间的双向通讯。另一端在处理器属性`port` (en-US) 下可用。

`AudioWorkletNode.parameters` (en-US) 只读 

返回一个 `AudioParamMap` (en-US) — `AudioParam` 对象的集合。它们在创建 `AudioWorkletProcessor`的过程中被实例化。如果 `AudioWorkletProcessor` 有一个静态的 `parameterDescriptors` (en-US) getter，从其返回的 `AudioParamDescriptor` 数组用于在 `AudioWorkletNode` 创建 `AudioParam` 对象。通过这种机制，使得 `AudioParam` 对象可以从 `AudioWorkletNode` 中访问。你可以在与其关联的 `AudioWorkletProcessor` 中使用它的值。

### Event handlers

`AudioWorkletNode.onprocessorerror` (en-US)

在关联的 `AudioWorkletProcessor` 对象发生异常时触发。一旦触发，处理器及其节点将在其整个生命周期内处于输出静默状态。

方法
--

*同样继承了其父类的方法，`AudioNode`*.

*AudioWorkletNode 接口未定义其自己的任何方法。*

示例
--

在本示例中我们创建了 `AudioWorkletNode` 对象，它会输出白噪声。

首先，我们需要定义一个自定义的 `AudioWorkletProcessor`, 它将输出白噪声并进行注册。注意，这需要在一个单独的文件中完成。


```js
// white-noise-processor.js
class WhiteNoiseProcessor extends AudioWorkletProcessor {
  process(inputs, outputs, parameters) {
    const output = outputs[0];
    output.forEach((channel) => {
      for (let i = 0; i < channel.length; i++) {
        channel[i] = Math.random() \* 2 - 1;
      }
    });
    return true;
  }
}

registerProcessor("white-noise-processor", WhiteNoiseProcessor);
```


接下来，在脚本主文件中一个 `AudioWorkletNode` 实例，并传递处理器的名称，然后将该实例连接到一个 audio graph.


```js
const audioContext = new AudioContext();
await audioContext.audioWorklet.addModule("white-noise-processor.js");
const whiteNoiseNode = new AudioWorkletNode(
  audioContext,
  "white-noise-processor",
);
whiteNoiseNode.connect(audioContext.destination);
```

规范
--

| Specification |
| --- |
| Web Audio API # AudioWorkletNode |

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

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

See also
--------

* Web Audio API
* Using the Web Audio API
AbortController
===============

**`AbortController`** 接口表示一个控制器对象，允许你根据需要中止一个或多个 Web 请求。

你可以使用 `AbortController.AbortController()` 构造函数创建一个新的 `AbortController`。使用 `AbortSignal` 对象可以完成与 DOM 请求的通信。

构造函数
----

`AbortController.AbortController()`

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

属性
--

`AbortController.signal` 只读 

返回一个 `AbortSignal` 对象实例，可以用它与一个 DOM 请求进行通信或者中止该请求。

方法
--

`AbortController.abort()`

中止一个尚未完成的 Web（网络）请求。这能够中止 fetch 请求及任何响应体的消费和流。

示例
--

**备注：** `AbortSignal` 中还有其他额外的示例。

在下面的代码片段中，我们想通过 Fetch API 下载一段视频。

我们先使用 `AbortController()` 构造函数创建一个控制器，然后使用 `AbortController.signal` 属性获取其关联 `AbortSignal` 对象的引用。

当 fetch 请求初始化时，我们将 `AbortSignal` 作为一个选项传递进入请求的选项对象中（下面的 `{signal}`）。这将 signal 和 controller 与 fetch 请求相关联，并且允许我们通过调用 `AbortController.abort()` 去中止它，如下面的第二个事件监听器。


```js
let controller;
const url = "video.mp4";

const downloadBtn = document.querySelector(".download");
const abortBtn = document.querySelector(".abort");

downloadBtn.addEventListener("click", fetchVideo);

abortBtn.addEventListener("click", () => {
  if (controller) {
    controller.abort();
    console.log("中止下载");
  }
});

function fetchVideo() {
  controller = new AbortController();
  const signal = controller.signal;
  fetch(url, { signal })
    .then((response) => {
      console.log("下载完成", response);
    })
    .catch((err) => {
      console.error(`下载错误：${err.message}`);
    });
}
```


**备注：** 当 `abort()` 被调用时，这个 `fetch()` promise 将 `reject` 一个名为 `AbortError` 的 `DOMException`。

你可以在 GitHub 上找到这个示例的完整源代码（也可以在线运行）。

规范
--

| Specification |
| --- |
| DOM Standard # interface-abortcontroller |

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

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

参见
--

* Fetch API
* Abortable Fetch by Jake Archibald
TextDecoder
===========

**`TextDecoder`** 接口表示一个文本解码器，一个解码器只支持一种特定文本编码，例如 `UTF-8`、`ISO-8859-2`、`KOI8-R`、`GBK`，等等。解码器将字节流作为输入，并提供码位流作为输出。

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

构造函数
----

`TextDecoder()`

返回一个新构造的 `TextDecoder`，它使用参数中指定的解码方法生成码位流。

属性
--

*`TextDecoder` 接口不继承任何属性。*

`TextDecoder.prototype.encoding`只读 

一个包含的解码器名称的字符串，即描述 `TextDecoder` 将使用的方法的字符串。

`TextDecoder.prototype.fatal`只读 

一个布尔值，表示错误模式是否致命。

`TextDecoder.prototype.ignoreBOM` 只读 

一个布尔值，表示是否忽略字节顺序标记（BOM）标记。

方法
--

*`TextDecoder` 接口不继承任何方法*。

`TextDecoder.prototype.decode()`

返回一个字符串，其中包含使用特定 `TextDecoder` 对象的方法解码的文本。

示例
--

### 用类型化数组表示文本

本示例展示如何解码中文/日语字符
 ![](/zh-CN/docs/Web/API/TextDecoder/2019-05-21_191907.png)，用五个不同的类型化数组表示：`Uint8Array`、`Int8Array`、`Uint16Array`、`Int16Array` 和 `Int32Array`。


```js
let utf8decoder = new TextDecoder(); // default 'utf-8' or 'utf8'

let u8arr = new Uint8Array([240, 160, 174, 183]);
let i8arr = new Int8Array([-16, -96, -82, -73]);
let u16arr = new Uint16Array([41200, 47022]);
let i16arr = new Int16Array([-24336, -18514]);
let i32arr = new Int32Array([-1213292304]);

console.log(utf8decoder.decode(u8arr));
console.log(utf8decoder.decode(i8arr));
console.log(utf8decoder.decode(u16arr));
console.log(utf8decoder.decode(i16arr));
console.log(utf8decoder.decode(i32arr));
```

### 处理非 UTF8 文本

在此示例中，我们对俄语文本“Привет，мир！”进行编码，它的意思是（"Hello, world."）。在我们的 `TextDecoder()` 构造函数中，我们指定适用于西里尔字母的 Windows-1251 字符编码。


```js
const win1251decoder = new TextDecoder("windows-1251");
const bytes = new Uint8Array([
  207, 240, 232, 226, 229, 242, 44, 32, 236, 232, 240, 33,
]);
console.log(win1251decoder.decode(bytes)); // Привет, мир!
```

规范
--

| Specification |
| --- |
| Encoding Standard # interface-textdecoder |

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

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

参见
--

* `TextEncoder` 接口描述了逆操作。
* 一个垫片，允许在不支持它的浏览器使用这个接口。
* Node.js 从 v11.0.0 开始支持全局导出
WebGLContextEvent
=================

**WebContextEvent** 接口属于 WebGL API 的一部分，同时也是生成用来对 WebGL 渲染上下文作响应的事件接口。

继承
--

**此接口从它的父接口 `Event`继承属性和方法。**

Event

WebGLContextEvent属性
--

**此接口从它的父接口 `Event`继承属性。**

`WebGLContextEvent.statusMessage` (en-US)

一个包含事件额外信息的只读属性。

方法
--

*此接口本身并没有定义任何方法，而是从它的父接口 `Event` 继承方法。*

示例
--

使用 `WEBGL_lose_context` 插件，你可以模拟 `webglcontextlost` 和 `webglcontextrestored` (en-US) 事件：


```js
var canvas = document.getElementById("canvas");
var gl = canvas.getContext("webgl");

canvas.addEventListener(
  "webglcontextlost",
  function (e) {
    console.log(e);
  },
  false,
);

gl.getExtension("WEBGL\_lose\_context").loseContext();

// 记录了 "webglcontextlost" 类型的 WebGLContextEvent 事件
```

规范
--

| Specification |
| --- |
| WebGL Specification # 5.15 |

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

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

相关内容
----

* `WebGLRenderingContext.isContextLost()`
* `WEBGL_lose_context`, `WEBGL_lose_context.loseContext()`, `WEBGL_lose_context.restoreContext()`
* 事件：webglcontextlost, webglcontextrestored (en-US), webglcontextcreationerror (en-US)
DragEvent
=========

**`DragEvent`** 是一个表示拖、放交互的一个`DOM event` 接口。用户通过将指针设备（例如鼠标）放置在触摸表面上并且然后将指针拖动到新位置（诸如另一个 DOM 元素）来发起拖动。应用程序可以按应用程序特定的方式自由解释拖放交互。

这个接口继承 `MouseEvent` 和`Event`属性

属性
--

`DragEvent.dataTransfer` 只读 

在拖放交互期间传输的数据。

构造函数
----

虽然这个接口有一个构造函数，但不可能从脚本创建一个有用的 DataTransfer 对象，因为在拖放期间，有一个由浏览器分配的一个处理中和安全模式的`DataTransfer`对象。

`DragEvent()`

创建合成和不可信的 DragEvent.

事件类型
----

`drag`

拖动元素或选择文本时触发此事件。

`dragend`

当拖动操作结束时（释放鼠标按钮或按下退出键），会触发此事件。

`dragenter`

当拖动的元素或选择文本输入有效的放置目标时，会触发此事件。

`dragleave`

当拖动的元素或文本选择离开有效的放置目标时，会触发此事件。

`dragover`

当将元素或文本选择拖动到有效放置目标（每几百毫秒）上时，会触发此事件。

`dragstart`

当用户开始拖动元素或选择文本时触发此事件。

`drop`

当在有效放置目标上放置元素或选择文本时触发此事件。

全局事件处理
------

`GlobalEventHandlers.ondrag`

`drag` 事件的`全局事件处理`。

`GlobalEventHandlers.ondragend` (en-US)

`dragend` 事件的`全局事件处理`。

`GlobalEventHandlers.ondragenter` (en-US)

`dragenter` 事件的`全局事件处理`。

`GlobalEventHandlers.ondragexit` (en-US)

`dragleave` 事件的`全局事件处理`。

`GlobalEventHandlers.ondragover` (en-US)

`dragover` 事件的`全局事件处理`。

`GlobalEventHandlers.ondragstart` (en-US)

`dragstart` 事件的`全局事件处理`。

`GlobalEventHandlers.ondrop`

`drop` 事件的`全局事件处理`。

示例
--

每个属性，构造函数，事件类型和全局事件处理程序的示例都包含在它们各自的参考页中。

规范
--

| Specification |
| --- |
| HTML Standard # the-dragevent-interface |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CSS 属性和值 API
============

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**CSS 属性和值 API**（CSS Properties and Values API）——CSS Houdini API 的一部分——允许开发者显式地定义它们的 `CSS 自定义属性`，允许设置属性类型检查、默认值以及是否可继承其值。

接口
--

`CSS.registerProperty` (en-US)

定义了浏览器应该如何解析 `CSS custom properties`。通过 JavaScript 中的 `CSS.registerProperty` (en-US) 访问该接口。

`@property`

定义了浏览器应该如何解析 `CSS custom properties`。通过 CSS 中的 `@property` at 规则访问该接口。

示例
--

以下代码在 JavaScript 中使用 `CSS.registerProperty` (en-US) 输入一个 `CSS 自定义属性`，`--my-color`，将其作为一个颜色，然后为其设置一个默认值，并且不允许继承它的值。


```js
window.CSS.registerProperty({
  name: "--my-color",
  syntax: "<color>",
  inherits: false,
  initialValue: "#c0ffee",
});
```


可以在 CSS 中使用 `@property` at-rule 进行相同的注册：


```css
@property --my-color {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}
```

规范
--

| Specification |
| --- |
| CSS Properties and Values API Level 1 # the-css-property-rule-interface |
| CSS Properties and Values API Level 1 # the-registerproperty-function |

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

### api.CSSPropertyRule

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

### api.CSS.registerProperty\_static

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

参见
--

* 使用 CSS 属性和值 API (en-US)
* CSS Painting API (en-US)
* CSS 类型对象模型 (en-US)
* Houdini API
Attr
====

**`Attr`** 接口将一个元素的属性（attribute）表示为一个对象。在大多数情况下，你可以直接以字符串形式检索属性值（例如 `Element.getAttribute()`），但某些函数（例如 `Element.getAttributeNode()`）或迭代方法则返回 `Attr` 实例。

EventTarget

Node

Attr
`Attr` 对象的核心思想是将*名称*和*值*关联起来。属性也可能属于一个*命名空间*，在这种情况下，它还有一个表示命名空间的 URI，以及一个作为命名空间的缩写的前缀。

当该名称忽略最终的命名空间前缀时，则认为该名称是*本地的*；当该名称包含命名空间的前缀时，则认为该名称是被*限定的*，如果存在前缀，则将其通过冒号（`:`）与本地名分隔。一共有三种情况：属性不在命名空间中、属性在命名空间中但没有定义前缀、属性在命名空间中且定义了前缀：

| 属性 | 命名空间名 | 命名空间前缀 | 属性的本地名 | 属性的限定名 |
| --- | --- | --- | --- | --- |
| `myAttr` | *无* | *无* | `myAttr` | `myAttr` |
| `myAttr` | `mynamespace` | *无* | `myAttr` | `myAttr` |
| `myAttr` | `mynamespace` | `myns` | `myAttr` | `myns:myAttr` |

**备注：** 该接口仅表示 `Element` 树中存在的属性（attribute），无论是 SVG、HTML 还是 MathML 元素。它不表示与此类元素相关的接口的*属性*（property），例如 `<table>` 元素的 `HTMLTableElement`。（有关元素属性（attribute）及其如何*反射*到接口属性（property）的更多信息，请参见这篇文章。）

实例属性
----

*此接口还从其父接口 `Node`、`EventTarget` 基础属性。*

`localName` 只读 

一个表示属性限定名的本地部分的字符串。

`name` (en-US) 只读 

该属性的*限定名*。如果该属性不在命名空间中，则其与 `localName` 属性相同。

`namespaceURI` 只读 

一个表示该属性的命名空间 URI 的字符串，如果没有命名空间，则返回 `null`。

`ownerElement` (en-US) 只读 

该属性所附属的元素。

`prefix` 只读 

一个表示该属性的命名空间前缀的字符串，如果命名空间没有前缀或没有指定命名空间则返回 `null`。

`specified` (en-US) 只读  
已弃用

该属性总是返回 `true`。

`value` (en-US)

属性的值，其为一个可以通过接口属性进行设置和获取的字符串。

实例方法
----

*此接口无具体方法，但继承了其父接口 `Node`、`EventTarget` 的方法。*

规范
--

| Specification |
| --- |
| DOM Standard # interface-attr |

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

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

参见
--

* 其他的节点有 `CDATASection`、`CharacterData`、`Comment`、`Document`、`Element`、`ProcessingInstruction` (en-US) 和 `Text` (en-US)。
WebGLShaderPrecisionFormat
==========================

**WebGLShaderPrecisionFormat** 接口是WebGL API 的一部分，它表示通过调用`WebGLRenderingContext.getShaderPrecisionFormat()` (en-US)返回信息的信息。

属性
--

`WebGLShaderPrecisionFormat.rangeMin` (en-US)

以 2 为底的最小值的绝对值的对数。

`WebGLShaderPrecisionFormat.rangeMax` (en-US)

可以表示的最大值的绝对值的底数为 2 的对数。

`WebGLShaderPrecisionFormat.precision` (en-US)

可以表示的精度位的数目。对于整数类型，这个值总是 0。

示例
--

`WebGLShaderPrecisionFormat` 对象通过`WebGLRenderingContext.getShaderPrecisionFormat()` (en-US) 方法来返回。


```js
var canvas = document.getElementById("canvas");
var gl = canvas.getContext("webgl");
gl.getShaderPrecisionFormat(gl.VERTEX\_SHADER, gl.MEDIUM\_FLOAT);
// WebGLShaderPrecisionFormat { rangeMin: 127, rangeMax: 127, precision: 23 }
```

规格
--

| Specification |
| --- |
| WebGL Specification # 5.12 |

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

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

参见
--

* `WebGLRenderingContext.getShaderPrecisionFormat()` (en-US)
CharacterData
=============

**`CharacterData`** 抽象接口（abstract interface）代表 `Node` 对象包含的字符。这是一个抽象接口，意味着没有 `CharacterData` 类型的对象。它是在其他接口中被实现的，如 `Text` (en-US)、`Comment` 或 `ProcessingInstruction` (en-US) 这些非抽象接口。

属性
--

*从其父级 `Node` 继承属性，并且实现了 `ChildNode` 和 `NonDocumentTypeChildNode` (en-US) 接口。*

`CharacterData.data` (en-US)

一个 `DOMString`，表示该对象中包含的文本数据。

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

返回一个 `unsigned long` 的表示 `CharacterData.data` 包含的字符串的大小。

`NonDocumentTypeChildNode.nextElementSibling` 只读 

返回其父节点所在的子节点列表（children list）中紧跟着的元素节点 `Element`，或者 `null`。

`NonDocumentTypeChildNode.previousElementSibling` 只读 

返回其父节点所在的子节点列表（children list）中前一个元素节点 `Element`，或者 `null`。

方法
--

*从其父级 `Node` 继承方法，并且实现了 `ChildNode` 和*`NonDocumentTypeChildNode` (en-US) 接口。

`CharacterData.appendData()` (en-US)

为 `CharacterData.data` 字符串追加指定的 `DOMString` ；当方法返回时，`data` 包含的是已合并的 `DOMString`.

`CharacterData.deleteData()` (en-US)

在 `CharacterData.data` 字符串中，从指定位置开始，删除指定数量的字符；当方法返回时，`data` 包含的是缩短了的 `DOMString`.

`CharacterData.insertData()` (en-US)

在 `CharacterData.data` 字符串中，在指定的位置，插入指定的字符；当方法返回时，`data` 包含的是已修改的 `DOMString`.

`ChildNode.remove()` (en-US) 
实验性

把对象从其父节点的 children list 中删除。

`CharacterData.replaceData()` (en-US)

在 `CharacterData.data` 字符串中，从指定位置开始，把指定数量的字符替换为指定的 `DOMString`; 当方法返回时，`data` 包含的是已修改的 `DOMString`.

`CharacterData.substringData()` (en-US)

返回一个包含了从`CharacterData.data` 中的指定位置开始，指定长度的 `DOMString` 。

规范
--

| Specification |
| --- |
| DOM Standard # interface-characterdata |

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

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

参见
--

* The DOM interfaces index (en-US).
FileSystemWritableFileStream
============================

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

文件系统 API 的 **`FileSystemWritableFileStream`** 接口是一类附加了便于操作磁盘上单个文件的方法的 `WritableStream` 对象。这个接口通过 `FileSystemFileHandle.createWritable()` 方法来访问。

WritableStream

FileSystemWritableFileStream实例属性
----

*继承父接口 `WritableStream` 的属性。*

实例方法
----

*继承父接口 `WritableStream` 的方法。*

`FileSystemWritableFileStream.write()`

向调用此方法的文件写入内容，写入到文件当前指针偏移处。

`FileSystemWritableFileStream.seek()`

更新文件当前指针偏移到指定位置（以字节为单位）。

`FileSystemWritableFileStream.truncate()`

将与流相关联的文件调整为指定的字节大小。

示例
--

下面的异步函数会打开“保存文件”选择器，选择器在有文件被选择后会返回一个 `FileSystemFileHandle`。由此，使用 `FileSystemFileHandle.createWritable()` 方法创建一个写入流。

然后向流中写入一个文本字符串，随后关闭该流。


```js
async function saveFile() {
  // 创建一个新句柄。
  const newHandle = await window.showSaveFilePicker();

  // 创建一个 FileSystemWritableFileStream 用于写入。
  const writableStream = await newHandle.createWritable();

  // 写入我们的文件。
  await writableStream.write("This is my file content");

  // 关闭文件并将内容写入磁盘。
  await writableStream.close();
}
```


下面的例子展示能够向 `write()` 方法传递的不同选项。


```js
// 只传递数据（没有选项）
writableStream.write(data);

// 向流中指定位置写入数据
writableStream.write({ type: "write", position, data });

// 将文件当前的指针更新到指定的偏移位置
writableStream.write({ type: "seek", position });

// 调整文件至指定字节长度
writableStream.write({ type: "truncate", size });
```

规范
--

| Specification |
| --- |
| File System Standard # api-filesystemwritablefilestream |

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

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

参见
--

* 文件系统 API
* 文件系统访问 API：简化本地文件访问
URL
===

**`URL`** 接口用于解析，构造，规范化和编码 URL。它通过提供允许你轻松阅读和修改 URL 组件的属性来工作。通常，通过在调用 URL 的构造函数时将 URL 指定为字符串或提供相对 URL 和基本 URL 来创建新的 URL 对象。然后，你可以轻松读取 URL 的已解析组成部分或对 URL 进行更改。

如果浏览器尚不支持`URL()`构造函数，则可以使用`Window`中的`Window.URL` (en-US)属性。确保检查你的任何目标浏览器是否要求对此添加前缀。

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

构造器
---

`new URL()`

创建并返回一个`URL`对象，该 URL 对象引用使用绝对 URL 字符串，相对 URL 字符串和基本 URL 字符串指定的 URL。

属性
--

`hash`

包含`'#'`的`USVString`，后跟 URL 的片段标识符。

`host`

一个`USVString`，其中包含域（即主机名），后跟（如果指定了端口）“：”和 URL 的端口。

`hostname`

包含 URL 域名的 `USVString`。

`href`

包含完整 URL 的 `USVString`。

`origin` 只读 

返回一个包含协议名、域名和端口号的 `USVString`。

`password`

包含在域名前面指定的密码的 `USVString` 。

`pathname`

以 '/' 起头紧跟着 URL 文件路径的 `DOMString`。

`port`

包含 URL 端口号的 `USVString`。

`protocol`

包含 URL 协议名的 `USVString`，末尾带 `':'`。

`search`

一个`USVString` ，指示 URL 的参数字符串；如果提供了任何参数，则此字符串包括所有参数，并以开头的“？”开头 字符。

`searchParams` 只读 

`URLSearchParams`对象，可用于访问`search`中找到的各个查询参数。

`username`

包含在域名前面指定的用户名的 `USVString`。

方法
--

`toString()`

返回包含整个 URL 的`USVString`。它是`URL.href`的同义词，尽管它不能用于修改值。

`toJSON()`

返回包含整个 URL 的`USVString`。它返回与`href`属性相同的字符串。

静态方法
----

`createObjectURL()`

返回一个`DOMString` ，包含一个唯一的 blob 链接（该链接协议为以 blob:，后跟唯一标识浏览器中的对象的掩码）。

`revokeObjectURL()`

销毁之前使用`URL.createObjectURL()`方法创建的 URL 实例。

使用说明
----

如果`url`参数是相对 URL，则构造函数将使用`url`参数和可选的`base`参数作为基础。
```

const url = new URL('../cats', 'http://www.example.com/dogs');
console.log(url.hostname); // "www.example.com"
console.log(url.pathname); // "/cats"
```


可以设置 URL 属性以构造 URL：
```

url.hash = 'tabby';
console.log(url.href); // "http://www.example.com/cats#tabby"
```


URL 根据 RFC 3986中的规则进行编码。例如：
```

url.pathname = 'démonstration.html';
console.log(url.href); // "http://www.example.com/d%C3%A9monstration.html"
```


`URLSearchParams`接口可用于构建和处理 URL 查询字符串。

要从当前窗口的 URL 获取搜索参数，可以执行以下操作：
```

// https://some.site/?id=123
const parsedUrl = new URL(window.location.href);
console.log(parsedUrl.searchParams.get("id")); // "123"
```


URL 的`toString()`方法仅返回`href` 属性的值，因此构造函数可以 用于直接对 URL 进行规范化和编码。
```

const response = await fetch(new URL('http://www.example.com/démonstration.html'));
```

规范
--

| Specification |
| --- |
| URL Standard # url |

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

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

参见
--

* `core-js` 中针对 `URL` 的 polyfill
* URL API
* 什么是 URL？
* 获取 `URL` 对象的属性：`URL`
* `URLSearchParams`
FileList
========

一个 FileList 对象通常来自于一个 HTML `<input>` 元素的 `files` 属性，你可以通过这个对象访问到用户所选择的文件。该类型的对象还有可能来自用户的拖放操作，查看 `DataTransfer` (en-US) 对象了解详情。

**备注：** 在 Gecko 1.9.2 之前，通过 `input` 元素，每次只能选择一个文件，这意味着该 `input` 元素的 `files` 属性上的 FileList 对象无论如何都只能包含一个文件。从 Gecko 1.9.2 开始，如果一个 `input` 元素拥有 `multiple` 属性，则可以用它来选择多个文件。

使用 FileList
-----------

所有 type 属性 (attribute) 为 file 的 `<input>` 元素都有一个 files 属性 (property),用来存储用户所选择的文件。例如：
```

<input id="fileItem" type="file">
```


下面的一行代码演示如何获取到一个 FileList 对象中的第一个文件 (`File` 对象):


```js
var file = document.getElementById("fileItem").files[0];
```

方法概述
----
```

File item(index);
```

属性
--

| 属性名 | 类型 | 描述 |
| --- | --- | --- |
| `length` | `integer` | 一个只读的整数值，用来返回列表中的文件数量。 |

方法
--

### `item()`

根据给定的索引值，返回 FileList 对象中对应的 `File` 对象。
```

 File item(
   index
 );
```


###### 参数

`index`

File 对象在 FileList 对象中的索引值，从 0 开始。

###### 返回值

所请求的`File`对象。

示例
--

这个例子迭代了用户通过一个 `input` 元素选择的多个文件：


```js
// fileInput 是一个 HTML input 元素：<input type="file" id="myfileinput" multiple>
var fileInput = document.getElementById("myfileinput");

// files 是一个 FileList 对象 (类似于 NodeList 对象)
var files = fileInput.files;
var file;

// 遍历所有文件
for (var i = 0; i < files.length; i++) {
  // 取得一个文件
  file = files.item(i);
  // 这样也行
  file = files[i];
  // 取得文件名
  alert(file.name);
}
```


下面是一个更完整的例子。


```html
<!doctype html>
<html>
  <head> </head>
  <body>
    <!-- multiple 属性允许用户选择多个文件 -->

    <input id="myfiles" multiple type="file" />
  </body>

  <script>
 var pullfiles = function () {
 // love the query selector
 var fileInput = document.querySelector("#myfiles");
 var files = fileInput.files;
 // 获取所选文件数量
 var fl = files.length;
 var i = 0;

 while (i < fl) {
 // localize file var in the loop
 var file = files[i];
 alert(file.name);
 i++;
 }
 };

 // 设置 change 事件处理函数
 document.querySelector("#myfiles").onchange = pullfiles;
 </script>
</html>
```

规范
--

| Specification |
| --- |
| File API # filelist-section |
| HTML Standard # dom-input-files-dev |

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

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

参见
--

* 如何在 Web 应用程序中使用文件
* `File`
* `FileReader`
AudioBuffer
===========

AudioBuffer 接口表示存在内存里的一段短小的音频资源，利用`AudioContext.decodeAudioData()`方法从一个音频文件构建，或者利用 `AudioContext.createBuffer()`从原始数据构建。把音频放入 AudioBuffer 后，可以传入到一个 `AudioBufferSourceNode`进行播放。

这些类型对象被设计来控制小音频片段，往往短于 45 秒。对于更长的声音，通过 `MediaElementAudioSourceNode`来实现更为合适。缓存区（buffer）包含以下数据：不间断的 IEEE754 32 位线性 PCM，从 -1 到 1 的范围额定，就是说，32 位的浮点缓存区的每个样本在 -1.0 到 1.0 之间。如果`AudioBuffer`有不同的频道，他们通常被保存在独立的缓存区。

属性
--

`AudioBuffer.sampleRate` 只读 

存储在缓存区的 PCM 数据的采样率：浮点数，单位为 sample/s。

`AudioBuffer.length` 只读 

返回存储在缓存区的 PCM 数据的采样帧数：整型。

`AudioBuffer.duration` 只读 

返回存储在缓存区的 PCM 数据的时长：双精度型（单位为秒）。

`AudioBuffer.numberOfChannels` 只读 

返回存储在缓存区的 PCM 数据的通道数：整型。

方法
--

`AudioBuffer.getChannelData()`

返回一个 `Float32Array`，包含了带有频道的 PCM 数据，由频道参数定义（有 0 代表第一个频道）

`AudioBuffer.copyFromChannel()`

从 AudioBuffer 的指定频道复制到数组终端。

`AudioBuffer.copyToChannel()` (en-US)

复制样品到原数组的 AudioBuffer 的指定频道

例子
--

以下的例子展示了如何构建一个 AudioBuffer 以及随机用白噪音填充。你可以在 audio-buffer 演示库发现完整的源代码；也可以获得一个实时运行的的版本。


```js
// Stereo
var channels = 2;

// Create an empty two second stereo buffer at the
// sample rate of the AudioContext
var frameCount = audioCtx.sampleRate \* 2.0;
var myArrayBuffer = audioCtx.createBuffer(
  channels,
  frameCount,
  audioCtx.sampleRate,
);

button.onclick = function () {
  // Fill the buffer with white noise;
  // just random values between -1.0 and 1.0
  for (var channel = 0; channel < channels; channel++) {
    // This gives us the actual array that contains the data
    var nowBuffering = myArrayBuffer.getChannelData(channel);
    for (var 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
  var 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();
};
```

规格参数
----

| Specification |
| --- |
| Web Audio API # AudioBuffer |

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

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

可查看
---

* 应用 Web Audio API