AnalyserNode: метод getFloatFrequencyData()

Базовая поддержка Широко распространена

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с апреля 2021 года.

Метод getFloatFrequencyData() интерфейса AnalyserNode копирует текущие данные частоты в массив Float32Array, переданный в него.

Каждый элемент массива представляет собой значение децибел для определённой частоты. Частоты распределены линейно от 0 до 1/2 частоты дискретизации. Например, для частоты дискретизации 48000 Гц последний элемент массива будет представлять значение децибел для 24000 Гц.

Если вам нужна более высокая производительность и точность не имеет значения, вы можете использовать AnalyserNode.getByteFrequencyData(), который работает с массивом Uint8Array.

Синтаксис

getFloatFrequencyData(array)

Параметры

array: Массив Float32Array, в который будут скопированы данные частотной области. Для любого беззвучного образца значение равно -Infinity. Если массив содержит меньше элементов, чем AnalyserNode.frequencyBinCount, избыточные элементы отбрасываются. Если элементов больше, чем нужно, избыточные элементы игнорируются.

Возвращаемое значение

None (undefined).

Примеры

const audioCtx = new AudioContext();
const analyser = audioCtx.createAnalyser();
// Float32Array should be the same length as the frequencyBinCount
const myDataArray = new Float32Array(analyser.frequencyBinCount);
// fill the Float32Array with data returned from getFloatFrequencyData()
analyser.getFloatFrequencyData(myDataArray);

Отрисовка спектра

Следующий пример демонстрирует базовое использование AudioContext для подключения MediaElementAudioSourceNode к AnalyserNode. Пока воспроизводится аудио, данные частоты собираются повторно с помощью requestAnimationFrame() и отрисовывается "график типа Winamp" на элементе <canvas>.

Более полные примеры/информация доступны в демо Voice-change-O-matic (см. app.js, строки 108–193 для соответствующего кода).

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

    //Create audio source
    //Here, we use an audio file, but this could also be e.g. microphone input
    const audioEle = new Audio();
    audioEle.src = "my-audio.mp3"; //insert file name here
    audioEle.autoplay = true;
    audioEle.preload = "auto";
    const audioSourceNode = audioCtx.createMediaElementSource(audioEle);

    //Create analyser node
    const analyserNode = audioCtx.createAnalyser();
    analyserNode.fftSize = 256;
    const bufferLength = analyserNode.frequencyBinCount;
    const dataArray = new Float32Array(bufferLength);

    //Set up audio node network
    audioSourceNode.connect(analyserNode);
    analyserNode.connect(audioCtx.destination);

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

    function draw() {
      //Schedule next redraw
      requestAnimationFrame(draw);

      //Get spectrum data
      analyserNode.getFloatFrequencyData(dataArray);

      //Draw black background
      canvasCtx.fillStyle = "rgb(0 0 0)";
      canvasCtx.fillRect(0, 0, canvas.width, canvas.height);

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

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

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

Спецификация
Web Audio API # dom-analysernode-getfloatfrequencydata

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`getFloatFrequencyData`	14	12	25	15	6	18	25	14	6	1.0	4.4.3

См. также

Использование Web Audio API

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode/getFloatFrequencyData