vue3使用speak-tts实现文字转语音播报

1.下载speak-tts

npm install speak-tts

2.封装voice方法

// src/utils/voice/index.js
import Speech from 'speak-tts';

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

speech
  .init({
    volume: 1, // 音量0-1
    lang: 'zh-CN', // 语言 en-US
    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)
  })

let loopInterval;
export function voice(text) {
  speech.speak({
    text: text, //这里使用文字或者i18n 都可以 看自己需求
  })

  
  // 循环播报
  // clearInterval(loopInterval);
  // // 设置新的循环
  // loopInterval = setInterval(() => {
  //   speech.speak({
  //     text: text, //这里使用文字或者i18n 都可以 看自己需求
  //   })
  // }, 3000); // 间隔3秒，可以根据需要调整
}

3.使用voice方法

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

import { voice } from '@/utils/voice'; 
const speak = () => {
  voice('测试'); // 调用封装的 voice 方法
};

注意：由于部分浏览器的安全策略，音频想要自动播放必须用户有交互，也就是在进入网页后，用户要点击页面(触发交互)后才会有声音。