Почему я получаю зеркальные пики в частотных спектрах Javascript AudioContext AnalyserNode вокруг определенных частот? ⇐ Html

[Anonymous]

У меня возникла проблема с Javascript AudioContext, использующим AnalyserNode для получения данных о частоте с микрофона на HTML-странице. Используя getByteFrequencyData() для получения информации о частоте и одночастотного входа (мой был сгенерирован генератором телефонного сигнала), я получаю удвоенные пики, когда сигнал близок к 8 кГц и 16 кГц и отражается вокруг этих точек - чуть ниже дает зеркальный пик вверху, а чуть выше - зеркально ниже. Частота дискретизации микрофона составляет 48 кГц.
Вопрос: Это ошибка (или ожидаемое поведение) в AnalyserNode? Или я что-то упустил, или это из моего кода?
Я разместил MRE ниже, но я также проверил несколько онлайн-примеров, показывающих AnalyserNode, и обнаружил ту же проблему.
Что я пробовал
Я также попробовал отдельную библиотеку БПФ и AnalyserNode.getFloatTimeDomainData(), чтобы получить данные формы сигнала, и получите одинаковые зеркальные пики.
Много разных компьютеров и микрофонов.
Изображения ниже показывают пик далеко, около 8 кГц, а также временной график, показывающий пересечение. Размер БПФ составляет 2048.
Я не думаю, что это должно быть отражение частоты Найквиста. Частота дискретизации составляет 48 кГц, поэтому частота Найквиста составляет 24 кГц, что является верхней границей моего спектрального графика. Кажется, они на 1/3 частоты? Я увеличил размер БПФ, что, как и ожидалось, увеличило спектральное разрешение, но удвоенные пики все еще присутствовали, и положение осталось прежним. Я также попробовал установить для SmoothingTimeConstant значение 0.
Минимальный воспроизводимый пример

Код: Выделить всё

Start Spectrum




const canvas = document.getElementById('spectrumCanvas');
const ctx = canvas.getContext('2d');

document.getElementById("startButton").addEventListener('click', start)

function start() {
audioContext = new AudioContext();
analyser = audioContext.createAnalyser();
analyser.fftSize = 2048;
bufferLength = analyser.frequencyBinCount;
dataArray = new Uint8Array(bufferLength);

// Request access to the microphone
navigator.mediaDevices.getUserMedia({ audio: true }).then(function (stream) {
const source = audioContext.createMediaStreamSource(stream);
source.connect(analyser);
drawSpectrum();
})
}

function drawSpectrum() {
const WIDTH = canvas.width;
const HEIGHT = canvas.height;
analyser.getByteFrequencyData(dataArray);

ctx.fillStyle = 'rgb(0, 0, 0)';
ctx.fillRect(0, 0, WIDTH, HEIGHT); //Clear spectrum
ctx.fillStyle = 'rgb(255, 255, 255)';

//Draw new spectrum data as bars
let barWidth = WIDTH / bufferLength;
let barHeight;
for (let i = 0; i < bufferLength; i++) {
barHeight = dataArray[i];
ctx.fillRect(i * WIDTH / bufferLength, HEIGHT - barHeight, barWidth, barHeight);
}
requestAnimationFrame(drawSpectrum);
}

Одна частота ниже 8 кГц
Одна частота около 8 кГц
При пересечении 8 кГц появляется двойной пик

Подробнее здесь: https://stackoverflow.com/questions/797 ... e-frequenc