当前位置: 首页>>代码示例 >>用法及示例精选 >>正文


Javascript speech转text用法及代码示例


在本文中,我们将学习使用 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 ?。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。