语音播报

SpeechSynthesisUtterance是HTML5中新增的API,用于将指定文字合成为对应的语音.也包含一些配置项,指定如何去阅读(语言,音量,音调)等；

具体api请参考：https://developer.mozilla.org/zh-CN/docs/Web/API/SpeechSynthesisUtterance

实现代码：

  class Broadcast {
        speech(text) {
            const msg = new SpeechSynthesisUtterance();
            msg.text = text;
            msg.volume = '1'; // 声音的音量，区间范围是0到1，默认是1。
            msg.rate = '1'; // 语速，数值，默认值是1，范围是0.1到10，表示语速的倍数，例如2表示正常语速的两倍。
            msg.pitch = '0'; // 表示说话的音高，数值，范围从0（最小）到2（最大）。默认值为1。
            msg.lang = 'zh-cn'; // 使用的语言，字符串， 例如："zh-cn"
            return msg;
        }
        play = (text) => {
            speechSynthesis.speak(this.speech(text));
        }
        stop = (text) => {
            speechSynthesis.cancel(this.speech(text));
        };
    }
    
    # 实例化
    const broadcast = new Broadcast();
    # 播放
    broadcast.play('小度小度')
    # 暂停
    broadcast.stop('')

语音识别

webkitSpeechRecognition此api主要是用在谷歌浏览器中进行语音识别的，但浏览器尚未完全支持。

经测试，需要客户端能够访问谷歌浏览器（vpn），且是在本机localhost或127.0.0.1地址才能正常解析语音内容,同时需要用户与界面互动后才能触发识别；

相关api请参考：https://developer.mozilla.org/zh-CN/docs/Web/API/SpeechRecognition

实现代码：

const SpeechRecognition = window.webkitSpeechRecognition || window.SpeechRecognition;
const newRecognition = new SpeechRecognition()
newRecognition.lang = 'zh-CN';
newRecognition.continuous = true;
newRecognition.interimResults = false;//true;
let control = false;
let timeTicket = null;
const answers = {
    '你好': '你也好呀',
    '小度小度': '主人我在呢',
    '今天是星期几': '今天是星期六',
    '今天天气怎么样': '今天天气晴朗',
    '我好像没听明白': ' '
}
newRecognition.onresult = ({ results }) => {
    const { transcript, confidence } = results[results.length - 1][0];
    console.log(results, transcript, confidence);
    textarea.value = transcript;
    if (answers[transcript]) {
        if (timeTicket) {
            clearTimeout(timeTicket);
            timeTicket = null;
        }
        timeTicket = setTimeout(() => {
            broadcast.play(answers[transcript])
            control = true;
        }, 1000)
    }
};
# 不间断识别
newRecognition.onend = () => { newRecognition.start() }
# error监听
newRecognition.onerror = (event) => {
    console.log('error', event);
    if ((event.error == "no-speech") || (event.error == "audio-capture") || (event.error == "network") || (event.error == "bad-grammar")) {
        newRecognition.abort();
        try {
            //newRecognition.start()
        } catch (e) {
            console.log('异常', e)
        }
    }
};
# 触发识别
document.body.onclick = function() {
  newRecognition.start();
}

具体demo可访问链接：https://github.com/fanmx/webSpeech

如有问题，还请及时评论指正，蟹蟹~