angularwebrtcmicrophone

How to check Microphone Volume in Angular

I wanted to check microphone volume in my Angular, are there any plugins or libraries which I can use?

let mic = navigator.mediaDevices.getUserMedia({ audio: true });
mic.then(function () {
  alert('Mic Is Connected');
}).catch(function () {
  alert('Mic Is Not Connected');
});

I am testing if my Microphone is connected or not by above code, now I want a real time volume meter here

Solution

  • You can use a package avaliable in angular named 'decibal-meter', which will give you the decibels captured on your microphone.

    First of all Install decibal meter in your angular project,

    npm install --save decibel-meter

    After Installation import decibal meter in your component.ts file,

    import DecibelMeter from 'decibel-meter'

    Use the below code which will give you the result for your microphone volume

    decibals = 0;
const meter = new DecibelMeter('mictest');

meter.sources.then(sources => {
  meter.connect(sources[0]);
  meter.listenTo(0, (dB, percent) => this.decibals = Number(`${dB}`) + 100);

});

    By this code you will get the decibals value and those values you can store it in a variable and you can access that variable in your HTML file.

    For displaying those decibels value you can use a progress bar which will look like sound/volume meter

    You can also refer to the official documentation for the decibel-meter, decibel-meter - NPM