Movatterモバイル変換


[0]ホーム

URL:


  1. Веб-технологии для разработчиков
  2. Интерфейсы веб API
  3. AnalyserNode

This page was translated from English by the community.Learn more and join the MDN Web Docs community.

View in EnglishAlways switch to English

AnalyserNode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨июль 2015 г.⁩.

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.

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

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

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

EventTarget AudioNode AnalyserNode

Constructor

AnalyserNode()

Creates a new instance of anAnalyserNode object.

Properties

Inherits properties from its parent,AudioNode.

AnalyserNode.fftSize

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

AnalyserNode.frequencyBinCountТолько для чтения

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

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 usinggetByteFrequencyData().

AnalyserNode.maxDecibels

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 usinggetByteFrequencyData().

AnalyserNode.smoothingTimeConstant

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

Copies the current frequency data into aFloat32Array array passed into it.

AnalyserNode.getByteFrequencyData()

Copies the current frequency data into aUint8Array (unsigned byte array) passed into it.

AnalyserNode.getFloatTimeDomainData()

Copies the current waveform, or time-domain, data into aFloat32Array array passed into it.

AnalyserNode.getByteTimeDomainData()

Copies the current waveform, or time-domain, data into aUint8Array (unsigned byte array) passed into it.

Examples

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

Basic usage

The following example shows basic usage of anAudioContext to create anAnalyserNode, thenrequestAnimationFrame 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 ourVoice-change-O-matic demo (seeapp.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 sourcefunction 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

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

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

Help improve MDN

Learn how to contribute

This page was last modified on byMDN contributors.


[8]ページ先頭

©2009-2025 Movatter.jp