如何在 HTML 中制作 Animated Web Speech API UI答案

【问题标题】：How to make Animated Web Speech API UI in HTML如何在 HTML 中制作 Animated Web Speech API UI
【发布时间】：2022-01-16 17:44:18
【问题描述】：

我必须创建一个动画，例如 Google.com Dekstop 麦克风表演（即根据声音的响度缩放麦克风边框）。我使用了 Web Speech API 并参考了 here (MDN)，它显示了我们如何使用语音更改网页的背景颜色，效果很好，但我想添加类似 Google 的动画网站（如上所述）。
我已经搜索了很多以找到实现此动画的方法，但我无法找到此。所以我在这里问，因为这是我可以得到答案的最佳地方 :)

非常感谢您提前帮助我解决这个问题。

【问题讨论】：

我不确定音量指示是否可以使用语音识别 API，但您可以并行运行 2 个进程。 MDN 有一个很好的使用音频分析器指示音量的例子 -> frequencyBinCount
那么我怎样才能制作出和谷歌一样的动画呢？你能指导我吗？

标签： javascript html css animation webspeech-api

【解决方案1】：

我不是这方面的专家，但我遵循了 MDN 中的示例，结果如下。

除了设置之外，这里的关键点是analyser.getByteFrequencyData，它为我们提供了分贝级别。

为了简化代码，我采用了数组中的最高分贝级别 (Math.max.apply(null, dataArray))，但您可以通过平均值或任何其他您喜欢的计算对其进行微调。

Demo

let audioCtx = new (window.AudioContext || window.webkitAudioContext)();
let distortion = audioCtx.createWaveShaper();
let gainNode = audioCtx.createGain();
let biquadFilter = audioCtx.createBiquadFilter();
let analyser = audioCtx.createAnalyser();
analyser.minDecibels = -90;
analyser.maxDecibels = -10;

analyser.fftSize = 256;

const mic = document.querySelector('.mic');
let isListening = false;
let tracks = [];

if (!navigator.mediaDevices.getUserMedia) {
  alert('getUserMedia not supported on your browser!');
}

mic.addEventListener('click', async () => {
  if (!isListening) {
    try {
      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
      isListening = true;

      tracks = stream.getTracks();
      source = audioCtx.createMediaStreamSource(stream);
      source.connect(distortion);
      distortion.connect(biquadFilter);
      biquadFilter.connect(gainNode);
      gainNode.connect(analyser);
      analyser.connect(audioCtx.destination);

      requestAnimationFrame(function log() {
        let bufferLength = analyser.frequencyBinCount;
        let dataArray = new Uint8Array(bufferLength);
        analyser.getByteFrequencyData(dataArray);
        const level = Math.max.apply(null, dataArray);
        document.querySelector('#level span').textContent = level;
        mic.style.setProperty('--border', `${level / 5}px`);
        requestAnimationFrame(log);
      });
    } catch (err) {
      console.log('The following gUM error occured: ' + err);
    }
  } else {
    isListening = false;
    tracks.forEach((track) => {
      track.stop();
    });
  }
});

body {
  margin: 0;
  height: 100vh;
  position: relative;
}

.content {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.mic {
  background: #fff;
  width: 50px;
  height: 50px;
  border: 1px solid #eee;
  border-radius: 100%;
  bottom: 0;
  box-shadow: 0 2px 5px var(--border) rgb(0 0 0 / 10%);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

<html>
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
      integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
  </head>
  <body>
    <div class="content">
      <div class="mic">
        <i class="fas fa-microphone"></i>
      </div>
      <div id="level">Level: <span></span></div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

【讨论】：

感谢您的帮助。只有一个问题是，当我打开演示中的麦克风时，它会产生噪音，而当我将电脑扬声器静音时，不再存在噪音。你能告诉我这背后的原因是什么吗？
因为总是有背景噪音。当麦克风静音时，计算机会忽略它收到的每个音频输入，包括噪音。