speechSynthesis 离线语音合成 浏览器自动播报

speechSynthesis属于H5新增API，主要是用来做音频合成的，最近由于项目(内网)需要对告警做音频提示，所以用到了这个，在此简单总结下。

先看下兼容性：

 

火狐谷歌浏览器都支持自动播放，有些是不支持的，需要引导用户手动操作，比如点击才生效；

直接贴代码吧：

export const 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; 
}; 

//播放
export const play = (text) => {
    speechSynthesis.speak(speech(text));
};

//停止
export const stop = (text) => {
    speechSynthesis.cancel(speech(text));
};

//直接调用即可
play('你好')；

其实还可以再封装下。

 详细API传送门： https://developer.mozilla.org/zh-CN/docs/Web/API/SpeechSynthesisUtterance