Vue3实现语音通报功能

@Vue3实现语音通报功能

安装

npm i speak-tts

使用

一般用于餐饮小程序，当用户购买商品后，我们的后台会实时更新，并第一时间通知我们。：

1. 引用插件 import Speech from ‘speak-tts’;
2. //定义一个源 const speech = new Speech(); //判断用户当前浏览器是否支持语音播报 if (speech.hasBrowserSupport()) { ElNotification({ title: '语音提示', message: '支持语音合成', type: 'success', showClose: false, }); } else { ElNotification({ title: '语音提示', message: '不支持语音合成', type: 'error', showClose: false, }); } //初始化语音插件 - init内可以全部为空 - 自定义 speech .init({ volume: 1, // 音量 lang: 'zh-CN', // 语言 rate: 1, // 语速 pitch: 1, // 音调 splitSentences: true, // 在句子结束时暂停 listeners: { // 事件 onvoiceschanged: voices => { // console.log('事件声音已更改', voices); }, }, }) .then(data => { console.log('语音已准备好，声音可用', data); }) .catch(e => { console.error('初始化时发生错误 : ', e); }); //语音播报按钮 function voice(title) { speech .speak({ text:title, //这里使用文字或者i18n 都可以 看自己需求 }) .then(() => { console.log('Success !'); }) .catch(e => { console.error('An error occurred :', e); }); }
3. 调用只需voice(当前播放的文字)