Я провожу некоторые эксперименты и выполняю некоторые визуализации на основе данных, полученных микрофоном в реальном времени.
В этом случае я хочу создать такую визуализацию, как это: https://online -voice-recorder.com/es/
или, может быть, аудио-рекордер Mac OS
У меня есть полный пример кода ниже, пожалуйста, проверьте, номой вопрос, я использую это:
obj.analyser.getByteFrequencyData(obj.frequencyArray)
Это правильно для этого конкретного случая, чтобы получить пики и генерировать волновой график?например, библиотека waveurfer или, может быть, мне нужно больше узнать об аудио или использовать какую-то математику, я не знаю, что застрял.
вот мой полный пример кода: https://codepen.io/davidtorroija/pen/bZXeqb
РЕДАКТИРОВАНИЕ: Добавление дополнительной информации: Основано на ответе Брэда, который в моем примере изменилсявизуализация.Я изменил этот метод в этом примере, и он не похож на.Если смотреть в массив байтов, то минимальное значение равно 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
})
;