AnalyserNode - Интерфейсы веб API

AnalyserNode
============

`AnalyserNode` интерфейс который предоставляет частоту (frequency) в реальном времени. Элемент `AudioNode` который пропускает аудиопоток неизменным от ввода (input) до вывода (output), но позволяет использовать генерируемые данные, обрабатывать или создавать аудиовизуализацию.

`AnalyserNode` имеет только один ввод и один вывод. Узел работает даже если вывод не подсоединён.

![Without modifying the audio stream, the node allows to get the frequency and time-domain data associated to it, using a FFT.](/ru/docs/Web/API/AnalyserNode/fttaudiodata_en.svg)

|  |  |
| --- | --- |
| Количество входов | `1` |
| Количество выводов | `1` (but may be left unconnected) |
| Channel count mode | `"explicit"` |
| Количество каналов | `1` |
| Channel interpretation | `"speakers"` |

Наследование
------------

Интерфейс унаследован от следующих родительских интерфейсов:

EventTarget

AudioNode

AnalyserNodeConstructor
-----------

`AnalyserNode()` (en-US)

Creates a new instance of an `AnalyserNode` object.

Properties
----------

*Inherits properties from its parent, `AudioNode`*.

`AnalyserNode.fftSize` (en-US)

Is an unsigned long value representing the size of the FFT (Fast Fourier Transform) to be used to determine the frequency domain.

`AnalyserNode.frequencyBinCount` (en-US) Только для чтения

Is an unsigned long value half that of the FFT size. This generally equates to the number of data values you will have to play with for the visualization.

`AnalyserNode.minDecibels` (en-US)

Is a double value representing the minimum power value in the scaling range for the FFT analysis data, for conversion to unsigned byte values — basically, this specifies the minimum value for the range of results when using `getByteFrequencyData()`.

`AnalyserNode.maxDecibels` (en-US)

Is a double value representing the maximum power value in the scaling range for the FFT analysis data, for conversion to unsigned byte values — basically, this specifies the maximum value for the range of results when using `getByteFrequencyData()`.

`AnalyserNode.smoothingTimeConstant` (en-US)

Is a double value representing the averaging constant with the last analysis frame — basically, it makes the transition between values over time smoother.

Methods
-------

*Inherits methods from its parent, `AudioNode`*.

`AnalyserNode.getFloatFrequencyData()` (en-US)

Copies the current frequency data into a `Float32Array` (en-US) array passed into it.

`AnalyserNode.getByteFrequencyData()`

Copies the current frequency data into a `Uint8Array` (en-US) (unsigned byte array) passed into it.

`AnalyserNode.getFloatTimeDomainData()` (en-US)

Copies the current waveform, or time-domain, data into a `Float32Array` (en-US) array passed into it.

`AnalyserNode.getByteTimeDomainData()` (en-US)

Copies the current waveform, or time-domain, data into a `Uint8Array` (en-US) (unsigned byte array) passed into it.

Examples
--------

**Примечание:** See the guide Visualizations with Web Audio API for more information on creating audio visualizations.

### Basic usage

The following example shows basic usage of an `AudioContext` to create an `AnalyserNode`, then `requestAnimationFrame` and `<canvas>` to collect time domain data repeatedly and draw an "oscilloscope style" output of the current audio input. For more complete applied examples/information, check out our Voice-change-O-matic demo (see app.js lines 128–205 for relevant code).

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

// ...

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

// Get a canvas defined with ID "oscilloscope"
var canvas = document.getElementById("oscilloscope");
var canvasCtx = canvas.getContext("2d");

// draw an oscilloscope of the current audio source

function draw() {
  requestAnimationFrame(draw);

  analyser.getByteTimeDomainData(dataArray);

  canvasCtx.fillStyle = "rgb(200, 200, 200)";
  canvasCtx.fillRect(0, 0, canvas.width, canvas.height);

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

  canvasCtx.beginPath();

  var sliceWidth = (canvas.width \* 1.0) / bufferLength;
  var x = 0;

  for (var i = 0; i < bufferLength; i++) {
    var v = dataArray[i] / 128.0;
    var y = (v \* canvas.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 # AnalyserNode |

Совместимость с браузерами
--------------------------

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

See also
--------

* Using the Web Audio API (en-US)


PositionError - Интерфейсы веб API

PositionError
=============

**Secure context:** This feature is available only in secure contexts (en-US) (HTTPS), in some or all supporting browsers.

Интерфейс **PositionError** представляет причину ошибки, возникающую при использовании устройства геолокации.

Свойства
--------

*Интерфейс **PositionError** не наследует никаких свойств.*

`PositionError.code` (en-US) Только для чтения  Secure context

Возвращает *unsigned short,* представляющий код ошибки. Возможны следующие значения:

| Значение | Связанная константа | Описание |
| --- | --- | --- |
| `1` | `PERMISSION_DENIED` | Не удалось получить информацию о геолокации, поскольку у страницы не было разрешения на это. |
| `2` | `POSITION_UNAVAILABLE` | Не удалось получить геолокацию, поскольку по крайней мере один внутренний источник позиции вернул внутреннюю ошибку. |
| `3` | `TIMEOUT` | Время, разрешённое для получения геолокации, определяется `PositionOptions.timeout` (en-US) информация была достигнута до получения информации. |

`PositionError.message` (en-US) Только для чтения  Secure context

Returns a human-readable `DOMString` describing the details of the error. Specifications note that this is primarily intended for debugging use and not to be shown directly in a user interface.

Methods
-------

**The `PositionError` interface *neither implements nor inherits any method.***

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

| Specification |
| --- |
| Geolocation API # position\_error\_interface |

Совместимость с браузерами
--------------------------

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

See also
--------

* Using geolocation (en-US)
* The `Geolocation` interface that use it.


CSS - Интерфейсы веб API

CSS
===

Интерфейс **`CSS`** имеет полезные CSS-связанные методы. нет объекта реализованного с этим интерфейсом: он содержит только статические методы и, следовательно, является утилитарным интерфейсом.

Свойства
--------

*Интерфейс CSS это утилитарный интерфейс и не имеет объектов этого типа которые могут быть созданы: только статические методы определены в нем.*

Методы
------

*Интерфейс CSS это утилитарный интерфейс и не имеет объектов этого типа которые могут быть созданы: только статические методы определены в нем.*

Статические методы
------------------

Не наследует статических методов.

`CSS.supports()` (en-US)

Возвращает `Boolean` (en-US) показывающие или свойство *property-value*, или состояние, дающее в параметре поддерживаемые.

`CSS.escape()` (en-US)
Экспериментальная возможность

Может быть быть использован для вывода строки в основном для использования в качестве части CSS селектора.

Спецификации
------------

| Specification |
| --- |
| CSS Object Model (CSSOM) # namespacedef-css |
| CSS Properties and Values API Level 1  |

Совместимость с браузерами
--------------------------

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

Смотрите также
--------------

* Components.utils.importGlobalProperties


Web Audio API - Интерфейсы веб API

Web Audio API
=============

Web audio API - мощный и многогранный инструмент для манипуляции звуковой составляющей на веб-странице, что даёт возможность разработчикам выбрать источники, добавить к ним специальные звуковые эффекты (такие как panning), визуализировать их и многое другое.

Общие концепции и использование Web Audio
-----------------------------------------

Web audio API позволяет обрабатывать операции над аудио с помощью специального аудио контекста (audio context), и был спроектирован на использование модульной маршрутизации (modular routing). Базовые операции выполняются с помощью аудио узлов (audio nodes), которые объединяются вместе, формируя аудио-маршрутизатору \*таблицу (audio routing graph). Несколько источников - с разными видами поточных схем - поддерживаются даже изнутри простого контекста. Эта модульная концепция обеспечивает гибкость в создании сложных функций для динамических эффектов.

Аудио узлы объединяются в цепи и простые сети их вводами и выводами. Они, как правило, запускаются с одним или более источниками. Источники представляют собой массивы сэмплов на единицу времени. Например, при частоте дискретизации 44100 Гц, в каждой секунде каждого канала расположено 22050 сэмплов. Они могут быть либо обработаны математически (смотрите : OscillatorNode), либо считаны с звуко/видео файлов (смотрите : AudioBufferSourceNode и MediaElementAudioSourceNode) или с аудио потоков (смотрите : MediaStreamAudioSourceNode). По факту, звуковые файлы - просто запись звуковых колебаний, которые поступают от микрофона и музыкальных инструментов, смешиваясь в одну сложную волну. Выводные данные этих узлов могут быть связаны с вводными других, что смешивают или модифицируют потоки звуковых образцов в иные потоки. Популярная модификация - умножение образца на значение, чтобы сделать выходной звук менее или более громким (смотрите : GainMode). Когда звук был успешно обработан предназначенным ему эффектом, он может быть привязан к выходному потоку (смотрите : AudioContext.destination), что направляет звук в динамики или микрофон. Данный шаг нужен лишь если вы предпочтёте дать возможность пользователю услышать ваши шедевры.

Простой, типичный порядок действий выполнения манипуляций над аудио выглядит так :

1. Создадим аудио контекст
2. Внутри нашего контекста определим источники - такие как <audio>, генератор (oscillator), поток
3. Определим узлы эффектов, такие как реверберация (reverb), биквадратный фильтр (biquad filter), панорамирование (panner), сжатие (compressor)
4. Выберем конечную точку аудио сигнала, например ваши системные звуковые устройства
5. Привяжем наши источники к эффектам, и эффекты к конечному сигналу.

![A simple box diagram with an outer box labeled Audio context, and three inner boxes labeled Sources, Effects and Destination. The three inner boxes have arrow between them pointing from left to right, indicating the flow of audio information.](/ru/docs/Web/API/Web_Audio_API/web-audio-api-flowchart.png)

Распределение времени контролируется с высокой точностью и низкими задержками, позволяя разработчикам писать код, что точно реагирует на события и в состоянии обработать образец даже на высокой оценке образцов (sample rate). Так что такие приложения как ритм-компьютер и программный автомат всегда под рукой.

 Web audio API также даёт нам возможность контролировать то, каким аудио является в пространстве. Используя особую систему, что базируется
 на модели source-listener, он позволяет контролировать модель панорамирования и обходиться без дистанционно-вызванного ослабления (distance-induced attenuation) или duppler shift, вызванного сдвигом источника (или сдвигом слушателя).

**Примечание:** Помните: вы можете прочитать более детальный теоретический материал о Web audio API в нашей статье Basic concepts behind Web Audio API (en-US).

Web Audio API интерфейсы
------------------------

В Web audio API есть всего 28 интерфейсов и соответствующих событий, которые мы сгруппировали в 9 категорий по функциональности.

### Главные объекты определения аудио

Главные контейнеры и определения, что формируют аудио объект в Web Audio API.

`AudioContext`

AudioContext представляет собой некий аудио обрабатывающий объект, сооружённый из аудио модулей связанных вместе, где каждый является экземпляром класса `AudioNode`. AudioContext управляет созданием узлов, содержащихся в нём и выполняет обработку или декодирование аудио данных.

`AudioNode`

Интерфейс AudioNode представляет собой некий обрабатывающий модуль такой как источник аудио (то есть HTML <audio> или <video> элемент), конечный аудио объект, модуль непосредственной обработки (например фильтр BiquadFilterNode или звуковой контроллер такой как GainNode).

`AudioParam` (en-US)

Интерфейс **`AudioParam`** представляет аудио-параметры связанные с `AudioNode`. Он может содержать как точное значение параметра, так и параметры изменяющиеся во времени.

`ended (en-US)` (event)

Событие **ended** генерируется тогда, когда воспроизведение остановлено по причине окончания носителя.

### Источники звука

Интерфейсы, которые определяют источники звука для использования в Web Audio API.

`OscillatorNode` (en-US)

**`OscillatorNode`** представляет собой источник синусоидальной волны. Это модуль `AudioNode` который принимает на вход *частоту* и генерирует синусоидальную волну с этой частотой.

`AudioBuffer`

Интерфейс **`AudioBuffer`** представляет собой короткий аудио сэмпл находящийся в памяти, созданный из аудио файла с использованием метода `AudioContext.decodeAudioData()` (en-US), или созданный из необработанных(сырых) данных с использованием метода `AudioContext.createBuffer()` (en-US). После декодирования аудио данные могут быть помещены в `AudioBufferSourceNode` (en-US).

`AudioBufferSourceNode` (en-US)

Интерфейс **`AudioBufferSourceNode`** представляет собой источник звука, состоящий из аудио данных, хранящихся в `AudioBuffer`. Это `AudioNode`, который действует в качестве источника звука.

`MediaElementAudioSourceNode`

Интерфейс **`MediaElementAudioSourceNode`** представляет источник звука, содержащегося в элементе HTML5 `<audio>` или `<video>` . Это `AudioNode`, который действует в качестве источника звука.

`MediaStreamAudioSourceNode` (en-US)

Интерфейс **`MediaStreamAudioSourceNode`** представляет источник звука, содержащегося в потоке WebRTC (en-US) `MediaStream` (например веб-камеры или микрофона). Это `AudioNode`, который действует в качестве источника звука.

### Аудио фильтры

Интерфейсы для определения эффектов которые можно применить к источникам звука.

`BiquadFilterNode` (en-US)

**`BiquadFilterNode`** представляет простой фильтр низкого порядка. Это `AudioNode` представляющий различные виды фильтров такие как эквалайзер или управление тональностью. **`BiquadFilterNode`** имеет ровно один вход и один выход.

`ConvolverNode` (en-US)

**`ConvolverNode`** это `AudioNode` выполняющий линейную свёртку AudioBuffer, часто применяется для достижения эффекта реверберации по заданной импульсной характеристике.

`DelayNode` (en-US)

**`DelayNode`** представляет собой линию задержки (delay-line); содержит `AudioNode` вызывающий задержку между выходным и входным сигналом.

`DynamicsCompressorNode` (en-US)

The **`DynamicsCompressorNode`** interface provides a compression effect, which lowers the volume of the loudest parts of the signal in order to help prevent clipping and distortion that can occur when multiple sounds are played and multiplexed together at once.

`GainNode` (en-US)

The **`GainNode`** interface represents a change in volume. It is an `AudioNode` audio-processing module that causes a given *gain* to be applied to the input data before its propagation to the output.

`StereoPannerNode` (en-US)

The **`StereoPannerNode`** interface represents a simple stereo panner node that can be used to pan an audio stream left or right.

`WaveShaperNode` (en-US)

The **`WaveShaperNode`** interface represents a non-linear distorter. It is an `AudioNode` that use a curve to apply a waveshaping distortion to the signal. Beside obvious distortion effects, it is often used to add a warm feeling to the signal.

`PeriodicWave` (en-US)

Used to define a periodic waveform that can be used to shape the output of an `OscillatorNode` (en-US).

### Defining audio destinations

Once you are done processing your audio, these interfaces define where to output it.

`AudioDestinationNode` (en-US)

The **`AudioDestinationNode`** interface represents the end destination of an audio source in a given context — usually the speakers of your device.

`MediaStreamAudioDestinationNode` (en-US)

The **`MediaStreamAudioDestinationNode`** interface represents an audio destination consisting of a WebRTC (en-US) `MediaStream` with a single `AudioMediaStreamTrack`, which can be used in a similar way to a MediaStream obtained from `Navigator.getUserMedia`. It is an `AudioNode` that acts as an audio destination.

### Анализ и визуализация данных

If you want to extract time, frequency and other data from your audio, the `AnalyserNode` is what you need.

`AnalyserNode`

The **`AnalyserNode`** interface represents a node able to provide real-time frequency and time-domain analysis information, for the purposes of data analysis and visualization.

### Splitting and merging audio channels

To split and merge audio channels, you'll use these interfaces.

`ChannelSplitterNode` (en-US)

The **`ChannelSplitterNode`** interface separates the different channels of an audio source out into a set of *mono* outputs.

`ChannelMergerNode` (en-US)

The **`ChannelMergerNode`** interface reunites different mono inputs into a single output. Each input will be used to fill a channel of the output.

### Audio spatialization

These interfaces allow you to add audio spatialization panning effects to your audio sources.

`AudioListener` (en-US)

The **`AudioListener`** interface represents the position and orientation of the unique person listening to the audio scene used in audio spatialization.

`PannerNode`

The **`PannerNode`** interface represents the behavior of a signal in space. It is an `AudioNode` audio-processing module describing its position with right-hand Cartesian coordinates, its movement using a velocity vector and its directionality using a directionality cone.

### Audio processing via JavaScript

If you want to use an external script to process your audio source, the below Node and events make it possible.

**Примечание:** As of the August 29 2014 Web Audio API spec publication, these features have been marked as deprecated, and are soon to be replaced by Audio\_Workers.

`ScriptProcessorNode` (en-US)

The **`ScriptProcessorNode`** interface allows the generation, processing, or analyzing of audio using JavaScript. It is an `AudioNode` audio-processing module that is linked to two buffers, one containing the current input, one containing the output. An event, implementing the `AudioProcessingEvent` (en-US) interface, is sent to the object each time the input buffer contains new data, and the event handler terminates when it has filled the output buffer with data.

`audioprocess (en-US)` (event)

The `audioprocess` event is fired when an input buffer of a Web Audio API `ScriptProcessorNode` (en-US) is ready to be processed.

`AudioProcessingEvent` (en-US)

The Web Audio API (en-US) `AudioProcessingEvent` represents events that occur when a `ScriptProcessorNode` (en-US) input buffer is ready to be processed.

### Offline/background audio processing

It is possible to process/render an audio graph very quickly in the background — rendering it to an `AudioBuffer` rather than to the device's speakers — with the following.

`OfflineAudioContext` (en-US)

The **`OfflineAudioContext`** interface is an `AudioContext` interface representing an audio-processing graph built from linked together `AudioNode`s. In contrast with a standard `AudioContext`, an `OfflineAudioContext` doesn't really render the audio but rather generates it, *as fast as it can*, in a buffer.

`complete (en-US)` (event)

The `complete` event is fired when the rendering of an `OfflineAudioContext` (en-US) is terminated.

`OfflineAudioCompletionEvent` (en-US)

The `OfflineAudioCompletionEvent` represents events that occur when the processing of an `OfflineAudioContext` (en-US) is terminated. The `complete (en-US)` event implements this interface.

### Audio Workers

Audio workers provide the ability for direct scripted audio processing to be done inside a web worker (en-US) context, and are defined by a couple of interfaces (new as of 29th August 2014.) These are not implemented in any browsers yet. When implemented, they will replace `ScriptProcessorNode` (en-US), and the other features discussed in the Audio processing via JavaScript section above.

`AudioWorkerNode`

The AudioWorkerNode interface represents an `AudioNode` that interacts with a worker thread to generate, process, or analyse audio directly.

`AudioWorkerGlobalScope`

The `AudioWorkerGlobalScope` interface is a `DedicatedWorkerGlobalScope`-derived object representing a worker context in which an audio processing script is run; it is designed to enable the generation, processing, and analysis of audio data directly using JavaScript in a worker thread.

`AudioProcessEvent`

This is an `Event` object that is dispatched to `AudioWorkerGlobalScope` objects to perform processing.

Obsolete interfaces
-------------------

The following interfaces were defined in old versions of the Web Audio API spec, but are now obsolete and have been replaced by other interfaces.

`JavaScriptNode`

Used for direct audio processing via JavaScript. This interface is obsolete, and has been replaced by `ScriptProcessorNode` (en-US).

`WaveTableNode`

Used to define a periodic waveform. This interface is obsolete, and has been replaced by `PeriodicWave` (en-US).

Пример
------

This example shows a wide variety of Web Audio API functions being used. You can see this code in action on the Voice-change-o-matic demo (also check out the full source code at Github) — this is an experimental voice changer toy demo; keep your speakers turned down low when you use it, at least to start!

The Web Audio API lines are highlighted; if you want to find more out about what the different methods, etc. do, have a search around the reference pages.

```js
var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); // define audio context
// Webkit/blink browsers need prefix, Safari won't work without window.

var voiceSelect = document.getElementById("voice"); // select box for selecting voice effect options
var visualSelect = document.getElementById("visual"); // select box for selecting audio visualization options
var mute = document.querySelector(".mute"); // mute button
var drawVisual; // requestAnimationFrame

var analyser = audioCtx.createAnalyser();
var distortion = audioCtx.createWaveShaper();
var gainNode = audioCtx.createGain();
var biquadFilter = audioCtx.createBiquadFilter();

function makeDistortionCurve(amount) {
  // function to make curve shape for distortion/wave shaper node to use
  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;
}

navigator.getUserMedia(
  // constraints - only audio needed for this app
  {
    audio: true,
  },

  // Success callback
  function (stream) {
    source = audioCtx.createMediaStreamSource(stream);
    source.connect(analyser);
    analyser.connect(distortion);
    distortion.connect(biquadFilter);
    biquadFilter.connect(gainNode);
    gainNode.connect(audioCtx.destination); // connecting the different audio graph nodes together

    visualize(stream);
    voiceChange();
  },

  // Error callback
  function (err) {
    console.log("The following gUM error occured: " + err);
  },
);

function visualize(stream) {
  WIDTH = canvas.width;
  HEIGHT = canvas.height;

  var visualSetting = visualSelect.value;
  console.log(visualSetting);

  if (visualSetting == "sinewave") {
    analyser.fftSize = 2048;
    var bufferLength = analyser.frequencyBinCount; // half the FFT value
    var dataArray = new Uint8Array(bufferLength); // create an array to store the data

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

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

      analyser.getByteTimeDomainData(dataArray); // get waveform data and put it into the array created above

      canvasCtx.fillStyle = "rgb(200, 200, 200)"; // draw wave with canvas
      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();
  } else if (visualSetting == "off") {
    canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
    canvasCtx.fillStyle = "red";
    canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
  }
}

function voiceChange() {
  distortion.curve = new Float32Array();
  biquadFilter.gain.value = 0; // reset the effects each time the voiceChange function is run

  var voiceSetting = voiceSelect.value;
  console.log(voiceSetting);

  if (voiceSetting == "distortion") {
    distortion.curve = makeDistortionCurve(400); // apply distortion to sound using waveshaper node
  } else if (voiceSetting == "biquad") {
    biquadFilter.type = "lowshelf";
    biquadFilter.frequency.value = 1000;
    biquadFilter.gain.value = 25; // apply lowshelf filter to sounds using biquad
  } else if (voiceSetting == "off") {
    console.log("Voice settings turned off"); // do nothing, as off option was chosen
  }
}

// event listeners to change visualize and voice settings

visualSelect.onchange = function () {
  window.cancelAnimationFrame(drawVisual);
  visualize(stream);
};

voiceSelect.onchange = function () {
  voiceChange();
};

mute.onclick = voiceMute;

function voiceMute() {
  // toggle to mute and unmute sound
  if (mute.id == "") {
    gainNode.gain.value = 0; // gain set to 0 to mute sound
    mute.id = "activated";
    mute.innerHTML = "Unmute";
  } else {
    gainNode.gain.value = 1; // gain set to 1 to unmute sound
    mute.id = "";
    mute.innerHTML = "Mute";
  }
}
```

Спецификации
------------

| Specification |
| --- |
| Web Audio API # AudioContext |

Совместимость с браузерами
--------------------------

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

Смотрите также
--------------

* Using the Web Audio API (en-US)
* Visualizations with Web Audio API
* Voice-change-O-matic example
* Violent Theremin example
* Web audio spatialisation basics (en-US)
* Mixing Positional Audio and WebGL
* Developing Game Audio with the Web Audio API
* Porting webkitAudioContext code to standards based AudioContext (en-US)
* Tones: a simple library for playing specific tones/notes using the Web Audio API.
* howler.js: a JS audio library that defaults to Web Audio API and falls back to HTML5 Audio, as well as providing other useful features.
* Mooog: jQuery-style chaining of AudioNodes, mixer-style sends/returns, and more.
### Quicklinks

1. **Guides**
    1. Basic concepts behind Web Audio API (en-US)
    2. Using the Web Audio API (en-US)
    3. Visualizations with Web Audio API
    4. Web audio spatialisation basics (en-US)
    5. Porting webkitAudioContext code to standards based AudioContext (en-US)
2. **Examples**
    1. Voice-change-O-matic
    2. Violent Theremin
3. **Interfaces**
    1. `AnalyserNode`
    2. `AudioBuffer`
    3. `AudioBufferSourceNode` (en-US)
    4. `AudioContext`
    5. `AudioDestinationNode` (en-US)
    6. `AudioListener` (en-US)
    7. `AudioNode`
    8. `AudioParam` (en-US)
    9. `audioprocess (en-US)` (event)
    10. `AudioProcessingEvent` (en-US)
    11. `BiquadFilterNode` (en-US)
    12. `ChannelMergerNode` (en-US)
    13. `ChannelSplitterNode` (en-US)
    14. `complete (en-US)` (event)
    15. `ConvolverNode` (en-US)
    16. `DelayNode` (en-US)
    17. `DynamicsCompressorNode` (en-US)
    18. `ended (en-US)` (event)
    19. `GainNode` (en-US)
    20. `MediaElementAudioSourceNode`
    21. `MediaStreamAudioDestinationNode` (en-US)
    22. `MediaStreamAudioSourceNode` (en-US)
    23. `OfflineAudioCompletionEvent` (en-US)
    24. `OfflineAudioContext` (en-US)
    25. `OscillatorNode` (en-US)
    26. `PannerNode`
    27. `PeriodicWaveNode`
    28. `ScriptProcessorNode` (en-US)
    29. `WaveShaperNode` (en-US)


Node - Интерфейсы веб API

Node
====

**`Node`** это интерфейс, от которого наследуют несколько типов DOM, он так же позволяет различным типам быть обработанными(или протестированными).

Следующие интерфейсы полностью наследуют от `Node` его методы и свойства: `Document`, `Element`, `CharacterData` (which `Text`, `Comment`, и `CDATASection` inherit), `ProcessingInstruction` (en-US), `DocumentFragment`, `DocumentType` (en-US), `Notation`, `Entity`, `EntityReference`

Эти интерфейсы могут возвращать null в особых случаях, когда методы и свойства не уместны. Они могут сбросить исключение - например, когда добавляются дети к типу узла, у которого не может их существовать.

Свойства
--------

*Наследует свойства от родителей `EventTarget`*.[1]

`Node.baseURI` Только для чтения

Возвращает `DOMString` показывающие основной URL. Понятие основного URL изменяется из одного языка в другой; В HTML, это соответствует протоколу , доменному имени и структуре каталогов, все до последнего `'/'`.

`Node.baseURIObject` (en-US)
Non-standard

(Не доступно для веб-контента.) Только для чтения. Объект `nsIURI`, представляющий базовый URI элемента.

`Node.childNodes` Только для чтения

Возвращает живой `NodeList`, содержащий всех потомков данного узла. Живой `NodeList` означает то, что если потомки `узла` изменяются, объект `NodeList` автоматически обновляется.

`Node.firstChild` Только для чтения

Возвращает `Node`, представляющий первый прямой узел потомок узла или `null,` если узел не имеет потомков.

`Node.lastChild` Только для чтения

Возвращает `Node`, представляющий последний прямой узел потомок узла или `null`, если узел не имеет потомков.

`Node.localName`Только для чтения

Возвращает `DOMString` представляющий локальную часть условного имени элемента. В Firefox 3.5 и более ранних версиях, свойство локального имени в верхнем регистре для HTML-элементов (но не XHTML элементов). В более поздних версиях, такого не произошло, и свойство находится в нижнем регистре для HTML и XHTML. Хотя недавние спецификации требуют от `localName` быть определённым как интерфейс `Element`, но браузеры основанные на Gecko все ещё реализуют его как интерфейс `Node`.

`Node.namespaceURI`Только для чтения

 Пространство имён URI данного узла или `null,` если нет пространства имён. В Firefox 3.5 и более ранних версиях, HTML-элементы не имеют пространства имён. В более поздних версиях, HTML-элементы находятся в пространстве имён `http://www.w3.org/1999/xhtml` для деревьев HTML и XML.
 Хотя недавние спецификации требуют `namespaceURI` быть определённым как интерфейс `Element`, но браузеры основанные на Gecko все ещё реализуют его как интерфейс `Node`.

`Node.nextSibling` Только для чтения

Возвращает `Node` представляющий следующий узел в древе или `null,` если не такого узла.

`Node.nodeName` Только для чтения

Возвращает `DOMString` содержащий имя `узла`. Структура имени будет отличаться от типа имени. Например, `HTMLElement` будет содержать имя соответствующего тега: `'audio'` для `HTMLAudioElement`, узел `Text` будет строкой `'#text'` или узел `Document` будет строкой `'#document'`.

`Node.nodePrincipal` (en-US)
Non-standard

`nsIPrincipal` представляет основной узел.

`Node.nodeType`Только для чтения

Возвращает беззнаковое короткое число `(unsigned short`) представляющее тип узла. Возможные значения:

| Имя | Значение |
| --- | --- |
| `ELEMENT_NODE` | `1` |
| `ATTRIBUTE_NODE`
Устарело
 | `2` |
| `TEXT_NODE` | `3` |
| `CDATA_SECTION_NODE`
Устарело
 | `4` |
| `ENTITY_REFERENCE_NODE`
Устарело
 | `5` |
| `ENTITY_NODE`
Устарело
 | `6` |
| `PROCESSING_INSTRUCTION_NODE` | `7` |
| `COMMENT_NODE` | `8` |
| `DOCUMENT_NODE` | `9` |
| `DOCUMENT_TYPE_NODE` | `10` |
| `DOCUMENT_FRAGMENT_NODE` | `11` |
| `NOTATION_NODE`
Устарело
 | `12` |

`Node.nodeValue`

Это `DOMString`, представляющее значение объектов. Для большинства типов `Node`, возвращает `null` и любой набор операция игнорируется. Для узлов типа `TEXT_NODE` (`Text` objects), `COMMENT_NODE` (`Comment` objects), и `PROCESSING_INSTRUCTION_NODE` (`ProcessingInstruction` (en-US) objects), значение соответствует текстовым данным, содержащихся в объекте.

`Node.ownerDocument` Только для чтения

Возвращает `Document` к которому принадлежит этот узел. Если нет связанного с ним документа, возвращает `null`.

`Node.parentNode` Только для чтения

Возвращает `Node` который является родителем этого узла. Если нет такого узла, по причине того, что узел находится вверху древа или не относится к древу, данное свойство вернёт `null`.

`Node.parentElement` Только для чтения

Возвращает `Element` который является родителем данного узла. Если узел не имеет родителя или если родитель не `Element`, это свойство вернёт `null`.

`Node.prefix`Только для чтения

`DOMString` представляющий префикс пространства имён узла или `null` если нет префикса точно определённого.
 Хотя недавние спецификации требуют того, чтобы `префикс` был определён как интерфейс `Element`, браузеры основанные на Gecko ещё реализовывают его как интерфейс `Node`.

`Node.previousSibling` Только для чтения

Возвращают `Node` представляющий предыдущий узел древа или `null`, если нет такого узла.

`Node.textContent`

Это `DOMString` представляющее текстовый контент элемента и всех его потомков.

Методы
------

*Наследует методы от своих родителей `EventTarget`*.[1]

`Node.appendChild()`

Вставляет `Node` как последний дочерний узел данного элемента.

`Node.cloneNode()`

Клонирует `Node`, и опционально, все его компоненты. По умолчанию, оно клонирует содержимое узла.

`Node.compareDocumentPosition()`

…

`Node.contains()`

…

`Node.getFeature()`

...

`Node.getUserData()`

Позволяет пользователю получить некоторый `DOMUserData` от узла.

`Node.hasAttributes()`

Возвращает `Boolean` (en-US) показывающий, есть ли у элемента какие-либо атрибуты или нет.

`Node.hasChildNodes()`

Возвращает `Boolean` (en-US) показывающий, есть ли у элемента дочерние узлы или нет.

`Node.insertBefore()`

Вставляет первым `Node` данный в качестве параметра, непосредственно перед вторым, потомком данного элемента `Node`.

`Node.isDefaultNamespace()`

…

`Node.isEqualNode()`

…

`Node.isSameNode()`

…

`Node.lookupPrefix()`

…

`Node.lookupNamespaceURI()`

…

`Node.normalize()`

Очищает все текстовые узлы под этим элементом (поглотить смежный, удалить пустой).

`Node.removeChild()`

Удаляет дочерний узел из текущего элемента, который должен быть потомком текущего узла.

`Node.replaceChild()`

Заменяет одного потомка `Node` из существующего на второй указанный в параметре.

`Node.setUserData()`

Позволяет пользователю присоединить или удалить `DOMUserData` к узлу.

Примеры
-------

### Просмотреть все дочерние узлы

Следующая функция рекурсивный цикл всех дочерних узлов узла и она исполняет вызов функции относительно их (и себя относительно родительского узла).

```js
function DOMComb(oParent, oCallback) {
  if (oParent.hasChildNodes()) {
    for (var oNode = oParent.firstChild; oNode; oNode = oNode.nextSibling) {
      DOMComb(oNode, oCallback);
    }
  }
  oCallback.call(oParent);
}
```

#### Синтаксис
```

DOMComb(parentNode, callbackFunction);
```

#### Описание

Рекурсивный цикл всех дочерних узлов `parentNode` и самого `parentNode`, выполняет `callbackFunction` относительно их как `эти` (en-US) объекты.

#### Параметры

`parentNode`

Родительский узел (`Node Object`).

`callbackFunction`

Колбэк-функции (`Function` (en-US)).

#### Пример использования

Следующий пример отправляет в `console.log` текстовое содержимое body:

```js
function printContent() {
  if (this.nodeValue) {
    console.log(this.nodeValue);
  }
}

onload = function () {
  DOMComb(document.body, printContent);
};
```

### Удалить все потомки, вложенные в узел

```js
Element.prototype.removeAll = function () {
  while (this.firstChild) {
    this.removeChild(this.firstChild);
  }
  return this;
};
```

#### Пример использования

```js
/\* ... как альтернатива document.body.innerHTML = "" ... \*/
document.body.removeAll();
```

Спецификации
------------

| Specification |
| --- |
| DOM Standard # interface-node |

Совместимость с браузерами
--------------------------

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


NamedNodeMap - Интерфейсы веб API

NamedNodeMap
============

Интерфейс **`NamedNodeMap`** представляет собой коллекцию объектов `Attr`. Объекты внутри `NamedNodeMap` не находятся в каком-либо определённом порядке, в отличие от `NodeList`, хотя они могут быть доступны при использовании индекса, как в массиве.

Объект NamedNodeMap является "живым" и, таким образом, будет автоматически обновляться, если изменения будут внесены в его содержимое внутри или в другом месте.

**Примечание:** Хотя данный интерфейс и называется `NamedNodeMap` , он не имеет ничего общего с объектом `Node`, но до сих пор связан с объектом  `Attr` , который изначально был специализированным классом `Node`.

Свойства
--------

Этот интерфейс не наследует никаких свойств.

`NamedNodeMap.length` (en-US) Только для чтения

Возвращает количество объектов внутри объекта NamedNodeMap.

Методы
------

Этот интерфейс не наследует никакого метода.

`NamedNodeMap.getNamedItem()`

Возвращает значение `Attr`, соответствующее данному имени.

`NamedNodeMap.setNamedItem()` (en-US)

Заменяет или добавляет `Attr`, обозначенный в объекте NamedNodeMap заданным именем.

`NamedNodeMap.removeNamedItem()` (en-US)

Удаляет `Attr`, идентифицированный объектом NamedNodeMap .

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

Возвращает значение `Attr` по заданному индексу или null, если индекс больше или равен числу узлов.

`NamedNodeMap.getNamedItemNS()` (en-US)

Возвращает `Attr`, идентифицированный пространством имён и связанным локальным именем.

`NamedNodeMap.setNamedItemNS()` (en-US)

Заменяет или добавляет `Attr`, идентифицированный в объекте NamedNodeMap данным пространством имён и связанным локальным именем.

`NamedNodeMap.removeNamedItemNS()` (en-US)

Удаляет `Attr`, идентифицированный данным пространством имён и связанным локальным именем.

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

| Specification |
| --- |
| DOM Standard # interface-namednodemap |

Совместимость с браузерами
--------------------------

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

See also
--------

* `Element.attributes`


MediaStreamTrack - Интерфейсы веб API

MediaStreamTrack
================

Интерфейс **`MediaStreamTrack`** представляет один медиа трек в потоке; обычно это аудио или видео трек, но могут использоваться и другие типы.

Свойства
--------

В дополнение к свойствам, перечисленным ниже, `MediaStreamTrack` имеет свойства с ограничениями, которые можно установить с помощью `applyConstraints()` (en-US) и просмотреть с через `getConstraints()` (en-US) и `getSettings()` (en-US). Смотрите capabilities, constraints, and settings (en-US), чтобы узнать, как правильно работать со свойствами с ограничениями. Если использовать их неправильно, ваш код будет ненадёжным.

`MediaStreamTrack.contentHint` (en-US)

Строка, которую веб приложение может использовать для создания подсказок, какой тип данных содержит трек, чтобы их могли различать пользователи API.

`MediaStreamTrack.enabled` (en-US)

Имеет значение `true`, если трек включён, то есть может может отображать поток медиа; или `false`, если он выключен, то есть отображает не поток данных, а чёрное изображение без звука. Если трек отключён, это свойство можно менять, но это не будет давать никакого эффекта.

**Примечание:** Вы можете создать стандартную функцию "заглушить звук", устанавливая свойство `enabled` в значение `false`. Свойство `muted` используется, когда данные отсутствуют из-за технической проблемы.

`MediaStreamTrack.id` (en-US) Только для чтения

Возвращает объект `DOMString`, содержащий уникальный идентификатор (GUID) трека; генерируется браузером.

`MediaStreamTrack.isolated` Только для чтения

Возвращает `true`, если трек **изолирован**, то есть не доступен документу, которому принадлежит. Это случается, когда устанавливается свойство `peerIdentity` или трек исходит от cross-origin ресурса.

`MediaStreamTrack.kind` (en-US) Только для чтения

Возвращает объект `DOMString` со значением `"audio"`, если это аудио трек или `"video"`, если это видео трек. Не меняется, когда трек отвязывается от источника.

`MediaStreamTrack.label` (en-US) Только для чтения

Возвращает объект `DOMString`, содержащий установленные агентом метки, обозначающие источник трека, например `"internal microphone"` (внутренний микрофон). Строка может быть пустой и является таковой, если не подключён никакой источник. Когда трек отвязывается от источника, метка не меняется.

`MediaStreamTrack.muted` (en-US) Только для чтения

Возвращает `true`, если трек не может предоставить данные по техническим причинам.

**Примечание:** Вы можете создать стандартную функцию "заглушить звук", устанавливая свойство `enabled` в значение `false`, и возвращать звук, снова устанавливая его в значение `true`.

`MediaStreamTrack.readonly` Только для чтения

Возвращает `true`, если трек предназначен только для чтения (например, если его источник - видео файл или камера, настройки которой не могут быть изменены), иначе `false`.

`MediaStreamTrack.readyState` (en-US) Только для чтения

Возвращает одно из следующих значений, обозначающих статус трека:

* `"live"` означает, что источник подключён и делает всё, чтобы предоставить данные в реальном времени. В этом случае, поток данных можно включать и выключать с помощью свойство `enabled` (en-US).
* `"ended"` означает, что источник больше не предоставляет и больше не будет предоставлять данные.

`MediaStreamTrack.remote` (en-US) Только для чтения
Устарело

Имеет значение `true`, если источником трека является `RTCPeerConnection`, иначе `false`.

Методы
------

`MediaStreamTrack.applyConstraints()` (en-US)

Позволяет приложению указывать желательные и/или допустимые диапазоны значений для любого количества свойств с ограничениями объекта `MediaStreamTrack`.

`MediaStreamTrack.clone()` (en-US)

Возвращает копию объекта `MediaStreamTrack`.

`MediaStreamTrack.getCapabilities()` (en-US)

Возвращает список свойств с ограничениями, доступных объекту `MediaStreamTrack`.

`MediaStreamTrack.getConstraints()` (en-US)

Возвращает объект `MediaTrackConstraints` (en-US), содержащий установленные ограничения на трек; возвращаемое значение удовлетворяет ограничениям, установленным методом `applyConstraints()` (en-US).

`MediaStreamTrack.getSettings()` (en-US)

Возвращает объект `MediaTrackSettings` (en-US), содержащий текущее значение всех свойств с ограничениями объекта `MediaStreamTrack`.

`MediaStreamTrack.stop()` (en-US)

Останавливает проигрывание источника, к которому привязан трек. И источник, и трек отвязываются. Состояние трека устанавливается в значение `ended`.

События
-------

`ended` (en-US)

 Вызывается, когда проигрывание трека останавливается (когда значение `readyState` (en-US) становится `ended`).
 Обработчик может быть установлен как свойство `onended` (en-US).

`mute` (en-US)

 Вызывается, когда `muted` (en-US) принимает значение `true`, что означает, что трек временно не может предоставлять данные (например, при плохом подключении сети).
 Обработчик может быть установлен как свойство `onmute` (en-US).

`isolationchange`

 Вызывается, когда свойство `isolated` принимает значение `true` из-за того, что документ больше не имеет разрешение на доступ к треку.
 Обработчик может быть установлен как свойство `onisolationchange`.

`overconstrained` (en-US)
Устарело

 Вызывается, когда источник не удовлетворяет ограничениям трека, что делает его непригодным для использования.
 Обработчик может быть установлен как свойство `onoverconstrained` (en-US).

`unmute` (en-US)

 Вызывается, когда данные снова становятся доступными, то есть пропадают технические проблемы.
 Обработчик может быть установлен как свойство `onunmute` (en-US).

Спецификации
------------

| Specification |
| --- |
| Media Capture and Streams # mediastreamtrack |

Совместимость с браузерами
--------------------------

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

Смотрите также
--------------

* Media Capture and Streams API (en-US)
* `MediaStream`


HTMLHeadingElement - Интерфейсы веб API

HTMLHeadingElement
==================

**`HTMLHeadingElement`** интерфейс представляет различные элементы заголовков. Наследует методы и свойства из `HTMLElement`.

Свойства
--------

*Наследует свойства родителя, `HTMLElement`.*

`HTMLHeadingElement.align`

Is a `DOMString` representing an enumerated attribute indicating alignment of the heading with respect to the surrounding context. The possible values are `"left"`, `"right"`, `"justify"`, and `"center"`.

Методы
------

*Нет специфичных методов; наследует методы родителя, `HTMLElement`.*

Спецификации
------------

| Specification |
| --- |
| HTML Standard # htmlheadingelement |

Совместимость с браузерами
--------------------------

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

See also
--------

* The HTML element implementing this interface: `<h1>` (en-US), `<h2>` (en-US), `<h3>` (en-US), `<h4>` (en-US), `<h5>` (en-US), and `<h6>` (en-US).


WEBGL_compressed_texture_pvrtc - Интерфейсы веб API

WEBGL\_compressed\_texture\_pvrtc
=================================

Расширение **`WEBGL_compressed_texture_pvrtc`** часть WebGL API и представляет четыре сжатых формата текстур PVRTC.

Сжатые текстуры уменьшают количество памяти, используемые в GPU для хранения, позволяя большее разрешение для текстур или большее количество текстур с одинаковым разрешением.

WebGL расширения доступны через метод `WebGLRenderingContext.getExtension()` (en-US). Для подробностей смотри также Использование расширений (en-US) в туториале по WebGL.

**Примечание:** Обычно PVRTC доступен только на мобильных устройствах с чипсетом PowerVR. Используется во всех поколениях iPhone, iPod Touch и iPad и поддерживается на определённых Android устройствах, использующих PowerVR GPU.

Версии контекста, поддерживающие расширение: WebGL1 , и WebGL2 (en-US).

Константы
---------

 Форматы сжатых текстур представлены четырьмя константами и могут быть использованы в двух функциях:
 `compressedTexImage2D()` (en-US) — параметры высота и ширина должны соответствовать степени 2
 `compressedTexSubImage2D()` (en-US) — параметры высоты и ширины должны быть равны размеру текстуры, а значения параметров `xoffset` и `yoffset` должны быть 0.

`ext.COMPRESSED_RGB_PVRTC_4BPPV1_IMG`

RGB сжатие в 4-битном режиме. Один блок на каждые 4×4 пикселей.

`ext.COMPRESSED_RGBA_PVRTC_4BPPV1_IMG`

RGBA сжатие в 4-битном режиме. Один блок на каждые 4×4 пикселей.

`ext.COMPRESSED_RGB_PVRTC_2BPPV1_IMG`

RGB сжатие в 2-битном режиме. Один блок на каждые 8×4 пикселей.

`ext.COMPRESSED_RGBA_PVRTC_2BPPV1_IMG`

RGBA сжатие в 2-битном режиме. Один блок на каждые 8×4 пикселей.

Примеры
-------

```js
var ext = gl.getExtension("WEBGL\_compressed\_texture\_pvrtc");

var texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE\_2D, texture);

gl.compressedTexImage2D(
  gl.TEXTURE\_2D,
  0,
  ext.COMPRESSED\_RGB\_PVRTC\_4BPPV1\_IMG,
  512,
  512,
  0,
  textureData,
);
```

Спецификации
------------

| Specification |
| --- |
| WebGL WEBGL\_compressed\_texture\_pvrtc Extension Specification  |

Совместимость с браузерами
--------------------------

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

Смотрите также
--------------

* PVRTC Texture Compression – Wikipedia
* `WebGLRenderingContext.getExtension()` (en-US)
* `WebGLRenderingContext.compressedTexImage2D()` (en-US)
* `WebGLRenderingContext.compressedTexSubImage2D()` (en-US)
* `WebGLRenderingContext.getParameter()` (en-US)


CryptoKeyPair - Интерфейсы веб API

CryptoKeyPair
=============

**`CryptoKeyPair`** из Web Crypto API представляет собой пару ключей для ассиметричных криптографических алгоритмов, также известных как алгоритмы с публичным-приватным ключом.

Объект `CryptoKeyPair` может быть получен с помощью `SubtleCrypto.generateKey()` (en-US), используя один из следующих алгоритмов: RSASSA-PKCS1-v1\_5, RSA-PSS, RSA-OAEP, ECDSA, или ECDH.

У него всего два свойства, оба объекты `CryptoKey` (en-US): свойства `privateKey`, содержащее приватный ключ, и `publicKey` с публичным ключом.

Свойства
--------

`CryptoKeyPair.privateKey`

Объект `CryptoKey` (en-US), представляющее приватный ключ. В криптографических алгоритмах используется для расшифровывания и подписи.

`CryptoKeyPair.publicKey`

Объект `CryptoKey` (en-US), представляющее публичный ключ. В криптографических алгоритмах используется для зашифровывания и проверки подлинности подписи.

Примеры
-------

Методы `SubtleCrypto` обычно используют объекты `CryptoKeyPair`. Примеры:

* `SubtleCrypto.generateKey()` (en-US)
* `SubtleCrypto.deriveKey()` (en-US)
* `SubtleCrypto.importKey()` (en-US)
* `SubtleCrypto.exportKey()` (en-US)
* `SubtleCrypto.wrapKey()` (en-US)
* `SubtleCrypto.unwrapKey()` (en-US)
* `SubtleCrypto.encrypt()` (en-US)
* `SubtleCrypto.decrypt()` (en-US)
* `SubtleCrypto.sign()` (en-US)
* `SubtleCrypto.verify()` (en-US)
Спецификации
------------

| Specification |
| --- |
| Web Cryptography API # keypair |

Совместимость с браузерами
--------------------------

{{Compat}}Смотрите также
--------------

* `SubtleCrypto.generateKey` (en-US).
* `SubtleCrypto.sign` (en-US) and `SubtleCrypto.verify` (en-US).
* `SubtleCrypto.encrypt` (en-US) and `SubtleCrypto.decrypt` (en-US).


BackgroundFetchRegistration - Интерфейсы веб API

BackgroundFetchRegistration
===========================

Интерфейс **`BackgroundFetchRegistration`** из Background Fetch API представляет собой отдельный фоновый запрос.

Экземпляр `BackgroundFetchRegistration` возвращает метод `BackgroundFetchManager.fetch()` или метод `BackgroundFetchManager.get()` и, следовательно, не имеет конструктора.

EventTarget

BackgroundFetchRegistrationСвойства
--------

Для удобства использования, следующие свойства, скопированные из экземпляра `BackgroundFetchRegistration`, доступны синхронно:

`BackgroundFetchRegistration.id`Только для чтения

Строка, содержащая идентификатор фонового запроса.

`BackgroundFetchRegistration.uploadTotal`Только для чтения

`number` содержащий общее количество байт для загрузки.

`BackgroundFetchRegistration.uploaded`Только для чтения

`number` содержащий количество успешно отправленных байт, изначально `0`.

`BackgroundFetchRegistration.downloadTotal`Только для чтения

`number` содержащий общий размер загрузки в байтах. Это значение устанавливается при регистрации запроса, или `0`.

`BackgroundFetchRegistration.downloaded`Только для чтения

`number` содержащий количество скачанных байт, изначально `0`.

`BackgroundFetchRegistration.result`Только для чтения

Изначально возвращает пустую строку, а по завершению запросо либо `"success"`, либо `"failure"`.

`BackgroundFetchRegistration.failureReason`Только для чтения

Возвращает одну из следующих строк:

`""`

Запрос не завершён, либо завершился успешно.

`"aborted"`

Операция была отменена пользователем, либо был вызван `abort()`.

`"bad-status"`

Статус ответа не-ok (статус не входящий в диапазон 200-299).

`"fetch-error"`

Запрос завершился неудачей по какой-либо другой причине, например CORS, или отсутствие сети.

`"quota-exceeded"`

Во время операции была достигнута квота хранилища.

`"download-total-exceeded"`

Превышен `downloadTotal`. Его значение устанавливается при регистрации запроса.

`BackgroundFetchRegistration.recordsAvailable`Только для чтения

`boolean` указывает, установлен ли флаг `recordsAvailable`.

Методы
------

`BackgroundFetchRegistration.abort()`

Прерывает фоновый запрос. Возвращает `Promise`, результатом обработки которого является `true`, если запрос был успешно прерван.

`BackgroundFetchRegistration.match()`

Возвращает один объект `BackgroundFetchRecord`, который является первым совпадением по аргументам.

`BackgroundFetchRegistration.matchAll()`

Возвращает `Promise`, результатом обработки которого является массив объектов `BackgroundFetchRecord`, содержащих запросы и ответы.

События
-------

Слушайте эти события используя `addEventListener()` или назначая слушатель события свойству `oneventname`.

`progress`

 Срабатывает при изменении любого из следующих свойств:
 `uploaded`,
 `downloaded`,
 `result` or
 `failureReason`.

Примеры
-------

Следующий пример создаёт `BackGroundFetchRegistration` с идентификатором `"my-fetch"` и присваивает его переменной `bgFetch`.

```js
navigator.serviceWorker.ready.then(async (swReg) => {
  const bgFetch = await swReg.backgroundFetch.fetch(
    "my-fetch",
    ["/ep-5.mp3", "ep-5-artwork.jpg"],
    {
      title: "Episode 5: Interesting things.",
      icons: [
        {
          sizes: "300x300",
          src: "/ep-5-icon.png",
          type: "image/png",
        },
      ],
      downloadTotal: 60 \* 1024 \* 1024,
    },
  );
});
```

Вывод `id` в консоль возвращает `"my-fetch"`.

```js
console.log(bgFetch.id); // "my-fetch"
```

Метод `match()` можно использовать для поиска конкретного `BackgroundFetchRecord` из тех, что были зарегистрированы.

```js
bgFetch.match("/ep-5.mp3").then(async (record) => {
  if (!record) {
    console.log("No record found");
    return;
  }

  console.log(`Запрос`, record.request);
  const response = await record.responseReady;
  console.log(`И ответ`, response);
});
```

Спецификации
------------

| Specification |
| --- |
| Background Fetch # background-fetch-registration |

Совместимость с браузерами
--------------------------

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


HTMLButtonElement - Интерфейсы веб API

HTMLButtonElement
=================

Интерфейс HTMLButtonElement предоставляет свойства и методы для управления элементами `<button>` (помимо обычного интерфейса `HTMLElement`, он также доступен - по наследованию) .

Свойства
--------

*Наследует свойства от его родителя, `HTMLElement`.*

| Имя | Тип | Описание |
| --- | --- | --- |
| `accessKey` | `DOMString` | Определённая кнопка клавиатуры, дающая доступ к кнопке. |
| `autofocus` | `Boolean` (en-US) |
 Управление должно получить фокус ввода при загрузки страницы, пока
 пользователь не отменяет его, например, набирая на клавиатуре в другом
 контроле. Только один форма-ассоциированный элемент в документе может
 иметь указанный атрибут.
  |
| `disabled` | `Boolean` (en-US) | Контроль выключен, что означает, он не принимает любых кликов. |
| `form` Только для чтения  | `HTMLFormElement` (en-US) |
 Форма этой кнопки связана с ней. Если кнопка потомок элемента формы, то
 этот атрибут ID этого элемента формы.Если форма не связана с
 формой элемента, то атрибут может быть ID любой формы элемента в том же
 документе`, или значение null` если нет совпадений.
  |
| `formAction` | `DOMString` |
 URI ресурса, обрабатывающего информацию, отправленную кнопкой. Если
 задан, то переопределяет `action`
 атрибут `<form>` элемента, который является
 его владельцем.
  |
| `formEncType` | `DOMString` |
 Тип содержимого, используемый для отправки формы на сервер. Если указан
 этот атрибут, то он переопределяет
 `enctype` атрибут элемента
 `<form>`, который является владельцем этого
 элемента.
  |
| `formMethod` | `DOMString` |
 HTTP метод, который браузер использует для отправки формы. Если задан,
 тогда он переопределяет `method`
 атрибут `<form>` своего владельца.
  |
| `formNoValidate` | `Boolean` (en-US) |
 Показывает что форма не будет проверена при отправке. Если задано,
 тогда переопределяет
 `novalidate` атрибут
 `<form>` своего владельца.
  |
| `formTarget` | `DOMString` |
 Имя или ключевое слово, указывающее, где должен отображаться ответ,
 полученный после отправки формы. Если задано, тогда переопределяет
 `target` атрибут
 `<form>` своего владельца.
  |
| `labels` Только для чтения  | `NodeList` |
 Список элементов `<label>`, которые являются
 метками для этой кнопки.
  |
| `menu`
Экспериментальная возможность
 | `HTMLMenuElement` (en-US) |
 Элемент меню, который будет отображаться, если кнопка нажата и имеет тип
 `type="menu"`.
  |
| `name` | `DOMString` |
 Имя объекта отправляемое с формой.
 Если задано, не должно быть пустой строкой.
  |
| `tabIndex` | long |
 Номер, представляющий последовательность перехода между полями при
 нажатии на Tab
  |
| `type` | `DOMString` |
 Указывает поведение кнопки. Это перечисляемый атрибут со следующими
 возможными значениями:
 * `"submit"`: Кнопка отправки формы. Это значение по
 умолчанию, если атрибут не определён,
 или если он динамически изменяется
 на пустое или недопустимое значение.
* `"reset"`: Кнопка сброса формы.
* `"button"`: Кнопка с неопределённым действием.
* `"menu"`: Кнопка показывающая меню (экспериментальная).

Экспериментальная возможность
 |
| `validationMessage` Только для чтения  | `DOMString` |
 A localized message that describes the validation constraints that the
 control does not satisfy (if any). This attribute is the empty string
 if the control is not a candidate for constraint validation (`willValidate`
 is `false`), or it satisfies its constraints.
  |
| `validity` Только для чтения  | `ValidityState` | The validity states that this button is in. |
| `value` | `DOMString` | The current form control value of the button. |
| `willValidate` | `Boolean` (en-US) |
 Indicates whether the button is a candidate for constraint validation.
 It is `false` if any conditions bar it from constraint
 validation.
  |

Methods
-------

*Наследует свойства от его родителя, `HTMLElement`.*

| Name | Return Type | Description |
| --- | --- | --- |
| `checkValidity()` | `Boolean` (en-US) | Not supported for button elements. |
| `setCustomValidity(in DOMString error)` | `void` | Not supported for button elements. |

WIth Gecko-based browser, use the `:-moz-submit-invalid` (en-US) pseudo-class to style submit buttons based on the validation of a form.

Спецификации
------------

| Specification |
| --- |
| HTML Standard # htmlbuttonelement |

Совместимость с браузерами
--------------------------

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

See also
--------

* HTML element implementing this interface: `<button>`


DataTransfer - Интерфейсы веб API

DataTransfer
============

Объект **DataTransfer** используется для хранения данных, перетаскиваемых мышью во время операции **drag and drop**. Он может хранить от одного до нескольких элементов данных, вне зависимости от их типа. Для получения доп. информации об операции drag and drop, см. Drag and Drop

Объект может быть получен из свойства **dataTransfer** всех событий перетаскивания. Он не может быть отдельно создан.

Список свойств
--------------

| Свойство | Тип |
| --- | --- |
| `dropEffect` | `String` |
| `effectAllowed` | `String` |
| `files` | `FileList` |
| `mozCursor`
Non-standard
 | `String` |
| `mozItemCount`
Non-standard
 | `unsigned long` |
| `mozSourceNode`
Non-standard
 | `Node` |
| `mozUserCancelled` | `Boolean` |
| `types` | `DOMStringList` |

Список методов
--------------

| `void addElement(in Element element)` |
| --- |
| `void clearData([in String type])` |
| `String getData(in String type)` |
| `void setData(in String type, in String data)` |
| `void setDragImage(in nsIDOMElement image, in long x, in long y)` |
| `void mozClearDataAt([in String type, in unsigned long index])` |
| `nsIVariant mozGetDataAt(in String type, in unsigned long index)` |
| `void mozSetDataAt(in String type, in nsIVariant data, in unsigned long index)` |
| `StringList mozTypesAt([in unsigned long index])` |

Свойства
--------

### dropEffect

Реальное действие, которое будет выполнено, и единственное возможное значение свойства **effectAllowed.**

Для событий **dragenter** и **dragover**, **dropEffect** будет инициализировано значением, зависящим от того, какое действие запрашивает пользователь. То, как это определяется, зависит от платформы, но, как правило, пользователи могут зажать клавиши-модификаторы для выбора желаемого действия. В обработчике событий для **dragenter** и **dragover**, **dropEffect** следует модифицировать, если запрашиваемое пользователем действие не то, которое требовалось.

Для событий **dragstart**, **drag**, и **dragleave**, **dropEffect** будет инициализировано значением "none". Свойства **dropEffect** можно присвоить любое значение, но оно не будет ни для чего использоваться.

Для событий **drop** и **dragend**, **dropEffect** будет инициализировано значением, которое было назначено свойству **dropEffect** после последнего события **dragenter** или **dragover**.

Возможные значения:

* **copy**: в новом расположении создаётся копия исходного элемента.
* **move**: элемент перемещается в новое расположение.
* **link**: в новом расположении создаётся ссылка на исходный элемент.
* **none**: элемент не может быть брошен.

Присвоение каких-либо других значений не возымеет эффекта и оставит старое значение.

### effectAllowed

Определяет эффекты, которые разрешены для этого перетаскивания. Вы можете указать их в событии `dragstart` чтобы желаемый эффект сработал на перетаскиваемом элементе (что перетаскиваем), или в событии `dragenter` и `dragenter` чтобы желаемый эффект сработал для цели перетаскивания (куда перетаскиваем). В других событиях значение не используется.

Возможные значения:

* **copy**: Копия ресурса может быть сделана в новом месте.
* **move**: Элемент может быть перемещён в новое место.
* **link**: A link may be established to the source at the new location.
* **copyLink**: A copy or link operation is permitted.
* **copyMove**: A copy or move operation is permitted.
* **linkMove**: A link or move operation is permitted.
* **all**: All operations are permitted.
* **none**: the item may not be dropped.
* **uninitialized**: the default value when the effect has not been set, equivalent to all.

Assigning any other value has no effect and retains the old value.

### files

Содержит список локальных файлов доступных на dataTransfer. Если операция перемещения не включала в себя перемещение файлов, то данное свойство будет пустым списком. Неверное обращение по индексу к объекту `FileList` определённым данным свойством вернёт null.

#### Пример

Данный пример демонстрирует перетаскивание файлов в окно браузера:

http://jsfiddle.net/9C2EF/

### types

Содержит список типов форматов данных в порядке добавления данных. Если ничего не было добавлено, то будет вернут пустой список.

### mozCursor

The drag cursor's state. This is primarily used to control the cursor during tab drags.

**Примечание:** This method is currently only implemented on Windows.

#### Possible values

`auto`

Uses the default system behavior.

`default`

Uses the default Gecko behavior, which is to set the cursor to an arrow during the drag operation.

**Примечание:** If you specify any value other than "default", "auto" is assumed.

### mozItemCount

The number of items being dragged.

**Примечание:** This property is Gecko-specific.

### mozSourceNode

The `Node` over which the mouse cursor was located when the button was pressed to initiate the drag operation. This value is `null` for external drags or if the caller can't access the node.

**Примечание:** This property is Gecko-specific.

### mozUserCancelled

This property applies only to the `dragend` event, and is `true` if the user canceled the drag operation by pressing escape. It will be `false` in all other cases, including if the drag failed for any other reason, for instance due to a drop over an invalid location. This property is not currently implemented on Linux.

**Примечание:** This property is Gecko-specific.

Методы
------

### addElement()

Данный метод устанавливает источник перетаскивания. Обычно вы его не изменяете, но он влияет на то, на каком узле запускаются события drag и dragend. По умолчанию целью является узел который перетаскивали.
```

 void addElement(
   in Element element
 );
```

###### Параметры

`element`

Элемент для добавления.

### clearData()

Удаление данных, связанные с указанным типом. Аргумент **type** является необязательным. Если **type** пуст или не указан, тогда данные, связанные со всеми типами удаляются. Если данные для указанного типа не существуют или передача данных не содержит данных, тогда этот метод не будет делать ничего.
```

 void clearData(
   [optional] in String type
 );
```

###### Параметры

`type`

Тип данных для удаления.

### getData()

Возвращает данные для указанного типа или пустую строку, если данные для указанного типа не существуют или передаваемая сущность не содержит данных.

Ошибка безопасности возникает при попытке получить данные во время перетаскивания из другого домена, иначе вызывающий объект не будет иметь доступа. Эти данные будут доступны только после того, как элемент будет отпущен в случае события **drop**.
```

 String getData(
   in String type
 );
```

###### Параметры

Тип данных который будет возвращён.

`type`

### setData()

Установка данных для указываемого типа. Если данные для **type** не существуют, тогда они добавляются в конце, так что последним элементом в списке типов будет новый формат. Если данные для **type** уже существуют, существующие данные заменяются в том же положении. То есть порядок списка типов не изменяется при замене данных одного и того же типа.
```

 void setData(
   in String type,
   in String data
 );
```

###### Параметры

`type`

Тип добавляемых данных.

`data`

Данные для добавления.

### setDragImage()

Устанавливает изображение, которое будет использоваться для перетаскивания если нужно. В большинстве случаев это не будет установлено, так как изображение по умолчанию создаётся из перетаскиваемого узла.

Если узел является HTML-элементом img, HTML-элементом canvas или XUL-элементом изображения, тогда используются данные изображения. В противном случае изображение должно быть видимым узлом, и из этого будет создано перетаскиваемое изображение. Если изображение равно null, любое пользовательское изображение перетаскиваемое очищается и вместо него используется значение по умолчанию.

Координаты указывают смещение в изображении, где должен находиться курсор мыши. Например, для центрирования изображения используйте значения, которые составляют половину ширины и высоты изображения.
```

 void setDragImage(
   in Element image,
   in long x,
   in long y
 );
```

###### Параметры

`image`

Элемент используемый в качестве изображения обратной связи при перетаскивании

`x`

Горизонтальное смещение внутри изображения.

`y`

Вертикальное смещение внутри изображения.

### mozClearDataAt()

Removes the data associated with the given format for an item at the specified index. The index is in the range from zero to the number of items minus one.

If the last format for the item is removed, the entire item is removed, reducing `mozItemCount` by one.

If the `format` list is empty, then the data associated with all formats is removed. If the format is not found, then this method has no effect.

**Примечание:** This method is Gecko-specific.
```

 void mozClearDataAt(
   [optional] in String type,
   in unsigned long index
 );
```

###### Parameters

`type`

The type of data to remove.

`index`

The index of the data to remove.

### mozGetDataAt()

Retrieves the data associated with the given format for an item at the specified index, or null if it does not exist. The index should be in the range from zero to the number of items minus one.

**Примечание:** This method is Gecko-specific.
```

 nsIVariant mozGetDataAt(
   [optional] in String type,
   in unsigned long index
 );
```

###### Parameters

`type`

The type of data to retrieve.

`index`

The index of the data to retrieve.

### mozSetDataAt()

A data transfer may store multiple items, each at a given zero-based index. `mozSetDataAt()` may only be called with an index argument less than `mozItemCount` in which case an existing item is modified, or equal to `mozItemCount` in which case a new item is added, and the `mozItemCount` is incremented by one.

Data should be added in order of preference, with the most specific format added first and the least specific format added last. If data of the given format already exists, it is replaced in the same position as the old data.

The data should be either a string, a primitive boolean or number type (which will be converted into a string) or an `nsISupports`.

**Примечание:** This method is Gecko-specific.
```

 void mozSetDataAt(
   [optional] in String type,
   in nsIVariant data,
   in unsigned long index
 );
```

###### Parameters

`type`

The type of data to add.

`data`

The data to add.

`index`

The index of the data to add.

### mozTypesAt()

Holds a list of the format types of the data that is stored for an item at the specified index. If the index is not in the range from 0 to the number of items minus one, an empty string list is returned.

**Примечание:** This method is Gecko-specific.
```

 nsIVariant mozTypesAt(
   in unsigned long index
 );
```

###### Parameters

`index`

The index of the data for which to retrieve the types.

See also
--------

Drag and Drop


Руководство по DOM - Интерфейсы веб API

Руководство по DOM
==================

**Объектная Модель Документа (*DOM*)** является программным интерфейсом для HTML, XML и SVG документов. Это обеспечивает структурированное представление документа (дерева), и определяет способ, по которому структура может быть доступна для программы, для изменения структуры документа, его стиля и содержания. DOM обеспечивает представление документа в виде структурированной группы узлов и объектов, которые имеют свойства и методы. По сути, она связывает веб -страницы со скриптами или языками программирования.

DOM чаще всего используется в JavaScript, но не является его частью, поэтому иногда с DOM работают в других языках.

Введение в DOM доступно.

DOM интерфейсы
--------------

* `Attr`
* `CharacterData`
* `ChildNode`
Экспериментальная возможность
* `Comment`
* `CustomEvent` (en-US)
* `Document`
* `DocumentFragment`
* `DocumentType` (en-US)
* `DOMError` (en-US)
* `DOMException` (en-US)
* `DOMImplementation`
* `DOMString`
* `DOMTimeStamp` (en-US)
* `DOMSettableTokenList`
* `DOMStringList`
* `DOMTokenList`
* `Element`
* `Event`
* `EventTarget`
* `HTMLCollection`
* `MutationObserver`
* `MutationRecord` (en-US)
* `Node`
* `NodeFilter` (en-US)
* `NodeIterator` (en-US)
* `NodeList`
* `ParentNode`
Экспериментальная возможность
* `ProcessingInstruction` (en-US)
* `Promise` (en-US)
Экспериментальная возможность
* `PromiseResolver` (en-US)
Экспериментальная возможность
* `Range`
* `Text`
* `TreeWalker` (en-US)
* `URL`
* `Window`
* `Worker`
* `XMLDocument`
Экспериментальная возможность
Устаревшие интерфейсы
---------------------

Объектная модель документа находится в процессе значительного упрощения. Для того, чтобы достигнуть этого следующие интерфейсы, присутствующие на различных DOM level 3 или более ранних спецификациях были удалены. До сих пор неясно, будут ли некоторые из них возвращены, но на данный момент они должны быть рассмотрены как устаревшие, и их использования следует избегать:

* `CDATASection`
* `DOMConfiguration`
* `DOMErrorHandler`
* `DOMImplementationList`
* `DOMImplementationRegistry`
* `DOMImplementationSource`
* `DOMLocator`
* `DOMObject`
* `DOMUserData`
* `Entity`
* `EntityReference`
* `NamedNodeMap`
* `NameList`
* `Notation`
* `TypeInfo`
* `UserDataHandler`
HTML интерфейсы
---------------

Документ, содержащий HTML описывается с помощью `HTMLDocument` интерфейса. Обратите внимание, что HTML спецификация также расширяет `Document` интерфейс.

`Объект HTMLDocument` также даёт доступ к следующим возможностям браузера: вкладки, окна, в которых отрисовывается страница, используя интерфейс `Window`, ассоциированный с ним `Style` (обычно CSS), история браузера, относящаяся к контексту, `History`, в конце концов, `Selection` (en-US) в документе.

### Интерфейсы HTML-элементов

* `HTMLAnchorElement`
* `HTMLAppletElement`
* `HTMLAreaElement`
* `HTMLAudioElement`
* `HTMLBaseElement`
* `HTMLBodyElement`
* `HTMLBRElement`
* `HTMLButtonElement`
* `HTMLCanvasElement`
* `HTMLDataElement`
* `HTMLDataListElement` (en-US)
* `HTMLDirectoryElement`
* `HTMLDivElement`
* `HTMLDListElement` (en-US)
* `HTMLElement`
* `HTMLEmbedElement` (en-US)
* `HTMLFieldSetElement` (en-US)
* `HTMLFontElement` (en-US)
* `HTMLFormElement` (en-US)
* `HTMLFrameElement`
* `HTMLFrameSetElement` (en-US)
* `HTMLHeadElement`
* `HTMLHeadingElement`
* `HTMLHtmlElement` (en-US)
* `HTMLHRElement` (en-US)
* `HTMLIFrameElement` (en-US)
* `HTMLImageElement`
* `HTMLInputElement` (en-US)
* `HTMLLabelElement` (en-US)
* `HTMLLegendElement` (en-US)
* `HTMLLIElement` (en-US)
* `HTMLLinkElement`
* `HTMLMapElement` (en-US)
* `HTMLMediaElement`
* `HTMLMenuElement` (en-US)
* `HTMLMetaElement` (en-US)
* `HTMLMeterElement` (en-US)
* `HTMLModElement` (en-US)
* `HTMLObjectElement` (en-US)
* `HTMLOListElement` (en-US)
* `HTMLOptGroupElement` (en-US)
* `HTMLOptionElement` (en-US)
* `HTMLOutputElement` (en-US)
* `HTMLParagraphElement` (en-US)
* `HTMLParamElement` (en-US)
* `HTMLPreElement` (en-US)
* `HTMLProgressElement` (en-US)
* `HTMLQuoteElement` (en-US)
* `HTMLScriptElement`
* `HTMLSelectElement` (en-US)
* `HTMLSourceElement` (en-US)
* `HTMLSpanElement` (en-US)
* `HTMLStyleElement` (en-US)
* `HTMLTableElement`
* `HTMLTableCaptionElement` (en-US)
* `HTMLTableCellElement` (en-US)
* `HTMLTableDataCellElement` (en-US)
* `HTMLTableHeaderCellElement` (en-US)
* `HTMLTableColElement` (en-US)
* `HTMLTableRowElement` (en-US)
* `HTMLTableSectionElement` (en-US)
* `HTMLTextAreaElement` (en-US)
* `HTMLTimeElement`
* `HTMLTitleElement` (en-US)
* `HTMLTrackElement`
* `HTMLUListElement` (en-US)
* `HTMLUnknownElement`
* `HTMLVideoElement`
### Другие интерфейсы

* `CanvasRenderingContext2D`
* `CanvasGradient`
* `CanvasPattern`
* `TextMetrics` (en-US)
* `ImageData`
* `CanvasPixelArray` (en-US)
* `NotifyAudioAvailableEvent`
* `HTMLAllCollection` (en-US)
* `HTMLFormControlsCollection` (en-US)
* `HTMLOptionsCollection` (en-US)
* `HTMLPropertiesCollection`
* `DOMStringMap`
* `RadioNodeList` (en-US)
* `MediaError`
### Устаревшие HTML интерфейсы

* `HTMLIsIndexElement`
SVG интерфейсы
--------------

### Интерфейсы SVG элементов

* `SVGAElement`
* `SVGAltGlyphElement`
* `SVGAltGlyphDefElement`
* `SVGAltGlyphItemElement`
* `SVGAnimationElement` (en-US)
* `SVGAnimateElement` (en-US)
* `SVGAnimateColorElement` (en-US)
* `SVGAnimateMotionElement` (en-US)
* `SVGAnimateTransformElement` (en-US)
* `SVGCircleElement` (en-US)
* `SVGClipPathElement` (en-US)
* `SVGColorProfileElement`
* `SVGComponentTransferFunctionElement` (en-US)
* `SVGCursorElement` (en-US)
* `SVGDefsElement` (en-US)
* `SVGDescElement` (en-US)
* `SVGElement` (en-US)
* `SVGEllipseElement` (en-US)
* `SVGFEBlendElement` (en-US)
* `SVGFEColorMatrixElement` (en-US)
* `SVGFEComponentTransferElement` (en-US)
* `SVGFECompositeElement` (en-US)
* `SVGFEConvolveMatrixElement` (en-US)
* `SVGFEDiffuseLightingElement` (en-US)
* `SVGFEDisplacementMapElement` (en-US)
* `SVGFEDistantLightElement` (en-US)
* `SVGFEFloodElement` (en-US)
* `SVGFEGaussianBlurElement` (en-US)
* `SVGFEImageElement` (en-US)
* `SVGFEMergeElement` (en-US)
* `SVGFEMergeNodeElement` (en-US)
* `SVGFEMorphologyElement` (en-US)
* `SVGFEOffsetElement` (en-US)
* `SVGFEPointLightElement` (en-US)
* `SVGFESpecularLightingElement` (en-US)
* `SVGFESpotLightElement` (en-US)
* `SVGFETileElement` (en-US)
* `SVGFETurbulenceElement` (en-US)
* `SVGFEFuncRElement` (en-US)
* `SVGFEFuncGElement` (en-US)
* `SVGFEFuncBElement` (en-US)
* `SVGFEFuncAElement` (en-US)
* `SVGFilterElement` (en-US)
* `SVGFilterPrimitiveStandardAttributes`
* `SVGFontElement` (en-US)
* `SVGFontFaceElement` (en-US)
* `SVGFontFaceFormatElement` (en-US)
* `SVGFontFaceNameElement` (en-US)
* `SVGFontFaceSrcElement` (en-US)
* `SVGFontFaceUriElement` (en-US)
* `SVGForeignObjectElement` (en-US)
* `SVGGElement` (en-US)
* `SVGGlyphElement` (en-US)
* `SVGGlyphRefElement` (en-US)
* `SVGGradientElement` (en-US)
* `SVGHKernElement` (en-US)
* `SVGImageElement` (en-US)
* `SVGLinearGradientElement` (en-US)
* `SVGLineElement` (en-US)
* `SVGMarkerElement` (en-US)
* `SVGMaskElement` (en-US)
* `SVGMetadataElement` (en-US)
* `SVGMissingGlyphElement` (en-US)
* `SVGMPathElement` (en-US)
* `SVGPathElement` (en-US)
* `SVGPatternElement` (en-US)
* `SVGPolylineElement` (en-US)
* `SVGPolygonElement` (en-US)
* `SVGRadialGradientElement` (en-US)
* `SVGRectElement` (en-US)
* `SVGScriptElement` (en-US)
* `SVGSetElement` (en-US)
* `SVGStopElement` (en-US)
* `SVGStyleElement` (en-US)
* `SVGSVGElement` (en-US)
* `SVGSwitchElement` (en-US)
* `SVGSymbolElement` (en-US)
* `SVGTextElement`
* `SVGTextPathElement` (en-US)
* `SVGTitleElement` (en-US)
* `SVGTRefElement` (en-US)
* `SVGTSpanElement` (en-US)
* `SVGUseElement` (en-US)
* `SVGViewElement` (en-US)
* `SVGVKernElement` (en-US)
### Интерфейсы SVG данных

DOM API для типов данных, используемых в определениях SVG свойств и атрибутов.

**Примечание:** Начиная с Gecko 5.0, следующие относящиеся к SVG DOM интерфейсы, представляя списки объектов, индексируются и к ним можно иметь доступ как к массивам; к тому же, у них есть свойство длины, обозначающее количество элементов в списках: `SVGLengthList` (en-US), `SVGNumberList` (en-US), `SVGPathSegList` и `SVGPointList` (en-US).

#### Статический тип

* `SVGAngle` (en-US)
* `SVGColor`
* `SVGICCColor`
* `SVGElementInstance`
* `SVGElementInstanceList`
* `SVGLength` (en-US)
* `SVGLengthList` (en-US)
* `SVGMatrix` (en-US)
* `SVGNumber` (en-US)
* `SVGNumberList` (en-US)
* `SVGPaint`
* `SVGPoint` (en-US)
* `SVGPointList` (en-US)
* `SVGPreserveAspectRatio` (en-US)
* `SVGRect` (en-US)
* `SVGStringList` (en-US)
* `SVGTransform` (en-US)
* `SVGTransformList` (en-US)

#### Анимированный тип

* `SVGAnimatedAngle` (en-US)
* `SVGAnimatedBoolean` (en-US)
* `SVGAnimatedEnumeration` (en-US)
* `SVGAnimatedInteger` (en-US)
* `SVGAnimatedLength` (en-US)
* `SVGAnimatedLengthList` (en-US)
* `SVGAnimatedNumber` (en-US)
* `SVGAnimatedNumberList` (en-US)
* `SVGAnimatedPreserveAspectRatio` (en-US)
* `SVGAnimatedRect` (en-US)
* `SVGAnimatedString` (en-US)
* `SVGAnimatedTransformList` (en-US)
### Относящиеся к SMIL

* `ElementTimeControl`
* `TimeEvent` (en-US)
### Другие SVG интерфейсы

* `SVGAnimatedPathData`
* `SVGAnimatedPoints` (en-US)
* `SVGColorProfileRule`
* `SVGCSSRule`
* `SVGExternalResourcesRequired`
* `SVGFitToViewBox`
* `SVGLangSpace`
* `SVGLocatable`
* `SVGRenderingIntent` (en-US)
* `SVGStylable` (en-US)
* `SVGTests`
* `SVGTextContentElement`
* `SVGTextPositioningElement` (en-US)
* `SVGTransformable`
* `SVGUnitTypes` (en-US)
* `SVGURIReference` (en-US)
* `SVGViewSpec`
* `SVGZoomAndPan`
Смотрите также
--------------

* Примеры DOM


Streams API - Интерфейсы веб API

Streams API
===========

**Экспериментальная возможность:** **Это экспериментальная технология**
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

Streams API (API обработки потоков) позволяет программно получить доступ с помощью JavaScript к полученным по сети потокам данных и обработать их по желанию разработчика.

Концепция и использование
-------------------------

Потоковая передача данных предполагает разбивку ресурса, который вы хотите получить через сеть, на мелкие кусочки и затем их обработку часть за частью. Это то, что браузеры делают в любом случае получения ассетов, чтобы показать их на страницах — видео буфер и другие ресурсы доступные для воспроизведения, и иногда это заметно на изображениях, загружающихся частями.

Но методы работы с этим и данные никогда прежде не были доступны для JavaScript. Раньше, если мы хотели обработать часть ресурса, нам всё равно пришлось бы загрузить весь файл (будь то видео, текстовый файл и т.п.), мы были бы обязаны скачать файл целиком, дождаться пока он будет приведён к необходимому формату и только потом работать с файлом после его полной загрузки.

С помощью потоков доступных в JavaScript меняется все — вы можете начать обрабатывать данные бит за битом как только данные появляются на стороне клиента, без необходимости генерировать буфер, строку или какой либо объект из потока.

![](/ru/docs/Web/API/Streams_API/concept.png)

Но это не все преимущества — вы можете отловить процессы старта и завершения потока, связывать потоки в цепочки, обрабатывать ошибки или прерывать их если это необходимо, реагировать на скорость с которой поток считывается.

Основное использование потоков крутиться вокруг создания ответов доступными в виде потоков. Например, тело ответа `Body` возвращённого успешным fetch запросом может быть представлено как `ReadableStream` (en-US), и вы можете прочитать его используя ридер полученный методом `ReadableStream.getReader()` (en-US), отменить его с помощью `ReadableStream.cancel()` (en-US), и тп.

Более сложные примеры задействуют создание ваших собственных потоков с помощью конструктора `ReadableStream()` (en-US), например чтобы обработать данные внутри service worker.

Вы также можете записывать данные в потоки используя `WritableStream` (en-US).

**Примечание:** вы можете найти больше информации о теории и практике использования потоков в следующих статьях — Концепты API потоков (en-US) , Использование потоков на чтение (en-US), и Использование потоков на запись (en-US).

Интерфейсы
----------

### Потоки чтения данных

`ReadableStream` (en-US)

Представляет собой считываемый поток данных. Он может быть использован чтобы обработать потоки ответов от Fetch API, или созданный разработчиком поток (например произвольный `ReadableStream()` (en-US)).

`ReadableStreamDefaultReader` (en-US)

Представляет собой считывателя, который может быть использован чтобы считать данные поставляемые из сети (например fetch запрос).

`ReadableStreamDefaultController` (en-US)

Представляет собой контроллер позволяющий контролировать состояние `ReadableStream` (en-US) и очереди внутри него. Является контроллером по умолчанию для не байтовых потоков.

### Writable streams

`WritableStream` (en-US)

Предоставляет стандартную абстракцию, известную как раковина, для записи потоков по месту назначения. Этот объект идёт вместе со встроенными методами контроля обратного потока и созданием очередей.

`WritableStreamDefaultWriter` (en-US)

Представляет запись потока по умолчанию, которая может использоваться для записи фрагментов данных в записываемый поток.

`WritableStreamDefaultController` (en-US)

Представляет собой контроллер состояния `WritableStream` (en-US). При создании `WritableStream`, создаётся также соответствующий экземпляр `WritableStreamDefaultController`.

### Дополнительные API и операции по работе с потоками

`ByteLengthQueuingStrategy` (en-US)

Предоставляет встроенную стратегию длины байт-очереди, которая может быть использована при построении потоков.

`CountQueuingStrategy` (en-US)

Предоставляет встроенную стратегию организации очередей подсчёта чанков, которая может использоваться при построении потоков.

### Дополнения к другим API

`Request`

При создании нового объекта типа `Request`, вы можете добавить `ReadableStream` (en-US) в свойство `body` его словаря `RequestInit`. Этот объект типа `Request` может быть отправлен в `fetch()`, чтобы начать загрузку потока.

`Body`

Ответ `Body` возвращённый успешному fetch запросу вывешивается по умолчанию как `ReadableStream` (en-US), и может иметь получателя прикреплённого к нему и тп.

### Интерфейсы в дополнение к ByteStream

**Предупреждение:** **Важно**: данные интерфейсы пока не реализованы, и были подняты вопросы о том, находятся ли детали спецификации в достаточно законченном состоянии для их реализации. Со временем это может измениться

`ReadableStreamBYOBReader` (en-US)

Represents a BYOB ("bring your own buffer") reader that can be used to read stream data supplied by the developer (e.g. a custom `ReadableStream()` (en-US) constructor).

`ReadableByteStreamController` (en-US)

Контроллер позволяющий обрабатывать состояние `ReadableStream` (en-US) и внутреннюю очередь. Байтовые контроллеры для байтовых потоков.

`ReadableStreamBYOBRequest` (en-US)

Represents a pull into request in a `ReadableByteStreamController` (en-US).

Примеры
-------

Мы создали папку с примерами, которые идут вместе с документацией к API потоков — смотрите mdn/dom-examples/streams. Можно найти такие примеры как:

* Simple stream pump: Этот пример показывает как использовать поток чтения данных и передавать его данные в другой поток.
* Сделать черно-белый PNG: Пример показывает конвертацию потока данных PNG изображения в черно-белый формат.
* Простой произвольный поток: В этом примере показано, как использовать пользовательский поток для создания случайных строк, помещать их в очередь как блоки, а затем считывать их обратно.
* Simple tee example: Этот пример расширяет первый пример, показывая как поток может быть связан, и оба результирующих потока будут прочитаны независимо.
* Simple writer: This example shows how to to write to a writable stream, then decode the stream and write the contents to the UI.
* Unpack chunks of a PNG: This example shows how `pipeThrough()` (en-US) can be used to transform a ReadableStream into a stream of other data types by transforming a data of a PNG file into a stream of PNG chunks.

Примеры от других разработчиков:

* Progress Indicators with Streams, Service Workers, & Fetch.
Спецификации
------------

| Specification |
| --- |
| Streams Living Standard |

Совместимость с браузерами
--------------------------

### Поток записи данных

### api.ReadableStream

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

### api.WritableStream

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

Смотрите также
--------------

* Streams API концепт (en-US)
* Использование потоков чтения (en-US)
* Использование потоков записи (en-US)


CanvasCaptureMediaStreamTrack - Интерфейсы веб API

CanvasCaptureMediaStreamTrack
=============================

**`CanvasCaptureMediaStreamTrack`** Интерфейс представляет собой видеодорожку, содержащуюся в `MediaStream`, генерируемую из `<canvas>` после вызова `HTMLCanvasElement.captureStream ()`.

Часть API захвата мультимедиа и потоков (en-US).

Свойства
--------

*Этот интерфейс наследует свойства своего родителя, `MediaStreamTrack`.*

`CanvasCaptureMediaStreamTrack.холст` Только для чтения

Возвращает объект `HTMLCanvasElement`, поверхность которого захватывается в режиме реального времени.

Методы
------

*Этот интерфейс наследует методы своего родителя, `MediaStreamTrack`.*

`CanvasCaptureMediaStreamTrack.requestFrame()` (en-US)

Вручную заставляет кадр быть захваченным и отправленным в поток. Это позволяет приложениям, которые хотят непосредственно указать время захвата кадра, сделать это, если они указали a `frameRate` из 0 при вызове `captureStream()`.

Спецификации
------------

| Specification |
| --- |
| Media Capture from DOM Elements # the-canvascapturemediastreamtrack |

Совместимость с браузерами
--------------------------

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

Смотреть также
--------------

* `HTMLCanvasElement.captureStream ()` чтобы начать захват кадров с холста


Beacon API - Интерфейсы веб API

Beacon API
==========

**Экспериментальная возможность:** **Это экспериментальная технология**
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

Интерфейс **`Beacon`** используется для планирования асинхронного и неблокирующего запроса к веб-серверу. **`Beacon`** запросы используют метод HTTP POST, и обычно не требуют ответа. Запросы гарантированно будут инициированы до того, как страница будет выгружена, и они выполняются до конца, не требуя блокирующего запроса (например `XMLHttpRequest`).

Например, вариантом использования Beacon API может быть логирование активности или отправка аналитики на сервер.

Пример кода интерфейсов, описанных в этом документе, включён в раздел *Использование Beacon API (en-US)*.

Зачем использовать Beacon?
--------------------------

Интерфейс `Beacon` отвечает потребностям аналитического и диагностического кода, который обычно пытается отправить данные на веб-сервер перед выгрузкой документа. Отправка данных хоть на секунду раньше может привести к упущенной возможности сбора данных. В любом случае, обеспечение того, чтобы данные отправлялись во время выгрузки документа, является чем-то, что традиционно было трудным для разработчиков.

Пользовательские браузеры обычно игнорируют асинхронные `XMLHttpRequests` сделанные в обработчике выгрузки. Для решения этой проблемы, аналитический и диагностический код обычно создаёт синхронный `XMLHttpRequest` в обработчике `unload (en-US)` или `beforeunload (en-US)` для отправки данных. Синхронный `XMLHttpRequest` заставляет браузер отложить выгрузку документа и делает следующую навигацию более медленной. Следующая страница ничего не может сделать, чтобы избежать этого ощущения низкой производительности при загрузке страницы.

Есть и другие методы, используемые для проверки предоставления данных. Одним из таких методов является задержка отправки данных путём создания элемента Image и установки его атрибута `src` в обработчике выгрузки. Поскольку большинство браузеров откладывают выгрузку для завершения ожидающей загрузки изображения, данные могут быть отправлены во время выгрузки. Другой метод заключается в создании неработающего цикла, который в течение нескольких секунд будет висеть в обработчике выгрузки, чтобы задержать выгрузку и отправить данные на сервер.

Эти методы представляют плохие шаблоны программирования, некоторые из них ненадёжны и приводят к восприятию плохой производительности при загрузке страницы для следующей навигации. API-интерфейс Beacon предоставляет стандартный способ решения этих проблем.

Глобальный контекст
-------------------

Интерфейс `Beacon API's` предоставляет метод `Navigator.sendBeacon()`, который используется для отправки *beacon* данных на сервер в *глобальный браузерный контекст*. Метод принимает два аргумента: URL и данные для отправки в запросе. Аргумент data является необязательным, и его тип может быть `ArrayBufferView` (en-US), `Blob`, `DOMString` или  `FormData` . Если браузер успешно поставил в очередь запрос на доставку, то метод возвращает `true` либо возвращает `false` в противном случае.

Рабочий контекст
----------------

Интерфейс `Beacon API's` предоставляет метод `Navigator.sendBeacon()`, который используется для отправки *beacon* данных на сервер из *`worker global scope` (en-US)*. Метод принимает два аргумента: URL-адрес и данные для отправки в запросе. Аргумент `data` является необязательным, и его тип может быть `ArrayBufferView` (en-US), `Blob`, `DOMString`, или `FormData`. Если браузер успешно поставил в очередь запрос на доставку, то метод возвращает `true` либо возвращает `false` в противном случае.

Совместимость с браузерами
--------------------------

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

Смотрите также
--------------

* `WorkerGlobalScope` (en-US)
* Beacon standard
* Beacon CanIUse data
* Intercepting beacons through service workers; Ehsan Akhgari; 2015-Apr-08