CODEWITHSUNDEEP
javascriptaudioweb-audio-apimediarecorderwavesurfer.js
David Torroija
David Torroija

Reputation: 623

Web-Audio Api and Javascript: Get the correct picks from microphone

I'm doing some experiments and doing some visualizations based on the data received in real time by the microphone.

In this case I want to create a visualization like this: https://online-voice-recorder.com/es/

or maybe the Mac OS audio recorder voice recorder

I have a full codepen example below please check out but my question is I'm using this: 

obj.analyser.getByteFrequencyData(obj.frequencyArray)

Is that correct for this particular case to obtain the peaks and generate a wave graph? like wavesurfer library or maybe I need to know more about audio or use some mathematics, I don't know I'm stuck.

here is my full codepen example: https://codepen.io/davidtorroija/pen/bZXeqb

EDITED: Adding more info: Based on the answer by Brad changing in my example getByteTimeDomainData()

I looked at that method of getByteTimeDomain and is used to create an oscilloscope visualization. I changed to this method in this example and it does not look like. Looking in the array of bytes the minimun is 100 that is to high when there is no sound new Codepen Example here But maybe is my implementation. wavegraph of the recording By the way I'm taking the max number of the ByteFrequencyArray because I don't know what is the correct strategy to take the peak from there, maybe there is other way to do that? code example below:

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
})

;

Upvotes: 2

Views: 1486

Answers (1)

Brad
Brad

Reputation: 163478

What you're looking at in your screenshot is actually in the time domain.

For that, you'll want to use getByteTimeDomainData() or getFloatTimeDomainData().

Upvotes: 2

Related Questions