vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue speak-tss插件使用

vue使用关于speak-tss插件的详细介绍及一些配置项

作者：随笔写

本文详细介绍了speak-tss插件在Vue3中的使用方法和配置,首先需要下载依赖,然后引入插件,并进行实例化和配置,配置项包括音量、语言、语音、语速、音调等,speak-tss支持多种语言和语音,适用于需要文本语音播报的场景

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

1. 首先需要下载依赖

npm install speak-tts

2. 引用该插件

import Speech from 'speak-tts'

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

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

// 简单示例
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，实例化对象上的方法

// 设置语言（注意该语言必须是客户端浏览器支持的）：
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()

到此这篇关于vue使用关于speak-tss插件的详细介绍的文章就介绍到这了,更多相关vue speak-tss插件使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

阅读全文