vue3前端 speak-tts 详细说明

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

概要

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

npm install speak-tts

引用检测浏览器是否支持

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

speech定义

speech.init({volume:0.6,// 音量0-1lang:'zh-CN',// 语言rate:1,// 语速1正常语速，2倍语速就写2pitch: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语言就这三种音色，有点少，但免费

被调用方法

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

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

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

小结

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