recursal/MDN huggingface dataset:
Selection.setBaseAndExtent()
============================

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

**`setBaseAndExtent()`** 方法是 `Selection` 接口用来选中并设置在两个特定的 DOM 节点中文本选中的范围，并且选中的任何内容都位于两个节点之间。

语法
--
```

sel.setBaseAndExtent(anchorNode,anchorOffset,focusNode,focusOffset)
```

### 参数

*`anchorNode`*

锚节点 - 选中内容的开始节点

*`anchorOffset`*

选中范围内起点位置在锚节点下第几个子节点的位置。例如，如果是值为 0 的话，整个节点都是被选中的。如果值为 1 的话，那么至少整个节点至少有一个子节点被选中。以此类推。

*`focusNode`*

焦点节点 - 选中内容的结尾节点

`focusOffset`

选中范围内结束位置在焦点节点下第几个子节点的位置。例如，如果是值为 0 的话，整个节点都是被选中的。如果值为 1 的话，那么至少整个节点至少有一个子节点被选中。以此类推。


**备注：** 如果源代码中`焦点节点`出现在`锚节点`之前的话，这两个将在参数中互换位置，也就是锚节点变为了焦点节点、焦点节点变为了锚节点。另外，这些参数的用法会颠倒 — 插入符是放置在文本的开头而不是结尾，这对于任何可能遵循这规则的键盘命令都是很重要的。例如，`Shift` + `➡︎` 会使选中状态范围的从开始缩小，而不是在结尾增加。

### 返回值

Void.

### 说明

如果`锚偏移值`超过了`锚节点`内部的子节点个数，或则如果`焦点偏移值`超过了`焦点节点`内部的子节点个数，这个`IndexSizeError` 选中会被丢弃。

示例
--

一个例子，我们有两个包含多个 span 的段落，每一个 span 包含一个单词。然后第一个段落作为`锚节`点并且第二个作为`焦点节点`.我们还有一个额外的段落插入在两个节点之间。

然后，这里有两个允许你去设置锚节点和焦点节点的表单输入框 — 它们都有一个默认值为 0.

这里还有一个按钮用来点击调用运行包含`setBaseAndExtent()`方法的函数，最后输出选中内容到 HTML 的最底部。


```html
<h1>setBaseAndExtent example</h1>
<div>
  <p class="one">
    <span>Fish</span><span>Dog</span><span>Cat</span><span>Bird</span>
  </p>
  <p>MIDDLE</p>
  <p class="two">
    <span>Car</span><span>Bike</span><span>Boat</span><span>Plane</span>
  </p>
</div>

<div>
  <p>
    <label for="aOffset">Anchor offset</label>
    <input id="aOffset" name="aOffset" type="number" value="0" />
  </p>
  <p>
    <label for="fOffset">Focus offset</label>
    <input id="fOffset" name="fOffset" type="number" value="0" />
  </p>
  <p><button>Capture selection</button></p>
</div>

<p><strong>Output</strong>: <span class="output"></span></p>
```


JavaScript 像这样：


```js
var one = document.querySelector(".one");
var two = document.querySelector(".two");

var aOffset = document.getElementById("aOffset");
var fOffset = document.getElementById("fOffset");

var button = document.querySelector("button");

var output = document.querySelector(".output");

var selection;

button.onclick = function () {
  try {
    selection = document.getSelection();
    selection.setBaseAndExtent(one, aOffset.value, two, fOffset.value);
    var text = selection.toString();
    output.textContent = text;
  } catch (e) {
    output.textContent = e.message;
  }
};
```


在下面在线运行实例，设置不同的偏移值去观察它怎么去影响选中内容的。

**备注：** 实例在这里 example on GitHub (see it live also.)

规范
--

| Specification |
| --- |
| Selection API # dom-selection-setbaseandextent |

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

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

相关链接
----

* `Selection`
Selection.modify()
==================

**非标准:** 该特性是非标准的，请尽量不要在生产环境中使用它！

**`Selection.modify()`** 方法可以通过简单的文本命令来改变当前选区或光标位置。

语法
--
```

sel.modify(alter, direction, granularity)
```

### 参数

*alter*

改变类型。传入 `"move"` 来移动光标位置，或者 `"extend"` 来扩展当前选区。

*direction*

调整选区的方向。你可以传入 `"forward"` 或 `"backward"` 来根据选区内容的语言书写方向来调整。或者使用 `"left"` 或 `"right"` 来指明一个明确的调整方向。

*granularity*

调整的距离颗粒度。可选值有 `"character"`、`"word"`、`"sentence"`、`"line"`、`"paragraph"`、`"lineboundary"`、`"sentenceboundary"`、`"paragraphboundary"`、`"documentboundary"`。


**备注：** Gecko **不支持** `"sentence"`, `"paragraph"`, `"sentenceboundary"`, `"paragraphboundary"` 和 `"documentboundary"`. Webkit 和 Blink 支持。

**备注：** 从 Gecko 5.0 开始，不管是不是浏览器的默认行为，`"word"` 颗粒度不再包括单词后面的空格。这让这个行为变得更加稳定，这也和之前的 Webkit 保持一致，然而不幸的是他们最近修改了这个默认行为。

例子
--

使当前选区往语言书写方向扩大一个单词（word）的选择范围
```

var selection = window.getSelection();
selection.modify("extend", "forward", "word");
```

规范
--

*无。*

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

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

相关链接
----

* `Selection`，本方法所属的接口。
Selection.focusNode
===================

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

**`Selection.focusNode`** 是只读的，返回所选内容的结束位置部分所属的节点。

用户可能会从左到右 (按文字方向) 或从右到左 (按文字相反方向) 进行选择。focusNode 就是用户选择时最后停下来所处的元素节点。当你同时按下 shift 键和任何一个方向键来改变选择时，你就能看到：选择的结束位置在移动，但是选择的锚点 - 起始位置不会改变。

语法
--
```

node = sel.focusNode
```

规范
--

| Specification |
| --- |
| Selection API # dom-selection-focusnode |

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

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

参考
--

* `Selection`, Selection 接口规范。
Lock：mode 属性
============

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

`Lock` 接口的 **`mode`** 只读属性返回请求锁时传递给 `LockManager.request()` 的访问模式。该模式可以是 `"exclusive"`（默认值）或 `"shared"`。

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

值
-

`"exclusive"` 或 `"shared"` 之一。

示例
--

以下示例显示如何在对 `LockManager.request()` 的调用中传递 mode 属性。其中 `LockManager` 是 `navigator.locks` 返回的对象。


```js
// 应显示 "exclusive"（默认值）
navigator.locks.request("my\_resource", show_lock_properties);

// 应显示 "exclusive"
navigator.locks.request(
  "my\_resource",
  { mode: "exclusive" },
  show_lock_properties,
);

// 应显示 "shared"
navigator.locks.request(
  "my\_resource",
  { mode: "shared" },
  show_lock_properties,
);

function show\_lock\_properties(lock) {
  console.log(`锁的名称是：${lock.name}`);
  console.log(`锁的模式是：${lock.mode}`);
}
```

规范
--

| Specification |
| --- |
| Web Locks API # dom-lock-mode |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Lock：name 属性
============

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

`Lock` 接口的 **`name`** 只读属性返回请求锁时传递给 `LockManager.request` 选择的*名称*。

当请求锁时，锁的名称通过脚本传递。该名称由开发人员选择来表示一个抽象资源，该资源的使用在同源的多个标签页、worker 或其他代码之间进行协调。例如，如果 Web 应用程序同时只能有一个标签页进行网络资源与脱机数据库的同步，则它可以使用诸如 `"net_db_sync"` 之类的锁名称。

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

值
-

一个字符串。

示例
--

以下示例显示了如何在对 `LockManager.request()` 的调用中传递 name 属性。其中 `LockManager` 是 `navigator.locks` 返回的对象。


```js
navigator.locks.request("net\_db\_sync", show_lock_properties);

function show\_lock\_properties(lock) {
  console.log(`锁的名称是：${lock.name}`);
  console.log(`锁的模式是：${lock.mode}`);
}
```

规范
--

| Specification |
| --- |
| Web Locks API # dom-lock-name |

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

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

只读属性 **`persisted`** 代表一个页面是否从缓存中加载的

Syntax
------


```js
window.addEventListener("pageshow", function (event) {
  if (event.persisted) {
    console.log("Page was loaded from cache.");
  }
});
```

### Value

A `Boolean`.

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

| Specification |
| --- |
| HTML Standard # dom-pagetransitionevent-persisted-dev |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
BeforeInstallPromptEvent.prompt()
=================================

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

`BeforeInstallPromptEvent` 接口的 **`prompt()`** 方法允许一个开发人员在自己选择的一个时间显示安装提示。

句法
--
```

BeforeInstallPromptEvent.prompt()
```

### 参数

无

### 返回

一个空的 `Promise`.

范例
--
```

let isTooSoon = true;
window.addEventListener("beforeinstallprompt", function(e) {
  if (isTooSoon) {
    e.preventDefault(); // Prevents prompt display
    // Prompt later instead:
    setTimeout(function() {
      isTooSoon = false;
      e.prompt(); // Throws if called more than once or default not prevented
    }, 10000);
  }

  // The event was re-dispatched in response to our request
  // ...
});
```

规范
--

This method is not part of a specification.

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Geolocation.clearWatch()
========================

**`Geolocation.clearWatch()`** 这个方法用于注销之前使用 `Geolocation.watchPosition()` 注册的位置监听器或错误监听器。

语法
--
```

navigator.geolocation.clearWatch(id);
```

### 参数

`id`

希望移除的监听器所对应的 `Geolocation.watchPosition()` 返回的 ID 值。

示例
--


```js
var id, target, option;

function success(pos) {
  var crd = pos.coords;

  if (target.latitude === crd.latitude && target.longitude === crd.longitude) {
    console.log("Congratulation, you reach the target");
    navigator.geolocation.clearWatch(id);
  }
}

function error(err) {
  console.warn("ERROR(" + err.code + "): " + err.message);
}

target = {
  latitude: 0,
  longitude: 0,
};

options = {
  enableHighAccuracy: false,
  timeout: 5000,
  maximumAge: 0,
};

id = navigator.geolocation.watchPosition(success, error, options);
```

规范
--

| Specification |
| --- |
| Geolocation API # clearwatch-method |

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

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

参见
--

* 使用地理位置定位
* `Geolocation`
* `Geolocation.watchPosition()`
* `Geolocation.getCurrentPosition()`
Geolocation.watchPosition()
===========================

**`Geolocation.watchPosition()`** 用于注册监听器，在设备的地理位置发生改变的时候自动被调用。也可以选择特定的错误处理函数。

该方法会返回一个 ID，如要取消监听可以通过 `Geolocation.clearWatch()` 传入该 ID 实现取消的目的。

语法
--


```js
watchPosition(success)
watchPosition(success, error)
watchPosition(success, error, options)
```

### 参数

*success*

成功时候的回调函数，同时传入一个 `Position` 对象当作参数。

*error* 可选

失败时候的回调函数，可选，会传入一个 `PositionError` 对象当作参数。

*options* 可选

一个可选的 `PositionOptions` 对象。

示例
--


```js
var id, target, options;

function success(pos) {
  var crd = pos.coords;

  if (target.latitude === crd.latitude && target.longitude === crd.longitude) {
    console.log("Congratulations, you reached the target");
    navigator.geolocation.clearWatch(id);
  }
}

function error(err) {
  console.warn("ERROR(" + err.code + "): " + err.message);
}

target = {
  latitude: 0,
  longitude: 0,
};

options = {
  enableHighAccuracy: false,
  timeout: 5000,
  maximumAge: 0,
};

id = navigator.geolocation.watchPosition(success, error, options);
```

规范
--

| Specification |
| --- |
| Geolocation API # watchposition-method |

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

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

参见
--

* 使用地理位置定位
* 该方法属于 `Geolocation`，可以通过 `NavigatorGeolocation.geolocation` 访问。
* 取消监听的方法： `Geolocation.clearWatch()`
* 另一个类似的方法： `Geolocation.getCurrentPosition()`
Geolocation.getCurrentPosition()
================================

**`Geolocation.getCurrentPosition()`** 方法用来获取设备当前位置。

语法
--
```

navigator.geolocation.getCurrentPosition(success, error, options)
```

### 参数

*success*

成功得到位置信息时的回调函数，使用`Position` 对象作为唯一的参数。

*error* 可选

获取位置信息失败时的回调函数，使用 `PositionError` 对象作为唯一的参数，这是一个可选项。

*options* 可选

一个可选的`PositionOptions` 对象。

实例
--


```js
var options = {
  enableHighAccuracy: true,
  timeout: 5000,
  maximumAge: 0,
};

function success(pos) {
  var crd = pos.coords;

  console.log("Your current position is:");
  console.log("Latitude : " + crd.latitude);
  console.log("Longitude: " + crd.longitude);
  console.log("More or less " + crd.accuracy + " meters.");
}

function error(err) {
  console.warn("ERROR(" + err.code + "): " + err.message);
}

navigator.geolocation.getCurrentPosition(success, error, options);
```

标准
--

| Specification |
| --- |
| Geolocation API # getcurrentposition-method |

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

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

请参考
---

* Using geolocation
* `Navigator.geolocation`
XMLHttpRequest 中的 HTML
======================

W3C `XMLHttpRequest` 规范为 `XMLHttpRequest` 添加 HTML 解析功能，此前它仅支持 XML 解析。该功能允许 Web 应用程序使用 `XMLHttpRequest` 获得已解析的 DOM 形式的 HTML 资源。

要了解如何使用 `XMLHttpRequest`，请参阅使用 XMLHttpRequest。

局限性
---

为了阻止同步使用 `XMLHttpRequest`，HTML 支持在同步模式下是不可用的。另外，只有当 `responseType` 属性被设置为 `"document"` 时，才会有 HTML 支持。这一限制避免了当遗留代码在默认模式下使用 `XMLHttpRequest` 来检索 `responseText`，对 `text/html` 资源进行无用的解析而浪费时间。同时，这个限制也避免了遗留代码的问题，这些代码假定 `responseXML` 对于 HTTP 错误页面（通常有一个 `text/html` 响应体）是 `null`。

用法
--

使用 `XMLHttpRequest` 检索作为 DOM 的 HTML 资源，就像使用 `XMLHttpRequest` 检索作为 DOM 的 XML 资源一样，只是你不能使用同步模式，你必须在调用 `open()` 之后，`send()` 之前，将字符串 `"document"` 分配给 `responseType` 对象的属性，来明确请求一个文档。


```js
const xhr = new XMLHttpRequest();
xhr.onload = () => {
  console.log(xhr.responseXML.title);
};
xhr.open("GET", "file.html");
xhr.responseType = "document";
xhr.send();
```

特性检测
----

### 方法 1

该方法依赖于功能的“强制异步”性质。当你试图设置 `XMLHttpRequest` 对象的 `responseType` 时，它以“同步”方式打开。这在实现该功能的浏览器中会出现错误，而在其他浏览器中则可以正常工作。


```js
function HTMLinXHR() {
  if (!window.XMLHttpRequest) {
    return false;
  }
  const req = new window.XMLHttpRequest();
  req.open("GET", window.location.href, false);
  try {
    req.responseType = "document";
  } catch (e) {
    return true;
  }
  return false;
}
```


在 JSFiddle 中查看

这种方法是同步的，不依赖外部资源，尽管它可能不像下面描述的方法 2 那样可靠，因为它不检查实际功能，而是检查该功能的指示。

### 方法 2

在 `XMLHttpRequest` 中准确检测一个浏览器是否支持 HTML 解析有两个挑战。首先，检测结果是以异步方式获得的，因为只有在异步模式下才有 HTML 支持。其次，你必须通过 HTTP 实际获取一个测试文档，因为用 `data:` URL 进行测试，最终会同时测试 `data:` URL 支持。

因此，为了检测 HTML 支持，服务器上需要一个测试 HTML 文件。这个测试文件很小，其 XML 格式不是很完整：


```js
<title>&amp;&<</title>
```


如果文件名为 `detect.html`，以下功能可用于检测 HTML 解析支持：


```js
function detectHtmlInXhr(callback) {
  if (!window.XMLHttpRequest) {
    setTimeout(function () {
      callback(false);
    }, 0);

    return;
  }
  let done = false;
  const xhr = new window.XMLHttpRequest();
  xhr.onreadystatechange = () => {
    if (xhr.readyState === 4 && !done) {
      done = true;
      callback(
        !!(
          xhr.responseXML &&
          xhr.responseXML.title &&
          xhr.responseXML.title === "&&<"
        ),
      );
    }
  };
  xhr.onabort = xhr.onerror = () => {
    if (!done) {
      done = true;
      callback(false);
    }
  };
  try {
    xhr.open("GET", "detect.html");
    xhr.responseType = "document";
    xhr.send();
  } catch (e) {
    setTimeout(function () {
      if (!done) {
        done = true;
        callback(false);
      }
    }, 0);
  }
}
```


参数 `callback` 是一个函数，如果 HTML 解析是支持的，则将以 `true` 作为唯一参数被异步调用，如果不支持 HTML 解析，则为 `false`。

在 JSFiddle 中查看

字符编码
----

如果在 HTTP `Content-Type` 标头中声明了字符编码，则使用该字符编码。否则，如果存在字节顺序标记，则使用由字节顺序标记指示的编码。否则，如果存在 `<meta>` 元素声明文件的前 1024 个字节中的编码，则使用该编码。否则，文件被解码为 UTF-8。

规范
--

| Specification |
| --- |
| XMLHttpRequest Standard # interface-xmlhttprequest |

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

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

参见
--

* `XMLHttpRequest`
* 使用 XMLHttpRequest
AudioContext.listener
=====================

`AudioContext` 接口的 `listener` 属性返回一个 `AudioListener` 对象，可以用来实现 3D 音频空间化。

值
-

`AudioListener` 对象。

示例
--

**备注：** 如果需要完整的音频空间化例子，可以查看 panner-node 演示。


```js
const audioCtx = new AudioContext();
// 旧式的 webkit/blink 浏览器需要一个前缀

// …

const myListener = audioCtx.listener;
```

规范
--

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

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

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

参见
--

* 使用 Web 音频 API (en-US)
AudioContext.currentTime
========================

`currentTime` 是 `AudioContext` 的一个只读属性，返回表示只增不减的硬件时间戳的双精度浮点数，可以用来控制音频回放，实现可视化时间轴等等。该值从 0 开始。

值
-

一个双精度浮点数。

示例
--


```js
const audioCtx = new AudioContext();
// 旧式的 webkit/blink 浏览器需要一个前缀

// …

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

降低时间精度
------

为了防止时间攻击和指纹识别，`audioCtx.currentTime` 的精度可能会根据浏览器的设置而被四舍五入。在 Firefox 中，`privacy.reduceTimerPrecision` 参数默认是启用的，在 Firefox 59 中默认为 20us；在 Firefox 60 中则为 2ms。


```js
// Firefox 60 中时间精度降低到了 2ms
audioCtx.currentTime;
// 23.404
// 24.192
// 25.514
// …

// 启用 `privacy.resistFingerprinting` 标志以降低时间精度
audioCtx.currentTime;
// 49.8
// 50.6
// 51.7
// …
```


在 Firefox 中，也可以启用 `privacy.resistFingerprinting` 标志，精度值将达到 100ms 或 `privacy.resistFingerprinting.reduceTimerPrecision.microseconds` 标志的值，会更大。

规范
--

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

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

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

参见
--

* 使用 Web 音频 API (en-US)
AudioContext.createWaveShaper()
===============================

`AudioContext` 接口的 createWaveShaper() 方法创建了 表示非线性失真的`WaveShaperNode`。该节点通常被用来给音频添加失真效果

语法
--


```js
var audioCtx = new AudioContext();
var distortion = audioCtx.createWaveShaper();
```

### 返回

A `WaveShaperNode`.

示例
--

下面的例子展示了 AudioContext 创建一个波形整形器节点的基本用法。有关应用示例/信息，请查看我们的 voice-change-O-matic demo 演示（有关代码，请参阅app.js）。

**备注：** 实现失真曲线并不是简单的事情，你可能需要到处找资料来找到这样的算法。我们在Stack Overflow上找到了以下的失真曲线代码


```js
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var distortion = audioCtx.createWaveShaper();

  ...

function makeDistortionCurve(amount) {
  var k = typeof amount === 'number' ? amount : 50,
    n_samples = 44100,
    curve = new Float32Array(n_samples),
    deg = Math.PI / 180,
    i = 0,
    x;
  for ( ; i < n_samples; ++i ) {
    x = i \* 2 / n_samples - 1;
    curve[i] = ( 3 + k ) \* x \* 20 \* deg / ( Math.PI + k \* Math.abs(x) );
  }
  return curve;
};

  ...

distortion.curve = makeDistortionCurve(400);
distortion.oversample = '4x';
```

规范
--

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

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

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

参见
--

* 使用 Web Audio API (en-US)
AudioContext.sampleRate
=======================

`AudioContext` 的 `sampleRate` 属性返回一个表示采样率（每秒采样数）的浮点数，同一个音频上下文中的所有节点采样率相同，所以不支持采样率转换。

值
-

一个浮点数。

示例
--

**备注：** 如果需要完整的 Web Audio 实现示例，可以查看 MDN Github repo 上的 Web 音频演示。不妨试试在浏览器控制台输入 `audioCtx.sampleRate`。


```js
const audioCtx = new AudioContext();
// 旧式的 webkit/blink 浏览器需要一个前缀

// …

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

规范
--

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

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

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

参见
--

* 使用 Web 音频 API (en-US)
BaseAudioContext：createAnalyser() 方法
====================================

`BaseAudioContext` (en-US) 接口的 `createAnalyser()` 方法创建一个`AnalyserNode`，它可以用来暴露音频时间和频率数据，以及创建数据可视化。

**备注：** `AnalyserNode()` 构造函数是创建 `AnalyserNode` 的推荐方法；请查看创建 AudioNode。

**备注：** 有关使用此节点的更多信息，请查看 `AnalyserNode` 页面。

语法
--


```js
createAnalyser()
```

### 参数

无。

### 返回值

一个 `AnalyserNode` 对象。

示例
--

下面的示例展示了 AudioContext 创建分析器节点的基本用法，然后用 requestAnimationFrame() 来反复获取时域数据，并绘制出当前音频输入的“示波器风格”输出。更多完整示例/信息请查看 Voice-change-O-matic 实例（参阅 app.js 的 108-193 行代码）。


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

// …

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

// 绘制当前音频源的波形图

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

  analyser.getByteTimeDomainData(dataArray);

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

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

  canvasCtx.beginPath();

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

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

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

    x += sliceWidth;
  }

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

draw();
```

规范
--

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

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

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

参见
--

* 使用 Web Audio API
AudioContext.createBufferSource()
=================================

`createBufferSource()` 方法用于创建一个新的`AudioBufferSourceNode`接口，该接口可以通过`AudioBuffer` 对象来播放音频数据。`AudioBuffer`对象可以通过`AudioContext.createBuffer` 来创建或者通过 `AudioContext.decodeAudioData`成功解码音轨后获取。

语法
--


```js
var audioCtx = new AudioContext();
var source = audioCtx.createBufferSource();
```

返回
--

一个`AudioBufferSourceNode`对象。

例子
--

在这个例子中，我们将会创建一个 2 秒的缓冲器，并用白噪音填充它，然后通过`AudioBufferSourceNode`来播放它。

**备注：** You can also run the code live, or view the source.


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

pre.innerHTML = myScript.innerHTML;

// 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(2, 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 ArrayBuffer 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 # dom-baseaudiocontext-createbuffersource |

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

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

参见
--

* Using the Web Audio API (en-US)
BaseAudioContext.createOscillator()
===================================

`BaseAudioContext` (en-US) 接口的 createOscillator() 方法创建一个 `OscillatorNode`，它是一个表示周期性波形的源。它基本上产生一个不变的音调。

Syntax
------
```

var oscillatorNode = audioCtx.createOscillator();
```

### Returns

An `OscillatorNode`.

Example
-------

以下示例显示了用于创建振荡器节点的 AudioContext 的基本用法。有关应用示例/信息，请查看我们的Violent Theremin demo（有关相关代码，请参阅see app.js）; 另请参阅我们的 OscillatorNode 页面以获取更多信息。


```js
// create web audio api context
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();

// create Oscillator node
var oscillator = audioCtx.createOscillator();

oscillator.type = "square";
oscillator.frequency.setValueAtTime(3000, audioCtx.currentTime); // value in hertz
oscillator.connect(audioCtx.destination);
oscillator.start();
```

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

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

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

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

See also
--------

* Using the Web Audio API (en-US)
AudioContext.createBiquadFilter()
=================================

`AudioContext` 的`createBiquadFilter()` 方法创建了一个 `BiquadFilterNode`, 它提供了一个可以指定多个不同的一般滤波器类型的双二阶滤波器。

语法
--


```js
var audioCtx = new AudioContext();
var biquadFilter = audioCtx.createBiquadFilter();
```

### 返回

一个 `BiquadFilterNode`.

示例
--

这个例子展示了一个利用 AudioContext 创建四项滤波器节点（Biquad filter node）的例子。想要查看完整工作的示例，请查看我们的 For voice-change-o-matic 样例（也可以查看 源码 ）.


```js
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();

//set up the different audio nodes we will use for the app
var analyser = audioCtx.createAnalyser();
var distortion = audioCtx.createWaveShaper();
var gainNode = audioCtx.createGain();
var biquadFilter = audioCtx.createBiquadFilter();
var convolver = audioCtx.createConvolver();

// connect the nodes together

source = audioCtx.createMediaStreamSource(stream);
source.connect(analyser);
analyser.connect(distortion);
distortion.connect(biquadFilter);
biquadFilter.connect(convolver);
convolver.connect(gainNode);
gainNode.connect(audioCtx.destination);

// Manipulate the Biquad filter

biquadFilter.type = "lowshelf";
biquadFilter.frequency.value = 1000;
biquadFilter.gain.value = 25;
```

规格
--

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

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

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

相关
--

* Using the Web Audio API (en-US)