Блог

Главная - Вопросы по программированию - Web-Audio Api и Javascript: получите правильные выборки с микрофона

Web-Audio Api и Javascript: получите правильные выборки с микрофона

#javascript #audio #web-audio-api #mediarecorder #wavesurfer.js

#javascript #Аудио #web-audio-api #mediarecorder #wavesurfer.js

Вопрос:

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

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

или, может быть, аудиомагнитофон Mac OS диктофон

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

 obj.analyser.getByteFrequencyData(obj.frequencyArray)

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

вот мой полный пример 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
})

;

Ответ №1:

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

Для этого вам нужно использовать getByteTimeDomainData() или getFloatTimeDomainData() .

Комментарии:

1. Спасибо за ответ!, но не могли бы вы объяснить подробнее, я хочу изучить и понять разницу, потому что я рассмотрел этот метод getByteTimeDomain и используется для создания визуализации осциллографа. Я перешел на этот метод в этом примере, и он не похож. При просмотре массива байтов минимальное значение равно 100, что является максимальным при отсутствии звука codepen.io/davidtorroija/pen/gyYrbm

2. @deividsito Без звука байты, возвращаемые из, getByteTimeDomain должны фактически зависать 127 . Фактические волны давления изменяются отрицательно и положительно, поэтому, если вы пытаетесь квантовать это в байтах, которые могут представлять только целые числа между 0 и 255 , вы устанавливаете свое эффективное значение нулевого давления на 127 . Отрицательное давление может снизиться до 0 , а положительное давление может возрасти до 255 . Либо посчитайте, чтобы масштабировать значение в байтах до нужного вам диапазона, либо используйте getFloatTimeDomainData() то, что оптимально даст вам -1.0 для 1.0 .

3. Ок, @Brad спасибо за объяснение :), позвольте мне попробовать, спасибо!

4. Ок, @ Брэд, у меня есть еще один вопрос, когда я постоянно получаю массив значений с течением времени, которые я получал в зависимости от размера fftsize 512 или 1024 и т.д., Я повторяю этот массив и беру максимальное значение этого массива, чтобы вывести это значение за этот промежуток времени. Это правильно или мне нужно вычислить среднее значение по массиву? Спасибо!

5. @deividsito Среднее значение по определению будет приближаться к нулю. Max и min должны быть похожи друг на друга по величине (но с отрицательным значением min). Для простой визуализации подойдет max.