recursal/MDN huggingface dataset:
AnalyserNode.getFloatFrequencyData()
====================================

**`getFloatFrequencyData()`** 作为`AnalyserNode` 接口的方法能将当前分析节点（AnalyserNode）的频率数据拷贝进一个 `Float32Array` (en-US) 数组对象。

此数组表示的频率范围为 0 ~ 22050 Hz，每个元素表示对应频率上的信号分量强度，单位为分贝。

如果你需要更好的性能并且不太在意数据的精度，你可以使用 `AnalyserNode.getByteFrequencyData()` 作为代替，这一接口使用 `Uint8Array` (en-US)来存储数据（对应的也是这个精度的格式）.

语法
--
```

void analyser.getFloatFrequencyData(array);
```

### 参数

`array`

 你即将用于拷贝频域数据（frequency domain data）的 `Float32Array` (en-US) 数组。对于任何无声的样本，它的值应该是 `-Infinity`.
 如果这一数组的可容纳元素数少于该分析节点的`AnalyserNode.frequencyBinCount`值，超出容量的数据元素将被舍弃。而如果容量多于需要，多余的数组元素将不会被操作。


### 返回值

无返回值。

示例
--


```js
const audioCtx = new AudioContext();
const analyser = audioCtx.createAnalyser();
// Float32Array 的长度应该和 frequencyBinCount 相同
const myDataArray = new Float32Array(analyser.frequencyBinCount);
// 用 getFloatFrequencyData() 方法的返回数据填充 Float32Array 数组
analyser.getFloatFrequencyData(myDataArray);
```

### 例：绘制一个频谱

下面的示例展示了一个 `AudioContext`对象连接 `MediaElementAudioSourceNode`到`AnalyserNode 对象的基本用法（即用 AudioContext 将音频内容连接到分析节点，从而可以展开对音频数据的分析）`. 当音频播放时，我们使用 `requestAnimationFrame()`方法产生轮询从而不断地收集频率数据，进而在 `<canvas>` 元素上绘制 winamp（windows 上的一款 MP3 播放软件）条形图风格的频谱。

更多的应用示例和应用信息，可以参看我们 Voice-change-O-matic-float-data 示例 (在 source code 同样有).


```html
<!doctype html>
<body>
  <script>
 const audioCtx = new AudioContext();

 //创建一个音频源
 //在示例中我们使用了一个音频文件，但其实这里也可以用麦克风输入
 const audioEle = new Audio();
 audioEle.src = "my-audio.mp3"; //这里是文件名
 audioEle.autoplay = true;
 audioEle.preload = "auto";
 const audioSourceNode = audioCtx.createMediaElementSource(audioEle);

 //生成一个分析节点 (analyser node)
 const analyserNode = audioCtx.createAnalyser();
 analyserNode.fftSize = 256;
 const bufferLength = analyserNode.frequencyBinCount;
 const dataArray = new Float32Array(bufferLength);

 //设置音频节点网络（音频源->分析节点->输出）
 audioSourceNode.connect(analyserNode);
 analyserNode.connect(audioCtx.destination);

 //生成 2D canvas
 const canvas = document.createElement("canvas");
 canvas.style.position = "absolute";
 canvas.style.top = 0;
 canvas.style.left = 0;
 canvas.width = window.innerWidth;
 canvas.height = window.innerHeight;
 document.body.appendChild(canvas);
 const canvasCtx = canvas.getContext("2d");
 canvasCtx.clearRect(0, 0, canvas.width, canvas.height);

 function draw() {
 //准备好下次重绘
 requestAnimationFrame(draw);

 //获取实时的频谱信息
 analyserNode.getFloatFrequencyData(dataArray);

 //画一个黑色的背景
 canvasCtx.fillStyle = "rgb(0, 0, 0)";
 canvasCtx.fillRect(0, 0, canvas.width, canvas.height);

 //绘制频谱
 const barWidth = (canvas.width / bufferLength) \* 2.5;
 let posX = 0;
 for (let i = 0; i < bufferLength; i++) {
 const barHeight = (dataArray[i] + 140) \* 2;
 canvasCtx.fillStyle =
 "rgb(" + Math.floor(barHeight + 100) + ", 50, 50)";
 canvasCtx.fillRect(
 posX,
 canvas.height - barHeight / 2,
 barWidth,
 barHeight / 2,
 );
 posX += barWidth + 1;
 }
 }

 draw();
 </script>
</body>
```

规范
--

| Specification |
| --- |
| Web Audio API # dom-analysernode-getfloatfrequencydata |

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

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

See also
--------

* Using the Web Audio API (en-US)
AnalyserNode.fftSize
====================

`AnalyserNode` 接口的 `fftSize` 属性的值是一个无符号长整型的值，表示（信号）样本的窗口大小。当执行快速傅里叶变换（Fast Fourier Transfor (FFT)）时，这些（信号）样本被用来获取频域数据。

fftSize 属性的值必须是从 32 到 32768 范围内的 2 的非零幂; 其默认值为 2048.

**备注：** 如果其值不是 2 的幂，或者它在指定范围之外，则抛出异常 INDEX\_SIZE\_ERR.

语法
--


```js
var audioCtx = new AudioContext();
var analyser = audioCtx.createAnalyser();
analyser.fftSize = 2048;
```

### 值

一个无符号长整型。

例子
--

下面的例子展示了 `AudioContext` 创建一个 `AnalyserNode`, 然后用 `requestAnimationFrame` 和 `<canvas>` 去反复收集当前音频的时域数据，并绘制为一个示波器风格的输出 (频谱).

更多的例子/信息，查看 Voice-change-O-matic 演示 (相关代码在 app.js 在 128 行~205 行).


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

  ...

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

// draw an oscilloscope of the current audio source

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();

      var sliceWidth = WIDTH \* 1.0 / bufferLength;
      var x = 0;

      for(var i = 0; i < bufferLength; i++) {

        var v = dataArray[i] / 128.0;
        var 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-analysernode-fftsize |

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

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

相关内容
----

* Using the Web Audio API (en-US)
AnalyserNode.frequencyBinCount
==============================

**`frequencyBinCount`** 的值固定为 `AnalyserNode` 接口中 fftSize 值的一半。该属性通常用于可视化的数据值的数量。

语法
--


```js
var audioCtx = new AudioContext();
var analyser = audioCtx.createAnalyser();
var bufferLength = analyser.frequencyBinCount;
```

### 值类型

无符号长整形 (unsigned long).

例子
--

下面的例子展示了 `AudioContext` 创建一个 `AnalyserNode`, 然后用 `requestAnimationFrame` 和 `<canvas>` 去反复收集频率数据，并绘制为一个柱状风格的输出 (频谱).

更多的例子/信息，查看 Voice-change-O-matic 演示 (相关代码在 app.js 的 128 行~205 行).


```js
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var analyser = audioCtx.createAnalyser();
analyser.minDecibels = -90;
analyser.maxDecibels = -10;

  ...

analyser.fftSize = 256;
var bufferLength = analyser.frequencyBinCount;
console.log(bufferLength);
var dataArray = new Uint8Array(bufferLength);

canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);

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

  analyser.getByteFrequencyData(dataArray);

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

  var barWidth = (WIDTH / bufferLength) \* 2.5;
  var barHeight;
  var x = 0;

  for(var i = 0; i < bufferLength; i++) {
    barHeight = dataArray[i];

    canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)';
    canvasCtx.fillRect(x,HEIGHT-barHeight/2,barWidth,barHeight/2);

    x += barWidth + 1;
  }
};

draw();
```

规范
--

| Specification |
| --- |
| Web Audio API # dom-analysernode-frequencybincount |

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

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

相关内容
----

* Using the Web Audio API (en-US)
AnalyserNode.getByteFrequencyData()
===================================

`AnalyserNode`接口的 **`getByteFrequencyData()`** 方法将当前频率数据复制到传入的 Uint8Array（无符号字节数组）中。

如果数组的长度小于 `AnalyserNode.frequencyBinCount`, 那么 Analyser 多出的元素会被删除。如果是大于，那么数组多余的元素会被忽略。

语法
--


```js
var audioCtx = new AudioContext();
var analyser = audioCtx.createAnalyser();
var dataArray = new Uint8Array(analyser.frequencyBinCount); // Uint8Array 的长度应该和 frequencyBinCount 相等
analyser.getByteFrequencyData(dataArray); // 调用 getByteFrequencyData 方法填充 Uint8Array
```

### 返回值

一个 `Uint8Array` (en-US)（无符号字节数组）.

例子
--

下面的例子展示了 `AudioContext` 创建一个 `AnalyserNode`, 然后用 `requestAnimationFrame` 和 `<canvas>` 去反复收集当前音频的频率数据，并绘制为一个柱状风格的输出 (频谱).

更多的例子/信息，查看 Voice-change-O-matic 演示 (相关代码在 app.js 的 128 行~205 行).


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

  ...

analyser.fftSize = 256;
var bufferLength = analyser.frequencyBinCount;
console.log(bufferLength);
var dataArray = new Uint8Array(bufferLength);

canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);

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

  analyser.getByteFrequencyData(dataArray);

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

  var barWidth = (WIDTH / bufferLength) \* 2.5;
  var barHeight;
  var x = 0;

  for(var i = 0; i < bufferLength; i++) {
    barHeight = dataArray[i];

    canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)';
    canvasCtx.fillRect(x,HEIGHT-barHeight/2,barWidth,barHeight/2);

    x += barWidth + 1;
  }
};

draw();
```

参数
--

array (数组)

必须为`Uint8Array` (en-US), 频域数据将复制到该数组内。

规范
--

| Specification |
| --- |
| Web Audio API # dom-analysernode-getbytefrequencydata |

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

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

相关内容
----

* Using the Web Audio API (en-US)
KeyboardEvent.initKeyEvent()
============================

**警告：** 不要再使用这个方法，而是使用 `KeyboardEvent()` 构造函数。

该方法已从 DOM 规范中删除，并且不受任何现代浏览器支持。Firefox 从版本 93 开始默认通过首选项（`dom.keyboardevent.init_key_event.enabled`）隐藏此方法，并计划很快移除它。

**已弃用:** 不再推荐使用该特性。虽然一些浏览器仍然支持它，但也许已从相关的 web 标准中移除，也许正准备移除或出于兼容性而保留。请尽量不要使用该特性，并更新现有的代码；参见本页面底部的兼容性表格以指导你作出决定。请注意，该特性随时可能无法正常工作。

KeyboardEvent.initKeyEvent 方法用于初始化使用`document.createEvent`("KeyboardEvent") 创建的事件的值。以这种方式初始化的事件必须使用`document.createEvent`("KeyboardEvent") 方法创建。在调度之前，必须调用 initKeyEvent 来设置事件。

Syntax
------
```

event.initKeyEvent (type, bubbles, cancelable, viewArg,
                    ctrlKeyArg, altKeyArg, shiftKeyArg, metaKeyArg,
                    keyCodeArg, charCodeArg)
```

### Parameters

* *`type`*
    + : 是表示事件类型的`DOMString`。
* *`bubbles`*
    + : 是`Boolean`指示事件是否应该通过事件链冒泡（请参阅冒泡）。
* *`cancelable`*
    + : 是`Boolean`我指出事件是否可以被取消（见可取消）。
* *`viewArg`*
    + : 指定`UIEvent.view`; 此值可能为空。
* *`ctrlKeyArg`*
    + : 如果要生成的虚拟键是包含
     `Ctrl`
     键的键的组合，则为`Boolean`
* *`altKeyArg`*
    + *: `如果要生成的虚拟键是包含`*
    `Alt`
    *`键的键的组合，则为`Boolean`。`*
* *`shiftKeyArg`*
    + : A `Boolean`如果要生成的虚拟键是包含
     `Shift`
     键的键组合，则返回 true。
* *`metaKeyArg`*
    + *: `是`Boolean`如果要生成的虚拟键是包含`*
    `Meta`
    *`键的键的组合，则为 true。`*
* *`keyCodeArg`*
    + : 是一个无符号长整型，表示被按下的键的虚拟键码值，否则为 0.请参阅`KeyboardEvent.keyCode`以获取键码列表。
* *`charCodeArg`*
    + : 是一个无符号长整型，表示与按下的键相关的 Unicode 字符，否则为 0。
Example
-------
```

var event = document.createEvent('KeyboardEvent'); // create a key event
// define the event
event.initKeyEvent("keypress",       // typeArg,
                   true,             // canBubbleArg,
                   true,             // cancelableArg,
                   null,             // viewArg,  Specifies UIEvent.view. This value may be null.
                   false,            // ctrlKeyArg,
                   false,            // altKeyArg,
                   false,            // shiftKeyArg,
                   false,            // metaKeyArg,
                    9,               // keyCodeArg,
                    0);              // charCodeArg);

document.getElementById('blah').dispatchEvent(event);
```

Specification
-------------

键盘事件的这种实现基于 DOM 2 事件早期版本中的关键事件规范，后来从该规范中删除。

initKeyEvent 是 DOM Level 3 事件的当前 Gecko 等价物（最初起草并且不推荐使用`KeyboardEvent()` `Keyboard.initKeyboardEvent()`方法与以下参数：
```

typeArg of type DOMString
canBubbleArg of type boolean
cancelableArg of type boolean
viewArg of type views::AbstractView
keyIdentifierArg of type DOMString
keyLocationArg of type unsigned long
modifiersList of type DOMString);
```
KeyboardEvent.charCode
======================

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

**已弃用:** 不再推荐使用该特性。虽然一些浏览器仍然支持它，但也许已从相关的 web 标准中移除，也许正准备移除或出于兼容性而保留。请尽量不要使用该特性，并更新现有的代码；参见本页面底部的兼容性表格以指导你作出决定。请注意，该特性随时可能无法正常工作。

`KeyboardEvent.charCode` 只读属性，返回 `keypress` 事件触发时按下的字符键的字符 Unicode 值。

与这些数值代码等价的常量，请参考 `KeyEvent`.

**备注：** **该属性已被废弃，请勿再使用该属性。**

请使用 `KeyboardEvent.key` 取代。

语法
--
```

var value = event.charCode;
```


* *`value`* 被按下的字符键的字符 Unicode 值
示例
--


```js
<html>
<head>
<title>charCode example</title>

<script type="text/javascript">

function showChar(e)
{
alert("Key Pressed: " + String.fromCharCode(e.charCode) + "\n"
      + "charCode: " + e.charCode);
}

</script>
</head>

<body onkeypress="showChar(event);">
<p>Press any 'character' type key.</p>
</body>
</html>
```

注意
--

在 `keypress` 事件中，按键的 Unicode 值保存在 `keyCode` 或 `charCode` 属性其中之一，不会二者同时都有。如果按下的是字符键 (例如 'a'), `charCode` 被设置为字符的代码值，并区分大小写。（即 `charCode` 会考虑 `Shift` 键是否被按下）。否则，被按下的键的代码被存储在 `keyCode` 中。

如果有一个或多个修饰键被按下，有一些复杂的规则来产生 `charCode` 的值，细节可参考 Gecko Keypress 事件 。

`charCode` 用于不会在 `keydown` 和 `keyup` 事件中被设置。这两种情况下，`keyCode` 会被设置。

要获取按键代码而不考虑是 `keyCode` 还是`charCode`, 请使用 `which` 属性。

通过输入法输入的字符，不会被设置到注册到通过 `keyCode` 和 `charCode`。 Actually with the Chinese IME I'm using, entering the IME results in a keypress event with keyCode = 229 and no other key events fire until the IME exits (which may happen after multiple characters are inputted). I'm not sure if other IME's work this way.

要查看特定按键的 `charCode` 值的列表，运行这个示例页面 Gecko DOM Reference:Examples #Example 7: Displaying Event Object Constants ，然后查看 HTML 表格结果。

规范
--

| Specification |
| --- |
| UI Events # dom-keyboardevent-charcode |

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

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

**`KeyboardEvent.isComposing`** 只读属性，返回一个 `Boolean` 值，表示该事件是否在 `compositionstart` 之后和 `compositionend` 之前被触发。

语法
--
```

var bool = event.isComposing;
```

示例
--


```js
var kbdEvent = new KeyboardEvent("syntheticKey", false);
console.log(kbdEvent.isComposing); // return false
```

规范
--

| Specification |
| --- |
| UI Events # dom-keyboardevent-iscomposing |

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

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

参考
--

* `compositionstart` 与 `compositionend`
* `KeyboardEvent`
键盘事件 KeyboardEvent()
====================

**`KeyboardEvent()`** 构造函数新建一个 `KeyboardEvent` 实例。

语法
--
```

 event = new KeyboardEvent(typeArg, KeyboardEventInit);
```

### 值

*typeArg*

`DOMString` 类型，表示事件名称。

*KeyboardEventInit*可选

`KeyboardEventInit` 字典，有以下几种值：

* `"key"`, 可选，默认为 `""`, `DOMString` 类型，设置 `KeyboardEvent.key` 的值。
* `"code"`, 可选，默认为 `""`, `DOMString` 类型，设置`KeyboardEvent.code` 的值。
* `"location"`, 可选，默认为 `0`, `unsigned long`类型，设置 `KeyboardEvent.location` (en-US) 的值。
* `"ctrlKey"`, 可选，默认为 `false`, `Boolean` 类型，设置 `KeyboardEvent.ctrlKey` 的值。
* `"shiftKey"`, 可选，默认为 `false`, `Boolean` 类型，设置`KeyboardEvent.shiftKey` 的值。
* `"altKey"`, 可选，默认为 `false`, `Boolean` 类型，设置 `KeyboardEvent.altKey` 的值。
* `"metaKey"`, 可选，默认为 `false`, `Boolean` 类型，设置 `KeyboardEvent.metaKey` 的值。
* `"repeat"`, 可选，默认为 `false`, `Boolean` 类型，设置 `KeyboardEvent.repeat` 的值。
* `"isComposing"`, 可选，默认为 `false`, `Boolean` 类型，设置 `KeyboardEvent.isComposing` 的值。
* `"charCode"`, 可选，默认为 `0`, `unsigned long` 类型，设置 `KeyboardEvent.charCode` (已废弃) 的值。
* `"keyCode"`, 可选，默认为 `0`, `unsigned long` 类型，设置`KeyboardEvent.keyCode` (已废弃) 的值。
* `"which"`, 可选，默认为 `0`, `unsigned long` 类型，设置`KeyboardEvent.which` (已废弃) 的值。

**备注：** `KeyboardEventInit` 字典也可以接受来自 `UIEventInit` 和 `EventInit` 的字典字段值。

规范
--

| Specification |
| --- |
| UI Events # dom-keyboardevent-keyboardevent |

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

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

参考
--

* `KeyboardEvent` 构造的相关对象的接口
KeyboardEvent.ctrlKey
=====================

**`KeyboardEvent.ctrlKey`** 只读属性返回一个 `Boolean` 值，表示事件触发时 `control` 键是 (`true`) 否 (`false`) 按下。

语法
--
```

var ctrlKeyPressed = instanceOfKeyboardEvent.ctrlKey
```

### 返回值

布尔值

示例
--


```js
<html>
<head>
<title>ctrlKey example</title>

<script type="text/javascript">

function showChar(e){
  alert(
    "Key Pressed: " + String.fromCharCode(e.charCode) + "\n"
    + "charCode: " + e.charCode + "\n"
    + "CTRL key pressed: " + e.ctrlKey + "\n"
  );
}

</script>
</head>

<body onkeypress="showChar(event);">
<p>Press any character key, with or without holding down the CTRL key.<br />
You can also use the SHIFT key together with the CTRL key.</p>
</body>
</html>
```

规范
--

| Specification |
| --- |
| UI Events # dom-keyboardevent-ctrlkey |

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

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

参考
--

* `KeyboardEvent`
KeyboardEvent.shiftKey
======================

**`KeyboardEvent.shiftKey`** 只读属性返回一个 `Boolean` 值，表示事件触发时 `shift` 键是 (`true`) 否 (`false`) 按下。

语法
--
```

var shiftKeyPressed = instanceOfKeyboardEvent.shiftKey
```

### 返回值

布尔值

示例
--


```js
<html>
<head>
<title>shiftKey example</title>

<script type="text/javascript">

function showChar(e){
  alert(
    "Key Pressed: " + String.fromCharCode(e.charCode) + "\n"
    + "charCode: " + e.charCode + "\n"
    + "SHIFT key pressed: " + e.shiftKey + "\n"
    + "ALT key pressed: " + e.altKey + "\n"
  );
}

</script>
</head>

<body onkeypress="showChar(event);">
<p>Press any character key, with or without holding down
 the SHIFT key.<br />
You can also use the SHIFT key together with the ALT key.</p>
</body>
</html>
```

规范
--

| Specification |
| --- |
| UI Events # dom-keyboardevent-shiftkey |

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

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

参考
--

* `KeyboardEvent`
KeyboardEvent.altKey
====================

**`KeyboardEvent.altKey`** 只读属性返回一个 `Boolean` 值，表示事件触发时 `alt` 键 (OS X 系统上的 `Option` 或 `⌥` 键) 是 (`true`) 否 (`false`) 被按下。

语法
--
```

var altKeyPressed = instanceOfKeyboardEvent.altKey
```

### 返回值

布尔值

示例
--


```js
<html>
<head>
<title>altKey example</title>

<script type="text/javascript">

function showChar(e){
  alert(
    "Key Pressed: " + String.fromCharCode(e.charCode) + "\n"
    + "charCode: " + e.charCode + "\n"
    + "ALT key pressed: " + e.altKey + "\n"
  );
}

</script>
</head>

<body onkeypress="showChar(event);">
<p>
Press any character key,
with or without holding down the ALT key.<br />
You can also use the SHIFT key together with the ALT key.
</p>
</body>
</html>
```

规范
--

| Specification |
| --- |
| UI Events # dom-keyboardevent-altkey |

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

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

参考
--

* `KeyboardEvent`
KeyboardEvent.repeat
====================

\*\*`KeyboardEvent.repeat`\*\*是一个只读属性，返回一个布尔值`Boolean`，如果按键被一直按住，返回值为`true`。

语法
--
```

var repeat = event.repeat;
```

规范
--

| Specification |
| --- |
| UI Events # dom-keyboardevent-repeat |

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

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

**`KeyboardEvent.metaKey`** 为只读属性，返回一个 `布尔值`，在事件发生时，用于指示 `Meta` 键是按下状态（`true`），还是释放状态（`false`）。

**备注：** 在 MAC 键盘上，表示 Command 键（`⌘`），在 Windows 键盘上，表示 Windows 键（`⊞`）。

语法
--
```

var metaKeyPressed = instanceOfKeyboardEvent.metaKey
```

### 返回值

一个布尔值

示例
--


```js
function goInput(e) {
  // 检测 metaKey 值
  if (e.metaKey) {
    // 继续处理事件
    superSizeOutput(e);
  } else {
    doOutput(e);
  }
}
```

规范
--

| Specification |
| --- |
| UI Events # dom-keyboardevent-metakey |

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

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

相关链接
----

* `KeyboardEvent`
CSSNumericValue：div() 方法
========================

`CSSNumericValue` (en-US) 接口的 **`div()`** 方法将 `CSSNumericValue` 除以提供的值。

语法
--


```js
div(number)
```

### 参数

`number`

可以是一个数字或者一个 `CSSNumericValue` (en-US)。

### 返回值

一个 `CSSMathProduct` (en-US)。

### 异常

* `TypeError`
    + ：如果传递给方法的类型无效，则抛出错误。
示例
--


```js
let mathProduct = CSS.px("24").div(CSS.percent("4"));
// 输出 "calc(24px / 4%)"
mathProduct.toString();
```

规范
--

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-cssnumericvalue-div |

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

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

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

`SpeechRecognitionResult` (en-US) 接口的 **`isFinal`** 只读属性是一个布尔值，如果值是`true`, 则表示这是最后一次返回的结果 (语音识别结束)。如果为`false`, 表示识别尚未结束，这只是一个临时的数据，有可能会在稍后更新。

语法
--
```

var myIsFinal = speechRecognitionResultInstance.isFinal;
```

### 返回值

`Boolean` (en-US)示例
--


```js
recognition.onresult = function (event) {
  // The SpeechRecognitionEvent results property returns a SpeechRecognitionResultList object
  // SpeechRecognitionResultList 对象包含 SpeechRecognitionResult 对象。
  // 它有一个 getter，所以它可以像数组一样被访问
  // 第一个 [0] 返回 SpeechRecognitionResult 的第 0 个下标。
  // Each SpeechRecognitionResult object contains SpeechRecognitionAlternative objects that contain individual results.
  // 这些也有 getter，因此可以像数组一样访问它们。
  // 第二个 [0] 返回 SpeechRecognitionAlternative 所在的第 0 个下标。
  // 然后我们返回的记录属性 SpeechRecognitionAlternative 对象
  var color = event.results[0][0].transcript;
  diagnostic.textContent = "Result received: " + color + ".";
  bg.style.backgroundColor = color;

  console.log(event.results[0].isFinal);
};
```

规范
--

| Specification |
| --- |
| Web Speech API # dom-speechrecognitionresult-isfinal |

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

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

相关链接
----

* Web Speech API
Fetch 基本概念
==========

Fetch 是一个现代的概念，等同于 XMLHttpRequest。它提供了许多与 XMLHttpRequest 相同的功能，但被设计成更具可扩展性和高效性。本文介绍了 Fetch API 的一些基本概念。

**备注：** 这篇文章可能还需要修改。如果你觉得有的概念可以解释的更好，让人们在MDN 论坛上知道，或 Mozilla IRC (#mdn room)。

简而言之
----

Fetch 的核心在于对 HTTP 接口的抽象，包括 `Request`，`Response`，`Headers`，`Body`，以及用于初始化异步请求的 `global fetch`。得益于 JavaScript 实现的这些抽象好的 HTTP 模块，其他接口能够很方便的使用这些功能。

Service Workers (en-US) 是大量使用 Fetch 的 API 的一个示例。

除此之外，Fetch 还利用到了请求的异步特性——它是基于 `Promise` 的。

Guard
-----

Guard 是 `Headers` 对象的特性，基于不同的情况，它可以有以下取值：`immutable`、`request`、`request-no-cors`、`response` 或 `none`。

当使用 `Headers()` constructor 创建一个新的 `Headers` 对象的时候，它的 guard 被设置成 `none（默认值）。当创建``Request` 或 `Response` 对象的时候，它将拥有一个按照以下规则实现的与之关联的 `Headers` 对象：

| 新对象的类型 | 创建时的构造函数 | 关联的 `Headers` 对象的 guard |
| --- | --- | --- |
| `Request` | `Request()` | `request` |
| `Request()`，`mode`
 设置成 `no-cors` | `request-no-cors` |
| `Response` | `Response()` | `response` |
| `error()` 或
 `redirect()` 方法
  | `immutable` |

头信息的 guard 会影响 `set()`、`delete()` 和 `append()` 方法。如果你试图修改 `guard` 是 `immutable` 的`Headers` 对象，那么会抛出一个 `TypeError`。以下情况则不会抛出错误：

* guard 是 `request` 并且头信息中的 *name* 不是 forbidden header name
* guard 是 `request-no-cors` 并且头信息中的 *name*/*value* 是 simple header
* guard 是 `response` 并且头信息中的 *name* 不是 forbidden response header name
跨全局的 Fetch 使用方法
===============

本文解释了在 fetch 时发生的边缘情况（以及潜在展示相同类型的资源检索行为的其他 API）。当从 `<iframe>` 发起涉及相对 URL 的跨源 Fetch 时，相对 URL 会被解析为当前的全局位置，而不是 iframe 的位置。

边缘情况
----

大多数网站几乎不会遇到这种边缘情况。如下：

* 需要一个同源的 iframe
* 该同源 iframe 需要具有不同根 URL 位置
* 必须使用跨全局的 fetch 函数，例如 `frame.contentWindow.fetch()`
* 传递给 fetch 函数的是相对 URL
遇到的问题
-----

以前，我们会根据当前的全局对象来解析相对的 URL，比如说：


```js
let absolute = new URL(relative, window.location.href);
```


这样做不是什么大问题，只是表现出这种行为的不同 API 与规范中定义的行为的不一致可能导致问题的进一步发展。

解决方案
----

在 Firefox 60 及以后版本中，Mozilla 对相对 URL 的解析是相对于拥有 `fetch()` 函数的全局的（见 Firefox bug 1432272）。因此在上述情形中，URL 是相对于 iframe 的地址进行解析的：


```js
let absolute = new URL(relative, frame.contentWindow.location.href);
```


对于如何使得新规范与此行为变化保持一致，以缓解未来可能出现的问题，有很多讨论正在进行中。
StorageManager.persisted()
==========================

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

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

\*\*`persisted()`\*\*方法是`StorageManager`的一个接口，如果盒存储模式（**box mode**）的值为“**persistent**”则返回一个 resolved 状态值为`true`的`Promise`。

语法
--
```

navigator.storage.persisted().then(function(persistent) { ... })
```

### 参数

无

### 返回值

一个状态为 resolved，值为`Boolean`类型的`Promise`。

示例
--


```js
if (navigator.storage && navigator.storage.persist)
  navigator.storage.persisted().then(function (persistent) {
    if (persistent)
      console.log("Storage will not be cleared except by explicit user action");
    else
      console.log("Storage may be cleared by the UA under storage pressure.");
  });
```

规范
--

| Specification |
| --- |
| Storage Standard # dom-storagemanager-persisted |

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

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