如何在HTML中制作影片WebSpeechAPIUI-有解無憂

我必須創建一個影片像Google.com Dekstop Mic 顯示（即根據聲音的響度縮放麥克風邊框）。我已經使用了Web Speech API參考here (MDN)，它展示了我們如何使用我們的聲音更改網頁的背景顏色，它作業正常，但我想添加 Animation Like Google 的網站（如上所述）。
我已經搜索了很多東西來找到實作這個影片的方法，但我找不到這個。所以我在這里問，因為這是我能得到答案的最佳地點:) 非常

感謝您幫助我解決這個問題。

uj5u.com熱心網友回復：

我不是這方面的專家，但我遵循了 MDN 中的示例，這是結果。

除了設定之外，這里的關鍵是analyser.getByteFrequencyData它為我們提供了分貝級別。

為了簡化代碼，我在陣列 ( Math.max.apply(null, dataArray)) 中采用了最高分貝級別，但您可以通過平均值或任何其他您喜歡的計算對其進行微調。

演示

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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/381515.html

標籤：javascript html css 动画片 webspeech-api

上一篇：Maven依賴項顯示在外部庫中，但在專案中使用時出錯

下一篇：隱藏影片字母直到影片播放