如何使用 JavaScript 将语音转换为文本？

在本文中，我们将学习使用 HTML 和 JavaScript 将语音转换为文本。

方法：我们添加了一个内容可编辑的“div”，通过它我们可以编辑任何 HTML 元素。

---

我们使用SpeechRecognition对象将语音转换为文本，然后将文本显示在屏幕上。

我们还添加了WebKit Speech Recognition以在 Google chrome 和 Apple Safari 中执行语音识别。

Javascript

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

InterimResults 结果应返回true ，此值的默认值为false。所以设置intermediateResults= 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

  

    
    
  
    Speech to Text

  

    
        
    
  
    
        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);
        }
    

  

输出：

如果用户在运行文件后告诉“Hello World”，它会在屏幕上显示以下内容。

Hello World