如何在 HTML 中制作 Animated Web Speech API UI
Posted
技术标签:
【中文标题】如何在 HTML 中制作 Animated Web Speech API UI【英文标题】：How to make Animated Web Speech API UI in HTML 【发布时间】：2022-01-16 17:44:18 【问题描述】：我必须创建一个动画，例如 Google.com Dekstop 麦克风表演（即根据声音的响度缩放麦克风边框）。我使用了 Web Speech API 并参考了 here (MDN)，它显示了我们如何使用语音更改网页的背景颜色，效果很好，但我想添加类似 Google 的动画网站（如上所述）。我已经搜索了很多以找到实现此动画的方法，但我无法找到此。所以我在这里问，因为这是我可以得到答案的最佳地方 :) 非常感谢您提前帮助我解决这个问题。
【问题讨论】：
我不确定音量指示是否可以使用语音识别 API，但您可以并行运行 2 个进程。 MDN 有一个很好的使用音频分析器指示音量的例子 ->frequencyBinCount
那么我怎样才能制作出和谷歌一样的动画呢？你能指导我吗？
【参考方案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 / 5px`);
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 中制作 Animated Web Speech API UI的主要内容，如果未能解决你的问题，请参考以下文章