Styjun

Is Earth's Surface "In orbit"?

Match blood types in C

How to equalize the chance of throwing the highest dice? (Riddle)

In a world where Magic steam Engines exist what would keep people from making cars

Contacted by head of school regarding an issue - should I be worried?

Adjoints for radical and socle functors

Is it generally a bad idea to "rat" on co-workers?

Why do some journal proofs insert dozens of typesetting mistakes?

Why does the B-2 Spirit have a pattern of thin white lines?

Starting a sentence instantly with a noun

How do I defeat the Molduga

Game company goes bankrupt, another company wants to make a sequel how?

How come the catcode of ' is 12 while ' is let to be a macro?

Number of taps needed in an FIR filter to remove DC

How does Peano Postulates construct Natural numbers only?

How to write ODE for matrices?

Does the Detect Magic spell show a glowing outline around an Invisible Stalker?

Can black play the London system?

Delete a whole nested list if one of the values in that list contains an "Indeterminate" value

Mistakenly agreed with a scammer’s term of use

Why is SpaceX not also working on a smaller version of Starship?

What happens if a player suffers a time penalty but doesn't have enough time left?

Searching for a Thurston paper with egg / 3-manifold analogy?

Using a sealant to stop a toilet tank leak

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

How do I remove a property from a JavaScript object?How do you get a timestamp in JavaScript?How can I get query string values in JavaScript?How to get the value from the GET parameters?Get the current URL with JavaScript?Get selected value in dropdown list using JavaScriptHow do I get the current date in JavaScript?Get selected text from a drop-down list (select box) using jQueryGet the size of the screen, current web page and browser windowHow do I remove a particular element from an array in JavaScript?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty
margin-bottom:0;

1

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

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.

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
)

;

javascript audio web-audio-api mediarecorder wavesurfer.js

share|improve this question

edited Mar 29 at 15:49

deividsito

asked Mar 28 at 22:05

deividsitodeividsito

1931212 bronze badges

add a comment
 | 

1

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

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.

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
)

;

javascript audio web-audio-api mediarecorder wavesurfer.js

share|improve this question

edited Mar 29 at 15:49

deividsito

asked Mar 28 at 22:05

deividsitodeividsito

1931212 bronze badges

add a comment
 | 

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

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.

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
)

;

javascript audio web-audio-api mediarecorder wavesurfer.js

share|improve this question

edited Mar 29 at 15:49

deividsito

asked Mar 28 at 22:05

deividsitodeividsito

1931212 bronze badges

obj.analyser.getByteFrequencyData(obj.frequencyArray)

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
)

share|improve this question

edited Mar 29 at 15:49

deividsito

asked Mar 28 at 22:05

deividsitodeividsito

1931212 bronze badges

share|improve this question

edited Mar 29 at 15:49

deividsito

asked Mar 28 at 22:05

deividsitodeividsito

1931212 bronze badges

asked Mar 28 at 22:05

deividsitodeividsito

1931212 bronze badges

asked Mar 28 at 22:05

deividsitodeividsito

1931212 bronze badges

1 Answer
1

active

oldest

votes

1

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

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

share|improve this answer

answered Mar 28 at 22:07

BradBrad

131k3030 gold badges256256 silver badges420420 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks for answer!, but could you explain more, I want to learn and understand the difference, because 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 codepen.io/davidtorroija/pen/gyYrbm
  
  – deividsito
  Mar 29 at 15:20
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  @deividsito With no sound, bytes returned from getByteTimeDomain should actually hover around 127. The actual pressure waves swing negative and positive, so if you're trying to quantize that into bytes that can only represent integers between 0 and 255, you set your effective zero-pressure value to 127. Negative pressure can swing down to 0, and positive pressure can swing up to 255. Either do the math to scale the byte value to the range you want, or use getFloatTimeDomainData() which will optimally give you -1.0 to 1.0 .
  
  – Brad
  Mar 29 at 15:46
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Ok @Brad thanks for the explanation :), let me try that thanks!
  
  – deividsito
  Mar 29 at 15:52
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Ok @Brad I have another question when I receive all the time the array of values in lapse of time I received depending of the fftsize 512 or 1024 etc, I'm iterating this array and taking the max value of this array to draw this value in that time lapse. Is that correct or I need to do the average of the array values? Thanks!
  
  – deividsito
  Mar 29 at 16:00
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @deividsito Average would approach zero, by definition. Max and min should be similar to each other in magnitude (but with min being negative). For just a basic visualization, max is fine.
  
  – Brad
  Mar 29 at 16:29
  

  
  
  
  

 | 
show 2 more comments

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/4.0/"u003ecc by-sa 4.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55407563%2fweb-audio-api-and-javascript-get-the-correct-picks-from-microphone%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

1

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

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

share|improve this answer

answered Mar 28 at 22:07

BradBrad

131k3030 gold badges256256 silver badges420420 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks for answer!, but could you explain more, I want to learn and understand the difference, because 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 codepen.io/davidtorroija/pen/gyYrbm
  
  – deividsito
  Mar 29 at 15:20
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  @deividsito With no sound, bytes returned from getByteTimeDomain should actually hover around 127. The actual pressure waves swing negative and positive, so if you're trying to quantize that into bytes that can only represent integers between 0 and 255, you set your effective zero-pressure value to 127. Negative pressure can swing down to 0, and positive pressure can swing up to 255. Either do the math to scale the byte value to the range you want, or use getFloatTimeDomainData() which will optimally give you -1.0 to 1.0 .
  
  – Brad
  Mar 29 at 15:46
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Ok @Brad thanks for the explanation :), let me try that thanks!
  
  – deividsito
  Mar 29 at 15:52
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Ok @Brad I have another question when I receive all the time the array of values in lapse of time I received depending of the fftsize 512 or 1024 etc, I'm iterating this array and taking the max value of this array to draw this value in that time lapse. Is that correct or I need to do the average of the array values? Thanks!
  
  – deividsito
  Mar 29 at 16:00
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @deividsito Average would approach zero, by definition. Max and min should be similar to each other in magnitude (but with min being negative). For just a basic visualization, max is fine.
  
  – Brad
  Mar 29 at 16:29
  

  
  
  
  

 | 
show 2 more comments

1

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

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

share|improve this answer

answered Mar 28 at 22:07

BradBrad

131k3030 gold badges256256 silver badges420420 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks for answer!, but could you explain more, I want to learn and understand the difference, because 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 codepen.io/davidtorroija/pen/gyYrbm
  
  – deividsito
  Mar 29 at 15:20
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  @deividsito With no sound, bytes returned from getByteTimeDomain should actually hover around 127. The actual pressure waves swing negative and positive, so if you're trying to quantize that into bytes that can only represent integers between 0 and 255, you set your effective zero-pressure value to 127. Negative pressure can swing down to 0, and positive pressure can swing up to 255. Either do the math to scale the byte value to the range you want, or use getFloatTimeDomainData() which will optimally give you -1.0 to 1.0 .
  
  – Brad
  Mar 29 at 15:46
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Ok @Brad thanks for the explanation :), let me try that thanks!
  
  – deividsito
  Mar 29 at 15:52
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Ok @Brad I have another question when I receive all the time the array of values in lapse of time I received depending of the fftsize 512 or 1024 etc, I'm iterating this array and taking the max value of this array to draw this value in that time lapse. Is that correct or I need to do the average of the array values? Thanks!
  
  – deividsito
  Mar 29 at 16:00
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @deividsito Average would approach zero, by definition. Max and min should be similar to each other in magnitude (but with min being negative). For just a basic visualization, max is fine.
  
  – Brad
  Mar 29 at 16:29
  

  
  
  
  

 | 
show 2 more comments

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

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

share|improve this answer

answered Mar 28 at 22:07

BradBrad

131k3030 gold badges256256 silver badges420420 bronze badges

share|improve this answer

answered Mar 28 at 22:07

BradBrad

131k3030 gold badges256256 silver badges420420 bronze badges

answered Mar 28 at 22:07

BradBrad

131k3030 gold badges256256 silver badges420420 bronze badges

answered Mar 28 at 22:07

BradBrad

131k3030 gold badges256256 silver badges420420 bronze badges