如何在 Angular 中检查麦克风音量

Question

我想检查我的 Angular 中的麦克风音量，有没有我可以使用的插件或库？

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

我正在通过上面的代码测试我的麦克风是否已连接，现在我想要一个实时音量计

Answer 1

您可以使用 angular 中名为 'decibal-meter' 的软件包，它将为您提供麦克风上捕获的分贝。

首先在你的angular项目中安装分度计，

npm install --save decibel-meter

安装后在你的 component.ts 文件中导入 decibal meter，

import DecibelMeter from 'decibel-meter'

使用下面的代码可以得到麦克风音量的结果

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

});

通过这段代码，您将获得分贝值，这些值可以存储在一个变量中，您可以在 HTML 文件中访问该变量。

为了显示这些分贝值，您可以使用进度条，它看起来像 sound/volume 仪表

您还可以参考分贝计的官方文档， decibel-meter - NPM

Answer 2

您的需求并不Angular具体，请注意。

audioEl.addEventListener('volumechange', (event) => {
  console.log('The volume changed.');
  // here you can use the volumechange event or the volume attribute of the element.
});

您需要获取流中的曲目。然后获取这些轨道的当前设置。然后您需要从每个设置中获取音量。尽管设置的卷属性在 MDN 文档中看起来已经过时，但我还没有找到其他方法。

navigator.mediaDevices.getUserMedia({ audio: true })
  .then(function (stream) {
    alert('Mic Is Connected');
    const tracks = stream.getTracks();
    const settings = tracks.map(track => track.getSettings());
    const volumes = settings.map(setting => setting.volume);
    console.log("volumes: ", volumes);
}).catch(function () {
  alert('Mic Is Not Connected');
});

您还可以将此流作为 srcObject 添加到音频元素，然后获取音量属性。 Docs

navigator.mediaDevices.getUserMedia({ audio: true })
    .then(function (stream) {
      alert('Mic Is Connected');
      const audioEl = document.createElement('audio');
      audioEl.srcObject = stream;
      const volume = audioEl.getAttribute('volume');
      console.log("volume: ", volume);
    }).catch(function () {
      alert('Mic Is Not Connected');
    });

并且可能还有网络音频 API 特定的音频上下文方式。

如何在 Angular 中检查麦克风音量

How to check Microphone Volume in Angular

microphone

webrtc

angular