Logo

菜单

发布于 2026-01-06 0 阅读
0

使用语音识别和自定义属性更新背景

使用语音识别和自定义属性更新背景

警告：仅适用于 Chrome 浏览器。

时隔许久，我决定写一篇简短的教程，内容基于我的
“使用语音识别和自定义属性更新背景”示例。在这个示例
中，我使用了语音识别 API 和 CSS 自定义属性来更新 body 元素的背景颜色。
编写这个示例帮助我更深入地理解了语音识别 API 以及如何通过 JavaScript 更新自定义属性，希望它也能对你有所帮助！

现在开始吧！

基础 HTML

<main class="main">
        <h1 class="title">Speak!</h1>
        <p class="description">You need accept the microphone permission!</p>
        <p class="value">Actual value: <span class="color-value" data-js="varValue">palevioletred</span></p>
        <span class="loader"></span>
</main>
Enter fullscreen mode Exit fullscreen mode

基础 CSS

:root {
  --color: palevioletred;
  font-size: 16px;
}

@media (max-width: 500px) {

  :root {
    font-size: 12px;
  }

}

body {
  font-family: 'Roboto', sans-serif;
  background-color: var(--color);
}

.main {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 .6rem;

  color: #232121;
  text-align: center;
  border: 2px solid #232121;
}

.title {
  margin: 0;
  font-size: 4rem;
}

.description {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 300;
}

.value {
  font-size: 3rem;
  font-weight: 300;
}

.color-value {
  font-weight: bold;
}

.loader {
  font-size: 20px;
  font-style: italic;
}
Enter fullscreen mode Exit fullscreen mode

请注意，我们设置了 ` --color`变量并将其用于 body 元素的背景颜色。该变量有一个初始值，我们也在 HTML 中设置了该值。

这就是开始编写 JavaScript 代码所需的一切。让我们开始吧！:)

教程

设置语音识别对象

window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
Enter fullscreen mode Exit fullscreen mode

我们使用 webkitSpeechRecognition 是因为 Chrome 只支持带有前缀属性的 API。

定义一个实例

const recognition = new SpeechRecognition();
Enter fullscreen mode Exit fullscreen mode

设置语言

recognition.lang = 'en-US';
Enter fullscreen mode Exit fullscreen mode

开始表彰

recognition.start();
Enter fullscreen mode Exit fullscreen mode

更新加载器文本

我们还可以在 API 开始监听传入音频时更新加载文本，以便用户知道 API 已启动。

recognition.addEventListener('start', () => loader.textContent = 'Detecting...');
Enter fullscreen mode Exit fullscreen mode

正在“重启”API

现在我们需要监听结束事件并“重启”API，以便用户可以再次更新颜色。

recognition.addEventListener('end', recognition.start);
Enter fullscreen mode Exit fullscreen mode

从 API 获取结果

首先我们需要监听结果事件

recognition.addEventListener('result', e => {
});
Enter fullscreen mode Exit fullscreen mode

然后从 API 获取结果。

recognition.addEventListener('result', e => {
    const transcript = Array.from(e.results)
        .map(result => result[0].transcript);
});
Enter fullscreen mode Exit fullscreen mode

好了，API已经初始化完成，语音识别结果也已经出来了。现在我们需要更新背景，并在HTML中更新颜色值。

更新变量值

现在我们有了结果，可以更新 --color 变量了。

recognition.addEventListener('result', e => {
    document.body.style.setProperty('--color', transcript);
});
Enter fullscreen mode Exit fullscreen mode

然后，使用当前颜色更新 HTML 代码。

更新 HTML

recognition.addEventListener('result', e => {
    span.textContent = transcript;
});
Enter fullscreen mode Exit fullscreen mode

移除装载机

我们还可以通过将值更新为空字符串来“移除”加载器。

recognition.addEventListener('result', e => {
    loader.textContent = '';
});
Enter fullscreen mode Exit fullscreen mode

我们最终的 Javascript 代码：

window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;

const span = document.querySelector('[data-js="varValue"]');
const main = document.querySelector('.main');
const loader = document.querySelector('.loader');

const recognition = new SpeechRecognition();
recognition.lang = 'en-US';

recognition.addEventListener('result', e => {
    const transcript = Array.from(e.results)
        .map(result => result[0].transcript)

    document.body.style.setProperty('--color', transcript);
    span.textContent = transcript;
    loader.textContent = '';
});

recognition.addEventListener('start', () => loader.textContent = 'Detecting...');

recognition.addEventListener('end', recognition.start);

recognition.start();
Enter fullscreen mode Exit fullscreen mode

就这些啦 :)

文章来源：https://dev.to/karolinedealencar/updating-background-with-speechrecognition--custom-properties-593p
你是否遇到过这样的同事：他/她编写...
一个促进公司文化信任的简单工具