如何在 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' 的 angular 软件包，它会为您提供麦克风上捕获的分贝。

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

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

为了显示这些分贝值，您可以使用一个看起来像声音/音量计的进度条

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

您需要获取流中的曲目。然后获取这些轨道的当前设置。然后，您将需要从每个设置中获取音量。虽然 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 添加到音频元素，然后获取音量属性。 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');
    });

而且可能还有一种特定于 Web Audio API 的音频上下文方式。