如何在 HTML 中制作动画网络语音 API UI

Question

我必须创建一个 点赞动画 Google.com Dekstop Mic shows (i.e. scaling of the mic border according to the loudness of voice). I have used the Web Speech API with reference from here (MDN)，它展示了我们如何使用语音更改网页的背景颜色，效果很好，但我想添加点赞动画 Google的网站（上面提到）。
我已经搜索了很多来找到实现这个动画的方法但是我找不到这个。所以我在这里问，因为这是我能得到答案的最佳地点 :)

非常感谢您帮助我解决这个问题.

Answer 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>

如何在 HTML 中制作动画网络语音 API UI

How to make Animated Web Speech API UI in HTML

html

javascript

css

animation

webspeech-api