recursal/MDN huggingface dataset:
Boilerplate 1
=============

* « 上一页
* 下一页 »

这个例子描述了从现在开始将要隐藏重复的代码片断，以及定义一个 JavaScript 函数复用以简化 WebGL 初始化。

用于设置 WebGL 呈现上下文的复用代码
---------------------

现在你很习惯看到相同的HTML, CSS和JavaScript重复一遍又一遍。所以我们从现在起要隐藏他们。这将使我们能够专注于代码最有趣的部分相关学习WebGL。

特别是，在 HTML 的`<p>`元素包含一些描述性的文本页面也可以是错误消息；一个`<canvas>` 元素;和一个可选的`<button>`。CSS 规则包含`body`, `canvas`, 和`button`。任何额外的冗余的 CSS 和 HTML 将不会显示在页面的具体的例子。

在以下示例中，我们将使用一个 JavaScript 函数功能，`getRenderingContext()` ，来初始化WebGL rendering context。现在，你应该能够了解什么功能。基本上，它得到了 WebGL 从画布元素，渲染上下文初始化绘图缓冲区，清除它黑色，并返回初始化上下文。在错误的情况下，它会显示一个错误消息，并返回 `null`。

最后，所有 JavaScript 代码将运行在一个直接的函数，这是一种常见的 JavaScript 技术 (see Function)。函数声明和调用也将被隐藏。

### HTML


```html
<p>[ Some descriptive text about the example. ]</p>
<button>[ Optional button element. ]</button>
<canvas>Your browser does not seem to support HTML5 canvas.</canvas>
```

### CSS


```css
body {
  text-align: center;
}
canvas {
  display: block;
  width: 280px;
  height: 210px;
  margin: auto;
  padding: 0;
  border: none;
  background-color: black;
}
button {
  display: block;
  font-size: inherit;
  margin: auto;
  padding: 0.6em;
}
```

### JavaScript


```js
function getRenderingContext() {
  var canvas = document.querySelector("canvas");
  canvas.width = canvas.clientWidth;
  canvas.height = canvas.clientHeight;
  var gl =
    canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
  if (!gl) {
    var paragraph = document.querySelector("p");
    paragraph.innerHTML =
      "Failed to get WebGL context." +
      "Your browser or device may not support WebGL.";
    return null;
  }
  gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  gl.clear(gl.COLOR\_BUFFER\_BIT);
  return gl;
}
```


The source code of this example is also available on GitHub.

* « 上一页
* 下一页 »
Canvas size and WebGL
=====================

* « 上一页 (en-US)
* 下一页 »

此 WebGL 案例将探究设置（或不设置）Canvas 属性的宽高值在浏览器中显示的影响。

canvas 属性值大小对 WebGL 渲染的作用
-------------------------

使用 `scissor()` 和 `clear()` 我们可以观察到 canvas 属性大小是如何影响 WebGL 绘图展示的。

第一个 canvas 元素通过 css 样式定义了元素的大小，之后通过 javascript 获取该元素的 `clientWidth` 和`clientHeight` 值，并分别赋值给元素的 `width` 和`height`。

相反的，第二个 canvas 元素并没有这样做，canvas 内部对象的`width` 和 `height` 属性值仍然是默认值，这样导致在浏览器中实际画布大小是不同的。

使用 `scissor()` 和`clear()`在 canvas 中绘制矩形的效果是清晰可见的，在第一个 canvas 中，通过指定位置和像素大小，可以得到我们想要的效果，但是在第二个 canvas 中，这个矩形的位置、大小都是错误展示的。


```html
<p>Compare the two canvases.</p>
<canvas>Your browser does not seem to support HTML5 canvas.</canvas>
<canvas>Your browser does not seem to support HTML5 canvas.</canvas>
```



```css
body {
  text-align: center;
}
canvas {
  display: inline-block;
  width: 120px;
  height: 80px;
  margin: auto;
  padding: 0;
  border: none;
  background-color: black;
}
```



```js
window.addEventListener(
  "load",
  function () {
    "use strict";
    var firstCanvas = document.getElementsByTagName("canvas")[0],
      secondCanvas = document.getElementsByTagName("canvas")[1];
    firstCanvas.width = firstCanvas.clientWidth;
    firstCanvas.height = firstCanvas.clientHeight;
    [firstCanvas, secondCanvas].forEach(function (canvas) {
      var gl =
        canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
      if (!gl) {
        document.querySelector("p").innerHTML =
          "Failed to get WebGL context. " +
          "Your browser or device may not support WebGL.";
        return;
      }
      gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
      gl.enable(gl.SCISSOR\_TEST);
      gl.scissor(30, 10, 60, 60);
      gl.clearColor(1.0, 1.0, 0.0, 1.0);
      gl.clear(gl.COLOR\_BUFFER\_BIT);
    });
  },
  false,
);
```


The source code of this example is also available on GitHub.

* « 上一页 (en-US)
* 下一页 »
Simple color animation
======================

* « 上一页
* 下一页 » (en-US)

这是一个非常基础的WebGL色彩动画案例，通过定时器来逐秒填充不同的颜色来实现。

### 通过填充实现色彩动画

本案例使用WebGL来实现简单的色彩动画和用户交互效果，用户可以通过按按钮来开始/暂停/重新开始动画。

我们把 WebGL函数放在一个定时循环器里 (`setInterval`)。通过监听点击事件来让用户开始/暂停动画。并通过定时器来循环执行绘制指令 (通常是逐帧动画，这次我们设置为逐秒动画)


```html
<p>一个色彩动画的简单 WebGl 程序</p>
<p>点击下面的按钮来开/关动画</p>
<canvas id="canvas-view">你的浏览器不支持 Html5 canvas</canvas>
<button id="animation-onoff">
  点我来
  <strong>[verb goes here]</strong>
  动画
</button>
```



```css
body {
  text-align: center;
}
canvas {
  display: block;
  width: 280px;
  height: 210px;
  margin: auto;
  padding: 0;
  border: none;
  background-color: black;
}
button {
  display: inline-block;
  font-size: inherit;
  margin: auto;
  padding: 0.6em;
}
```



```js
window.addEventListener(
  "load",
  function setupAnimation(evt) {
    "use strict";
    window.removeEventListener(evt.type, setupAnimation, false);

    // 定义一个变量来保存定时器，以播放动画
    var timer;

    // 点击事件处理器
    var button = document.querySelector("#animation-onoff");
    var verb = document.querySelector("strong");
    function startAnimation(evt) {
      button.removeEventListener(evt.type, startAnimation, false);
      button.addEventListener("click", stopAnimation, false);
      verb.innerHTML = "暂停";
      //设置一个循环来逐秒渲染动画
      timer = setInterval(drawAnimation, 1000);
      // 在用户点击完以后立即执行一次动画
      drawAnimation();
    }
    function stopAnimation(evt) {
      button.removeEventListener(evt.type, stopAnimation, false);
      button.addEventListener("click", startAnimation, false);
      verb.innerHTML = "开始";
      // 通过清除定时器来停止动画
      clearInterval(timer);
    }
    // 调用 stopAnimation() 来初始化按钮的事件处理器
    stopAnimation({ type: "click" });

    var gl;
    function drawAnimation() {
      if (!gl) {
        var canvas = document.getElementById("canvas-view");
        gl =
          canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
        if (!gl) {
          clearInterval(timer);
          alert(
            "Failed to get WebGL context.\n" +
              "Your browser or device may not support WebGL.",
          );
          return;
        }
        gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
      }

      // 使用辅助函数 得到随机颜色
      var color = getRandomColor();
      // 将随机颜色设置到 WebGL 渲染上下文的填充颜色上去
      gl.clearColor(color[0], color[1], color[2], 1.0);
      // 使用新设置的颜色来清除上下文
      gl.clear(gl.COLOR\_BUFFER\_BIT);
    }

    //获取随机颜色的辅助函数
    function getRandomColor() {
      return [Math.random(), Math.random(), Math.random()];
    }
  },
  false,
);
```


在 GitHub.上查看源码

* « 上一页
* 下一页 » (en-US)
用 WebGL 让目标动起来
==============

* « 上一页
* 下一页 »

在此示例中，我们实际上将旋转正方形平面。

使正方形旋转
------

让我们开始旋转正方形。我们需要的第一件事是创建一个变量，用于跟踪正方形的当前旋转：


```js
var squareRotation = 0.0;
```


现在我们需要更新`drawScene()`函数以在绘制正方形时将当前旋转应用于正方形。转换为正方形的初始绘图位置后，我们像这样应用旋转：


```js
mat4.rotate(
  modelViewMatrix, // destination matrix
  modelViewMatrix, // matrix to rotate
  squareRotation, // amount to rotate in radians
  [0, 0, 1],
); // axis to rotate around
```


这会将 modelViewMatrix 的当前值`squareRotation`绕 Z 轴旋转。

要进行动画制作，我们需要添加`squareRotation`随时间更改值的代码。为此，我们可以创建一个新变量来跟踪上次动画播放的时间（我们称之为`then`），然后将以下代码添加到主函数的末尾


```js
var then = 0;

// Draw the scene repeatedly
function render(now) {
  now \*= 0.001; // convert to seconds
  const deltaTime = now - then;
  then = now;

  drawScene(gl, programInfo, buffers, deltaTime);

  requestAnimationFrame(render);
}
requestAnimationFrame(render);
```


该代码用于 `requestAnimationFrame` 要求浏览器在每一帧上调用函数“`render`”。`requestAnimationFrame` 自页面加载以来经过的时间（以毫秒为单位）。我们将其转换为秒，然后从中减去，以计算 `deltaTime` 自渲染最后一帧以来的秒数。在 drawscene 的结尾，我们添加了要更新的代码 `squareRotation`。


```js
squareRotation += deltaTime;
```


该代码使用自上次我们更新值以来所经过的时间`squareRotation`来确定旋转正方形的距离。

查看完整代码 | 在新页面中打开示例

* « 上一页
* 下一页 »
初识 WebGL
========

* 下一页 »

WebGL 使得在支持 HTML 的 `canvas` 标签的浏览器中，不需要安装任何插件，便可以使用基于 OpenGL ES 2.0 的 API 在 canvas 中进行 2D 和 3D 渲染。WebGL 程序包括用 JavaScript 写的控制代码，以及在图形处理单元（GPU, Graphics Processing Unit）中执行的着色代码（GLSL，注：GLSL 为 OpenGL 着色语言）。WebGL 元素可以和其他 HTML 元素混合使用，并且可以和网页其他部分或者网页背景结合起来。

本文将向你介绍 WebGL 的基本用法。此处假定你对三维图形方面的数学知识已经有一定的理解，本文也不会试图向你教授 3D 图像概念本身。

本文的代码也可以在这里下载 GitHub 上的 webgl-examples 文件夹。

THREE.js和BABYLON.js等很多框架封装了 WebGL，提供了各个平台之间的兼容性。使用这些框架而非原生的 WebGL 可以更容易地开发 3D 应用和游戏。

准备 3D 渲染
--------

为了使用 WebGL 进行 3D 渲染，你首先需要一个 canvas 元素。下面的 HTML 片段用来建立一个 canvas 元素并设置一个 onload 事件处理程序来初始化我们的 WebGL 上下文。


```html
<body onload="main()">
  <canvas id="glcanvas" width="640" height="480">
    你的浏览器似乎不支持或者禁用了 HTML5 <code>&lt;canvas&gt;</code> 元素。
  </canvas>
</body>
```

### 准备 WebGL 上下文

我们的 JavaScript 代码中的 `main()` 函数将会在文档加载完成之后被调用。它的任务是设置 WebGL 上下文并开始渲染内容。


```js
// 从这里开始
function main() {
  const canvas = document.querySelector("#glcanvas");
  // 初始化 WebGL 上下文
  const gl = canvas.getContext("webgl");

  // 确认 WebGL 支持性
  if (!gl) {
    alert("无法初始化 WebGL，你的浏览器、操作系统或硬件等可能不支持 WebGL。");
    return;
  }

  // 使用完全不透明的黑色清除所有图像
  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  // 用上面指定的颜色清除缓冲区
  gl.clear(gl.COLOR\_BUFFER\_BIT);
}
```


我们所要做的第一件事就是是获取 canvas 的引用，把它保存在‘canvas’变量里。

当我们获取到 canvas 之后，我们会调用getContext 函数并向它传递 `"webgl"` 参数，来尝试获取WebGLRenderingContext。如果浏览器不支持 webgl, `getContext` 将会返回 `null`，我们就可以显示一条消息给用户然后退出。

如果 WebGL 上下文成功初始化，变量‘gl’会用来引用该上下文。在这个例子里，我们用黑色清除上下文内已有的元素。（用背景颜色重绘 canvas）。

查看完整的源码 | 在新标签页中查看演示

参见
--

* WebGL 介绍: 由 Luz Caballero 所著，发布在 dev.opera.com。这篇文章说明 WebGL 是什么，解释了 WebGL 是如何工作的 (介绍了渲染管线的概念)，并且介绍了一些 WebGL 库。
* WebGL 基础
* 现代 OpenGL 介绍： 由 Joe Groff 写的一系列关于 OpenGL 的不错的文章，提供了一个清晰的介绍，从 OpenGL 的历史到图形管线概念，也包括一些说明 OpenGL 如何工作的例子，如果你对 OpenGL 没有任何概念的话，这是不错的出发点。
* 下一页 »
CompressionStream()
===================

**`CompressionStream()`** 构造函数创建一个新的 `CompressionStream` 对象，该对象用于压缩数据流。

语法
--


```js
new CompressionStream(format)
```

### 参数

`format`

以下允许的压缩格式之一：

* `"gzip"`
* `"deflate"`
* `"deflate-raw"`

异常
--

`TypeError`

如果传递给构造函数的格式是不支持的则抛出。

示例
--

在此示例中，使用 gzip 压缩流。


```js
const compressedReadableStream = inputReadableStream.pipeThrough(
  new CompressionStream("gzip"),
);
```

规范
--

| Specification |
| --- |
| Compression Streams # dom-compressionstream-compressionstream |

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

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

`CompressionStream` 接口的 **`readable`** 只读属性返回 `ReadableStream`。

值
-

一个 `ReadableStream`。

示例
--

以下示例从 `CompressionStream` 返回 `ReadableStream`。


```js
let stream = new CompressionStream("gzip");
console.log(stream.readable); //一个 ReadableStream
```

规范
--

| Specification |
| --- |
| Streams Standard # dom-generictransformstream-readable |

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

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

`CompressionStream` 接口的 **`writable`** 属性返回 `WritableStream`。

值
-

一个 `WritableStream`。

示例
--

以下示例从 `CompressionStream` 返回 `WritableStream`。


```js
let stream = new CompressionStream("gzip");
console.log(stream.writeable); //一个 WritableStream
```

规范
--

| Specification |
| --- |
| Streams Standard # dom-generictransformstream-writable |

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

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

`AudioBuffer` 接口的 getChannelData() 方法返回一`Float32Array` (en-US) ，其中包含与通道关联的 PCM 数据，通道参数定义 (0 表示第一个通道)。

语法
--


```js
var myArrayBuffer = audioCtx.createBuffer(2, frameCount, audioCtx.sampleRate);
var nowBuffering = myArrayBuffer.getChannelData(channel);
```

### 参数

channel

channel 属性是要获取特定通道数据的索引。0 代表第一个通道。如果索引值大于或等于`AudioBuffer.numberOfChannels`, 会抛出一个索引大小异常（`INDEX_SIZE_ERR` ）的错误。

### 返回值

`Float32Array` (en-US).

例子
--

在下例中，我们创建一个 2 秒钟的缓冲区，用白噪声填充它，然后通过`AudioBufferSourceNode`来播放它。评论应该会清楚的解释发生的事情。你也可以实时运行代码，或者查看源代码。


```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
-------------

| Specification |
| --- |
| Web Audio API # dom-audiobuffer-getchanneldata |

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

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

See also
--------

* Using the Web Audio API
AudioBuffer()
=============

Web Audio API 的 **`AudioBuffer`** 构造函数将创建一个新的 `AudioBuffer` 对象。

语法
--
```

var audioBuffer = new AudioBuffer([options]);
var audioBuffer = new AudioBuffer(context[, options]);
```

### 参数

*继承参数自 `AudioNodeOptions` 字典*.

*context* 
已弃用

一个 `AudioContext` 对象。(这个参数已经被标准移除，详细信息请参阅浏览器兼容性部分.)

*options* 可选

Options are as follows:

* `length`: buffer 中采样帧的长度。
* `numberOfChannels`: buffer 的通道数。默认值为 1.
* `sampleRate`: buffer 的采样率 (Hz). 默认值为构造此对象时使用的 `context` 的采样率。

### 返回值

一个新的 `AudioBuffer` 对象实例。

规范
--

| Specification |
| --- |
| Web Audio API # dom-audiobuffer-audiobuffer |

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

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

`AudioBuffer`接口的`numberOfChannels`属性返回一个整数，该整数表示由缓冲区中存储的 PCM 数据描述的离散音频通道的数量

语法
--


```js
var myArrayBuffer = audioCtx.createBuffer(2, frameCount, audioCtx.sampleRate);
myArrayBuffer.numberOfChannels;
```

### 返回值

一个整数。

示例
--


```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(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;
    }
  }

  console.log(myArrayBuffer.numberOfChannels);
};
```

规范
--

| Specification |
| --- |
| Web Audio API # dom-audiobuffer-numberofchannels |

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

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

参见
--

* Using the Web Audio API
AudioBuffer.length
==================

The `length` property of the `AudioBuffer` interface returns an integer representing the length, in sample-frames, of the PCM data stored in the buffer.

`AudioBuffer` 的 length 属性接口返回整数，该整数代表采样帧中，存贮在缓冲区中的 PCM 数据的长度

语法
--


```js
var myArrayBuffer = audioCtx.createBuffer(2, frameCount, audioCtx.sampleRate);
myArrayBuffer.length;
```

### 值

浮点数

例子
--


```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(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;
    }
  }

  console.log(myArrayBuffer.length);
};
```

规范
--

| Specification |
| --- |
| Web Audio API # dom-audiobuffer-length |

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

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

See also
--------

* Using the Web Audio API
AudioBuffer.sampleRate
======================

`AudioBuffer` 接口的 `sampleRate` 属性返回一个以浮点数表示的采样率。该采样率是存储在缓冲区的 PCM 数据每秒钟的采样。

语法
--


```js
var myArrayBuffer = audioCtx.createBuffer(2, frameCount, audioCtx.sampleRate);
myArrayBuffer.sampleRate;
```

### 返回值

一个浮点数，表示缓冲区数据的当前采样率。

示例
--


```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(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;
    }
  }

  console.log(myArrayBuffer.sampleRate);
};
```

规范
--

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

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

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

参见
--

* Using the Web Audio API
AudioBuffer.duration
====================

`AudioBuffer`接口的 duration 属性返回一个双精度数，表示缓冲区中存储的 PCM 数据的持续时间（以秒为单位）

语法
--


```js
var myArrayBuffer = audioCtx.createBuffer(2, frameCount, audioCtx.sampleRate);
myArrayBuffer.duration;
```

### 值

双精度值

例子
--


```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(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;
    }
  }

  console.log(myArrayBuffer.duration);
};
```

规范
--

| Specification |
| --- |
| Web Audio API # dom-audiobuffer-duration |

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

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

See also
--------

* Using the Web Audio API
AudioBuffer.copyFromChannel()
=============================

`AudioBuffer`接口的 copyFromChannel 方法将样本从 AudioBuffer 的指定通道复制到目标数组中

语法
--
```

myArrayBuffer.copyFromChannel(destination,channelNumber,startInChannel);
```

### 参数

*destination*

将通道数据复制到的`Float32Array` (en-US)

*channelNumber*

当前 AudioBuffer 的通道号，用于复制通道数据。键入 channelNumber 大于或等于`AudioBuffer.numberOfChannels`，将会抛出`INDEX_SIZE_ERR` 的错误

*startInChannel* 可选

用于复制数据的可选偏移量。假如*startInChannel 比*`AudioBuffer.length`大，将会抛出`INDEX_SIZE_ERR` 的错误

例子
--


```js
var myArrayBuffer = audioCtx.createBuffer(2, frameCount, audioCtx.sampleRate);
var anotherArray = new Float32Array();
myArrayBuffer.copyFromChannel(anotherArray, 1, 0);
```

规范
--

| Specification |
| --- |
| Web Audio API # dom-audiobuffer-copyfromchannel |

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

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

See also
--------

* Using the Web Audio API
ProgressEvent.lengthComputable
==============================

**`ProgressEvent.lengthComputable`** 只读属性是一个布尔`Boolean` (en-US) 标志，表示`ProgressEvent` 所关联的资源是否具有可以计算的长度。否则，`ProgressEvent.total` 属性将是一个无意义的值。

语法
--
```

flag = ProgressEvent.lengthComputable
```

规范
--

| Specification |
| --- |
| XMLHttpRequest Standard # dom-progressevent-lengthcomputable |

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

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

See also
--------

* The `ProgressEvent` interface it belongs to.
ProgressEvent.loaded
====================

**`ProgressEvent.loaded`** 只读属性是一个整数，表示底层的进程已经执行的工作量。可以使用该属性和 `ProgressEvent.total` 计算完成工作的比率。当使用 HTTP 下载一个资源，其值以字节（而不是位）为单位，且仅表示内容（body）部分，不包含标头和其他开销。

值
-

一个数值。

规范
--

| Specification |
| --- |
| XMLHttpRequest Standard # dom-progressevent-loaded |

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

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

参见
--

* 它属于 `ProgressEvent` 接口。
ProgressEvent()
===============

**`ProgressEvent()`** 构造函数返回一个新的 `ProgressEvent` 对象，表示当前一个漫长处理过程的完成进度。

语法
--


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

### 参数

`type`

带有事件名称的字符串。它是区分大小写的，浏览器将其设置为 `loadstart`、`progress`、`abort`、`error`、`load`、`timeout` 或 `loadend`。

`options` 可选

一个对象，除了 `Event()` 中定义的属性，它还具有以下属性：

`lengthComputable` 可选

一个布尔值，表示底层的进程将要完成的总工作量和已经完成的工作量是否是可计算的。换句话说，它说明进度是否可衡量。它的默认值是 `false`。

`loaded` 可选

一个数值，表示底层的进程已经完成的工作量。可以使用该属性和 `ProgressEvent.total` 计算完成工作的比例。当使用 HTTP 下载一个资源时，其仅表示内容本身（body）的部分，不包含头和其他开销。它默认值为 `0`。

`total` 可选

一个数值，表示底层的进程正在进行的工作的总工作量。当使用 HTTP 下载一个资源时，其仅表示内容本身（body）的部分，不包含头和其他开销。它默认值为 `0`。


### 返回值

一个新的 `ProgressEvent` 对象。

规范
--

| Specification |
| --- |
| XMLHttpRequest Standard # dom-progressevent-progressevent |

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

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

参见
--

* 它属于 `ProgressEvent` 接口。
ProgressEvent.total
===================

**`ProgressEvent.total`** 只读属性是一个无符号 64 位整数值，表明正在处理或者传输的数据的总大小。在 HTTP 传输的情况下，这是消息体的大小（`Content-Length`）并且不包含标头和其他的开销。

如果事件的 `lengthComputable` 属性是 `false`，这个值是没有意义的并且应该被忽略。

值
-

一个整数。

规范
--

| Specification |
| --- |
| XMLHttpRequest Standard # dom-progressevent-total |

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

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

参见
--

* 它属于 `ProgressEvent` 接口。
EventTarget()
=============

**`EventTarget()`** 构造方法将会创建一个新的 `EventTarget` 对象实例。

**备注：** 需要显式调用这一构造函数的情况极为少见。在大多数情况下，这一函数是在继承了 `EventTarget` 类的构造函数中被 `super` 所调用的。

语法
--


```js
new EventTarget();
```

### 参数

无。

### 返回值

一个 `EventTarget` 实例。

示例
--


```js
class MyEventTarget extends EventTarget {
  constructor(mySecret) {
    super();
    this._secret = mySecret;
  }

  get secret() {
    return this._secret;
  }
}

let myEventTarget = new MyEventTarget(5);
let value = myEventTarget.secret; // === 5
myEventTarget.addEventListener("foo", (e) => {
  myEventTarget._secret = e.detail;
});

let event = new CustomEvent("foo", { detail: 7 });
myEventTarget.dispatchEvent(event);
let newValue = myEventTarget.secret; // === 7
```

规范
--

| Specification |
| --- |
| DOM Standard # ref-for-dom-eventtarget-eventtarget① |

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

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

参见
--

* `EventTarget`