在本文中，我們將學習使用 HTML 和 JavaScript 將語音轉換為文本。
方法：我們添加了一個內容可編輯的 “div”，通過它我們可以編輯任何 HTML 元素。
HTML
<div class="words" contenteditable>
<p id="p"></p>
</div>我們使用 SpeechRecognition 對象將語音轉換為文本，然後將文本顯示在屏幕上。
我們還添加了 WebKit Speech Recognition 以在 Google chrome 和 Apple safari 中執行語音識別。
Javascript
window.SpeechRecognition=window.SpeechRecognition
|| window.webkitSpeechRecognition;InterimResults 結果應返回 true，默認值為 false。所以設置 interimResults=true
Javascript
recognition.interimResults = true;使用 appendChild() 方法將節點附加為節點的最後一個子節點。
Javascript
const words=document.querySelector('.words');
words.appendChild(p);添加 eventListener，在這個事件監聽器中，map() 方法用於創建一個新數組，其結果是為每個數組元素調用一個函數。
注意：此方法不會更改原始數組。
使用 join() 方法將數組作為字符串返回。
Javascript
recognition.addEventListener('result', e => {
const transcript = Array.from(e.results)
.map(result => result[0])
.map(result => result.transcript)
.join('')
document.getElementById("p").innerHTML = transcript;
console.log(transcript);
});最終代碼：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Speech to Text</title>
</head>
<body>
<div class="words" contenteditable>
<p id="p"></p>
</div>
<script>
var speech = true;
window.SpeechRecognition = window.SpeechRecognition
|| window.webkitSpeechRecognition;
const recognition = new SpeechRecognition();
recognition.interimResults = true;
const words = document.querySelector('.words');
words.appendChild(p);
recognition.addEventListener('result', e => {
const transcript = Array.from(e.results)
.map(result => result[0])
.map(result => result.transcript)
.join('')
document.getElementById("p").innerHTML = transcript;
console.log(transcript);
});
if (speech == true) {
recognition.start();
recognition.addEventListener('end', recognition.start);
}
</script>
</body>
</html>輸出：
如果用戶在運行文件後告訴 “Hello World”，它會在屏幕上顯示以下內容。
Hello World
嘿，怪胎！ Web 開發世界中不斷湧現的技術總是讓人們對這個主題充滿熱情。但在你處理大型項目之前，我們建議你先學習基礎知識。通過我們的 JavaScript 課程學習 JS 概念，開始您的 Web 開發之旅。現在是有史以來最低的價格！
相關用法
注：本文由純淨天空篩選整理自vivekpatel7202大神的英文原創作品 How to convert speech into text using JavaScript ?。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。