javascript - 是否可以在不使用反应应用程序的情况下使用反应语音识别?
问题描述
我复制了一个用 javascript 编写的带有画布的开源网络游戏,我想实现“react-speech-recognition”API(https://www.npmjs.com/package/react-speech-recognition)
要使用这个 API,我需要创建一个呈现 HTML 的反应应用程序。是否可以创建一个带有反应的简单类,我可以在我的 javascript 代码中导入和使用它?
这是反应的代码:
import React, { Component } from "react";
import PropTypes from "prop-types";
import SpeechRecognition from "react-speech-recognition";
const propTypes = {
// Props injected by SpeechRecognition
transcript: PropTypes.string,
resetTranscript: PropTypes.func,
browserSupportsSpeechRecognition: PropTypes.bool
};
const Dictaphone = ({
transcript,
resetTranscript,
browserSupportsSpeechRecognition
}) => {
if (!browserSupportsSpeechRecognition) {
return null;
}
return (
<div>
<button onClick={resetTranscript}>Reset</button>
<span>{transcript}</span>
</div>
);
};
Dictaphone.propTypes = propTypes;
export default SpeechRecognition(Dictaphone);
如何使用该示例代码并使用简单的方法创建一个类来调用它们?
谢谢。
解决方案
描述中链接的是对SpeechRecognition APIreact-speech-recognition
的引用,其中包括一些示例。从那里复制:
var grammar = '#JSGF V1.0; grammar colors; public <color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;'
var recognition = new SpeechRecognition();
var speechRecognitionList = new SpeechGrammarList();
speechRecognitionList.addFromString(grammar, 1);
recognition.grammars = speechRecognitionList;
//recognition.continuous = false;
recognition.lang = 'en-US';
recognition.interimResults = false;
recognition.maxAlternatives = 1;
var diagnostic = document.querySelector('.output');
var bg = document.querySelector('html');
document.body.onclick = function() {
recognition.start();
console.log('Ready to receive a color command.');
}
recognition.onresult = function(event) {
var color = event.results[0][0].transcript;
diagnostic.textContent = 'Result received: ' + color;
bg.style.backgroundColor = color;
}
一个好的做法是检查哪些浏览器将支持您的代码 - caniuse.com是一个很好的资源。
推荐阅读
- java - 条件不检查。爪哇,AWT
- vue.js - Vuetify v-btn 动态概述属性更改
- php - 重定向到另一个页面时如何传递数据?
- java - Java:将文件保存到两个不同的文件中-请解释一下解决方案
- firefox - 我可以静音关于顶点属性数组 0 被禁用的警告吗?
- assembly - IDA Pro:如何修改函数以始终返回 true?
- python - 使用 Dataframe 中的多列分配排名/评级
- javascript - ERR_STREAM_WRITE_AFTER_END 使用请求承诺节点 Js
- php - 查询不适用于数组中的变量作为条件
- mysql - MySQL Union Statement 不起作用,正在努力寻找原因