Simple code to calculate frequency of Live Mic Audio using WebAudio API

Question

I have website in which I need to display the frequency of the Live Mic Audio. I have a this code, but its extremely difficult to understand (It uses Fourier Transform and all). On some research I got to know of getByteFrequencyData() which returns the frequency of the audio. Has anyone used it before with Live Mic Audio preferably in Web Audio API?

Answer 1

I write a simple code that you can show frequency in your webpage:

const audioCtx = new AudioContext();
const analyser = audioCtx.createAnalyser();
const source = audioCtx.createMediaElementSource(audio);

source.connect(analyser);
analyser.connect(audioCtx.destination);
analyser.fftSize = 32;

let frequencyData = new Uint8Array(analyser.frequencyBinCount);

function renderFrame() {
    analyser.getByteFrequencyData(frequencyData);
    P10.style.height = ((frequencyData[0] * 100) / 256) + "%";
    P20.style.height = ((frequencyData[1] * 100) / 256) + "%";
    P30.style.height = ((frequencyData[2] * 100) / 256) + "%";
    P40.style.height = ((frequencyData[3] * 100) / 256) + "%";
    P50.style.height = ((frequencyData[4] * 100) / 256) + "%";
    P60.style.height = ((frequencyData[5] * 100) / 256) + "%";
    P70.style.height = ((frequencyData[6] * 100) / 256) + "%";
    P80.style.height = ((frequencyData[7] * 100) / 256) + "%";
    P90.style.height = ((frequencyData[8] * 100) / 256) + "%";
    console.log(frequencyData)
    requestAnimationFrame(renderFrame);
}
audio.pause();
audio.play();
renderFrame();

#bar {
    position: fixed;
    top: 20%;
    left: 40%;
    width: 40%;
    height: 40%;
    -webkit-transition: 0.1s ease all;
}

.p {
    background-color: blue;
    height: 100%;
    width: 10%;
    float: left;
}

<audio id="audio" src="2.mp3"></audio>
<div id="bar">
    <div id="P10" class="p"></div>
    <div id="P20" class="p"></div>
    <div id="P30" class="p"></div>
    <div id="P40" class="p"></div>
    <div id="P50" class="p"></div>
    <div id="P60" class="p"></div>
    <div id="P70" class="p"></div>
    <div id="P80" class="p"></div>
    <div id="P90" class="p"></div>
</div>

Good luck.

Answer 2

"Displaying the frequency" can mean many things. Actually, my PitchDetect demo DOESN'T use a Fourier Transform - it uses autocorrelation. But that will only give you a single pitch, at high accuracy. If your signal has multiple simultaneous notes - well, that's a hard problem.

If you want to see a frequency analysis breakdown of the live mic input, check out http://webaudiodemos.appspot.com/AudioRecorder/index.html (code at https://github.com/cwilso/AudioRecorder). That uses the built-in FFT in the RealtimeAnalyser to show a frequency spectrum graph of a live audio signal.