Web-Audio Api и Javascript: получить правильный выбор с микрофона - PullRequest
1 голос
/ 29 марта 2019

Я провожу некоторые эксперименты и выполняю некоторые визуализации на основе данных, полученных микрофоном в реальном времени.

В этом случае я хочу создать такую ​​визуализацию, как это: https://online -voice-recorder.com/es/

или, может быть, аудио-рекордер Mac OS voice recorder

У меня есть полный пример кода ниже, пожалуйста, проверьте, номой вопрос, я использую это:

obj.analyser.getByteFrequencyData(obj.frequencyArray)

Это правильно для этого конкретного случая, чтобы получить пики и генерировать волновой график?например, библиотека waveurfer или, может быть, мне нужно больше узнать об аудио или использовать какую-то математику, я не знаю, что застрял.

вот мой полный пример кода: https://codepen.io/davidtorroija/pen/bZXeqb

РЕДАКТИРОВАНИЕ: Добавление дополнительной информации: Основано на ответе Брэда, который в моем примере изменилсявизуализация.Я изменил этот метод в этом примере, и он не похож на.Если смотреть в массив байтов, то минимальное значение равно 100, что слишком высоко, когда нет звука Новый пример Codepen здесь Но, возможно, это моя реализация.wavegraph of the recording Кстати, я беру максимальное число 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
})

;

1 Ответ

1 голос
/ 29 марта 2019

То, что вы видите на скриншоте, на самом деле находится во временной области.

Для этого вам понадобится getByteTimeDomainData() или getFloatTimeDomainData().

...