JavaScript WebkitSpeechRecognition：使用語(yǔ)音識(shí)別技術(shù)增強(qiáng) Web 應(yīng)用程序
WebkitSpeechRecognition 是一種 JavaScript API，它可以讓您的 Web 應(yīng)用程序使用語(yǔ)音識(shí)別技術(shù)。使用 WebkitSpeechRecognition，您可以讓用戶(hù)通過(guò)說(shuō)話(huà)來(lái)與您的 Web 應(yīng)用程序進(jìn)行交互，這可以使您的應(yīng)用程序更加易于使用，也可以為用戶(hù)提供更加人性化的體驗(yàn)。
WebkitSpeechRecognition 的基本概念
WebkitSpeechRecognition 是 Webkit 瀏覽器中的一個(gè) API，它提供了一種將用戶(hù)的語(yǔ)音轉(zhuǎn)換為文本的方法。該 API 允許您使用 JavaScript 控制語(yǔ)音識(shí)別過(guò)程，并獲取識(shí)別結(jié)果。
WebkitSpeechRecognition API 的基本概念如下：
SpeechRecognition 對(duì)象：SpeechRecognition 對(duì)象是 WebkitSpeechRecognition API 的核心對(duì)象，它表示語(yǔ)音識(shí)別過(guò)程。您可以使用 SpeechRecognition 對(duì)象來(lái)控制語(yǔ)音識(shí)別過(guò)程，例如開(kāi)始識(shí)別、停止識(shí)別等。
語(yǔ)音識(shí)別事件：SpeechRecognition 對(duì)象會(huì)觸發(fā)多個(gè)事件，以便您在語(yǔ)音識(shí)別過(guò)程中獲取信息。例如，onresult 事件會(huì)在識(shí)別成功后觸發(fā)，onerror 事件會(huì)在識(shí)別失敗時(shí)觸發(fā)。
識(shí)別結(jié)果：語(yǔ)音識(shí)別過(guò)程的主要輸出是識(shí)別結(jié)果。識(shí)別結(jié)果是一個(gè)包含一個(gè)或多個(gè)識(shí)別的文本字符串的數(shù)組。您可以使用識(shí)別結(jié)果來(lái)理解用戶(hù)說(shuō)了什么，并相應(yīng)地更新您的應(yīng)用程序。
如何使用 WebkitSpeechRecognition
要使用 WebkitSpeechRecognition API，您需要遵循以下步驟：
創(chuàng)建 SpeechRecognition 對(duì)象：使用以下代碼創(chuàng)建 SpeechRecognition 對(duì)象：
const recognition = new webkitSpeechRecognition();
設(shè)置語(yǔ)言：使用以下代碼設(shè)置語(yǔ)音識(shí)別的語(yǔ)言：
recognition.lang = window.navigator.language || 'en-US'; // 設(shè)置為語(yǔ)言
如果未指定語(yǔ)言，則 WebkitSpeechRecognition 默認(rèn)使用瀏覽器的語(yǔ)言。
監(jiān)聽(tīng)事件：使用以下代碼監(jiān)聽(tīng)語(yǔ)音識(shí)別事件：
recognition.onresult = (event) => {
?const result = event.results[event.results.length - 1];
?console.log(result[0].transcript);};
在上面的代碼中，我們使用 onresult 事件來(lái)監(jiān)聽(tīng)語(yǔ)音識(shí)別結(jié)果。當(dāng)識(shí)別成功時(shí)，該事件會(huì)觸發(fā)，并將識(shí)別結(jié)果作為參數(shù)傳遞給事件處理程序。
開(kāi)始和停止識(shí)別：使用以下代碼開(kāi)始和停止語(yǔ)音識(shí)別：
recognition.start(); // 開(kāi)始語(yǔ)音識(shí)別recognition.stop(); // 停止語(yǔ)音識(shí)別
在上面的代碼中，我們使用 start 方法開(kāi)始語(yǔ)音識(shí)別，使用 stop 方法停止語(yǔ)音識(shí)別。
使用 WebkitSpeechRecognition 的示例
使用語(yǔ)音輸入來(lái)搜索 Baidu
<!DOCTYPE html><html lang="en"><head>
? ?<meta charset="UTF-8"/>
? ?<title>Speech Recognition Example</title></head><body><input type="text" id="search-box" placeholder="Search Baidu"/><button id="search-button">Search</button><script>
? ?const recognition = window.webkitSpeechRecognition ? new webkitSpeechRecognition() : null; // 判斷是否支持 webkitSpeechRecognition
? ?if (recognition) {
? ? ? ?recognition.lang = window.navigator.language || 'en-US'; // 設(shè)置為語(yǔ)言
? ? ? ?const searchBox = document.getElementById('search-box');
? ? ? ?const searchButton = document.getElementById('search-button');
? ? ? ?recognition.onresult = (event) => {
? ? ? ? ? ?const result = event.results[event.results.length - 1];
? ? ? ? ? ?searchBox.value = result[0].transcript;
? ? ? ?};
? ? ? ?searchButton.addEventListener('click', () => {
? ? ? ? ? ?const query = searchBox.value;
? ? ? ? ? ?window.location.href = ` https://www.baidu.com/s?ie=utf-8&wd=${query}`;
? ? ? ? ? ?// });
? ? ? ? ? ?document.addEventListener('keydown', (event) => {
? ? ? ? ? ? ? ?if (event.keyCode === 13) {
? ? ? ? ? ? ? ? ? ?event.preventDefault();
? ? ? ? ? ? ? ? ? ?searchButton.click();
? ? ? ? ? ? ? ?}
? ? ? ? ? ?});
? ? ? ? ? ?document.addEventListener('keydown', (event) => {
? ? ? ? ? ? ? ?if (event.keyCode === 32 && !event.repeat) {
? ? ? ? ? ? ? ? ? ?recognition.start();
? ? ? ? ? ? ? ?}
? ? ? ? ? ?});
? ? ? ? ? ?document.addEventListener('keyup', (event) => {
? ? ? ? ? ? ? ?if (event.keyCode === 32 && !event.repeat) {
? ? ? ? ? ? ? ? ? ?recognition.stop();
? ? ? ? ? ? ? ?}
? ? ? ? ? ?});
? ? ? ?}
? ?else
? ? ? ?{
? ? ? ? ? ?console.log('瀏覽器不支持語(yǔ)音識(shí)別');
? ? ? ?} // 加上容錯(cuò)處理</script></body></html>
Vue 3 代碼實(shí)現(xiàn)
React 代碼實(shí)現(xiàn)
import React, { useState, useEffect } from 'react';function WebkitSpeechRecognition() {
? ?const [recognition, setRecognition] = useState(null);
? ?const [recognitionStatus, setRecognitionStatus] = useState('Recognition not started');
? ?const [recognizedText, setRecognizedText] = useState('');
? ?useEffect(() => {
? ? ? ?if (window.webkitSpeechRecognition) {
? ? ? ? ? ?const recognition = new webkitSpeechRecognition();
? ? ? ? ? ?recognition.continuous = true;
? ? ? ? ? ?recognition.interimResults = true;
? ? ? ? ? ?recognition.onstart = () => {
? ? ? ? ? ? ? ?setRecognitionStatus('Recognition started');
? ? ? ? ? ?};
? ? ? ? ? ?recognition.onend = () => {
? ? ? ? ? ? ? ?setRecognitionStatus('Recognition ended');
? ? ? ? ? ?};
? ? ? ? ? ?recognition.onresult = (event) => {
? ? ? ? ? ? ? ?const recognized = event.results[event.results.length - 1][0].transcript;
? ? ? ? ? ? ? ?setRecognizedText(recognized);
? ? ? ? ? ?};
? ? ? ? ? ?setRecognition(recognition);
? ? ? ?} else {
? ? ? ? ? ?setRecognitionStatus('Recognition not supported');
? ? ? ?}
? ?}, []);
? ?const startRecognition = () => {
? ? ? ?if (recognition) {
? ? ? ? ? ?recognition.start();
? ? ? ?}
? ?};
? ?const stopRecognition = () => {
? ? ? ?if (recognition) {
? ? ? ? ? ?recognition.stop();
? ? ? ?}
? ?};
? ?return (
? ? ? ?<div>
? ? ? ? ? ?<button onClick={startRecognition}>Start Recognition</button>
? ? ? ? ? ?<button onClick={stopRecognition}>Stop Recognition</button>
? ? ? ? ? ?<p>{recognitionStatus}</p>
? ? ? ? ? ?<p>{recognizedText}</p>
? ? ? ?</div>
? ?);}export default WebkitSpeechRecognition;
在上面的示例中，我們創(chuàng)建了一個(gè) SpeechRecognition 對(duì)象，并將其設(shè)置為英語(yǔ)語(yǔ)言。我們還創(chuàng)建了一個(gè)搜索框和一個(gè)搜索按鈕，用戶(hù)可以在搜索框中輸入搜索詞并點(diǎn)擊搜索按鈕來(lái)進(jìn)行搜索。
我們使用 onresult 事件來(lái)監(jiān)聽(tīng)語(yǔ)音識(shí)別結(jié)果，并將其設(shè)置為搜索框的值。我們還使用 addEventListener 方法來(lái)監(jiān)聽(tīng)搜索按鈕的點(diǎn)擊事件和鍵盤(pán)事件，以便在用戶(hù)按下回車(chē)鍵或空格鍵時(shí)觸發(fā)搜索。
最后，我們?cè)诎聪驴崭矜I時(shí)使用 start 方法開(kāi)始語(yǔ)音識(shí)別，在松開(kāi)空格鍵時(shí)使用 stop 方法停止語(yǔ)音識(shí)別。
WebkitSpeechRecognition 的局限性
盡管 WebkitSpeechRecognition 可以讓 Web 應(yīng)用程序使用語(yǔ)音識(shí)別技術(shù)，但它仍然存在一些局限性。以下是一些常見(jiàn)的局限性：
瀏覽器支持：WebkitSpeechRecognition API 只能在 Webkit 瀏覽器中使用，因此無(wú)法在其他瀏覽器中使用。
語(yǔ)音識(shí)別質(zhì)量：語(yǔ)音識(shí)別技術(shù)的質(zhì)量取決于多個(gè)因素，例如用戶(hù)的發(fā)音、語(yǔ)音識(shí)別引擎的質(zhì)量等。因此，WebkitSpeechRecognition 可能無(wú)法準(zhǔn)確地識(shí)別所有用戶(hù)的語(yǔ)音。
隱私問(wèn)題：由于 WebkitSpeechRecognition 需要訪問(wèn)用戶(hù)的麥克風(fēng)，因此可能會(huì)引起隱私問(wèn)題。如果您的應(yīng)用程序需要使用 WebkitSpeechRecognition，請(qǐng)確保遵循適當(dāng)?shù)碾[私保護(hù)措施。
WebkitSpeechRecognition 兼容性
Chrome 25+
Edge 79+
Firefox 44+
Opera 27+
Safari 6+ 需要注意的是，不同瀏覽器可能有不同的語(yǔ)音識(shí)別引擎，因此識(shí)別結(jié)果可能會(huì)有所不同。此外，由于WebkitSpeechRecognition API是實(shí)驗(yàn)性的，因此其行為和特性可能會(huì)在未來(lái)版本中發(fā)生變化。
如果你要使用WebkitSpeechRecognition API，請(qǐng)務(wù)必進(jìn)行充分的測(cè)試和容錯(cuò)處理，以確保你的應(yīng)用在不同瀏覽器和設(shè)備上都能正常運(yùn)行。
結(jié)論
WebkitSpeechRecognition 是一種有用的 JavaScript API，它可以使您的 Web 應(yīng)用程序更加易于使用，并為用戶(hù)提供更加人性化的體驗(yàn)。雖然 WebkitSpeechRecognition 有一些局限性，但它仍然是一種有用的技術(shù)，可以讓您的應(yīng)用程序更加智能化。
