Web-Audio Api и Javascript: получите правильный выбор с микрофона
Я провожу некоторые эксперименты и делаю некоторые визуализации на основе данных, полученных микрофоном в режиме реального времени.
В этом случае я хочу создать такую визуализацию: https://онлайн-диктофон.com/es/
или, может быть, аудиорекордер Mac OS
У меня есть полный пример кода ниже, пожалуйста, ознакомьтесь, но мой вопрос в том, что я использую это:
obj.analyser.getByteFrequencyData(obj.frequencyArray)
Правильно ли для этого конкретного случая получить пики и построить волновой график? например библиотека вейвсерферов или, может быть, мне нужно больше узнать об аудио или использовать некоторые математические методы, я не знаю, что застрял.
вот мой полный пример codepen: https://codepen.io/davidtorroija/pen/bZXeqb
ОТРЕДАКТИРОВАНО: Добавление дополнительной информации: Основываясь на ответе Брэда, изменившем в моем примере getByteTimeDomainData()
Я посмотрел на этот метод getByteTimeDomain и используется для создания визуализации с помощью осциллографа. Я изменил этот метод в этом примере, и это не похоже. Глядя в массив байтов, минимум равен 100, что слишком много, когда нет звука новый пример Codepen здесь
Но, возможно, это моя реализация.
Кстати, я беру максимальное число ByteFrequencyArray, потому что я не знаю, какова правильная стратегия, чтобы взять оттуда пик, может быть, есть другой способ сделать это? пример кода ниже:
obj.analyser.getByteTimeDomainData(obj.frequencyArray)
for (var i = 0; i< obj.frequencyArray.length; i++) {
if (obj.frequencyArray[i] > max) {
max = obj.frequencyArray[i];
}
}
var freq = Math.floor(max);
obj.bars.push({
x: obj.width,
y: (obj.height / 2) - (freq / 2),
height: max,
width: 5
})
;
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
То, что вы видите на скриншоте, на самом деле находится во временной области.
Для этого вам нужно использовать getByteTimeDomainData() или getFloatTimeDomainData().
@deividsito Без звука байты, возвращенные из getByteTimeDomain, должны фактически зависать вокруг 127. Фактические волны давления колеблются от отрицательных до положительных, поэтому, если вы пытаетесь разбить это на байты, которые могут представлять только целые числа между 0 и 255, вы устанавливаете эффективное значение нулевого давления на 127. Отрицательное давление может упасть до 0, а положительное — до 255. Либо выполните математику, чтобы масштабировать значение байта до нужного диапазона, либо используйте getFloatTimeDomainData(), что оптимально даст вам -1.0 до 1.0 .
Хорошо, @Brad, спасибо за объяснение :), позвольте мне попробовать, спасибо!
Хорошо @Brad, у меня есть еще один вопрос, когда я все время получаю массив значений за прошедшее время, которое я получил, в зависимости от fftsize 512 или 1024 и т. д., я повторяю этот массив и беру максимальное значение этого массива, чтобы нарисовать это значение в этот промежуток времени. Это правильно или мне нужно сделать среднее значение массива? Спасибо!
@deividsito Среднее значение приближается к нулю по определению. Максимум и минимум должны быть похожи друг на друга по величине (но с отрицательным значением минимума). Для простой визуализации max подойдет.
Отлично, @Brad, спасибо, я только что сделал это :P codepen.io/davidtorroija/pen/ZZzLpb
Спасибо за ответ!, но не могли бы вы объяснить больше, я хочу узнать и понять разницу, потому что я посмотрел на этот метод getByteTimeDomain и используется для создания визуализации осциллографа. Я изменил этот метод в этом примере, и это не похоже. Глядя в массив байтов, минимум равен 100, что слишком много, когда нет звука codepen.io/davidtorroija/pen/gyYrbm