vue3前端 speak-tts 详细说明

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

概要

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

npm install speak-tts

引用检测浏览器是否支持

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

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);  });

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

被调用方法

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

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

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

小结

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