用户操作语音提示,Web Speech API 的简单使用

在做快递业务类网站的时候,经常会接触到客户扫描录入快递资料的情况,有时候客户用扫描枪扫描快递入库,客户不在电脑旁,无法及时查看快递录入成功情况,此时使用Web Speech API反馈操作结果就是最好的选择了。

Web Speech API 使您能够将语音数据合并到 Web 应用程序中。

Web Speech API 有两个部分:SpeechSynthesis 语音合成 (文本到语音 TTS)和 SpeechRecognition 语音识别(异步语音识别)。

我们现在用到的只有 语音合成。使用起来也很方便:

方法一 粗暴

window.speechSynthesis.speak(new window.SpeechSynthesisUtterance("入库成功"));

方法二 简单封装

const speak = (msg) => {
    let ssu = new window.SpeechSynthesisUtterance();
    ssu.lang = 'zh-CN';
    ssu.text = msg;
    window.speechSynthesis.speak(ssu);
}
speak("入库成功");

参考资料:
speechSynthesis強制使用Chrome中的Google小姐中文語音

本作品采用《CC 协议》,转载必须注明作者和本文链接
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
讨论数量: 2
fatrbaby

可以可以,为残疾人士提供更人性化的服务。

3年前 评论
Bin

真不错

3年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!