vue3前端 speak-tts 详细说明

vue3前端 speak-tts 详细说明@[toc]

概要

前端添加tts文本转语音，实现文本朗读，重要是free
使用前安装

npm install speak-tts
1

引用检测浏览器是否支持

import Speech from 'speak-tts';
const speech = new Speech();
if(speech.hasBrowserSupport()) { // 检测浏览器是否支持，returns a boolean
	console.log("语音引擎加载成功")
}
1
2
3
4
5

speech定义

speech.init({
    volume: 0.6, // 音量0-1
    lang: 'zh-CN', // 语言
    rate: 1, // 语速1正常语速，2倍语速就写2
    pitch:1, // 音调
    voice:'Microsoft Yaoyao - Chinese (Simplified, PRC)',//支持Microsoft Huihui - Chinese (Simplified, PRC),Microsoft Kangkang - Chinese (Simplified, PRC),Microsoft Yaoyao - Chinese (Simplified, PRC)
    listeners: {
      // 事件
      onvoiceschanged: voices => {
        // console.log('事件声音已更改', voices);
      },
    },
  })
  .then(data => {
    console.log('语音已准备好，声音可用', data);
  })
  .catch(e => {
    console.error('初始化时发生错误 : ', e);
  });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

voice 可选择朗读人音色，zh-CN语言就这三种音色，有点少，但免费

被调用方法

function voice() {
  speech.speak({
      text: '支付宝到账100万元', //这里使用文字或者i18n 都可以 看自己需求
    })
    .then(() => {
      console.log('Success !');
    })
    .catch(e => {
      console.error('An error occurred :', e);
    });
}
1
2
3
4
5
6
7
8
9
10
11

vue模板中添加触发方法按钮

<template>
  <h1 @click="voice">语音测试</h1>
</template>
1
2
3

小结

` 全部完成了，就可以进行页面调试了