如何在 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

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

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

npm install --save decibel-meter

安装后，将分贝计导入到您的component.ts文件中，

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 文件中访问该变量。

要显示这些分贝值，您可以使用进度条，它看起来像声音/音量计

您也可以参考分贝计的官方文档， 分贝计 - 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.
});

您需要获取流中的曲目。然后获取这些轨道的当前设置。然后您需要获取每个设置的音量。虽然 settngs 的 Volume 属性在 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 添加到音频元素，然后获取音量属性。 文档

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

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

Answer 3

我按照下面的教程进行操作，发现它非常有用 https://medium.com/@v_for_vj/use-mic-in-angular-to-record-audio-simplified-1374d89718d3