• 20 Speech Detection 中文指南
    • 挑战任务
    • 实现效果
    • 相关知识
    • 基本思路
    • 过程指南
    • 延伸思考

    20 Speech Detection 中文指南

    本篇作者:©大史快跑Dashrun——Chinasoft Frontend Developer

    简介:JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西,不借助框架和库,也不使用编译器和引用。现在你看到的是这系列指南的第 20 篇。完整指南在 GitHub,喜欢请 Star 哦♪(^∇^*)

    创建时间:2017-09-04
    最后更新:2017-09-07

    挑战任务

    本次的挑战任务,是利用浏览器内置Web speech API,将自己所说的话输出在页面上,仅chrome浏览器支持。
    说明:由于只有chrome浏览器实现了该接口,而语音识别需要将捕捉到的信息发送至google服务器进行处理,故本文档只提供解决思路和参考代码。

    实现效果

    结果展示

    相关知识

    有关语音识别接口SpeechRecognition的说明,可查看MDN中的相关解释。

    基本思路

    1.新建语音识别对象;
    2.开启语音识别服务;
    3.通过监听result事件,实时获取捕获到的语音信息;
    4.通过监听end事件,当一次语音捕获结束后,重新开启该功能,实现持续的语音监听功能。

    过程指南

    1.由于目前只有chrome浏览器实现了此功能,故直接使用带有前缀的构造函数来构建一个语音识别对象。

    1. var speech = new webkitSpeechRecognition();

    2.设置语音识别对象的基本属性,并开启该功能。

    1. speech.interimResults = true;
    2. //返回即时语音,即时语音是指SpeechRecognitionResult.isFinal 为false时捕获到的信息。
    3. speech.lang = 'en-US';//设置语音识别类别为英语
    4. speech.start();//开启功能

    3.监听收到结果事件,将语音识别结果输出在DOM元素上。

    1. speech.addEventListener('result', (e) => {
    2. const results = Array.from(e.results)
    3. // e.results中保存的是识别的结果,本来并不是数组,需要将其转换为数组,方便使用其map、join等方法。
    4. .map(result => result[0])
    5. .map(result => result.transcript) // 获取到每一段话,是一个数组类型
    6. .join(''); // 将每一段话连接成字符串
    7. //将结果输出在页面上
    8. words.innerHTML = results;
    9. }

    延伸思考

    由于国内网络原因,可考虑使用科大讯飞的语音识别sdk,感兴趣的同学可自行尝试实现。