vue使用关于speak-tss插件的详细介绍

主要介绍下speak-tss插件的使用及一些配置项,使用场景是 vue3点击按钮,播放某段文字等。

1. 首先需要下载依赖

javascript 复制代码
npm install speak-tts

2. 引用该插件

javascript 复制代码
import Speech from 'speak-tts'

3. 使用插件进行实例化,检测浏览器是否支持播报

javascript 复制代码
import Speech from 'speak-tts';

const speech = new Speech();
// 检测浏览器是否支持,returns a boolean
if(speech.hasBrowserSupport()) {
	console.log("语音引擎加载成功,支持播报")
}else {
	console.log('此浏览器不支持语音播报')
}

4. 进行插件初始化 及 阅读文本

配置项说明:

volume:语音播报的声音,默认为1(音量0-1)。

lang:语言,如果没有提供,则默认值由您的浏览器决定(下文有声明多种语言)。

voice:要使用的语音,如果未提供,则由浏览器选择默认语音。 支持 Microsoft Huihui - Chinese (Simplified, PRC) ,Microsoft Kangkang - Chinese (Simplified, PRC) ,Microsoft Yaoyao - Chinese (Simplified, PRC)

rate: 语速,默认为 1

pitch:音调,默认为 1

splitSentences: 是否在句子结束时暂停,默认 true。

listeners:附加到 SpeechSynthesis 对象的监听器对象。

受支持的语言:列表可能完整,取决于您的浏览器。

ar-SA,cs-CZ,da-DK,de-DE,el-GR,en,en-AU,en-GB,en-IE,en-IN,en-US,en-ZA,es-AR,es-ES,es-MX,es-US,fi-FI,fr-CA,fr-FR,he-IL,hi-IN,hu-HU,id-ID,it-IT,ja-JP,ko-KR,nb-NO,nl-BE,nl-NL,pl-PL,pt-BR,pt-PT,ro-RO,ru-RU,sk-SK,sv-SE,th-TH,tr-TR,zh-CN,zh-HK,zh-TW

javascript 复制代码
// 简单示例
speech.init().then((data) => {
    // speech对象包含可用语音列表和语音合成参数
    console.log("语音已准备就绪,声音可用", data)
}).catch(e => {
    console.error("初始化时发生错误: ", e)
})

// 完整配置示例
speech.init({
   volume: 1, // 音量
   lang: 'zh-CN', // 语言
   rate: 1, // 语速1正常语速,2倍语速就写2
   pitch: 1, // 音调
   splitSentences: true, // 在句子结束时暂停
   listeners: {
     // 事件
     onvoiceschanged: voices => {
       // console.log('事件声音已更改', voices);
     },
   },
 })
 .then(data => {
   console.log('语音已准备好,声音可用', data);
 })
 .catch(e => {
   console.error('初始化时发生错误 : ', e);
 });

// 阅读文本
// text:要朗读的文本
// queue:默认 true: 如果设置为 false,当前语音发音将被中断
// listeners: 播报是否成功的回调
speech.speak({
  text: '您有新的订单响起请注意查收', //这里使用文字或者i18n 都可以 看自己需求
  queue: true,
  listeners: {
     //  开始播放
     onstart: () => {
       console.log('Start utterance')
     },
     //  判断播放是否完毕
     onend: () => {
       console.log('End utterance')
     },
     //  恢复播放
     onresume: () => {
       console.log('Resume utterance')
     },
  }
})
.then(() => {
  console.log('成功!');
})
.catch(e => {
  console.error('发生错误:', e);
});

5,实例化对象上的方法

javascript 复制代码
// 设置语言(注意该语言必须是客户端浏览器支持的):
Speech.setLanguage('zh-CN')

// 设置语音(注意语音必须客户端浏览器支持):
Speech.setVoice('Fiona') //您可以传递由 init() 函数返回的 SpeechSynthesisVoice 或仅传递其名称

// 设置语速:
Speech.setRate(1) 

// 设置音量:
Speech.setVolume(1) 

// 设置音调:
Speech.setPitch(1)

// 暂停正在进行的谈话:
Speech.pause()

// 继续正在进行的谈话:
Speech.resume()

// 取消正在进行的谈话:
Speech.cancel()

// 获取布尔值,指示话语队列是否包含尚未说出的话语:
Speech.pending()

// 获取布尔值表示谈话是否暂停:
Speech.paused()

// 获取布尔值表示谈话是否正在进行中:
Speech.speaking()
相关推荐
工一木子1 小时前
URL时间戳参数深度解析:缓存破坏与前端优化的前世今生
前端·缓存
半点寒12W2 小时前
微信小程序实现路由拦截的方法
前端
某公司摸鱼前端3 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~3 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程3 小时前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
柳鲲鹏3 小时前
WINDOWS最快布署WEB服务器:apache2
服务器·前端·windows
weixin-a153003083164 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
ai小鬼头5 小时前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
wen's5 小时前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
一只叫煤球的猫5 小时前
普通程序员,从开发到管理岗,为什么我越升职越痛苦?
前端·后端·全栈