用于为 ChatGPT 创建语音识别应用程序的 JavaScript 代码?
创建具有语音识别功能的应用程序, 您可以使用 Web 语音识别 API, 在现代浏览器中可用. 以下是 HTML 和 JavaScript 代码示例,用于创建一个简单的应用程序,该应用程序可识别用户的语音并显示转录的文本:
html复制代码
<!DOCTYPE html>
<html>
<head>
<title>Riconoscimento Vocale</title>
</head>
<body>
<h1>Riconoscimento Vocale</h1>
<button id="start-recognition">Avvia Riconoscimento</button>
<div id="transcription"></div>
<script>
// Controlla se il browser supporta l'API di riconoscimento vocale
if ('webkitSpeechRecognition' in window) {
const recognition = new webkitSpeechRecognition();
// Imposta alcune opzioni per il riconoscimento
recognition.continuous = true;
recognition.interimResults = true;
recognition.lang = 'it-IT'; // Puoi impostare la lingua desiderata
const startButton = document.getElementById('start-recognition');
const transcription = document.getElementById('transcription');
startButton.addEventListener('click', function() {
startButton.disabled = true;
recognition.start();
});
// Gestisci i risultati del riconoscimento
recognition.onresult = function(event) {
const result = event.results[event.results.length - 1];
const transcript = result[0].transcript;
transcription.innerHTML = transcript;
};
// Gestisci gli errori
recognition.onerror = function(event) {
console.error('Errore di riconoscimento vocale:', event.error);
};
// Termina il riconoscimento quando si preme il pulsante di avvio nuovamente
recognition.onend = function() {
startButton.disabled = false;
};
} else {
alert('Il tuo browser non supporta l\'API di riconoscimento vocale.');
}
</script>
</body>
</html>
在这个例子中, 我们有一个按钮 “开始识别” 按下时启动语音识别 API. 转录的文本将出现在项目中 <div>
密码 “转录”. 您可以通过设置自定义语言 recognition.lang
关于所需的语言.
确保您在支持 Web 语音识别 API 的环境中使用此代码, 就像现代浏览器一样. 请注意,用户体验可能会因您的浏览器和所选语言而异.
此示例与哪些浏览器兼容?
我上一篇文章中提供的语音识别示例使用了 API webkitSpeechRecognition
, 这是特定于 Chrome 浏览器的. 所以, 此具体示例仅与 Google Chrome 浏览器兼容.
然而, 需要注意的是,语音识别 API 的兼容性因浏览器和版本而异. 确保与更广泛的浏览器兼容, 您可以使用标准语音识别 API (SpeechRecognition
) 而不是 webkitSpeechRecognition
. 以下是如何修改代码以使用标准 API 的示例:
javascript复制代码
if ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window) {
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
const recognition = new SpeechRecognition();
// ...
}
使用 window.SpeechRecognition || window.webkitSpeechRecognition
, 您可以支持使用标准 API 的浏览器 (例如, 火狐浏览器) 以及使用 webkit 前缀版本的 (来Chrome吧).
然而, 请注意,API 实现和语言支持可能因浏览器而异. 所以, 在不同浏览器中仔细测试语音识别非常重要,以确保最佳的用户体验.
哪些浏览器支持语音识别?
在九月 2021, 语音识别API (SpeechRecognition
) 被多种浏览器支持, 但具体支持可能因浏览器和平台而异. 以下是一些支持此 API 的主要浏览器:
- 谷歌浏览器: Chrome 对语音识别 API 有良好的支持. 该 API 是在 Chrome 中引入的 25 随着时间的推移,支持不断得到改善.
- 火狐浏览器: Firefox 从发布开始支持语音识别 API 44. 然而, 支持可能需要在浏览器设置中手动激活.
- 微软边缘: Microsoft Edge也开始支持语音识别API. 支持可能因浏览器版本而异.
- 苹果浏览器: Apple 的 Safari 支持 iOS 等平台上的语音识别 API.
- 歌剧: Opera 还提供对语音识别 API 的支持, 但具体支持可能因版本而异.
请务必注意,特定语言和功能支持可能因浏览器而异. 此外, Chrome 和 Safari 等移动浏览器通常支持移动设备上的语音识别 API.
由于浏览器支持可能会随着新版本和标准的引入而改变, 我建议您检查浏览器文档并在您打算支持的特定浏览器上仔细测试 API.