How do I get microphone data from AudioContext

Question

So, I just found out that you can record sound using javascript. That's just awesome!

I intantly created new project to do something on my own. However, as soon as I opened source code of the example script, I found out that there are no explanatory comments at all.

I started googling and found a long and interesting article about AudioContext that doesn't to be aware of the recording at all (it only mentions remixinf sounds) and MDN article, that contains all the information - succesfully hiding the one I'm after.

I'm also aware of existing frameworks that deal with the thing (somehow, maybe). But if I wanted to have a sound recorder I'd download one - but I'm really curious how the thing works.

Now not only that I'm not familiar with the coding part of the thing, I'm also curious how the whole thing will work - do I get intensity in specific time? Much like in any osciloscope? Or can I already get spectral analysis for the sample?

So, just to avoid any mistakes: Please, could anyone explain the simplest and most straightforward way to get the input data using above-mentioned API and eventually provide a code with explanatory comments?

Welcome to the poorly-documented, poorly-supported world of the Web Audio API! Unfortunately, this isn't really a great format for a SO question, but I will direct you to a good explanatory article: http://codeartists.com/post/36746402258/how-to-record-audio-in-chrome-with-native-html5-apis — CodingIntrigue, May 21 '14 at 12:41
The WebAudio API is only for mixing sounds. To get the microphone data, you want to use [`navigator.getUserMedia`](https://developer.mozilla.org/en-US/docs/Web/API/Navigator.getUserMedia) — Bergi, May 21 '14 at 12:44
@RGraham I beg your pardon - but isn't a poorly documented thing a good subject to a question? I can read the documentation for the well documented ones, can I not? :) But thanks for the link — Tomáš Zato, May 21 '14 at 12:44
@TomášZato It's a good subject alright, but this question seems to be a bit broad. You're basically asking "How does it work, with examples" and that's a good topic for a book, but not for Stack Overflow....in my opinion... — CodingIntrigue, May 21 '14 at 12:49
Well, I didn't expect it might be **that** complicated. I've read the article you referred to. It uses recorder.js which I have already talked about - and I'm more looking for raw data for sound visualisation than actual sound recording. — Tomáš Zato, May 21 '14 at 12:51

score 2 · Answer 1 · answered Apr 05 '20 at 20:17

If you just want to use mic input as a source on WebAudio API, the following code worked for me. It was based on: https://gist.github.com/jarlg/250decbbc50ce091f79e

navigator.getUserMedia = navigator.getUserMedia
                      || navigator.webkitGetUserMedia
                      || navigator.mozGetUserMedia;
navigator.getUserMedia({video:false,audio:true},callback,console.log);

function callback(stream){
  ctx = new AudioContext();
  mic = ctx.createMediaStreamSource(stream);
  spe = ctx.createAnalyser();
  spe.fftSize = 256;
  bufferLength = spe.frequencyBinCount;
  dataArray = new Uint8Array(bufferLength);
  spe.getByteTimeDomainData(dataArray);
  mic.connect(spe);
  spe.connect(ctx.destination);
  draw();
}

How do I get microphone data from AudioContext

1 Answers1